悩む人商品が売り切れの時に商品価格を非表示にしたい
どうやってすればいいの？
こんな疑問を解決します。
- 売り切れ商品の価格を非表示にする方法
- コレクションパーツに適用する方法
- 商品ページに適用する方法
Shopifyのストアでは、商品が売り切れの際に価格を非表示にすることができます。
でも、どこのファイルをどのように編集すれば良いかイマイチ不明という方もいるかと思います。
ということで今回は、Shopifyストアで売り切れ商品の価格を非表示にする具体的な方法を解説していきます。
おまけとして、非表示の代わりに「SOLD OUT」など任意の文字の出力を行う方法も解説していきます。
売り切れ商品の価格を非表示にする方法
結論、snippetsのproduct-price-listing.liquidまたはproduct-price.liquidを編集することで、売り切れ商品の価格を非表示にできます。
では、具体的な手順や方法を画像付きで以下で解説していきます。
コレクションページ（セクション）の価格を非表示にする方法
では、コレクションページやコレクションセクション上で売り切れ商品の価格を非表示にする具体的な手順を解説していきます。
Debutでは、コレクションページとコレクションセクション（特集コレクション）の両方で同じsnippetsが使われているため、1度に両方に適用できます。
コレクションセクションの価格を非表示にする手順
今回は、よく利用される「特集セクション」上での価格非表示方法を解説します。
売り切れ商品の価格を非表示にするには、snippetsにあるproduct-price-listing.liquidファイルを修正します。
特集コレクションのセクションファイルであるcollection.liquidにはproduct-price.liquidと記述されていますが、実際はproduct-price-listing.liquidなので、気をつけてください。
（商品がある際にレンダリングされるのはproduct-card-gridで、そこでは、product-price-listing.liquidが使用されているため）
product-price-listing.liquidファイル内で、以下の記述を見つけます。
<div class="price__regular">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<span class="price-item price-item--regular">
{%- if product.price_varies -%}
{{ 'products.product.from_lowest_price_html' | t: lowest_price: money_price }}
{%- else -%}
{{ money_price }}
{%- endif -%}
</span>
</dd>
</div>
<div class="price__sale">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="price-item price-item--sale">
{%- if product.price_varies -%}
{{ 'products.product.from_lowest_price_html' | t: lowest_price: money_price }}
{%- else -%}
{{ money_price }}
{%- endif -%}
</span>
</dd>
<div class="price__compare">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<s class="price-item price-item--regular">
{{ compare_at_price | money }}
</s>
</dd>
</div>
</div>
<div class="price__unit">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
</dt>
<dd class="price-unit-price">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span>
{%- if variant.unit_price_measurement -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}
<span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</dd>
</div>上記の記述が、商品の価格を表示している部分なので、ここをif文で囲ってあげます。
以下の記述で、上記コードブロックを囲んでください。
{% if product.available %}
// 上記のコードブロックを記述
{% endif %}これで、売り切れの場合に商品価格が非表示になります。
トマトソース実際の表示はこんな感じです。
価格の代わりに「SOLD OUT」と表示する方法
売り切れの場合に代わりの文字（今回はSOLD OUT）を出力したい場合は以下のようにすると、実現できます。
<div class="price__regular">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
{% if product.available %}
<span class="price-item price-item--regular">
{%- if product.price_varies -%}
{{ 'products.product.from_lowest_price_html' | t: lowest_price: money_price }}
{%- else -%}
{{ money_price }}
{%- endif -%}
</span>
{% else %}
<span class="price-item price-item--regular">
SOLD OUT
</span>
{% endif %}
</dd>
</div>上記のように
{% if product.available %}
// 在庫有りの場合の表示
{% else %}
// 在庫なしの表示
{% endif %}とすることで、在庫がない場合に任意の文字を出力することが可能です。
トマトソース上記のコードの画面の出力はこんな感じです。
この場合は、「売り切れ」のバッジがすぐ下に出てきているので少し変ですが、このように任意の文字を出力できるのはストアのオリジナリティが出せるのでおすすめです。
商品ページの価格を非表示にする方法
続いては、商品ページでの商品化価格を非表示にする方法を解説します。
商品ページの商品価格の非表示の方法は、product-price.liquidを修正します。
product-price.liquidファイル内で、以下の記述を探します。
<div class="price__pricing-group">
<div class="price__regular">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<span class="price-item price-item--regular" data-regular-price>
{{ money_price }}
</span>
</dd>
</div>
<div class="price__sale">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="price-item price-item--sale" data-sale-price>
{{ money_price }}
</span>
</dd>
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<s class="price-item price-item--regular" data-regular-price>
{{ compare_at_price | money }}
</s>
</dd>
</div>
<div class="price__badges">
<span class="price__badge price__badge--sale" aria-hidden="true">
<span>{{ 'products.product.on_sale' | t }}</span>
</span>
<span class="price__badge price__badge--sold-out">
<span>{{ 'products.product.sold_out' | t }}</span>
</span>
</div>
</div>この記述を、if文で囲むことで商品価格の非表示が行えます。
具体的には、以下のif文で上記の記述を囲みます。
{% if product.available %}
// 上記のコードブロックを記述
{% endif %}こうすることで、以下のように商品ページの商品価格を非表示にできます。
商品価格の代わりに「SOLD OUT」と表示する方法
売り切れの場合に「SOLD OUT」と出力したい場合は以下のようにすると、実現できます。
<div class="price__regular">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
{% if product.available %}
<span class="price-item price-item--regular" data-regular-price>
{{ money_price }}
</span>
{% else %}
<span class="price-item price-item--regular" data-regular-price>
SOLD OUT
</span>
{% endif %}
</dd>
</div>上記のように
{% if product.available %}
// 在庫有りの場合の表示
{% else %}
// 在庫なしの表示
{% endif %}とすることで、在庫がない場合に任意の文字を出力することが可能です。
トマトソース上記のコードの画面の出力はこんな感じです。
この場合は、「売り切れ」のバッジがすぐ横に出てきているのと、下にも売り切れと表示されているので少し変ですが、このように任意の文字を出力できるのはストアのオリジナリティが出せるのでおすすめです。
売り切れ時に商品価格を非表示にする方法：まとめ
- 特集コレクションの商品価格非表示は、「product-price-listing.liquid」の該当箇所を修正する
- 商品ページの商品価格非表示は、「product-price.liquid」の該当箇所を修正する
今回は、Shopifyのストアで売り切れ商品の商品価格を非表示にする方法を解説してきました。
売り切れの商品の価格を隠したい場合でも、今回ご紹介した方法であれば簡単に実現でき、また代わりに出力する文字の設定も行えてよりオリジナリティのあるストアに仕上げることができます。
ぜひ、自分の好みにあったストアの構築にお役立てください。
コメント