売り切れた後に価格を非表示にする方法②

[Hiro614]

先日、こちらで同タイトルで質問させていただきました。

その際、下記の返答をいただきました。

値段を表示しているファイル（product-template.liquid または product-form.liquid など）を編集していただければと思います。

具体的なコードは以下になります。

{% if product.available %}
  <!-- 商品が在庫がある場合に価格を表示 -->
  <p class="price">{{ product.price | money }}</p>
{% else %}
  <!-- 商品が在庫がない場合に価格を非表示 -->
  <p class="price" style="display:none;">{{ product.price | money }}</p>
{% endif %}

商品在庫がある時は値段を通常通り表示して売り切れの場合は非表示になります。

と教えていただきまして、やってみました。

コード編集の場所をなんとか探し(コードを初めて見ました)、同名のファイルを検索しましたが出てこなかったので、色々と探してみましたところ、Sectionsのmain-product.liquidにたどりつきました。

しかし、そこのどの部分に教えていただいたコードを入れたらよいのかわかりません。

<div
class="
price
{%- if price_class %} {{ price_class }}{% endif -%}
{%- if available == false %} price--sold-out{% endif -%}
{%- if compare_at_price > price and product.quantity_price_breaks_configured? != true %} price--on-sale{% endif -%}
{%- if compare_at_price > price and product.quantity_price_breaks_configured? %} volume-pricing--sale-badge{% endif -%}
{%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}
{%- if show_badges %} price--show-badge{% endif -%}
"

この部分のどこかに入れる、または書き換えるなどでしょうか。

またもしかしたら、snippets内のprice liquidなのかもしれないとも思っています。

おわかりになりましたら、教えていただけますと助かります。

[Hiro614]

価格を非表示にしたいのはコレクションページではなくて商品ページです。

どうぞよろしくお願い致します。

[株式会社ナレッジサービス · Accepted solution]

以下の手順をお試しください。

1.管理画面にログインし、[オンラインストア] > [テーマ] に移動します。

2.「カスタマイズ」の隣の[…] から[コードを編集] をクリックします。

3.「セクション」フォルダ内のmain-product.liquidファイルを選択します。

4. 価格を読み込んでいるコードを、以下のように変更します。

変更前：

{%- when 'price' -%}
  <div id="price-{{ section.id }}" role="status" {{ block.shopify_attributes }}>
    {%- render 'price',
    product: product,
    use_variant: true,
    show_badges: true,
    price_class: 'price--large'
     -%}
</div>

変更後：

{%- when 'price' -%}
 {% if product.available %}
   <div id="price-{{ section.id }}" role="status" {{ block.shopify_attributes }}>
   {%- render 'price',
   product: product,
   use_variant: true,
   show_badges: true,
   price_class: 'price--large'
  -%}
  </div>
{% endif %}

5. 最後に「保存」をクリックして完了です。

[Hiro614]

教えてくださりありがとうございます!

さっそくやってみましたところ、価格を非表示にすることができました!

かなり長時間この問題に時間を取られていまして、さらに解決も出来なくてどんよりしていましたが、

ナレッジサービスさんのおかげで、無事に解決することが出来ました。

本当にありがとうございました。