今回の目的

ShopifyのDebutテーマでは、管理画面で商品価格と割引前価格を設定すると価格が割引価格として表示されます。

確かにこれでセール価格になったんだなというのは見た目でわかりますが、どれくらい価格が割引になったかはわかりづらいです。
今回はここにLiquidでOFF率を入れてみます。

LiquidでOFF率を加える

これは、商品詳細の話ですのでsectionディレクトリのproduct-template.liquidを使います。

そして、product-template.liquidで価格について呼び出しているのはこの部分ですね。chromeの検証でclass名とかから探すと見つけやすいです。

<div class="product__price">
 {% include 'product-price', variant: current_variant, show_vendor: section.settings.show_vendor %}
</div>

includeを利用しているのでsnippetディレクトリにあるproduct-price.liquidで価格についての情報があることがわかります。

product-price.liquidでは、

価格の情報をここに入れていました。liquidタグは、正直あまり使わなくてもよい気がします。

{%- liquid
  if variant.title
    assign compare_at_price = variant.compare_at_price
    assign price = variant.price
    assign available = variant.available
  else
    assign compare_at_price = 1999
    assign price = 1999
    assign available = true
  endif

  assign money_price = price | money
-%}

￥マークを先頭につけたくない場合は price | money_without_currencyを使うと良いでしょう。

ここからが本題です。
off率を作成していきます。これを上のliquidタグの下で作成してください。
変数は自分が適当に決めたものなのであんまり気にしないでください。

{% assign float_compare_at_price = compare_at_price | times: 1.0 %} 
{% assign per_sale = price |  divided_by: float_compare_at_price %}
{% assign float_per_off = 1 | minus: per_sale %}
{% assign per_off = float_per_off | times: 100  | round %}

まず割引前価格(compare_at_price)に1.0を掛けて小数にします。roundフィルターで小数を整数に丸めるためにしないといけません。

その後価格(price)を割引前価格(float_compare_at_price)で割ります.

1 - per_sale　をすることで小数のoff率が出ます。

最後にper_offに100をかけて整数の%で表せるようにし、roundで小数を整数に丸めます。

liquid言語のフィルターとかはこちらから見るとわかりやすいと思います。

あとはセール価格について表示しているところに先ほど作成した変数を入れてあげると、

    <div class="price__sale">
      <dt>
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
      </dt>
      <dd>
        <span class="price-item price-item--sale" data-sale-price>
          {{ money_price }}
        </span>
        {{ per_off }}% OFF!!
      </dd>
      <dt>
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
      </dt>
      <dd>
        <s class="price-item price-item--regular" data-regular-price>
          {{ compare_at_price | money }}
        </s>
      </dd>
    </div>

このようにoff率を表示させることができます！

まとめ

今回はliquidで手動でOFF率を表示させてみました。
あまり大した内容の記事ではないかもしれませんがどこかの誰かに役立ってくれれば嬉しいです。

何か間違っていることとか、もっとこうした方が良いとかありましたら是非是非コメントお待ちしております。