FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

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

解決済

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

nishi-ec
Shopify Partner
38 3 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
38 3 4

成功

自己解決しました。

元の投稿で解決策を見る

1件の返信1

nishi-ec
Shopify Partner
38 3 4

成功

自己解決しました。