利用規約の同意ボタンをShopifyのカートページに追加しよう

<div class="cart__shipping rte">{{ taxes_shipping_checkout }}</div>

<div class="my-check-list-wrap">
  <div class="my-check-list">
    <meta charset="utf-8" />
    <h1>利用規約</h1>
    <p>
      この利用規約（以下，「本規約」といいます。）は，<span>株式会社-----</span>（以下，「当社」といいます。）がこのウェブサイト上で提供するオンラインショップ（以下，「本サービス」といいます。）の利用条件を定めるものです。登録ユーザーの皆さま（以下，「ユーザー」といいます。）には，本規約に従って，本サービスをご利用いただきます。
    </p>
    <h2>第1条（適用）</h2>
    <ol>
      <li>本規約は，ユーザーと当社との間の本サービスの利用に関わる一切の関係に適用されるものとします。</li>
      <li>当社は本サービスに関し，本規約のほか，ご利用にあたってのルール等，各種の定め（以下,「個別規定」といいます。）をすることがあります。これら個別規定はその名称のいかんに関わらず，本規約の一部を構成するものとします。
      </li>
      <li>本規約の定めが前項の個別規定の定めと矛盾する場合には，個別規定において特段の定めなき限り，個別規定の定めが優先されるものとします。</li>
    </ol>
    <h2>第2条（利用登録）</h2>
    <ol>
      <li>本サービスにおいては，登録希望者が本規約に同意の上，当社の定める方法によって利用登録を申請し，当社がこれに対する承認を登録希望者に通知することによって，利用登録が完了するものとします。</li>
      <li>当社は，利用登録の申請者に以下の事由があると判断した場合，利用登録の申請を承認しないことがあり，その理由については一切の開示義務を負わないものとします。
        <ol>
          <li>利用登録の申請に際して虚偽の事項を届け出た場合</li>
          <li>本規約に違反したことがある者からの申請である場合</li>
          <li>その他，当社が利用登録を相当でないと判断した場合</li>
        </ol>
      </li>
    </ol>
    <h2>第3条（ユーザーIDおよびパスワードの管理）</h2>
    <ol>
      <li>ユーザーは，自己の責任において，本サービスのユーザーIDおよびパスワードを管理するものとします。</li>
      <li>
        ユーザーは，いかなる場合にも，ユーザーIDおよびパスワードを第三者に譲渡または貸与し，もしくは第三者と共用することはできません。当社は，ユーザーIDとパスワードの組み合わせが登録情報と一致してログインされた場合には，そのユーザーIDを登録しているユーザー自身による利用とみなします。
      </li>
      <li>ユーザーID及びパスワードが第三者に使用されたことによって生じた損害は，当社に故意又は重大な過失がある場合を除き，当社は一切の責任を負わないものとします。</li>
    </ol>
  </div>
  <div class="my-check-input">
    <input type="checkbox" id="optin">
    <label for="optin">利用規約に同意します</label>
  </div>
</div>

<input type="submit" name="checkout"
  class="cart__submit btn btn--small-wide"
  value="{{ 'cart.general.checkout' | t }}">

<input id="checkout_btn" type="submit" name="checkout"
     class="cart__submit btn btn--small-wide"
     value="{{ 'cart.general.checkout' | t }}">

{%- style -%}
.my-check-list {
  margin: 30px 0;
  padding: 20px;
  width: 100%;
  height: 300px;
  overflow: scroll;
  border: 1px solid #888;
  text-align: left !important;
}

.my-check-input {
  margin: 20px 0 50px;
  font-size: 20px;
  text-align: center;
}

{%- endstyle -%}

{% schema %}

 <script>
  
$(function() {
 $('#checkout_btn').prop("disabled", true); 
  $('#optin').change(function() {
        if ($(this).prop("checked")) {
            $('#checkout_btn').prop("disabled", false);
        } else {
            $('#checkout_btn').prop("disabled", true);
        }
    });                   
});                         
                   
</script>