見出し画像

【Shopify】配送日指定をアプリに頼らず出したい

アプロ総研

こんにちは。ケチな大野です。

Shopify を利用していて惜しいと思うのが、デフォルトの機能に「配送日指定」がないことです。日本に住んでいる方なら一度は思うことかもしれないですが、やはり日本のEC業界では配達日は必須だと思うのです。

Shopify はアプリが充実しているのでアプリを入れて解決と行きたいところですが、ここはあえて苦難の道のタダで配送日を表示させるやり方をまとめました。

1.「Layout > theme.liquid」から jQueryUI を読み込む

これを読み込むことでカレンダーやフォームなどのパーツをガシガシコードを書かなくても少しのコードで表示してくれるというとても便利なツールです。

デザインもいくつか選べるのですが、今回は Smoothness というテーマを使います。

読み込み方は、「オンラインストア」から「コードを編集する」を選択します。

画像1

「Layout > theme.liquid」を開きます。

画像2

<head> </head>内に以下のコードを入れて、保存します。

{{ '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 }}

今回は jQueryUI の日本語化も行いたいため一番下の行も追加します。

2. Snippets以下に「delivery-date.liquid」という新しいsnippetを追加する

「Snippets」以下に新たにファイルを追加します。

画像3

画像4

名前を「delivery-date」と入力し、「スニペットを作成する」をクリックすると、新しいファイル「delivery-date.liquid」という Liquid ファイルが作成されます。

そのファイルの中に以下のコードを追加し保存します。


<div style="width:300px; clear:both;">
 <p>
   <label for="datepicker">配送日を指定してください。</label>
   <input id="datepicker" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
   <span style="display:block" class="instructions"> 土日は配送指定ができません。</span>
 </p>
</div>

<script>
 $("#datepicker").datepicker( { 
   minDate: '+3D', 
   maxDate: '+2M',
   beforeShowDay: jQuery.datepicker.noWeekends
 } );
</script>


{% comment %}
 To remove days of the week that aren't Saturday and Sunday, use this:
 http://stackoverflow.com/questions/2968414/disable-specific-days-of-the-week-on-jquery-ui-datepicker
{% endcomment %}

コードの中身の説明

<div></div>内はデザインにより変えても良いところです。

minDate : カレンダーで選択できる最短日
maxDate : カレンダーで選択できる最長日
beforeShowDay: jQuery.datepicker.noWeekends :
土日を選択できないようにする、土日も配送OKな場合は消す

というかんじです。

3. 「Sections > cart-template.liquid」に「delivery-date.liquid」を呼び出す

「Sections > cart-template.liquid」の配送日指定を出したい場所に以下のコードを追加し保存します。

{% render 'delivery-date' %}

表示確認 : カート画面はこんな感じです

画像5

入力欄をクリックするとカレンダーが出てきて選択できる仕様です。

表示確認 : 注文管理の画面ではこんなかんじ ※注記：2021/6/8現在管理画面に表示されません

画像6

お高いサラミを8月4日にお届けします。

参考にさせていただいたサイト

※2021/6/8現在管理画面に表示されません。原因が分かり次第加筆修正を致します。m(_ _)m

今後の展望（というか今の懸念点）

この方法だと土日は除けるだけなので祝日やユニークな日付で配送日指定をNGにすることができません。

祝日に関しては json ファイルを使って実用化しているところもあるようですが、エンジニアよりのお話になってきましたので非エンジニアの私ではここまでが限界でした。

無料でシンプルに配送日指定を設定したい方はぜひお試しください。

参考に祝日対応する方法は以下に書いていました。（いつか試したい）

次はアプリでかんたんに入れられる方法をいくつか書きたいと思います。

アプロ総研では『はじめてEC』というサービスを運営しています。
EC初心者に向けて、初期構築を弊社が行いすぐに販売可能なサイトをお作りいたします。月々のサポートやウェビナーも開催されますのでEC初心者にも安心してご利用いただけます。

ご契約やサービス内容を詳しく知りたい場合は以下のお問合せページよりご連絡をお待ちしております！


いいなと思ったら応援しよう！