[Shopify] 配送日指定を実装する方法（Debutテーマ）

日本のマーチャントがShopifyを利用する際に、デフォルトで日本向けに足りない機能のカスタマイズ方法について紹介していきます。

Shopifyの無料体験をはじめる

Shopifyにはデフォルトで配送日時指定の機能がない

Shopifyの機能には、配送日時指定（お届け日時指定）の機能がデフォルトでついていません。

よって、配送日時指定のアプリを入れる必要がありますが、有料のものがほとんどです。年間にするとそれなりのコストになるため、今回は自分でコードを編集して実装した時の方法をまとめていきます。

時間の指定を実装することも可能ですが、今回は「配送日」のみの指定方法についてまとめます。

時間の指定は以下を参照ください。

[Shopify] 配送時間指定を無料で実装する（Debutテーマ）日本のマーチャントがShopifyを利用する際に、デフォルトで日本向けに足りない機能のカスタマイズ方法について紹介していきます。 ...

Liquidコードを編集する際には、バックアップを必ず行い、テスト環境で確認を行うなど、自己責任のもとに行ってください。万が一不都合等が起きた場合でも当方は責任を負いかねますのでご注意ください。

Shopifyで配送日指定の機能を実装する方法

Cart attributesという、カートに独自の入力項目を追加するためのフィールドを使用します。

Shopifyテーマカスタマイズの三種の神器：Cart attributes、Line Item Property、Customer noteを使いこなそう！

Cart attributesを使用すると、カート画面に入力項目を追加でき、その値を注文完了画面に追加したり、メール本文に表示したり、管理画面の注文詳細から参照することが可能となります。

通常のECサイトはその先のお届け指定などの箇所で選択すると思いますが、Shopifyの通常のプランで入力項目を追加できるのはショッピングカート画面のみです。
※Shopify Plusであれば追加可能

カート画面に追加する配送日指定のUIを作成する

まず画面に挿入するUIを作成します。

以下、公式のチュートリアルにも配送日ピッカーを追加する方法が（英語で）記載されていますが、

Add a delivery date picker to your cart

こちらはJQueryUIを使用しているため、今回はこちらは使用しません。

代わりに今回はJQueryを使わずに軽量な「Flatpickr」を使用します。

配送日指定のSnippetを作成する

まず新規ファイルで、名前は何でも良いですが「cart-deliverydate.liquid」としてsnippetsフォルダ以下に作成します。

まずFlatpickrのCSSとJSを読み込み、inputタグにCart Attributeを指定します。

Getting Started – flatpickr

{{ '//cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css' | stylesheet_tag }}

<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.js"></script>

<input class="flatpickr" name="attributes[お届け希望日]" type="text" placeholder="指定なし" readonly="readonly" />

<script>
    flatpickr('.flatpickr');
</script>

配送日指定のUIをカート画面に追加する

次に、sectionsフォルダ以下にある、「cart-template.liquid」ファイルを編集します。

挿入箇所も自由ですが、「ご購入手続きへ」ボタンを押す前に選択してもらいたいため、その上に設置します。

<div class="cart__shipping rte">{{ taxes_shipping_checkout }}</div>

と

<div class="cart__buttons-container">

の間に、

{% render 'cart-deliverydate' %}

と先ほど追加したファイル名の拡張子より前までのファイル名を記載して読み込みます。

※上記はDebutテーマの場合です。他のテーマの場合は挿入したい箇所に入れ、CSSで見た目や位置を調整してください。

これでとりあえずは表示されました。

Flatpickrを日本語化する

次にFlatpickrを日本語化します。検索すると色々出てきますので、公式のライブラリの以下を追加します。

<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>

スクリプトは以下のように書き換えます。

<script>
    flatpickr.localize(flatpickr.l10ns.ja);
    flatpickr('.flatpickr, config);
</script>

これでOK。

Flatpickrの設定を追加する

これだけだと全部の日付が選択できてしまうため、

何日後から選択できるようにするのか
何日後まで選択できるようにするのか
選択できないようにする必要がある日があるか（年末年始や祝日対応など）

などを確認の上、設定する必要があります。

Flatpickrはさまざまな設定が用意されており、大抵のことは設定が可能ですが、以下のマニュアルに従って必要な値を設定します。

ここでは例として、今日から30日後まで選択できるようにする場合は、以下のようになります。

<script>
    flatpickr.localize(flatpickr.l10ns.ja);

    const config = {
        minDate: "today",
        maxDate: new Date().fp_incr(30), // 今から30日後
    }

    flatpickr('.flatpickr', config);
</script>

この設定は公式のマニュアルにデモ付きで記載されています。

Examples – flatpickr

以下のような感じで、指定した日が選択できなくなります。（以下は土日も選べなくしています）

さらに、ラベルをつけたり見た目もCSSなどで調整します。

日付のフォーマットを変更したい場合は、JavaScriptに以下を追加します。

dateFormat: "Y/m/d",

Flatpickrのクリアボタンを追加する

ただ日付を一旦選択すると、やっぱり指定しないようにしたい場合、クリアできません。

そこで、以下の公式にもあるように、クリアボタンを追加してみます。（ソースは以下を参照）

Examples – flatpickr

日本語の場合のみ表示させたい場合

海外にも販売している場合で、配送時間指定を日本のみにしたい場合は（厳密には海外の人でも日本語にすれば選べてしまいますが）、先ほどの「cart-deliverydate.liquid」を編集し、全体をif文で囲います。（以下は見た目調整のために多少タグとスタイルを追記しています）

{%- if request.locale.name == "日本語" -%}
〜〜〜
{%- endif -%}

これで日本語を選択しているときのみ表示されます。

{%- if request.path == "/cart" -%}
〜〜〜
{%- endif -%}

でもOKです。

受注詳細画面での確認方法

受注詳細画面では、以下のメモ欄の下の「追加の詳細」内に値が入ります。

Shopifyで配送日指定をメール本文に追加するには

お客さんが選択した配送日を、メールに表示させることも可能です。お客様が受け取る「注文確認メール」に追加したい場合は、

設定→通知→注文の確認

を編集し、例として一番下の配送方法の下に追加したい場合は、「配送方法」のtableタグの下に、以下のコードを追記します。（Cart attributeに配送日以外の項目も使用している場合は全て出力されます）

{% if attributes["配送日指定"] %}
<table class="row">
  <tr>
    <td class="customer-info__item">
      {% for attribute in attributes %}
      <h4>{{ attribute | first }}</h4>
      <p>
      {{ attribute | last }}<br>
      </p>
      {% endfor %}
    </td>
  </tr>
</table>
{% endif %}

これでメールにも表示されます。もちろん、他の配送完了メールなどにも追加可能です。

以上です！