FROM CACHE - jp_header
解決済

商品ページでチェックボックス選択でカートボタンのdisableを切り替えたい

nishi-ec
Shopify Partner
35 2 4

■利用テーマ

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>

似たようなカスタマイズをされた方や、お気づきの点があればアドバイスいただけますと助かります。

よろしくお願いいたします。

1 件の受理された解決策

nishi-ec
Shopify Partner
35 2 4

成功

自己解決しました。

元の投稿で解決策を見る

1件の返信1

nishi-ec
Shopify Partner
35 2 4

成功

自己解決しました。