【簡単！アプリなし】shopify利用規約のチェックボックスを商品ページに設置しよう

投稿日 2024年5月9日
著者ソケットブログ
カテゴリー Shopify

こんにちは。

本記事では、

アプリを使わずにShopifyの商品ページに利用規約のチェックボックスを設置する

方法を解説していきます。

ユーザーに利用規約に同意させた上で商品を購入させたいといったことはよくあることだと思います。
アプリを使わずにコピペで簡単に設置できますので、ぜひ試してみてください！

利用規約チェックボックスのイメージ

作りはとてもシンプルで、利用規約に同意しないとカートに追加することができません。

今回はカートに追加するボタンを制御する方法を2パターン作りましたので、案件やお好みに応じて使い分けてください。

See the Pen JS_CheckBox by ma3onousagi (@ma3onousagi) on CodePen.

制御する２種類の方法

パターン１：カートに追加するボタンを無効化

文字どおり、利用規約のチェックボックスにチェックを入れるまでカートボタンは無効です。
動的チェックアウトボタンも同様に無効化されます。
チェックを入れることでカートボタンが有効になります。

パターン２：カートに追加するボタンをクリックするとアラートを表示

カートボタンは無効化せず、チェックを入れない状態でカートボタンをクリックするとアラートが表示されて、商品をカートに追加することができません。

（注意）動的チェックアウトボタンにはアラート表示は適用されませんので、こちらの方法を利用する場合には動的チェックアウトボタンは非表示にしてください。

上に埋め込んでいるCodePenをご確認ください。

Dawnのバージョン

テーマのバージョンは、14.0.0です。

設定の手順

チェックボックスを設置するファイルを開く

チェックボックスの設置（HTML）

Javascriptの設置

チェックボックスを設置するファイル

チェックボックスを設置するファイルはスニペットの中にある「buy-buttons.liquid」です。

まずはチェックボックスをカートボタンの上に設置します。

テーマのスニペットにある「buy-buttons.liquid」を開きます。

チェックボックスの設置（HTML）

buy-buttons.liquidファイルの13行目に、HTMLをコピペします。

<div class="Terms__Check--wrapper center">
  <div class="Form__Item Terms__Check--item">
    <div class="Terms__Check--msg">
      <p class="Terms__required" style="color: #ff0000;">必須</p>
      <div class="Terms__Check--text">        
        <a href="/" target="_blank" rel="noopener noreferrer" class="terms-link">利用規約</a>をご確認ください。
      </div>
    </div>
    <div class="Terms__Check--box">
      <input type="checkbox" name="agree" value="agreement" class="Terms__Check--input"><span>規約に同意する</span>
    </div>
  </div>
</div>

「href=”/”」の箇所は利用規約のページ（リンク先）を指定してください。
例）href=”/pages/terms-of-service”

テキストも適宜変更してご利用ください。

Javascriptの設置

ここからはカートボタンを制御するプログラムを追加していきます。

先程のHTMLタグに続けて、scriptタグを挿入します（26行目から）。

パターン１：カートに追加するボタンを無効化

こちらの方法はbuttonタグを無効にしてカートボタンをクリックできないようにしています。
チェックを入れることでbuttonタグが有効になります。

<script>
document.addEventListener('DOMContentLoaded', function(event) {
  const targetButton = document.getElementById('ProductSubmitButton-{{ section_id }}');
  const triggerCheckbox = document.querySelector('input[name="agree"]');
  
  targetButton.disabled = true;
  targetButton.classList.add('is-inactive');

  triggerCheckbox.addEventListener('change', function() {
    if (this.checked) {
    //チェックされているときに実行する処理
    targetButton.disabled = false;
    targetButton.classList.remove('is-inactive');
    targetButton.classList.add('is-active');
    } else {
    //チェックが外れているときに実行する処理
    targetButton.disabled = true;
    targetButton.classList.remove('is-active');
    targetButton.classList.add('is-inactive');
    }
  }, false);
}, false);
</script>

1.カートボタンのID属性とチェックボックスを取得します
さらにカートボタンにdisable属性をつけ、class（is-inactive）を付与します

targetButton.disabled = true;
targetButton.classList.add('is-inactive');

2.チェックされた後の処理が行われます
if条件分岐でチェックさらた場合と外れている場合で処理がわかれます

triggerCheckbox.addEventListener('change', function() {

パターン２

<script>
document.addEventListener('DOMContentLoaded', function(event) {
  const targetButton = document.getElementById('ProductSubmitButton-{{ section_id }}');
  const triggerCheckbox = document.querySelector('input[name="agree"]');

  targetButton.addEventListener('click', function(event) {
    if (!triggerCheckbox.checked) {
      alert("利用規約に同意する必要があります");
      event.preventDefault();
    }
  });
}, false);
</script>

カートボタンにクリックしたかどうかを判定するイベントを設定して、もしチェックしていない状態でカートボタンがクリックするとアラートが表示され、カートに商品が追加されません。