カート内のカスタマイズについて

日本語 ディスカッション 総合的なディスカッション

Topic summary

常温商品と冷蔵商品を同時にカート投入した際に、警告表示とチェックアウト不可（ボタンをグレーアウト）を実現できるかが相談された。アプリでの実装が難しかったため、カート内コード編集での対応を検討している。

提案された対応は以下。

  • 商品にタグを付与：「常温」「冷蔵」をそれぞれ該当商品に設定。
  • テーマのコード編集：sections/main-cart-footer.liquidでcart.itemsをループし、両タグが混在する場合に「保存温度の違う商品は同時に購入できません。」という警告文をLiquidで表示。
  • チェックアウト制御：新規JSファイルでjQueryを使い、特定クラス（例：cart__check）がある場合に.checkoutボタン（.cart__checkout-button）へdisabled属性を付与して押せないようにする（jQueryのCDN読み込みが必要）。

結論として、タグ判定＋Liquid表示＋JSでのボタン無効化という方法でカート画面側のカスタマイズは可能、という方向性が提示されている。

Summarized with AI on February 26. AI used: gpt-5.2.
1

以前、常温、冷蔵の商品を同時購入できない設定をするために、おすすめのアプリを教えていただいたのですが、

アプリでの実装は難しく、やはり、カート内のコードを編集し実装を試みようと思うのですが、

初心者のため、なかなか糸口が見つけられずに困っています。

実現したいこととしては、

・「これらの商品は一緒に配送できません」等の警告文を表示
・決済に進むボタン（チェックアウトボタン？）がグレーアウトし押せない

といった方法なのですが、こういったカート内の編集は可能なのでしょうか…？

無知申し訳ございませんがご教示いただけたら幸いです。

2
  1. 常温の商品には「常温」、冷蔵の商品には「冷蔵」というタグをそれぞれ設定します。

2、テーマの「アクション」→「コードを編集」へ進み、sectionsフォルダ内にあるmain-cart-footer.liquidファイルを開きます。

3、下記のコードを探してください

4、上記コードの上に以下のコードを挿入します

{% assign normalTemperature = false %}
{% assign coldStrage = false %}

{% for item in cart.items %}
{% if item.product.tags contains '常温' %}
{% assign normalTemperature = true %}
{% endif %}
{% if item.product.tags contains '冷蔵' %}
{% assign coldStrage = true %}
{% endif %}
{% endfor %}

{% if normalTemperature and coldStrage %}

保存温度の違う商品は同時に購入できません。

{% endif %}

5、jsファイルを新規作成して、以下のコードを記述します（jQueryを使っていますので、CDNを読み込んでおいてください）

$(function(){
  if ($("div").hasClass("cart__check")) {
    $(".cart__checkout-button").attr("disabled", "disabled");
  }
})
1 Like