【Shopify】アプリなしでSALE時の割引率を表示する!

PRYTHMWORKS Shopify
Shopify

割引率の表示はこのコードで完了!

{% if current_variant.compare_at_price > 0 %}
  {% comment %}割引前価格が設定されていればOFF率表記自体する{% endcomment %}
  {% assign float_compare_at_price = current_variant.compare_at_price | times: 1.0 %} 
  {% assign per_sale = current_variant.price |  divided_by: float_compare_at_price %}
  {% assign float_per_off = 1 | minus: per_sale %}
  {% assign per_off = float_per_off | times: 100  | round %}            
  <span style="
    background: #ee7676;
    color: #fff;
    padding: 0 3px;">{{ per_off }}%OFF</span>
{% endif %}

コードの解説

{% if current_variant.compare_at_price > 0 %}

ここの条件式で、current_variant.compare_at_price(現在選択しているバリエーションに割引前価格)があるか?

を判別しています。

存在していれば0より大きいので、if文の中の処理が実行されます。

{% assign float_compare_at_price = current_variant.compare_at_price | times: 1.0 %} 

①・・・float_compare_at_priceと名付ける変数に、current_variant.compare_at_price(現在選択している商品のバリエーションの割引前価格)に1.0掛けた数値を代入。

仮に、

販売価格が900円で、割引前価格が1,000円とする。→出てほしい割引率表記は「10%」

{% assign per_sale = current_variant.price |  divided_by: float_compare_at_price %}

②・・・per_saleと名付ける変数に、current_variant.price(現在選択している商品のバリエーションの販売価格)を①で宣言したfloat_compare_at_price変数の数値で割った数を代入。

仮の例で計算するなら、

900 ÷ 1000 = 0.9

per_sale変数には0.9が代入される。

{% assign float_per_off = 1 | minus: per_sale %}

③・・・float_per_offと名付ける変数に、1マイナス②で宣言したper_sale変数の数値を代入。

仮の例で計算するなら、

1 - 0.9 = 0.1

float_per_off変数に0.1(つまり10%)が代入される。

{% assign per_off = float_per_off | times: 100  | round %} 

④・・・per_offと名付ける変数に、③で宣言したfloat_per_off変数の数値を100倍して、かつ小数点がでたとき、もっとも近い整数に丸める。

仮の例で計算するなら、

0.1 × 100 = 10

 <span style="
    background: #ee7676;
    color: #fff;
    padding: 0 3px;">{{ per_off }}%OFF</span>

⑤最後に、HTMLタグの中に④で宣言したper_off変数を{{ }}で出力。

これで割引率が、「10%OFF」と表示されます。

ラベル形や色は、お好みでcssでデザインしてください。

(補足)Shopifyチートシートの紹介

Shopifyで使用されるliquidテンプレートやオブジェクト名、オブジェクトのプロパティ名を即確認する際はここが便利です!

Shopify Cheat Sheet

https://www.shopify.com/partners/shopify-cheat-sheet

Webサイト制作を依頼したい方へ

PRYTHM WORKS(プリズムワークス)は、東京都墨田区、東京スカイツリーのふもとにあるWebコンテンツ制作事務所です。

華々しいおしゃれなECサイトをはじめ、アンダーグラウンドな案件まで幅広くご依頼をいただき、どんな案件でも真心・丁寧・楽しくを理念に掲げて制作しております!

作りたいサービスはあるけど、まずは費用感が知りたい!という方も、まずはお問い合わせください!

mail@prytymworks.tokyo

PRYTHM WORKSが手掛ける仕事の一部をご紹介します。

制作のご依頼者様用 費用かんたんお見積もりフォーム

おそらく本記事を読まれるのは、制作の現場の、法人またはフリーの、プロデューサーの方、ディレクターの方、エンジニアの方がほとんどかと存じます。
いつもおつかれさまです!そして本記事をお読みいただきありがとうございます。
紹介した記事の内容について、またはその他制作のご依頼について、以下のフォームより簡易お見積もりができます!
試算だけならフォーム送信しなくてもできますので、ぜひ試しにいかがでしょう?

お仕事をご希望の制作者様用 お問合せフォーム

また、まずはライトなご相談から…ということであれば、こちらのコンタクトフォームからお気軽にどうぞ!ご縁を大切にしてご返信いたします!

    タイトルとURLをコピーしました