アプリなしで商品の割引率を表示する方法を解説します！
コード自体そこまで難しくなく該当箇所に記載するだけで表示できます。
- 割引率の表示
- 割引していない商品は非表示
顧客の購買意欲も促進できるかと思うのでぜひ参考にして実装してみてください！！
割引率を表示するコード
表示イメージ
表示はこのようになります（80%OFFや62%OFFの部分）
コードの解説
条件分岐
分かりやすいようざっくりと解説します（正確な情報は公式のドキュメントにてご確認を） 条件分岐（if文）を使用してセール時のみ表示させるように制御しています
- セール前の価格→ product.compare_at_price
- 現在の価格→ product.price
- 商品が購入可能かどうか→ product.available
※公式ドキュメントの各プロパティにとべます
00%OFFの表示の計算
mathフィルターを使って計算をしています。
例
product.compare_at_price（セール前価格） → 1000円
product.price（セール価格） → 500円
フィルターは左から順番に適用されていくので下記順番で計算していきます。
①(minus) 1000円 - 500円
②(times) 500円 * 100.0
③(divided_by) 50000円 / 1000円
④(round) 50を四捨五入
Dawn(10.0.0)だとどこに記述すればいい？
※ver10.0でしか検証してないので他のバージョンは記載箇所が違う場合がありますsnippets>card-product.liquid
「スニペット」フォルダの「card-product.liquid」に記述します。
201行目に下記コードを貼り付けます
※productオブジェクトはcard_product（変数）に格納されてます。
こんな感じで表示されます！
まとめ
割引率の表示について解説しました！
表示されない場合はproductのオブジェクトを読み込んでないのが原因だと思います。
（商品ページとかだとコピペで表示されます）
あとmathフィルターは価格の計算の際によく使いますのでぜひ覚えておくといいと思います。
