初めて投稿します。shopifyも始めたばかりです。
下記の設定方法があれば教えてください。
よろしくお願いいたします。
商品ページの選択項目について
在庫切れの場合は選択項目が非表示になるようにしたいです。
AI-generated summary
商品ページのバリエーション選択で、在庫切れの項目を「表示はするが選べない」状態ではなく、完全に非表示にしたいという相談。無料テーマ「Minimal」を使っており、product-template.liquid 内の <select> と variant.available を使った分岐コードが共有された。
・確認された現状
在庫ありは通常の <option>、在庫切れは disabled="disabled" 付きの <option> として出力されている。つまり、テーマ標準では売り切れ項目を無効化して表示する実装になっている。
・提案された対応
option[disabled="disabled"] { display: none; } というCSSで非表示にする案が提示された。Liquid（Shopifyのテンプレート言語）を大きく書き換えずに済む、という意図。
・最新状況
相談者は <style> を追加して試したが、非表示にならなかったと報告。どこに記述すべきか、また別の方法が必要かはまだ結論が出ておらず、議論は未解決のまま。
テーマによってはそのような動作のものがあるかもしれませんが、オンラインストア＞テーマ＞コードの編集でproduct-template.liquidあたりを探してみて、選択肢の部分に在庫切れの場合の表示切り替えの処理があるか確認し、そこに非表示処理を入れれば可能かと思います。
お返事ありがとうございます！
オンラインストア＞テーマ＞コードの編集でproduct-template.liquid
上記の選択肢部分を探してみました。
（ちなみに無料テーマのMinimalを使用しています）
下記が該当の部分だとは思うのですが
この中のどこにどのように書き込んだらいいのか無知で申し訳ありません。
ご教授いただけましたら幸いです。
何卒よろしくお願いいたします。
そのコードの通りなら
売り切れのときは
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
が出力されるので
CSS の属性セレクタで非表示にすればいいのではないでしょうか～
Liquidを理解するより簡単ですし。
.product-single__variants option[disabled="disabled"]{
display: none;
}
でご希望どおりになりませんか？
お返事ありがとうございます！
具体的に教えていただきありがとうございます！！
申し訳ありませんが、下記で追記しましたがダメでした…
このliquid上部にでくくって入れたりいろんな箇所に試して見ましたが
非表示になりませんでした…
なんども申し訳ありません。
ご指摘いただけましたら幸いです。
よろしくお願いいたします。
<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>