記事内に商品プロモーションを含む場合があります
送料無料まであと◯円を表示させる
今回は送料無料まであと○円を表示させる方法、コードについてご紹介します！
意外と簡単にできるので、おすすめです！
目次
完成のコードはこちら
<div class="shippingFeeBox">
{%- assign total_price = cart.total_price -%}
{%- assign total_price = total_price | plus: 0 -%}
{%- assign fee = settings.min_price | times: 100 -%}
{%- if cart.total_price == 0 -%}
<p class="shippingFeeBox_text">{{ settings.min_price }}円で送料無料となります。</p>
{%- else -%}
{%- if total_price < fee -%}
<p class="shippingFeeBox_text">あと{{ fee | minus: total_price | money_without_currency }}円で送料無料となります。</p>
{%- else -%}
<p class="shippingFeeBox_text">カート内の商品を無料で注文できます</p>
{%- endif -%}
{%- endif -%}
</div>
{
"name": "送料無料金額設定",
"settings": [
{
"type": "text",
"id": "min_price",
"label": "送料無料の金額",
"info": "5000 のように半角で入力してください"
}
]
}
コードの解説
表示させる部分
total_price にいくらで送料無料にするかを設定する。
total_price を数字にするために、plus: 0 をする。
fee：あといくらの計算用。 times: 100 で計算できるよう数値を合わせる。
<div class="shippingFeeBox">
{%- assign total_price = cart.total_price -%}
{%- assign total_price = total_price | plus: 0 -%}
{%- assign fee = settings.min_price | times: 100 -%}
<p class="shippingFeeBox_text">あと{{ fee | minus: total_price | money_without_currency }}円で送料無料となります。</p>
</div>
これで表示としては、あと○○円で送料無料、のメッセージが表示できます！
もうちょっとバリエーションを増やしてみる
①カートに商品が入っている時と入っていない時で表示を分ける
<div class="shippingFeeBox">
{%- assign total_price = cart.total_price -%}
{%- assign total_price = total_price | plus: 0 -%}
{%- assign fee = settings.min_price | times: 100 -%}
{%- if cart.total_price == 0 -%}
<p class="shippingFeeBox_text">{{ settings.min_price }}円で送料無料となります。</p>
{%- else -%}
{%- if total_price < fee -%}
<p class="shippingFeeBox_text">あと{{ fee | minus: total_price | money_without_currency }}円で送料無料となります。</p>
{%- else -%}
<p class="shippingFeeBox_text">カート内の商品を無料で注文できます</p>
{%- endif -%}
{%- endif -%}
</div>
②どこでも同じような表記を表示させるために snippet化させる
下記を、settings_shema.jsonに記載してください。
{
"name": "送料無料金額設定",
"settings": [
{
"type": "text",
"id": "min_price",
"label": "送料無料の金額",
"info": "5000 のように半角で入力してください"
}
]
}
