ShopifyやEコマースに関連することを話してみよう
初めて投稿します。shopifyも始めたばかりです。
下記の設定方法があれば教えてください。
よろしくお願いいたします。
商品ページの選択項目について
在庫切れの場合は選択項目が非表示になるようにしたいです。
テーマによってはそのような動作のものがあるかもしれませんが、オンラインストア>テーマ>コードの編集でproduct-template.liquidあたりを探してみて、選択肢の部分に在庫切れの場合の表示切り替えの処理があるか確認し、そこに非表示処理を入れれば可能かと思います。
お返事ありがとうございます!
オンラインストア>テーマ>コードの編集で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>
そのコードの通りなら
売り切れのときは
<option disabled="disabled"> {{ variant.title }} - {{ 'products.product.sold_out' | t }} </option>
が出力されるので
CSS の属性セレクタで非表示にすればいいのではないでしょうか~
Liquidを理解するより簡単ですし。
.product-single__variants option[disabled="disabled"]{
display: none;
}
でご希望どおりになりませんか?
お返事ありがとうございます!
具体的に教えていただきありがとうございます!!
申し訳ありませんが、下記で追記しましたがダメでした…
この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>
Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 2024