FROM CACHE - jp_header

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

Sakai
観光客
10 0 1

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

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

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

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

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

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

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

 

1件の返信1
鎌田威
遊覧客
36 15 20

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

 

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

 

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

<div class="cart__ctas" {{ block.shopify_attributes }}>
  <noscript>
    <button type="submit" class="cart__update-button button button--secondary" form="cart">
    {{ 'sections.cart.update' | t }}
  </button>
</noscript>

 

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 %}
<div class="cart__check">
<p>保存温度の違う商品は同時に購入できません。</p>
</div>
{% endif %}

 

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

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