【Shopify】アプリなしでカート内の合計金額で送料無料まであと〇〇円！の表示をする！

ECサイトでよくある「注文金額〇〇円で送料無料！」の表示。

以下のコードで完了！

アプリでこれを実装することも可能だが、以下のコードで実装できます！

{%- endif -%}
  <p class="announcement-bar__message h5">
    {%- assign free_shipping_fee = 1000000 -%}
    {% if cart.total_price == 0 %}
    <span>注文合計10,000円で送料無料</span>
    {% elsif cart.total_price < free_shipping_fee %}
    <span>送料無料まであと{{ free_shipping_fee | minus: cart.total_price | money_without_currency }}円</span>
    {% else %}
    <span>只今、カート内の商品を送料無料で注文できます！</span>
    {% endif %}
  </p>
{%- if block.settings.link != blank -%}

解説

{% if cart.total_price == 0 %}

で、カートに何も入っていないときの表示を出します。

{% elsif cart.total_price < free_shipping_fee %}

で、商品がカートにはいっている&カートに入っている商品が10,000円未満のときの表示を出します。

{% else %}

で、上記２つ以外の時の条件なので、

カートに入っている商品が10,000円以上のときの表示を出します。

（補足）liquidでの四則演算や変数の宣言方法

shopifyで計算をするときは、
{{計算したい対象 | コマンド | コマンド }}とする
四則演算のコマンドは
100足す

plus:100

100引く

minus:100

100倍する

times:100

100で割る

divided_by:100

他にもround、floorなどがあるようです！

上記計算のコマンドは横に連結して並べることができます。

今回紹介したコード内での例は、

{{ free_shipping_fee | minus: cart.total_price | money_without_currency }}

の部分です。

| minus: cart.total_price

で、「cart.total.price（カート内の合計金額）でマイナスした値を表示してね」と命令を出しており、

| money_without_currency

で、「ストア内での表示通貨で換算して表示してね（日本円なら￥マークも数値の頭に）」

勘の良い方はこれを見てお気づきかもしれませんが、liquidの四則演算は、「計算式」というより、「表示形式」の選択をしているニュアンスが強いです！

なので、複雑な計算をするには不向きです！できなくはなさそうですが、直感的に記述できず、冗長なコードになりそうです。