【アプリ不要】Shopifyでクール便追加料金を自動で課金する方法

【アプリ不要】Shopifyでクール便追加料金を自動で課金する方法

Shopifyでの決済時に、クール便の追加料金を自動で課金させたくありませんか?

この記事では、有料アプリなどは使用せずにShopify標準機能での配送料金とは別に、クール便の追加配送料金を自動で課金する方法を紹介します。

初回の設定のみなので、この機会にランニングコストを削減しましょう!

※当記事の内容を利用する場合は、利用規約が適用されます。

CONTENTS

完成形はこちら

カート内に存在するクール便対象商品に応じて、クール便送料が自動で追加される動作状況を示します。
クール便対象商品をカートから削除した場合には、クール便送料も自動で削除される仕組みです。

クール便送料が自動で追加される動作状況

カスタマイズの大まかな手順

カスタマイズ内容の大枠を3つに分けて示します。

STEP
クール便送料の商品情報を登録

クール対象商品がカートにある場合に、自動で追加されるクール便送料を商品情報として登録します。

STEP
カートページでオプションに応じて課金するカスタマイズ

カスタマイズの土台として、Shopify公式のこちらのページに紹介されているギフト包装のオプションに応じてカート画面で課金するカスタマイズを導入します。

STEP
上記カスタマイズを、クール便対象商品用に改造

上記のカスタマイズを、クール便対象商品(例として”cool”タグを付与)がカートにある場合に、STEP 1で作成したクール便送料分の商品がカートに追加されるように改造します。

事項以降に、カスタマイズの詳細を説明します。

クール便送料の商品情報を登録

ここでは、クール便送料として追加で徴収したい配送料金を商品の形で作成します。
ポイントとしては、「在庫を追跡する」からチェックを外すことで、回数無制限で使い回すことが可能です。

カートページでオプションに応じて課金するカスタマイズ

カスタマイズの土台として、Shopify公式のこちらのページに紹介されているギフト包装のオプションに応じてカート画面で課金するカスタマイズを導入します。

動作の原理は、カートページでチェックボックスをクリックする、つまりお客様がギフト梱包を希望された場合にギフトラッピングの商品が自動でカートに追加される仕組みです。

これ以降は、上記リンク先の設定が完了した前提で説明を進めます。

上記カスタマイズを、クール便対象商品用に改造

ここからは、STEP 2で追加したカスタマイズを、クール便対象商品(例として”cool”タグを付与)がカートにある場合に、STEP 1で作成したクール便送料分の商品がカートに追加されるように改造します。

改造する部分は大きく分けて2箇所です。

クール便対象商品の有無を判定

STEP 2で追加したカスタマイズの冒頭に、下記コードを追加します。

{% assign cool-flag1 = false %}
{% assign cool-flag2 = false %}
{% assign cool-total = false %}
{% assign array = '' %}
{% assign items_in_cart = 0 %}
{% for item in cart.items %}
  {% for tag in item.product.tags %}
    {% if tag contains 'cool' %}
      {% assign array = array | append: tag | append: ',' %}
    {% endif %}
    {% if tag contains 'cool1' %}
      {% assign cool-flag1 = true %}
    {% endif %}
    {% if tag contains 'cool2' %}
      {% assign cool-flag2 = true %}
    {% endif %}
  {% endfor %}
{% endfor %}

{% if cool-flag1 == true or cool-flag2 == true %}
  {% assign cool-total = true %}
  {% assign items_in_cart = 1 %}
  {% if cool-flag1 == true and cool-flag2 == true %}
    {% assign items_in_cart = 2 %}
  {% endif %}
{% endif %}

ここら、上記コードの詳細を解説します。

{% assign cool-flag1 = false %}
{% assign cool-flag2 = false %}
{% assign cool-total = false %}

クール便対象商品の有無に応じて変化させる変数です。初期値はfalse(クール便対象商品なし)とします。
冷凍、冷蔵それぞれ個別にクール便送料を追加する想定でcool-flag1及びcool-flag2を準備しています。

{% for item in cart.items %}

現在カート内に入っている商品全てに対して繰り返し処理を実施します。

{% for tag in item.product.tags %}
    {% if tag contains 'cool' %}
      {% assign array = array | append: tag | append: ',' %}
    {% endif %}
    {% if tag contains 'cool1' %}
      {% assign cool-flag1 = true %}
    {% endif %}
    {% if tag contains 'cool2' %}
      {% assign cool-flag2 = true %}
    {% endif %}
  {% endfor %}

それぞれの商品に付与されたタグを取り出し、それが”cool”に該当した場合にカンマ区切りでarrayに追加します。
cool-flagをtrue(クール便対象商品あり)に変更します。
※クール便対象商品には事前にタグ”cool1″または”cool2″を付与している前提です。

{% if cool-flag1 == true or cool-flag2 == true %}
  {% assign cool-total = true %}
  {% assign items_in_cart = 1 %}
  {% if cool-flag1 == true and cool-flag2 == true %}
    {% assign items_in_cart = 2 %}
  {% endif %}
{% endif %}

cool-flag1またはcool-flag2どちらか一方でもtrueの場合に、cool-totalをtrueとします。
加えて、クール便対象商品の温度区分に応じてitems_in_cartの数を調整します。

クール便対象商品がカートに存在する場合に発動

ここからは、STEP 2で追加したカスタマイズを書き換えていきます。

下記部分を、

{% if cart.attributes.gift-wrapping %}
    checked="checked"
{% endif %}

次のように書き換えます。

{% if cool-total == true %}
    checked="checked"
{% endif %}

上記の変更は、cool-total == true(クール便対象商品あり)の場合に、チェックマークをチェックすることを意味しています。
そして、そのチェックマークの有無をトリガにしてお客様がギフト梱包を希望された場合にギフトラッピングの商品(今回の場合はクール便送料の商品情報)が自動でカートに追加される仕組みを流用しています。

 {% assign items_in_cart = cart.item_count | minus:gift_wraps_in_cart %}

さらに、<script>タグ前の上記コードを削除します。
クール便対象商品の温度区分に応じてitems_in_cartの数を調整済みのため、こちらは不要となります。

次に、下記部分を、

 // If we have no gift-wrap item in the cart but our gift-wrapping cart attribute has been set.
  {% elsif gift_wraps_in_cart == 0 and cart.attributes.gift-wrapping != blank %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });

次のように書き換えます。

// If we have no gift-wrap item in the cart but our gift-wrapping cart attribute has been set.
    {% elsif gift_wraps_in_cart == 0 and cool-total != false %}
    document.addEventListener("DOMContentLoaded", function(){
      Shopify.Cart.GiftWrap.set();
    });

最後に、下記部分を、

      if (event.target.checked) {
        Shopify.Cart.GiftWrap.set();
      } else {
        Shopify.Cart.GiftWrap.remove();
      }

次のように書き換えます。

if (event.target.checked) {
          {% if cool-flag1 == true or cool-flag2 == true %}
          Shopify.Cart.GiftWrap.set();
          console.log("set");
      {% endif %}
        } else {
          Shopify.Cart.GiftWrap.remove();
          console.log("remove");
        }

動作状況のデモ

カート内に存在するクール便対象商品に応じて、クール便送料の商品が自動で追加される動作状況を示します。

クール便対象商品が存在しない場合

この場合は、上記のコードにおけるcool-total == false(クール便対象商品なし)のため、動作は発生しません。

クール便対象商品が存在しない場合は、動作しません。

クール便対象商品が1つの場合

この場合は、上記のコードにおけるcool-total == true(クール便対象商品あり)となり、リロードされた後にクール便送料の商品が自動で追加されます。
※クール便送料の数量セレクター・削除ボタンは、別途のLiquidカスタマイズで非表示としてコメントを表示させています。

クール便対象商品に応じて、クール便送料の商品が自動で追加されます。

クール便対象商品が2つの場合

この場合も、上記のコードにおけるcool-total == true(クール便対象商品あり)となり動作します。
cool-flag1及びcool-flag2がtrueになることで、クール便送料の商品が自動で2個追加されます。

クール便対象商品に応じて、クール便送料の商品が自動で追加されます。

まとめ

この記事では、有料アプリは使用せずに初回のLiquidカスタマイズのみでクール便の追加配送料金を自動で課金する方法を紹介しました。

Liquidでストアをカスタマイズすることで、ランニングコストを削減しながら機能を拡張することが可能となります。

紹介内容について、ご不明な点がありましたらお気軽にご連絡ください。

SOUKLについて
運用を見据えた使いやすいEC

Shopify構築・カスタマイズ承ります。

SOUKLでは、Shopify専門のエンジニアが
お客様に直接対応させていただきます。
中間マージンが発生しない、コストを抑えた構築が強みです。

CONTENTS