> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# カートに必須の利用規約チェックボックスを追加する

> チェックアウトに進む前に、顧客に利用規約への同意を必須にします。

<div id="overview">
  # 概要
</div>

このチュートリアルでは、チェックアウトボタンの下にチェックボックスを追加し、顧客にストアの利用規約への同意を必須にする方法を説明します。チェックが入っていない場合、チェックアウトボタンとエクスプレス決済ボタンは無効になります。

これは、法令遵守を確保し、明確な期待値を設定し、カート体験にプロフェッショナルな印象を加える優れた方法です。

***

<div id="what-this-customization-does">
  ## このカスタマイズでできること
</div>

* チェックアウトボタンの下に利用規約チェックボックスを追加します
* 同意するまで顧客がチェックアウトできないようにします
* 標準のチェックアウトボタンをブロックします。エクスプレス決済モジュールの**バージョン 1** では、エクスプレスボタンもグレーアウトされます — バージョン 2 をご利用の場合は、以下の注をご覧ください
* テキストとリンクを完全にカスタマイズできます

このカスタマイズには、基本的な HTML、JavaScript、CSS が必要です。初心者レベルのコーディング知識を持つストアオーナーや開発者に最適です。

<Warning>
  **エクスプレスボタン側の処理はバージョン 1 のみ対応です。** このスクリプトは `#upcart-additional-checkout-buttons` を探し、CSS は `.upcart-express-pay-button` にスタイルを適用します — どちらもバージョン 1 のエクスプレス決済モジュールに属します。バージョン 2 は `#upcart-express-payments` をレンダリングし、Shopify 自体のボタンを複製するため、どちらのセレクターも含まれず、チェックボックスがオフでもエクスプレスチェックアウトはクリック可能なままです。標準のチェックアウトボタンは両方のバージョンでブロックされます。
</Warning>

***

<div id="step-1-add-custom-html">
  ## ステップ 1: カスタム HTML を追加する
</div>

1. **Upcart > Cart Editor > Settings > Custom HTML** に移動します
2. **Above announcements/rewards** に以下を貼り付けます:

```
<script>  
  function TermsCheckboxUpdate() {  
    var checkbox =  
      window.upcartDocumentOrShadowRoot.querySelector("#agree");  
    var termsWarning =  
      window.upcartDocumentOrShadowRoot.querySelector(".upcartTermsWarning");  
    var checkoutButton =  
      window.upcartDocumentOrShadowRoot.querySelector(".upcart-checkout-button");  
    var cartElement =  
      window.upcartDocumentOrShadowRoot.querySelector(".upcart-cart");  
    var expressButtons =  
      window.upcartDocumentOrShadowRoot.querySelector(  
        "#upcart-additional-checkout-buttons"  
      );  
  
    if (checkbox.checked) {  
      termsWarning.style.display = "none";  
  
      if (checkoutButton) {  
        checkoutButton.classList.remove("upcartDisableCheckoutButton");  
      }  
  
      if (cartElement) {  
        cartElement.classList.remove("style_upcartDisableExpressButton");  
      }  
  
      if (expressButtons) {  
        expressButtons.classList.remove("upcartDisableExpressButton");  
      }  
    } else {  
      termsWarning.style.display = "block";  
  
      if (checkoutButton) {  
        checkoutButton.classList.add("upcartDisableCheckoutButton");  
      }  
  
      if (cartElement) {  
        cartElement.classList.add("style_upcartDisableExpressButton");  
      }  
  
      if (expressButtons) {  
        expressButtons.classList.add("upcartDisableExpressButton");  
      }  
    }  
  }  
  
  window.upcartSubscribeCartLoaded(() => {  
    var checkbox =  
      window.upcartDocumentOrShadowRoot.querySelector("#agree");  
  
    if (checkbox) {  
      checkbox.setAttribute("onclick", "TermsCheckboxUpdate()");  
    }  
  
    TermsCheckboxUpdate();  
  });  
</script>
```

<Note>
  **レガシーに関する注意:** `window.upcartOnCartLoaded` コールバックは引き続き動作しますが、非推奨であり、コンソールに警告が記録されます。新しいスクリプトにはすべて `upcartSubscribeCartLoaded` を使用してください。
</Note>

1. **Below checkout button** に以下を貼り付けます。リンクとテキストは、ストアの利用規約に合わせて更新してください:

```
<div class="upcartTermsWrapper">  
  <div class="upcartTermsCheckboxWrapper">  
    <input id="agree" type="checkbox" />  
    I accept the  
    <a  
      class="upcartTermsAnchor"  
      href="https://yourstore.com/terms"  
      target="_blank"  
    >  
      Terms & Conditions  
    </a>.  
  </div>  
  
  <div class="upcartTermsWarning">  
    Please accept the Terms & Conditions above before continuing.  
  </div>  
</div>
```

***

<div id="step-2-add-custom-css">
  ## ステップ 2: カスタム CSS を追加する
</div>

1. **Upcart > Cart Editor > Settings > Custom CSS** に移動します
2. スタイルを制御するために以下を貼り付けます:

```
.upcartDisableCheckoutButton {  
  pointer-events: none !important;  
  background-color: grey !important;  
  opacity: 0.5 !important;  
}  
  
.upcartDisableExpressButton {  
  pointer-events: none !important;  
}  
  
.upcartTermsWarning {  
  text-align: center;  
  width: 100%;  
  color: red;  
  font-size: 14px;  
  font-weight: bold;  
}  
  
.upcartTermsAnchor {  
  text-decoration: underline !important;  
  color: #0000EE;  
  font-weight: bold;  
  font-size: 14px !important;  
  padding: 0 !important;  
}  
  
.upcartTermsWrapper {  
  width: 100%;  
}  
  
.upcartTermsCheckboxWrapper {  
  font-size: 14px;  
  text-align: center;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  gap: 5px;  
}  
  
.upcart-cart.style_upcartDisableExpressButton  
  .upcart-express-pay-button {  
  background-color: grey !important;  
  opacity: 0.5 !important;  
}
```

`color`、`background-color`、`opacity` の値を更新することで、ブランディングに合わせて色を変更できます。

***

<div id="final-result">
  ## 最終結果
</div>

顧客がカートを開くと:

* チェックボックスにチェックが入るまで、チェックアウトボタンとエクスプレスボタンは無効になります
* 同意せずに進もうとすると、赤い警告メッセージが表示されます
* チェックボックスにチェックが入ると、すべてのボタンがアクティブになります

***

<div id="need-help">
  ## ヘルプが必要ですか?
</div>

高度な実装やより複雑な要件については、**Shopify Expert** と協力することをおすすめします。Upcart のサポートチームは、カスタムコードの作成やトラブルシューティングのサポートは行っていません。

[Shopify Experts を見る](https://www.shopify.com/partners/directory)