特定の商品のカートページでチェックボックスを出す【Shopify】

はじめに

特定の商品（今回はDEMI DO）がカートにある場合、チェックボックスを出現させて、クリックしたら次へ進める実装をしようと思ったのですが、結構つまずいたので備忘録がてら記事にしました。

ループ処理

今回編集するのはmain-cart-footer.liquidです。

まずはforで商品をループさせ、DEMI DOコレクションの商品が入っていたらif文で、チェックボックスを表示させるコードを書きます。

            {% for item in cart.items %}
                {% for collection in item.product.collections %}
                  {% if collection.title == "DEMI DO" %}
                    <div class="cart__check">
                      <input type="checkbox" id="cart_check" value="1">
                      <label for="cart_check">DEMI DOが入っています</label>
                    </div>
                  {% endif %}
                {% endfor %}
            {% endfor %}

しかし、これではコレクションの商品の数だけチェックボックスが出現してしまうので、それを修正するコードを書きます。

修正コード

        {% assign flg_check = false %}
            {% for item in cart.items %}
              {% if flg_check == false %}
                {% for collection in item.product.collections %}
                  {% if collection.title == "DEMI DO" %}
                    <div class="cart__check">
                      <input type="checkbox" id="cart_check" value="1">
                      <label for="cart_check">DEMI DOが入っています</label>
                    </div>
                    {% assign flg_check = true %}
                    {% break %}
                  {% endif %}
                {% endfor %}
              {% endif %}
              {% if flg_check == true %}
                {% break %}
              {% endif %}
            {% endfor %}

変数flg_checkにデフォルトでfalseを入れておき、一つ対象商品があったらtrueにしてforループを抜けるように処理を書きました。
（今回は二つのforループがあるのでbreakも二つあります）
これでチェックボックスが複数になることの修正が完了です。

しかし、これでは対象商品をカートから削除しても、チェックアウトボタンが押せない状態になっています。

なのでJSを書きます！
（JSファイルを作ったらtheme.liquidでのリンクを忘れずに！）

JSコード

// DOMの読み込みが完了したら実行
document.addEventListener('DOMContentLoaded', function() {
    const checkoutButton = document.querySelector('.cart__checkout-button');
    const cartCheck = document.getElementById('cart_check');

    // cart__checkクラスを持つdiv要素が存在するか確認
    if (document.querySelector('div.cart__check')) {
        checkoutButton.disabled = true;
    }

    // チェックボックスのクリックイベントリスナーを追加
    cartCheck.addEventListener('click', function() {
        if (!this.checked) {
            checkoutButton.disabled = true;
        } else {
            checkoutButton.disabled = false;
        }
    });
});

完了！

これでcart__checkクラスの要素があればチェックアウトボタンを押せない、なければ押せるような実装ができました！

こんな感じの、実務でも何かしらに応用できそうな技術記事を書いていきます！