Liquid、JavaScriptなどに関する質問
■利用テーマ
Dawn
■実現したいこと
商品ページにチェックボックスを追加し、チェックが入っている時だけカートに入れるボタンを利用できるようにしたいです。
■試したこと
セクションファイルの「main-product.liquid」へチェックボックスを追加し、スニペットファイルの「buy-buttons.liquid」にチェックボックスのチェックに応じてカートボタンのdisableの有無を切り替えるjavascriptを実装しました。
チェックボックスの表示はメタフィールドを利用しています。
商品ページを最初に開いた状態ではカートボタンはdsableとなっており、カートボタンをクリックできないようになっていて、チェックボタンをチェックすると、カートボタンがクリック可能になり、意図通りの挙動となっています。
■困っていること
商品ページにバリエーションが存在する場合、最初に選択されているバリエーション以外を選択した際に、カートボタンが意図した挙動になりません。
・在庫切れのバリエーションを選択した後で、在庫のあるバリエーションを選択すると、カートボタンのラベルが「売り切れ」のまま切り替わりません。
・チェックボックスをチェックしたまま別の在庫切れのバリエーションを選択すると、カートボタンが利用できなくなりますが、その後、在庫のあるバリエーションを選択しても、カートボタンが利用できないままとなっていて、チェックボックスを一度チェックをはずして、再度チェックするとカートボタンが利用できるようになります。
追記・修正した主要なコードは下記の通りです。
▼セクション「main-product.liquid」内
{%- when 'custom-checkbox' -%} {%- if block.settings.show_custom-checkbox == true -%} {%- if product.metafields.custom._checkbox == true -%} <div class="custom-checkbox container"> {% if product.metafields.custom._check-txt01 %} <span class="required">{{- product.metafields.custom._check-txt01 -}}</span> {% endif %} <p> <input type="hidden" name="properties[{{- product.metafields.custom._check-txt01 -}}]" value="了承しない">{% comment %} 230930追加 {% endcomment %} <input type="checkbox" id="consent-chk" name="properties[{{- product.metafields.custom._check-txt01 -}}]" value="{{- product.metafields.custom._check-txt02 -}}" form="{{ product_form_id }}">{% comment %} 230930追加 {% endcomment %} {% comment %} <input type="checkbox" id="consent-chk" name="consent-chk"> {% endcomment %} <label for="consent-chk" required> {% if product.metafields.custom._check-txt02 %} {{- product.metafields.custom._check-txt02 -}} {% endif %} </label> </p> </div> {%- endif %} {%- endif %}
▼スニペット「buy-buttons.liquid」内
<button id="ProductSubmitButton-{{ section_id }}" type="submit" name="add" class="product-form__submit button button--full-width {% if show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}" {% comment %}↓末尾に「or product.metafields.custom._checkbox == true」追加 {% endcomment %} {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout or product.metafields.custom._checkbox == true %} disabled {% endif %} > <span> {%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%} {{ 'products.product.sold_out' | t }} {%- else -%} {{ 'products.product.add_to_cart' | t }} {%- endif -%} </span> <div class="loading-overlay__spinner hidden"> <svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg" > <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle> </svg> </div> </button> <script> function changeDisabled(){ // 同意するのチェックボックス const consent_chk = document.querySelector('#consent-chk'); // 送信ボタン const submit_btn = document.querySelector('#ProductSubmitButton-{{ section_id }}'); // チェックボックスの入力イベント consent_chk.addEventListener('change', () => { // チェックボックスがあれば無効化をオフ、なければオン if (consent_chk.checked === true) { submit_btn.disabled = false; } else { submit_btn.disabled = true; } }); }; window.onunload = function() {}; window.addEventListener("pageshow", function(event){ if (event.persisted) { changeDisabled(); window.location.reload(); } }); window.onload = changeDisabled; </script>
似たようなカスタマイズをされた方や、お気づきの点があればアドバイスいただけますと助かります。
よろしくお願いいたします。
解決済! ベストソリューションを見る。
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024