JavaScriptを使ってカートでSKUに「-PRT」を含むバリエーションが合計100個以上の時に特定のメッセージをカートに表示するようにしたいです。

Topic summary

Shopifyの「Basic」プラン、「Rise」テーマを使用している環境で、カート内のSKUに「-PRT」を含むバリエーションの合計数量が100個以上の場合に特定のメッセージを表示する機能を実装したいという質問です。

当初の課題:

  • カスタムLiquidセクションでメッセージ表示のコードは作成済み
  • カート内で数量が更新される度にリアルタイムで再計算・表示更新したい
  • JavaScriptの実装方法が不明

解決策:
Qcoltd氏がJavaScriptを追加したコードを提供。具体的には:

  • カート更新イベント(cart:updated)をリッスン
  • SKUに「-PRT」を含む商品の合計数量を動的に計算
  • 100個以上の場合にメッセージを表示/非表示を切り替え

質問者は提供されたコードで希望通りに動作したことを確認し、解決済み。

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.

Shopifyのプランは「Basic」、テーマは「Rise」を使っています。

テーマのコードの直接編集ではなく、テーマのカスタマイズで作成しています。

セクションの「カスタムliquid」に以下のコードで、カートでSKUに「-PRT」を含むバリエーションが合計100個以上の時に特定のメッセージをカート上に表示するように設定しました。

{% comment %} SKUに「-PRT」を含む商品の合計数量を初期化します {% endcomment %}
{%- assign prt_variant_total_quantity = 0 -%}

{% comment %} カート内の各商品をループ処理します {% endcomment %}
{%- for item in cart.items -%}
  {% comment %} SKUに「-PRT」という文字列が含まれているか確認します {% endcomment %}
  {%- if item.variant.sku contains "-PRT" -%}
    {% comment %} 含まれている場合、その商品の数量を合計に加算します {% endcomment %}
    {%- assign prt_variant_total_quantity = prt_variant_total_quantity | plus: item.quantity -%}
  {%- endif -%}
{%- endfor -%}

{% comment %} SKUに「-PRT」を含む商品の合計数量が100以上の場合にメッセージを表示します {% endcomment %}
{%- if prt_variant_total_quantity >= 100 -%}
  
    

      **※重要なお知らせ※**

冊子印刷版を100冊以上購入される場合、お届けまで通常よりもお時間がかかる場合がございます。予めご了承ください。

    

  

{%- endif -%}

こちらを、できたらカート内でバリエーションの合計数が更新される度に読み込むようにしたいです。

恐らくJavaScriptが必要になると思うのですが、中々うまくいきません。

具体的にどのようにコードを書くといいでしょうか。

ご教示いただけますと幸いです。

よろしくお願いいたします。

@n_ogawa3

数量が変更された場合でも動くようにjsを追加してみました。

詳しくはチェックをしておりませんので、ご利用の際はチェックを行った上でご利用ください。

{%- assign prt_variant_total_quantity = 0 -%}
{%- for item in cart.items -%}
  {%- if item.variant.sku contains "-PRT" -%}
    {%- assign prt_variant_total_quantity = prt_variant_total_quantity | plus: item.quantity -%}
  {%- endif -%}
{%- endfor -%}

  

    **※重要なお知らせ※**

    
      冊子印刷版を100冊以上購入される場合、お届けまで通常よりもお時間がかかる場合がございます。予めご了承ください。
    
  

ご参考まで。

(キュー小坂)

1 Like

早速ありがとうございます!

試してみたら希望通り動きました!

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