商品ページのバリエーション在庫数表示を指定数以上の場合非表示にしたい

AI-generated summary

ShopifyのDebutテーマ商品ページで、バリエーション在庫が指定数(例:5個)以上の場合は非表示にしたいという要望。

Liquid(product-template.liquid)で条件分岐を追加すると初回表示は非表示になるが、バリエーション再選択時に5個以上でも在庫が表示される問題が発生。

技術的背景:ヘルプ記事の実装では、バリエーション選択後の在庫表示はtheme.jsのカスタマイズが制御。Liquidのみの変更では、JSによる再描画時の条件に反映されない。

対応策:theme.js内の条件「if (variantStock[variant.id] > 0」を、指定数以上は非表示になるよう閾値を組み込む(例:「> 0」を「< 5」に変更、または「>= 5」の場合は表示処理を行わない)。

最新の結果:JS側の条件を編集したところ解決。結論が出ており、未解決の点や追記事項はない。

お世話になります。

初投稿の為、内容に不備などがありましたらご容赦いただけますと幸いです。

■使用しているテーマ

Debutのバージョン17.12.1

■現在の状態

ヘルプセンターで紹介されていた【商品ページにバリエーションの残りの在庫を表示する】を利用し、商品ページ内にてバリエーション選択時にそれぞれの在庫が表示されるようにしております。

■変更したいこと

上記の在庫表示設定を、在庫が指定数以上だった場合のみ非表示という条件を追加したいです。

■試した変更

5個以上の場合非表示にしたく下記コードを試しました。
商品ページアクセス直後は非表示となるのですが、再度該当するバリエーションを選択すると、5個以上でも在庫数が表示されてしまいました。

変更後 ※product-template.liquid内です

<div class="inventoryWrapper">
 {% if current_variant.inventory_quantity > 5 and current_variant.inventory_management == 'shopify' %}
 {% elsif current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
  <p>stock: {{ current_variant.inventory_quantity }}</p>
 {% endif %}
</div>

変更前 ※product-template.liquid内です

<div class="inventoryWrapper">
  {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

お手数をおかけしますが、変更が必要なコードの内容をご教示頂けますと幸いです。

次回確認が9/12以降になる場合がございます。宜しくお願い致します。

@Anonymous_5668323578ab397108800f8626e31a2c

こんにちは!

商品ページにバリエーションの残りの在庫を表示する

の内容のtheme.jsのカスタマイズ部分にある

if (variantStock[variant.id] > 0 

の部分も併せて5個以上という条件にされておりますでしょうか?

もし編集されていないようでしたら、編集してください。

解決の手助けとなりましたら幸いです。

よろしくお願いします!

上記箇所を編集したところ、無事解決いたしました。
この度はご回答ありがとうございました!