FROM CACHE - jp_header

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

shimin
観光客
3 0 2

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

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

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

 

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

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

 

4件の返信4

junichiokamura
Community Manager
1200 280 506

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

Senior Partner Solutions Engineer
shimin
観光客
3 0 2

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

オンラインストア>テーマ>コードの編集で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
Shopify Partner
39 11 41

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

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

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

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

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



shimin
観光客
3 0 2

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

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

 

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

この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>