FROM CACHE - jp_header

セールバッジの代わりにオフ率を表示する方法について

解決済

セールバッジの代わりにオフ率を表示する方法について

itawasaaa
訪問者
2 0 1

はじめまして、タイトルの通り、セールバッジの代わりにオフ率を表示する方法についての質問です。

現在テーマは"DAWN12.0.0"を利用しています。

私自身はHTML/CSSをいじれる程度の知識しか持ち合わせておりません。

 

特集コレクション、商品一覧ページ、検索ページなど、セクションやテンプレート問わず価格が表示されるすべての場所に割引率のバッジを表示したいというのがご相談したい内容となります。

以前までバッジの表示についてはPrime Product Budges Stickersというアプリを使用しておりましたが、フィルターアプリなどとの相性が悪いせいか表示速度が激落ちしてしまったため、今後は必要最低限のバッジを直にテーマに打ち込もうと思っております。

ネット上の情報などを元に、商品ページのプライス横には下記のコードをprice.liquid内に実装することができました。

{%- liquid assign discountrate = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round -%}

.
.
.

<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
      {{ discountrate }}%OFF
    </span>

 

 

しかしながら、以下の通りcard-product.liquidに同様のコードを入力すると、特集コレクションのセクションには「%OFF」しか表示されませんでした。

{%- liquid assign discountrate = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round -%}

.
.
.

{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
            {%- if card_product.quantity_price_breaks_configured? -%}
              <div class="card__information-volume-pricing-note">
                <span class="caption">{{ 'products.product.volume_pricing.note' | t }}</span>
              </div>
            {%- endif -%}


             {%- if card_product.compare_at_price > card_product.price and card_product.available -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
              >
                {{ discountrate }}%OFF
              </span>
               {%- endif -%}

 
また、商品ページの下部にも特集コレクションのセクションを設置しているのですが、そちらでは該当掲載商品の割引率が特集コレクション内の全商品に反映されてしまいます。

 

冒頭に記載したように、コレクションの商品グリッドや検索ページなど、全てのプライス横にバッジを表示したいのですが、ここまでできているのだったら自力で解決できそうな問題なのか、もしくはShopify Expertsの方々に依頼した方が良いものか、ご回答いただけましたら幸いです。

(DAWNのアップデートによってどこら辺の記述方法が変化しているかなどもわからない素人です。)

よろしくお願い申し上げます。

1 件の受理された解決策

NIIGAKI_HYUGA
Shopify Partner
54 24 15

成功

@itawasaaa 

初めまして。新垣です。

 

自力で解決するには、liquidオブジェクトや変数の特性について理解しておく必要があります。

例えば、

>商品ページの下部にも特集コレクションのセクションを設置しているのですが、そちらでは該当掲載商品の割引率が特集コレクション内の全商品に反映されてしまいます。

商品詳細ページでは、該当掲載商品の情報がproductオブジェクトに格納されます。discountrate変数には分岐条件が設定されていないので、該当掲載商品の情報がproductオブジェクトに格納されたまま、特集コレクションセクションでも表示されてしまいます。

これを回避するには、Webコンポーネントの考え方も混ぜながらprice.liquid内で全てのページ内、セクション内で機能するロジックを組む必要があります。(それぞれのページで作成しても良いが、保守運用上好ましくない)

 

ChatGPTに聞いてみてできなければ、内容的にも難しいので専門の方に依頼するのをお勧めいたします!

(差し出がましいかもですが、GitHubを使ってないのであれば必ずテーマを複製してからコード編集することをおすすめします!)

 

以上、参考になりましたら幸いです。

Freelance Solution Engineer | 新垣
JavaScript Liquid Theme, React Remix App
投稿は参考になりましたか?「いいね!」でお教えください。
解決しない場合、個別に対応も可能ですのでプロフィールからお気軽にメッセージください

元の投稿で解決策を見る

2件の返信2

NIIGAKI_HYUGA
Shopify Partner
54 24 15

成功

@itawasaaa 

初めまして。新垣です。

 

自力で解決するには、liquidオブジェクトや変数の特性について理解しておく必要があります。

例えば、

>商品ページの下部にも特集コレクションのセクションを設置しているのですが、そちらでは該当掲載商品の割引率が特集コレクション内の全商品に反映されてしまいます。

商品詳細ページでは、該当掲載商品の情報がproductオブジェクトに格納されます。discountrate変数には分岐条件が設定されていないので、該当掲載商品の情報がproductオブジェクトに格納されたまま、特集コレクションセクションでも表示されてしまいます。

これを回避するには、Webコンポーネントの考え方も混ぜながらprice.liquid内で全てのページ内、セクション内で機能するロジックを組む必要があります。(それぞれのページで作成しても良いが、保守運用上好ましくない)

 

ChatGPTに聞いてみてできなければ、内容的にも難しいので専門の方に依頼するのをお勧めいたします!

(差し出がましいかもですが、GitHubを使ってないのであれば必ずテーマを複製してからコード編集することをおすすめします!)

 

以上、参考になりましたら幸いです。

Freelance Solution Engineer | 新垣
JavaScript Liquid Theme, React Remix App
投稿は参考になりましたか?「いいね!」でお教えください。
解決しない場合、個別に対応も可能ですのでプロフィールからお気軽にメッセージください
itawasaaa
訪問者
2 0 1

丁寧なご返信ありがとうございます。
リキッドの変数が絡んでくると手に負えないので、専門の方に個別に相談してみます!