variantのoptionが2つ以上ある場合を考慮しますと、
質問者様に記載いただいているような、「入荷待ち」のような情報まで、
ドロップダウンに記載するのは難しいかもしれません。
例えば、商材がアパレルだったとします。
optionとして、サイズと色の2種類があったとします。
この時、ある商品に下記のように4種類のvariantが存在したとします。
1. WHITE / S
2. WHITE / M
3. BLACK / S
4. BLACK / M
WHITE / Sが入荷待ちで、WHITE / Mが入荷予定がなかったとします。
この時、「色」を選択するドロップダウン中の、
WHITEという選択肢において、入荷待ちなのか入荷予定がないのかを、
一意に決定することができません。
どこまでできるか考えてみたのですが、
在庫の有無くらいは、ドロップダウンに追加できそうです。
Dawnをお使いとのことで、
セクション(sections) > main-product.liquidのドロップダウンを出力する箇所を下記のように変更することでできそうです。
(十分な検証はできていないので、うまく動作しないパターンがあるかもしれません。)
元のコード
<variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
{%- for option in product.options_with_values -%}
<div class="product-form__input product-form__input--dropdown">
<label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
<div class="select">
<select id="Option-{{ section.id }}-{{ forloop.index0 }}"
class="select__select"
name="options[{{ option.name | escape }}]"
form="{{ product_form_id }}"
>
<option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>
{{ value }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-selects>
変更後のコード
<variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
{%- for option in product.options_with_values -%}
<div class="product-form__input product-form__input--dropdown">
<label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
<div class="select">
<select id="Option-{{ section.id }}-{{ forloop.index0 }}"
class="select__select"
name="options[{{ option.name | escape }}]"
form="{{ product_form_id }}"
>
{%- assign variantOptionInventoryStatus = '在庫なし' -%}
{%- for value in option.values -%}
{%- for variant in product.variants -%}
{%- for variantOption in variant.options -%}}
{%- if variantOption == value -%}
{% if variant.inventory_quantity > 0 %}
{%- assign variantOptionInventoryStatus = '在庫あり' -%}
{% endif %}
{%- endif -%}}
{%- endfor -%}
{%- endfor -%}
<option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>
{{ value }} - {{ variantOptionInventoryStatus }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-selects>
ご要望通りの回答ではなく恐縮ですが、
何かの参考になれば幸いです。
(キュー田辺)
