Shopify

Shopifyでアプリなしで配達時間指定のみを実装する

投稿日:2021年9月10日 更新日:

スタッフから配送時間を選べるようにして欲しいと要望があったので、検討するところから、スタート。

まず、使う前に期待していたShopifyのメジャーアプリ「配送日時指定 .amp」なんですが、試したところ、時間指定のみを使う(日付指定を使わない)という設定ができなかった(うちの店の場合、納期が長い商品があるけども、商品によって配達日を変えることはできないので、いっそのこと日付指定は受けていないのです)。
また、GoQというOMS(受注一括管理システム)を使っているのですが、そこに入ってくる注文情報に、カートで設定した時間指定情報が受け継がれないことがわかった。
そこで、ネットの情報を参考に、テーマのコードを修正して、時間をセレクトボックスで選ばせ、連絡事項欄に転記する、という方法にしました。

1.以下の記事を参考に、配送時間指定のセレクトボックスをカート画面に設置

[Shopify] 配送時間指定を無料で実装する(Debutテーマ)|TORUBLOG

サンプルコードのcart-deliverytime.liquidを以下のように修正。
(idをセットしたり、時間を変えたりしただけ)

<p class="cart-attribute__field">
  <label>配送時間指定</label>
<select id="deliverytime" name="attributes[配送時間指定]">
<option value="指定なし" {%="" if="" cart.attributes["配送時間指定"]="=" "指定なし"="" %}="" selected{%="" endif="">指定なし</option>
<option value="午前中" {%="" if="" cart.attributes["配送時間指定"]="=" "午前中"="" %}="" selected{%="" endif="">午前中</option>
<option value="14時-16時" {%="" if="" cart.attributes["配送時間指定"]="=" "14時-16時"="" %}="" selected{%="" endif="">14時-16時</option>
<option value="16時-18時" {%="" if="" cart.attributes["配送時間指定"]="=" "16時-18時"="" %}="" selected{%="" endif="">16時-18時</option>
<option value="18時-20時" {%="" if="" cart.attributes["配送時間指定"]="=" "18時-20時"="" %}="" selected{%="" endif="">18時-20時</option>
</select></p>

2.cart-template.liquidのテンプレートを修正


現状、メモ欄(Shopifyのコードでは{ note })が、テキストリンクのオンオフで開く仕組みになっているので、常時表示にする。

{% if section.settings.cart_notes_enable %}
<div class="cart-notes-container {% if cart.note != blank %}notes-open{% endif %}">
          <button type="button" class="btn btn--plain js-cart-notes-trigger">
<span class="standard-link">
{%- if cart.note == blank -%}
{{ 'cart.general.show_note' | t }}
{%- else -%}
{{ 'cart.general.hide_note' | t }}
{%- endif -%}
</span>
</button>
<div class="cart-notes input-wrapper row-half-space {% if cart.note == blank %}no-js{% endif %}">
            <label for="CartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
<textarea name="note" id="CartSpecialInstructions">{{ cart.note }}</textarea></div>
</div>
{% endif %}

を、以下に修正。

{% if section.settings.cart_notes_enable %} <!-- 2021/09/10 -->
<div class="cart-notes-container">
<div class="cart-notes input-wrapper row-half-space ">
            <label for="CartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
<textarea name="note" id="CartSpecialInstructions">{{ cart.note }}</textarea></div>
</div>
{% endif %}

3.JavaScriptをテーマに追加


theme.jsの一番下に、以下のコードを追加。

// 2021/12/7(火) 日時指定対応
$(document).ready( function() {
  $(function() {
    $("#date").datepicker( {
      dateFormat: 'yy/mm/dd',
      minDate: +4,
      maxDate: '+14D',
      showMonthAfterYear: true,
      monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      dayNames: ['日', '月', '火', '水', '木', '金', '土'],
      dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
    } );
  });
});

document.getElementById("deliverytime").onchange = function(){
// var dw = document.getElementById("deliverytime");
var i = deliverytime.selectedIndex;
var s_value = deliverytime.options[i].value;
// alert('s_value');
if (i == 0) {
document.getElementById("CartSpecialInstructions").value = null;
}
else {
document.getElementById("CartSpecialInstructions").value = '配送時間指定:' + s_value + '\n';
}
};

4.以下の情報を参考に、カートの最終画面に、入力された時間指定を表示


チェックアウト-追加スクリプト-注文状況ページ。

【Shopify】注文完了画面に任意のコンテンツを表示する|アプロ総研|note
https://note.com/apro_soken/n/n952c322d282f

5.注文確認の通知メールのテンプレートを修正

フッターの直前のテーブルの最後あたりに、入力された時間指定を表示。

<tr>
<td>
<h4>連絡事項</h4>
{{ note }}</td>
</tr>

結構、直すところが多かったけども。。。以上。

追記:

追加スクリプトの表示が、うまくいく時といかないときがあって、かなり難儀しました。
調べるうちに、連絡事項欄に改行があるとうまくいかないことがわかりました。
じゃあ、改行を消せばいいのだなと、そこまではわかったのですが、そこからがまたうまくいかなくて。。。

ダメなコード:


{{ note | replace: ' \n' ,'<br>'}}}

最終的にOKのコード

 

{{ note | strip_newlines }}

以下を参考にしました。
【Shopify】LiquidのString filterを全てまとめてみた話 – Qiita

-Shopify

執筆者:

関連記事

Shopifyのバルク配送処理のアプリMassFulfillについてのメモ

Order name には、注文番号を入れる。 Trigger shipping confirmations on Shopify にチェックが入っていると「注文番号 XXXX の発送が完了しました」 …

ShopifyのEasy Taggingアプリで過去注文についてタグをつける

未来の注文についてタグをつける方法はわかったが、過去分についてそれをする方法がわからなかったので、自分用に調べてメモしておく。 Rulesのタブに書いてあったので、賢明な方はすぐに分かったのかもしれな …

no image

難解なAPIを使わずにShopifyの注文データをAccessに取り込む

Shopify側 ・Matrixfyアプリをインストールする。・Matrixfyはデモプランでも最大10件ダウンロードできる。スケジュールタスクは何個でも作成できるので、例えば、コンビニ知らはい、銀行 …

no image

Shopifyから送られてくるメール文中の画像がGmailで消えている

Shopifyでは、スタッフ向けの注文確認メールが送られるが、Gmailに届くようにしている。その文中を見ると、「画像が非表示になっています。 下記の画像を表示 – ・・・の画像を常に表示 …

no image

Shopifyにスライド(スライダー/カルーセル)を導入するならコード直打ちがおススメ

アプリは、有料の、こんなのとか(フリープランだとクレジットが表示される)、 POWR Image Slider & Carousel – Ecommerce Plugins for Onlin …