Liquidの編集だけで配送日時指定を実装する

この記事では、Shopifyストアのカートページで配送日時を選択することができるようにします。

Shopify developers に記載されている方法をアレンジして実装します。アプリを使うと毎月お金が発生してしまいますが、少しLiquidを編集するだけで実装することができるので、ランニングコストを抑えたい方にはおすすめの方法です。

今回、HTML・CSSについての解説やLiquidの細かい説明は省いていきますので、ご了承ください。

それでは頑張っていきましょう！

 

完成形の確認

まずはどのような仕様になるのかを確認しましょう。

カートページの「ご購入手続きへ」ボタンの上に「配送日時を指定する」という設定項目が表示されています。

　

 

「日にちを指定してください」をクリックすると、日付を選択することができるカレンダーが表示されます。ユーザーに任意の日時を指定してもらうことができます。

 

「時間を指定しない」となっているドロップダウンメニューで配送時間を指定してもらうことができます。

 

配送日時を指定した状態で、「ご購入手続きへ」に進み決済を完了すると、ストア管理画面の「注文管理」にユーザーが選択した日時の情報が反映された注文情報が表示されます。

 

今回の記事では、このような配送日時指定機能をLiquid編集で実装していきます。

テーマは「Debut」を使用します。
他のテーマでも今回紹介するルールさえ守って編集していただければ、問題なく実装可能です。

自分で設定するのが難しそうだなという方は、弊社のメンターサービスにてレクチャーも承っておりますのでご活用ください。

それでは順番に実装していきましょう。

 

jQueryを導入する

まず、日にちの指定で使用するカレンダーを使うためにテーマにjQueryを導入します。

ストアの管理画面にログインし「オンラインストア＞任意のテーマ＞アクション＞コードを編集する」からコードの編集画面に移動します。

 

jQueryの読み込みコードを追記するのはLayoutディレクトリのtheme.liquidファイルです。theme.liquidファイルを開きます。

 

theme.liquidには、テーマの大枠の部分が書かれています。
jQueryの読み込みコードはtheme.liquidファイルに書かれているheadタグ内に記述します。
</head>の前に以下のjQueryを読み込むコードを貼り付けてください。

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}

 

貼り付けたら、一旦コードを保存しておきます。

 

jQueryのカレンダーをカートページに表示させる

配送日時指定は、snippetとして作成していきます。snippetとは、Liquid上で簡単にいうと使いまわせる部品のことです。

作成したsnippetは、任意のLiquidファイルで呼び出すことでShopifyストア上にレンダリングすることができます。

 

snippetファイルを作成する

まずは、コードを記述していくSnippetファイルを作成しましょう。
コード編集画面で「Snippets＞新しいsnippetを追加する」から、新規snippetファイルを作成します。
ファイル名は任意のものをつけてください。

 

カレンダーを実装する

snippetファイルを作成したら、ファイルに以下のコードを貼り付けます。下のコードは、Shopify developersのこちらのページから拝借しています。

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>

<div style="width:300px; clear:both;">
  <p>
    <label for="date">Pick a delivery date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    <span style="display:block" class="instructions"> We do not deliver during the week-end.</span>
  </p>
</div>

<script>
  window.onload = function() {
    if (window.jQuery) {
      let $ = window.jQuery;
      $(function() {
        $("#date").datepicker({
          minDate: +1, 
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>

コードを貼り付けたら保存します。

 

カートページのテンプレートでsnippetを呼び出す

作成したsnippetをカートページにレンダリングするため、カートページのテンプレートでsnippetを呼び出します。
「Debut」の場合、カートページのコードは、Templates/cart.liquidファイルで呼ばれている、cart-template.liquidセクションファイルの中に記述されてます。

それでは、このcart-template.liquidの中で先ほど作成したsnippetを呼び出します。
この時snippetは必ず {% form … %} から {% endform %} までの間で呼び出さないといけません。

Shopifyのカート画面の挙動を少し説明すると、formタグ内に書かれた情報が注文管理画面に送られます。例えば、商品種類や注文数、合計金額といった情報もこのformタグの中に記述されています。

よって、これを守らないと注文管理に反映されないので、snippetを呼び出す場所はしっかりと確認しましょう。

 

ここからは「Debut」に基づいて説明していきます。
ストアのプレビュー画面でカートページをみてみます。配送日時指定は「ご購入手続きへ」ボタンの上に表示させたいので、cart-template.liquidファイルでこのボタンを実装しているコードの上で配送日時指定snippetを呼び出したいと思います。

cart-template.liquidファイルのコードを読むと、277行目から287行目が「ご購入手続きへ」ボタンのコードであることがわかりました。そのため、配送日時指定snippetは、277行目の<div class="cart__buttons-container">の上で呼び出します。

 

snippetを呼び出すときは、rendarタグを使用します。

以下のコードで配送日時指定snippetを呼び出します。（ファイル名はご自身でつけたsnippetファイル名にしてください。）

{% render 'snippetのファイル名' %}

 

snippetを呼ぶことができたら、変更を保存します。

プレビューで確認してみましょう。

 

まだスタイルは全然当たっていませんが、カレンダーが表示されるようになりました。

それでは、スタイルを変更していきます。

 

配送日時指定のコードを編集する

作成したsnippetのコードを編集して、完成に近づけていきます。

 

カレンダーを日本語仕様にする

まず、現在の日時指定カレンダーは英語バージョンなので、日本語仕様に変更します。

 

カレンダーはjQueryによって実装されているので、snippet内のscriptタグを編集します。

scriptタグの中を以下のコードに置き換えてください。

  window.onload = function() {
    if (window.jQuery) {
      let $ = window.jQuery;

      $(function() {
        $("#date").datepicker({
          minDate: +1, 
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });

      $.datepicker.setDefaults({
        closeText: "閉じる",
        prevText: "<先月",
        nextText: "来月>",
        currentText: "今月",
        monthNames: [ "1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月" ],
        monthNamesShort: [ "1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月" ],
        dayNames: [ "日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","日曜日" ],
        dayNamesShort: [ "日","月","火","水","木","金","土" ],
        dayNamesMin: [ "日","月","火","水","木","金","土"],
        weekHeader: "週",
        dateFormat: "yy/mm/dd",
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: true,
        yearSuffix: "年"
      });
    }
  }

 

これでカレンダーが日本語になりました。

 

土日の指定も可能する

デフォルトのコードでは、土日の指定がでいない使用になっているので、曜日にかかわらず指定できるようにします。

こちらもjQueryのコードを編集します。
beforeShowDay: $.datepicker.noWeekendsと書いてあるコードが、土日を選択できないようにする設定コードです。このコードを削除します。

 

コードを削除すると、土日も選択可能になりました。

 

指定範囲を設定する

日時を指定できる範囲を設定します。

現在の設定は次の日から2ヶ月先までの中からユーザーが指定することができるように設定されています。

どの部分のコードかというと、minDateとmaxDateと記述された部分です。minDateが+1+1、maxDateが+2Mなので次の日から2ヶ月先までです。MはMonthの略ですね。

今回は、注文日の3日後から3週間後まで指定できるようにしてみます。以下のように書き換えましょう。WはWeekの略です。数字以外の文字が入る場合は、'（クォーテーション）が必要なので注意しましょう。

 

minDate: +3,
maxDate: '+3W'

 

 

コードを保存して、確認します。

 

こちらの記事を執筆しているのが3月5日なので、しっかり3日後から3週間後までが指定できるように変更されています。

 

以上でjQueryに関係するコードの編集は完了です。

 

日付を指定するinputタグを編集する

次に日付を指定するinputタグを編集していきます。name属性を編集し、placeholder属性を設定します。また紐づけられているlabelも英語なので日本語にします。

 

name属性の編集

name属性を編集します。
Shopifyで情報を送信する際に使うname属性の値は少し特徴があります。

Liquidのformタグの中に書かれるinputタグのname属性は〇〇[△△]という書き方をします。
cartのformタグだとattributes[date]という書き方をしてありますが、これは注文管理のattributesという場所にdateという項目名のデータを送信するという意味です。

現在の設定のままで注文が行われると、注文データの中の「メモ＞追加の詳細」の部分に「date」という項目でカレンダーで指定された日付が表示されます。

管理画面で確認する際は日本語の方が良いので、dateとなっている部分を日付に変更します。

<input id="date" type="text" name="attributes[日付]" value="{{ cart.attributes.date }}" />

 

value属性について

value属性は{{ cart.attributes.date }}となっています。

これはliquidのオブジェクトの出力で、inputタグの中で受け取った値を送信するというコードなので、変更しないようにしてください。

 

placeholder属性の追加

次にplaceholder属性を追加します。placeholder属性を追加することで、inputタグの値がからの時の表示を設定することができます。
placeholderには、「日付を指定してください」と表示しておくように設定しておきます。
inputタグを以下のように書き換えましょう。

<input id="date" type="text" name="attributes[日付]" value="{{ cart.attributes.date }}" placeholder="日付を指定してください" />

 

コードの変更を保存し、プレビュー画面で以下のように表示されていればOKです。

 

labelを編集する

labelタグが英語になっているので、日本語に変更します。labelタグの中に書いてある「Pick a delivery date:」を「配送日時を指定する」と書き換えましょう。

 

以上で日付を指定するinputタグの編集は終了です。

 

spanタグを削除する

次にspanタグを削除します。
デフォルトでは、「We do not deliver during the week-end.」という週末の配送はできませんという注意書きになっています。
先ほど、毎日指定できるように編集したのでこのテキストはspanタグごと削除してしまいましょう。

もし注意点がある場合などは、このspanタグのテキストを編集すると良いでしょう。

 

コードを保存し、プレビュー画面でもテキストが削除されていたらOKです。

 

時間指定のドロップダウンを作成する

日付指定が完成したので、次はselectタグを用いて時間指定のドロップダウンメニューを作っていきます。

完成形はこちらです。

 

詳しいドロップダウンメニューの作り方はHTMLの基礎的な知識になるので、ここでの詳しい説明は割愛します。

ドロップダウンメニューは以下のコードで作成します。
ポイントはselectタグのname属性の値です。日付指定のinputタグでも解説した通り、name属性はattributes[〇〇]としなくてはいけません。ここは間違わないようにしましょう。

今回は時間という項目でデータを送信したいので、attributes[時間]としています。
時間の選択肢は、お使いの配送業者に基づいて設定してください。

 

    <select name="attributes[時間]">
      <option value="指定しない">時間を指定しない</option>
      <option value="午前中">午前中</option>
      <option value="14-16時">14-16時</option>
      <option value="16-18時">16-18時</option>
      <option value="18-20時">18-20時</option>
    </select>

 

変更を保存したら、プレビューで確認しましょう。

 

ドロップダウンを実装することができました。

 

CSSでスタイリングする

最後にお使いのレイアウトに合うようにCSSでスタイリングします。レイアウトはテーマによって全くの別物なので、頑張ってコードを編集してみてください。

もし、Debutを使っている方がいれば、最後に紹介するコードでいい感じになると思います。

 

動作の確認

Debutのカートページでいい感じに表示されるように書き換えると、snippetのコード全体は以下のようなります。

CSSについてはあくまでも一例です。もっとこうした方がいいと思うところは書き換えてください。

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>

<div class="date-picker-container">
  <div style="width: 300px;">
    <label for="date">配送日時を指定する</label>
    <input id="date" type="text" name="attributes[日付]" value="{{ cart.attributes.date }}" placeholder="日付を指定してください" style="display: block; width: 100%;"/>
    <select name="attributes[時間]" style="display: block; width: 100%; margin: 10px 0;">
      <option value="指定しない">時間を指定しない</option>
      <option value="午前中">午前中</option>
      <option value="14-16時">14-16時</option>
      <option value="16-18時">16-18時</option>
      <option value="18-20時">18-20時</option>
    </select>
  </div>
</div>

<style>
  .date-picker-container {
    display: flex;
    justify-content: flex-end;
  }
  @media (max-width: 749px) {
    .date-picker-container {
      justify-content: center;
    }
  }
</style>

<script>
  window.onload = function() {
    if (window.jQuery) {
      let $ = window.jQuery;

      $(function() {
        $("#date").datepicker({
          minDate: +1, 
          maxDate: +14
        });
      });

      $.datepicker.setDefaults({
        closeText: "閉じる",
        prevText: "<先月",
        nextText: "来月>",
        currentText: "今月",
        monthNames: [ "1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月" ],
        monthNamesShort: [ "1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月" ],
        dayNames: [ "日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","日曜日" ],
        dayNamesShort: [ "日","月","火","水","木","金","土" ],
        dayNamesMin: [ "日","月","火","水","木","金","土"],
        weekHeader: "週",
        dateFormat: "yy/mm/dd",
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: true,
        yearSuffix: "年"
      });
    }
  }
</script>

 

正常に配送日時の指定が注文管理に送られるか、確認してみましょう。
日付と時間を指定して、テスト注文を行います。

 

正常にデータが送信されています。

 

以上で配送日時指定の実装は完了です。

お疲れ様でした！

 

まとめ

今回の記事では、Liquidファイルの編集だけで配送日時指定を実装しました。アプリを使うと毎月のランニングコストがかかってしまうので、Liquidの編集も検討されてください。

もし、ご自身での設定が難しければ弊社のメンターサービスなどをご活用ください。

最後まで読んでいただきありがとうございました。