スタッフから配送時間を選べるようにして欲しいと要望があったので、検討するところから、スタート。
まず、使う前に期待していた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 }}
