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

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

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

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

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

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

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

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

  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