Shopifyのカートにお届け指定日の項目を追加する方法

2020.07.31

Shopifyのカートにお届け指定日の項目を追加する方法

sakurai

2020.07.31

こんにちは櫻井です。
今日は商品ページで商品一つずつにお届け指定日を選択してもらうのではなく、カートページで全商品をまとめてお届け日を選択してもらう方法を説明したいと思います。

cart-template.liquid

まずはカートページから編集していきましょう。
Sectionsフォルダからcart-template.liquidを開いてください。
お届け日の選択項目を表示させたい箇所に以下のソースを貼ってください。
この段階ではまだカートページにinput枠が出現するだけです。

<div style="width:300px; clear:both;">
   <p>
     <label for="date">お届け日を指定してください。:</label>
     <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" placeholder="{{ "now" | date: "%s" | plus: 86400 | date: "%Y/%m/%d" }}"/>
   </p>
</div>

上のソースを少し解説します。
inputのnameに入っているattributes[date]とvalueに入っている{{ cart.attributes.date }}は会計後の注文完了メールに値を表示させるためのものです。placeholderの中の{{ “now” | date: “%s” | plus: 86400 | date: “%Y/%m/%d” }}には明日の年月日が入ります。
より細かく知りたい方はこの辺りを読んでもらえればわかるかと思います。英語なので大変ですが。。
https://shopify.dev/docs/themes/liquid/reference/objects/cart
https://shopify.github.io/liquid/filters/date/

theme.liquid

次に出現したinput枠にカレンダーから日付を選択できる機能をつけていきます。今回はjQuery UIを使います。
Layoutフォルダからtheme.liquidを開いてください。
まずはCSSをhead内に読み込ませます。
以下のソースを書き加えてください。

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}

次にJSを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript" defer="defer"></script>
// 日本語に対応しない場合は以下は不要
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js" type="text/javascript" defer="defer"></script>

JSを書き込むときは少し注意してほしいのがデフォルトで読み込まレテいるJSの後に書き込むことです。デフォルトで読み込んでいるものの中にjqueryを読み込ませているものがあるようなのでこれより前でJSを読み込ませるとjQuery UIが動かなくなってしまいます。

JS

必要なJSとCSSは読み込ませることができたので次はJSを記述します。
ファイル名はなんでもいいので新たにJSファイルを作成し
以下のソースを記述してください。

function datePicker() {
  $.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
  // ↑このソースは日本語の対応が必要ない場合は不要です。
  $("#date").datepicker({
    minDate: +1,
    maxDate: +2
  });
}
datePicker()

記述したらshopifyでJSを読み込ませます。
テーマのソースの編集画面を開き、Assetsフォルダから「新しいassetを追加する」をクリックして先ほどのソースを書き加えたJSを追加します。
次に再びtheme.liquidを開きJSが読み込まれている箇所の一番下に以下のソースを追加してください。

<script src="{{ '〇〇.js' | asset_url }}" defer="defer"></script>

これでカートページにカレンダー機能付きのお届け指定日の項目を追加できました。
しかしこれだけだとメールにお届け指定日が記載されません。
なので次はメールと注文管理を編集していきます。

チェックアウト

まずは注文管理からです。設定からチェックアウトをクリックしてください。
下にスクロールしていくと「注文処理」のところに「追加スクリプト」という項目があります。そこに以下のソースを追加してください。

{{ attributes.date }}

これで注文管理に日付が表示されます。次はメールです。

メール

メールは設定から通知をクリックし、注文管理の「注文の確認」をクリックしてください。
お届け日を追加したい場所に以下のソースを加えてください。

{{ attributes.date }}

まとめ

今回はお届け指定日の項目をカートページに追加する方法を説明しました。最後のテスト配信でダミーでいいから日付が入ってくれるといいんですがそこまではわかりませんでしたが。。
基本的にメールなら箇所でも{{ attributes.date }}でお客さんが入力した日付が取れるはずなので他のメールで使いたい方は試してみてください。