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

PRYTHMWORKS Shopify
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 %}

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

カートに入っている商品が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の四則演算は、「計算式」というより、「表示形式」の選択をしているニュアンスが強いです!

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

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

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

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

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

mail@prytymworks.tokyo

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

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

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

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

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

    ShopifyでのECサイト制作を行うならPRYTHMWORKS(プリズムワークス)へ

    ShopifyでのECサイト制作を外注しようとお考えの方は、PRYTHMWORKS(プリズムワークス)にご依頼ください。高品質なWebサイト制作で、お客様のビジネス成長を支援する会社です。Shopifyを使ったECサイト制作に力を入れており、売上向上に貢献するECサイト構築を代行いたします。豊富な経験と実績にもとづき、お客様のニーズに最適なECサイトを構築しますので、費用相場や制作事例など、気になることがございましたらお気軽にお問い合わせください。移行のご相談も承っております。

    事業内容EC/Webサイトの構築、管理保守
    代表社員吉川直人
    法人事務所所在地〒150-0001
    東京都渋谷区神宮前六丁目23番4号桑野ビル2階
    設立日2023年(令和5年)7月3日
    沿革2020年(令和2年)10月
    個人事業主PRYTHMWORKS事業開始
    2023年(令和5年)7月
    合同会社PRYTHMWORKS設立

    会社に関するご連絡は以下よりお願いいたします。

    mail@prytymworks.tokyo


    お問い合わせ用LINEはこちらからどうぞ!

    お問い合わせ用LINEはこちらからどうぞ!

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