商品ページにてバリエーションピッカーで選択したオプションごとの在庫に応じ任意のテキストを表示させたい。

[_8_5]

複数オプションがある製品を販売しています。

商品ページにてバリエーションピッカーで選択したオプションごとの在庫に応じ、"※予約商品になります【お届け日数2ヶ月前後】"と表示させる方法はありますでしょうか？

現在カスタマイズされたliquidに下記コードを記述しています。

{% for variant in product.variants %}
{% if variant.inventory_management == “shopify” and variant.inventory_quantity < 1 %}
{% if product.variants.first.inventory_policy == ‘continue’ %}

※予約商品になります
【お届け日数2ヶ月前後】

{% endif %} {% endif %} {% endfor %}

オプションが無い製品に関しては問題ないのですが、オプションが複数ある製品はオプション数に応じて"※予約商品になります【お届け日数2ヶ月前後】"と複数回表示されてしまいます。

3パターンの画像を添付しますのでアドバイス頂きたいです。

①オプション無し/在庫切れ

こちらは特に問題ない

②オプション2種類あり/1オプションのみ在庫無し

バリエーションピッカーでどちらを選択しても"※予約商品になります【お届け日数2ヶ月前後】"と表示される。

③オプション2種類あり/全オプション在庫無し

"※予約商品になります【お届け日数2ヶ月前後】"と2回表示される。

[Qcoltd]

@_8_5 様

ご記載いただいたコードですと、商品詳細ページを開いた際にのみ処理が動くため、

オプションの在庫がない②の場合、表示が表示されたままとなります。

オプションの在庫が双方ない③の場合は、for文でオプションの数分処理を行っているので、２重に表示が出力されます。

上記の問題を解決するには、注意文を非表示で設定しておき、

JavaScriptを利用し、商品（バリエーションごと）の在庫数を確認し、注意文を表示・非表示されることが良いと思われます。

下記のコードをカスタマイズされたliquidに記載いただくと、ご要望の内容で表示されるかと思います。

また、在庫数はユーザーが商品詳細ページを開いた時点の在庫数をもとにしておりますので、リアルタイムでの在庫数のチェックは行なっておりません。

※テンプレート（主に有料）によっては下記の仕組みで動かないテンプレートもございますので、その場合はご了承ください。

{%- comment -%}初期状態は非表示にしておく{%- endcomment -%}

  ※予約商品になります
【お届け日数2ヶ月前後】

ご参考まで。

（キュー小坂）

[_8_5]

非常に助かりました!

想定通り作動致しました！

ありがとうございます。