【Shopify】チェックボックスで同意を得てからカートへ進む

補足事項がある商品の場合に、同意をしていただいてからカートへ商品を追加させるようにしたいとご要望をいただき実装してみました。

■補足

受注データのメモに同意したかどうかは格納されないので、格納できるようにしたい場合にはもう少し処理が必要です。
Shopify提供のジェネレーターを使用すれば簡単に対応可能です！

Line Item Property – Shopify UI Elements Generator

■作業環境

Dawn　バージョン5.0.0
main-product.liquid

■作業内容

チェックボックスを作る

任意の場所にチェックボックスを設置
※チェックを入れてもらわないと「カートに追加する」ボタンが有効にならないのでボタン付近がよいと思います。

<div class="container">
  <p><input type="checkbox" id="consent-chk" name="consent-chk">
    <label for="consent-chk">同意する</label>
  </p>
</div>

---

「カートに追加する」ボタンに処理を追加する

<button>タグ内に「カートに追加する」ボタンを無効化する処理とJavaScriptで使用するためにidを追記

id="check" disabled 

追記イメージ
※元々if文でdisabledの処理が入っているので丁寧な処理をしたほうが良いです！！！！！今回は一旦追記だけ。。

<button　type="submit"　name="add"
 class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
 {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
 id="check"disabled >

---

JavaScriptを追記する

<button>タグより後ろにJavaScriptを追記

<script>
　　// 同意するのチェックボックス
 const consent_chk = document.querySelector('#consent-chk');
 // 送信ボタン
 const submit_btn = document.querySelector('#check');
                    
 // チェックボックスの入力イベント
 consent_chk.addEventListener('change', () => {
                                                 
   // チェックボックスがあれば無効化をオフ、なければオン
   if (consent_chk.checked === true) {
     submit_btn.disabled = false;
     } else {
     submit_btn.disabled = true;
   }
  });
</script>

■参考

JavaScript | 同意するチェックと送信ボタンの無効化・有効化サンプル | ONE NOTES