在庫切れの時は選択肢を非表示にしたい

[shimin]

初めて投稿します。shopifyも始めたばかりです。

下記の設定方法があれば教えてください。

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

商品ページの選択項目について

在庫切れの場合は選択項目が非表示になるようにしたいです。

[junichiokamura]

テーマによってはそのような動作のものがあるかもしれませんが、オンラインストア＞テーマ＞コードの編集でproduct-template.liquidあたりを探してみて、選択肢の部分に在庫切れの場合の表示切り替えの処理があるか確認し、そこに非表示処理を入れれば可能かと思います。

[shimin]

お返事ありがとうございます！

オンラインストア＞テーマ＞コードの編集でproduct-template.liquid

上記の選択肢部分を探してみました。

（ちなみに無料テーマのMinimalを使用しています）

下記が該当の部分だとは思うのですが

この中のどこにどのように書き込んだらいいのか無知で申し訳ありません。

ご教授いただけましたら幸いです。

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

<select name="id" id="ProductSelect-{{ section.id }}" class="product-single__variants">
{% for variant in product.variants %}
{% if variant.available %}

<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>

[WEBUILD]

そのコードの通りなら
売り切れのときは

<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>

が出力されるので
CSS の属性セレクタで非表示にすればいいのではないでしょうか～
Liquidを理解するより簡単ですし。

.product-single__variants option[disabled="disabled"]{
    display: none;
}

でご希望どおりになりませんか？

[shimin]

お返事ありがとうございます！

具体的に教えていただきありがとうございます！！

申し訳ありませんが、下記で追記しましたがダメでした…

このliquid上部に<style>でくくって入れたりいろんな箇所に試して見ましたが

非表示になりませんでした…

なんども申し訳ありません。

ご指摘いただけましたら幸いです。

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

<select name="id" id="ProductSelect-{{ section.id }}" class="product-single__variants">
{% for variant in product.variants %}
{% if variant.available %}

<style>
.product-single__variants option[disabled="disabled"]{
    display: none;
}
</style>

<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

{% else %}
<option disabled="disabled">


{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>