Shopifyのカートにお届け指定日を追加する方法【コピペOK】

cart Shopify

ごきげんよーう

今回は

Shopifyにお届け指定を追加するにはどうすれば良いんだろう…?

という方に向けた記事です!

 

色々と便利なShopifyですが、実はお届け指定日はデフォルトの機能にありません。

これを実現するにはアプリの導入をするのがカンタンです。
ただ、アプリだと細かい条件の指定が出来ないのですよね…。

 

今回は「お届け指定日の作成+特定の曜日を選択できないようにする」を実装してみます。

 

この機能を実現するには、Shopifyの言語である「Liquid」と「jQuery UI」を触る必要があります。
「えっ、そんなの分からないよ!」と思われたあなたも大丈夫。

コピペOKのコードを載せてますので、ご安心を!

 

こちらの記事を参考にされる場合は自己責任でお願いします。
何かあった時に元に戻せるように、必ずテーマを複製+テスト注文をしてから本番のストアに反映してくださいね。

 

スポンサーリンク

日時指定の設定をしよう

テーマを複製しよう

設定を行う前にテーマは必ず複製しておきましょう。

何かあった時に原本を持っておくと安心です。

ホーム画面→オンラインストア→テーマの「アクション」から「複製する」を選択すればOKです。

 

スクリーンショット 2021-01-29 21.14.34

 

複製したテーマは自分がわかりやすい名前に変更しておきましょう!

ファイルを作成しよう

次にファイルを作成していきます。
テーマのアクション→「コードを編集する」を選択します。

 

スクリーンショット 2021-01-29 21.16.21

 

Snippetsディレクトリから「新しいSnippetsを追加する」を選択します。

その後、ファイルを作成します。
好きな名前を入力して「スニペットを作成する」ボタンを押します。

ファイル名は何でも良いですが、わかりやすさ重視で今回は「day.liquid」という名前にしました。
拡張子は「.liquid」になるようにしてくださいね。

 

ファイル

 

jQuery UIを導入しよう

jQueryはJavaScriptのライブラリでして、JavaScriptをより簡単に使えるようにしてくれるものです。

これを導入するためにはLayoutディレクトリのtheme.liquidのheadタグの中にコードを貼り付ける必要があります。

 

ちなみにjQuery UIはjQueryの便利機能をまとめたものです。
要するに焙煎コーヒー(JavaScript)>インスタントコーヒー(jQuery)>コンビニコーヒー(jQuery UI)というわけです。

意味わからんと思ったあなたは正しいです。
コードに進みましょう。

 

<!– 1/29追加 –>
{{ ‘https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css’ | stylesheet_tag }}
{{ ‘https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js’ | script_tag }}
{{ ‘https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js’ | script_tag }}
{{ ‘https://rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-ja.js’ | script_tag }}
<!– 1/29追加 –>

 

上記のコードを貼り付ける際は必ず<head></head>の中に記述してくださいね。
ここを間違えると上手く機能してくれません。

 

ファイルを変更した後は必ず右上の「保存する」ボタンを押しましょう!
忘れると変更が反映されません。

 

head_tag

 

コードを編集しよう

準備が出来たら、いよいよコードを書いていきます!

 

cart-template.liquid(無ければcart.liquidファイル)を探します。
サイドバー左上に「cart」と入力すると探しやすいですよ。

 

cart

 

適切な位置に下記のコードを貼り付けましょう。

 

<!– 1/29追加 –>
{% render ‘day’ %}
<!– 1/29追加 –>

 

「適切な位置ってどこやねん」というツッコミが聞こえてきそうなので補足すると、ファイルの空いている場所に入力すればOKです。

 

add_render

 

HTMLタグ(<></>)の中に挿入すると、見た目が崩れる可能性があります。
必ず空いている場所にコードを追記してくださいね。

 

renderの後ろは先ほどSnippetsディレクトリに新しく作ったファイルの名前です。
「day.liquid」」以外の名前にした方は適宜変更してください。

何をしているかというと、この行で「day.liquid」のファイルを呼び出しています。
cart-template.liquidに直接コードを書くより管理しやすくなりますよ。

 

※後から追加したコードであることがわかるように<!–  –>の中に日付を入れておくのがオススメ。
<!–  –>はコメントアウトです。メモとして残したいものがある時に使えます。
Macならcommandとスラッシュキーを同時押しで選択したコードをコメントアウト出来ますよ。

 

ファイル名はテンプレートによって違うので、わからなければとりあえずコードを貼り付けてみる→自分のショップで適切な場所に表示されているかを確認しましょう!

day.liquidファイルのコードを編集しよう

 

それではいよいよday.liquidファイルを編集していきます。

 

<!– カレンダー表示 –>
<div class=”app-deliverydate app-deliverydate–date”>
<p>
<!– <label for=”datepicker” class=”delivery_time”>配送日を選択</label> –>
<label for=”delivery_date_input” class=”delivery_date”>配送日を選択</label>
<input type=”text” name=”attributes[date]” value=”{{ cart.attributes.date }}”  id=”delivery_date_input” class=”delivery_time_picker” >
</p>

</div>

<script>

$(“.delivery_time_picker”).datepicker({

minDate: ‘+10D’,
maxDate: ‘+120D’,
beforeShowDay: function(date) {
var day = date.getDay();
return [(day != 1 && day != 2)];
}
});

</script>

 

現時点では下記の画像のようになっていればOKです!

 

cart

 

条件を追加しよう

さて、ここで本題。

今回は「特定の曜日を選択できないようにしたい」のでした。

先ほどコピペしたこちらのコードに注目してください。

 

  return [(day != 1 && day != 2)];

 

実はこのday!=の後ろの数字が曜日を表しています。

 

0: 日曜日

1: 月曜日

2: 火曜日

3: 水曜日

4: 木曜日

5: 金曜日

6: 土曜日

 

日曜日を起点として0から始まります。
つまり、現在のコードでは月曜日と火曜日が選択できないようになっています。

 

もし、水曜日と日曜日を選択できないようにしたいならこうなりますね。

 

  return [(day != 3 && day != 0)];

 

変更したい曜日に応じて先ほどのコードを変えましょう!

 

jQuery UIはめちゃくちゃ親切です。
何と週末を選択させたくない時用のnoWeekendsという関数を用意してくれているのです!

コードをこんな風に変えればOK。

 

<!– カレンダー表示 –>
<div class=”app-deliverydate app-deliverydate–date”>
<p>
<!– <label for=”datepicker” class=”delivery_time”>配送日を選択</label> –>
<label for=”delivery_date_input” class=”delivery_date”>配送日を選択</label>
<input type=”text” name=”attributes[date]” value=”{{ cart.attributes.date }}”  id=”delivery_date_input” class=”delivery_time_picker” >
</p>

</div>

<script>

$(“.delivery_time_picker”).datepicker({

minDate: ‘+14D’,
maxDate: ‘+120D’,
beforeShowDay: $.datepicker.noWeekends
});

</script>

 

そして、minDateは最短で何日後から選択できるか、maxDateは最長何日後まで選択できるかを決められます。

上記のコードでは最短14日後、最長120日後まで選べるようにしています。

 

お届け日がメールに表示されるようにしよう

日付の選択はできるようになったものの、お客様のメールにお届け日が表示されません。
これはお客様からするとちょっと不便ですよね。

ということで、お客様のメールにお届け日が表示されるようにしましょう!

管理画面の設定→通知を開きます。

 

setting

 

注文の確認をクリックします。

 

注文の確認

 

好きな場所に下記のコードを貼りましょう。

 

<h2>配送日</h2>
<h3>{{ attributes.date }}</h3>

 

※{% endcapture %}の中にコードを書きましょう。
この外に出すと表示されなくなります。

 

例としてはこんな感じ。

 

code

 

保存ボタンを押すのを忘れないでくださいね。

テスト注文すると、メールにこんな感じで表示されているはずです。

 

ご注文内容の確認

 

見た目を整えよう

ここからはある程度HTML・CSSの知識がないとキツイかもです…
やってみたいという方はぜひチャレンジしてみてくださいね!

さて、ここまで来たらやりたいことは実現できていますよね。
ただ、今の状態だとカレンダーを選択する場所がわかりにくいです…

せっかくなので見た目もCSSで整えちゃいましょう!

まずはAssetsディレクトリ以下にファイルを作ります。
名前は何でもOKです。今回は「date.css」にしましたよ。

 

css

 

CSSファイルを作っただけではCSSは読み込まれません。

Layoutディレクトリのtheme.cssのheadタグ内に下記のコードを貼り付けましょう。

 

{{ ‘date.css’ | asset_url | stylesheet_tag }}

 

‘date.css’の部分はCSSのファイル名なので、あなたがつけた名前にしてくださいね。

さて、CSSファイルの中身は一例ですが、こんな感じで。

 

label {
cursor: default;
display: block;
}

.delivery_time_picker {
display: inline-block;
border: 2px solid #6F4B3D !important;
width: 200px;
color: #333232;
}

 

元々のテーマと競合してうまくCSSが当たらない部分は!importantを使っています。
これを使うと指定したCSSが最優先で当たります。
importantを使うのはあまり良くないと言われているんですけど、どうしても当てたい場所に当たらない時はどうぞ。

 

オススメの日時指定アプリ

さて、細かい設定をここまでしてきましたが、もっと簡単にしたいという方はアプリを使いましょう。
細かい設定はできませんが、簡単とっても簡単です。

「細かい指定なんて要らんから、とりあえず日時指定がしたい!」という方にはこの辺りのアプリがオススメです。

 

日本の配送体系に対応しているので、使いやすいです。
ちなみにどちらも有料です。

配送日時指定 .amp – オンラインストア用のEコマースプラグイン – Shopify アプリストア
配送日や配送時間帯を指定できるようにします
カレンダーマスター – オンラインストア用のEコマースプラグイン – Shopify アプリストア
日本の事業者に合わせた配送日時指定アプリ。ストアの休日や配送業者を簡単に設定できます。

 

おわりに

今回知識がなくてもコピペで出来るように説明してみましたが、いかがでしたか?
ちょっと長くて大変だったかもですね。お疲れ様でした!

「ここ間違ってるよ!」とか「もっと良い方法あるよ!」とかありましたらぜひ教えてください!

実は配送時間の設定方法もあるので、そちらはまた別の記事にしますね。

ではでは〜

 

コメント

タイトルとURLをコピーしました