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

Topic summary

Shopifyの「Basic」プラン、「Rise」テーマを使用し、カスタムliquidセクションでSKUに「-PRT」を含む商品がカート内にある場合に特定メッセージを表示する実装について質問されています。

現状の課題:

  • Liquidコードで条件分岐は実装済み
  • カート内の数量が更新される度に動的にメッセージを再読み込みしたい
  • JavaScriptが必要と認識しているが、実装方法が不明

提供された解決策:
Qcoltd氏が以前の回答(100個以上の数量チェック)と今回の要件をマージしたコードを提示しました。

コードの主な機能:

  • 「-PRT」を含むSKUの合計数量を計算
  • 100冊以上の場合は納期に関する警告メッセージを表示
  • 「-PRT」商品が存在する場合はオンデマンド製本に関する注意事項(4営業日発送)を表示

※回答者は実際の動作確認を行っていないため、使用前の検証が推奨されています。

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

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

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

こちらで回答いただいたものの別バージョンです。

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

{% comment %} ----- SKUに「-PRT」を含む商品が存在するかどうかをチェックします ----- {% endcomment %}
{%- assign prt_variant_in_cart = false -%}
{%- for item in cart.items -%}
  {% comment %} 現在の商品のSKUに「-PRT」という文字列が含まれているか確認します {% endcomment %}
  {%- if item.variant.sku contains "-PRT" -%}
    {% comment %} 「-PRT」を含む商品が見つかった場合、フラグをtrueに設定し、ループを終了します {% endcomment %}
    {%- assign prt_variant_in_cart = true -%}
    {%- break -%}
  {%- endif -%}
{%- endfor -%}

{% comment %} ----- 「-PRT」SKU商品が存在する場合にメッセージを表示します ----- {% endcomment %}
{%- if prt_variant_in_cart -%}
  
    

      **【冊子印刷版をご注文のお客様へ】**

※注文をお受けしてから製本するオンデマンド製本方式を採用しております。

※そのため、ご注文とお支払い確認後、4営業日程での発送となります。

    

  

{%- endif -%}

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

JavaScriptが必要になると思うのですが、こちらを参考にしようと思いましたが、私が素人なので中々うまくいきません。

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

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

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

@n_ogawa3

こちらのページで回答した内容に今回のご質問内容をマージしてみました。

実際にコードを動かしてはおりませんので、実際に使用される場合は、ご確認の上ご利用ください。

参考コード

{%- comment -%} PRT SKU数量計算 {%- endcomment -%}
{%- 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 -%}

{%- comment -%} 100冊以上のアラート表示 {%- endcomment -%}

  

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

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

{%- comment -%} PRT SKUの存在確認 {%- endcomment -%}

  

    **【冊子印刷版をご注文のお客様へ】**

    

      ※注文をお受けしてから製本するオンデマンド製本方式を採用しております。

      ※そのため、ご注文とお支払い確認後、4営業日程での発送となります。
    

  

ご参考まで。

(キュー小坂)