Shopify特定コレクション商品一覧に「ディスカウント前後の価格」と「割引率」を表示させる方法について解説します。
本サイトでは以前、自作で「特定コレクションの商品一覧」を作成する手順を、2回に分けて紹介しました。
Shopify 自作で「商品一覧」を作る！カスタマイズ画面で簡単に指定できるスキーマ設定
Shopify 自作で「商品一覧」を作る！HTMLとLiquidの書き方を解説
今回は補足として、商品一覧に「ディスカウント前後の価格」と「割引率」を表示させる方法について解説します。
メリット
商品一覧に「ディスカウント前後の価格」と「割引率」を表示させる最大のメリットは、顧客にお得感を際立たせる事だと思います。
また、割引後の価格と一緒に表示されることで、他の商品や店舗との価格比較がしやすく、選ばれやすくなるというメリットもあります。
割引率を明示する事で、顧客に対して信頼感を与え、購入を促進するメリットもあります。
事前におさえておきたいLiquidオブジェクト
まずは、価格にまつわるLiquidオブジェクトをおさえておきましょう。
product.available：購入可能がどうか
product.compare_at_price：ディスカウント前の価格
product.price：価格。もしディスカウントされているのであれば、ディスカウント後の価格
条件分岐
以下のように条件分岐します。
購入可能かどうか（在庫があるか、どうか）
product.availableを用いて条件分岐。
●購入可能：価格を表示
●購入不可：「SOLD OUT」を表示
ディスカウント前の価格があるか、どうか
product.compare_at_priceを用いて条件分岐。
●ある：ディスカウント前の価格は取り消し線を引く。隣にディスカウント価格を表示
●ない：通常価格を表示
サンプルコード
以下は、上述した条件分岐を用いたサンプルコードです。
{% if product.available %} //購入可能なら
{% if product.compare_at_price %} //ディスカウント前の価格があるなら
<p><span style="text-decoration: line-through;">{{ product.compare_at_price | money }}</span> {{ product.price | money }} {{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round }}%OFFか</p>
{% else %} //ディスカウント価格がなければ
<p>{{ product.price | money }}</p>
{% endif %}
{% else %} //購入できなければ
<p>SOLD OUT</p>
{% endif %}
{{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by:product.compare_at_price | round }}を用いて割引率を計算しています。
ちょっと難しいLiquidコードに見えますが、数式と思えば簡単。最後のroundは、四捨五入した値(整数)を返すMath filterです。
以上、商品一覧に「ディスカウント前後の価格」と「割引率」を表示させる方法について解説しました。
