Shopify

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

投稿日:

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

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

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

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

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

<p class="cart-attribute__field">
  <label>配送時間指定</label>
<select id="deliverytime" name="attributes&#91;配送時間指定&#93;">
<option value="指定なし" {%="" if="" cart.attributes&#91;"配送時間指定"&#93;="=" "指定なし"="" %}="" selected{%="" endif="">指定なし</option>
<option value="午前中" {%="" if="" cart.attributes&#91;"配送時間指定"&#93;="=" "午前中"="" %}="" selected{%="" endif="">午前中</option>
<option value="14時-16時" {%="" if="" cart.attributes&#91;"配送時間指定"&#93;="=" "14時-16時"="" %}="" selected{%="" endif="">14時-16時</option>
<option value="16時-18時" {%="" if="" cart.attributes&#91;"配送時間指定"&#93;="=" "16時-18時"="" %}="" selected{%="" endif="">16時-18時</option>
<option value="18時-20時" {%="" if="" cart.attributes&#91;"配送時間指定"&#93;="=" "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の一番下に、以下のコードを追加。

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(Excelify)の注文データをQNAPにSFTPで送るのに苦労した話

ここ最近、Shopifyというオンラインショップのサービスについて調べている。 注文後の処理データを現状の業務ソフトにスムーズに渡したいのだが、よい知恵が浮かばない。 APIを使うには自分のスキルが足 …

no image

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

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

Shopify(Matrixify)でスケジュール化したJobのキャンセル

どうしても方法を見つけられなかったが、ふと画面に目を落とすと、あった、方法が。 焦ると視野が狭くなって、なかなか気が付かないんだよなあ、こういうの。 You have 4 scheduled jobs …

秀丸・正規表現・置換で、郵便番号7桁の数字にハイフンを入れる

結構、時間がかかった。苦労したけど、できた。 1.郵便番号7桁/行になるように、整形しておく2.検索:^\d{3}3.置換:\0-

Shopifyでも見積書を無料で作れるよ

Order PrinterっていうFree(無料)のアプリがあるから、それを使えばいい。 テンプレートがHTMLタグなので、それを直さなくてはならない。タグを知らない人にはちょっと辛いかもしれないけど …