購入ボタンの表示をその商品がカートに入っているかどうかで条件分岐したい

Topic summary

課題:
ShopifyのDawnテーマで、商品がカートに入っているかどうかで購入ボタンの表示を条件分岐させたい。

初期の問題:

  • buy-buttons.liquidforループとif文で実装したが、何も表示されなかった
  • 時間をおいて再試行すると表示されるようになったが、カートに複数商品がある場合、ループ内の判定により意図しない複数の表示が出てしまった

解決方法:

  • カート内の商品IDを配列として作成
  • forループの外で、表示中の商品IDが配列に含まれるかを判定
  • 「カートに入っていたら処理A」「入っていなければ処理B」のどちらか一方のみを実行する条件分岐を実装

結果:
条件分岐が正常に動作するようになり、問題が解決した。

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.

テーマDawnでタイトルのような実装をするためにmain-product.liquidで読み込んでいるbuy-buttons.liquidに下記のような実装をしました。

{% for line_item in cart.items %}
  {% if line_item.product_id == product.id %}
      (表示中の商品がカートに入っていたら表示したい処理)
  {% else %}
      (表示中の商品がカートに入っていなければ表示したい処理)
  {% endif %}
{% endfor %}

しかし表示中の商品がカートに入っているかにかかわらず何の表示もされません。

どうしたら希望の実装が出来るのでしょうか。

ご教示頂けると幸いです。

はじめまして。

株式会社ファイブビットの福水と申します。

上記のお悩みですが、私の環境からは、buy-button.liquid に上記のコードを読み込ませることで、意図した挙動になりました。

動画:https://gyazo.com/c0d7cf4e7781ae68a1a1cffed9b17241

コードの問題ではなく、テーマの設定などが問題かもしれません。

1 Like

@Anonymous_3b9a8e857ec4e2560bc009f074375383

ご確認頂き有難うございました。

私も時間をおいて上記処理をしたら表示されるようになりました。

ただ、for文の中で

{% if line_item.product_id == product.id %}

としているため、複数の商品が入っている場合に都度ifでの判定をしてしまい福水様の動画にもあるような「(表示中の商品がカートに入っていたら表示したい処理)(表示中の商品がカートに入っていなかったら表示したい処理)」と複数の表示が出てしまいました。

今回は「カートに入っていたら処理A」、「入っていなければ処理B」とどちらかのみを実行するようにしたいので、下記のようにカートに入っている商品idの配列を作成し、for文の外で配列中に表示中の商品が含まれているかどうかで条件分岐する形をとりました。

{% assign product_ids = "" %}
{% for line_item in cart.items %}
  {% assign product_ids = product_ids | append: line_item.product_id | append: "," %}
{% endfor %}
{% if product_ids contains product.id %}
  (表示中の商品がカートに入っていたら表示したい処理)
{% else %}
  (表示中の商品がカートに入っていなかったら表示したい処理)
{% endif %}

福水様の動画で複数商品をカートに入れてご確認頂いたのですぐに気づくことが出来ました。

ありがとうございました!

1 Like