■利用テーマ
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>似たようなカスタマイズをされた方や、お気づきの点があればアドバイスいただけますと助かります。
よろしくお願いいたします。
