カートページに配送日時と置き配指定セクションを実装するチュートリアル

はじめに 「配送日時指定」の実装に関しては、簡単に実装できるアプリが多く存在しますが、アプリを使わずとも多機能な「配送日時指定」機能は実装できます。 かなりメジャーなカスタマイズなので、公式ドキュメントをはじめ様々なサイトでも紹介されており改めて公開する程でもないと思っていましたが、カレンダーをLiquid出力することで他とは違う軽量かつスマートな「配送日時指定」が実装できます。 Shopifyデフォルトテーマ「Dawn（11.0.0）」への実装をベースに紹介していきますが、Shopify2.0対応テーマであればCSSの調整くらいで実装可能です。（多分） スニペットファイルを作成 「新しいスニペットを追加する」より「delivery-date-calendar.liquid」を新規作成し、以下のコードを貼り付けます。 {%- liquid assign day = 86400 assign now = 'now' | date: '%Y-%m-%d' | date: '%s' | abs assign now_time = 'now' | date: '%k' | abs assign min_days = date_min | times: day assign max_days = date_max | times: day assign close_time = close_time

if now_time <= close_time assign plus_days = 0 else assign plus_days = day endif

assign checked_day = set_day | date: '%Y-%m-%d'

assign replace_tag = 'div' | append: attr_date | append: attr_week | append: attr_holiday capture day_class assign date_format_s = date_format | date: '%s' | abs if date_format_s = max_day echo 'day disabled' else if holiday and attr_week contains 'sat' or attr_week contains 'sun' echo 'day disabled' else echo 'day' endif endif endcapture

assign replace_tag = 'div' | append: attr_date | append: attr_week | append: attr_holiday capture day_class assign date_format_s = date_format | date: '%s' | abs if date_format_s = max_day echo 'day disabled' else if holiday and attr_week contains 'sat' or attr_week contains 'sun' echo 'day disabled' else echo 'day' endif endif endcapture assign day_number = date_format | date: '%-d' assign data_date = date_format | date: format assign day_label = day_number | prepend: ' ' | replace: 'date_format', date_format | append: ' ' assign day_radio = ' ' | replace: 'date_format', date_format | replace: 'data_date', data_date | replace: 'data_value', date_format if date_format == checked_day assign day_radio = day_radio | replace: '>', ' checked>' endif echo day_radio | append: day_label | prepend: ' ' | replace: 'day_class', day_class | replace: 'div', replace_tag | append: ' ' endfor echo ' ' -%}

これはカレンダーを出力するためのファイルで、フッターに営業日カレンダーを実装する方法でも紹介しているLiquidカレンダーを配送日指定用にカスタマイズしたもので、日本の祝日反映には「Holidays JP API」を利用しています。 基本的な構造は同じですが、日付部分のラジオボタンを選択したら、その日付が「Cart attributes」に反映される仕様で、日付フォーマットはvalue値が送信用、data-value値が表示用としています。 また、設定画面で以下の機能を制御するようにしてあります。

最短で指定できる配送希望日 最長で指定できる配送希望日 土日祝を選択不可にする 締め時間 週の始まり

これらの機能については後ほどご説明します。 セクションファイルを作成 「新しいセクションを追加する」より「cart-delivery-date.liquid」を作成し、以下のコードを貼り付けます。 {%- if cart != empty -%} {{ 'cart-delivery-date.css' | asset_url | stylesheet_tag }} {%- if section.settings.title != blank -%} {{ section.settings.title }} {%- endif -%} {%- for block in section.blocks -%} {%- case block.type -%} {%- when 'date' -%} {%- liquid assign day = 86400 assign now = 'now' | date: '%s' assign now_time = 'now' | date: '%k' | abs assign min_days = block.settings.date_min | times: day assign close_time = block.settings.close_time

if now_time <= close_time assign set_day = now | plus: min_days else assign set_day = now | plus: min_days | plus: day endif

if block.settings.holiday assign set_week = set_day | date: '%a' case set_week when 'Sat' assign set_day = set_day | plus: day | plus: day when 'Sun' assign set_day = set_day | plus: day endcase endif -%} {{ block.settings.label }} {{ set_day | date: '%Y年%m月%d日' }} {% render 'icons' with 'calendar' %} {{ block.settings.label | append: 'を選択' }} {% render 'delivery-date-calendar', date_min: block.settings.date_min, date_max: block.settings.date_max, holiday: block.settings.holiday, close_time: block.settings.close_time, week_start: block.settings.week_start, format: block.settings.date_format, set_day: set_day %} {% render 'icons' with 'close' %} {%- when 'timezone' -%} {{ block.settings.label }} {%- case block.settings.company -%} {%- when 'yamato' -%} 8:00〜12:00 14:00〜16:00 16:00〜18:00 18:00〜20:00 19:00〜21:00 {%- when 'sagawa' -%} 午前中（8時～12時） 12時～14時 14時～16時 16時～18時 18時～20時 18時～21時 19時～21時 {%- when 'yupack' -%} 午前中 12時頃～14時頃 14時頃～16時頃 16時頃～18時頃 18時頃～20時頃 19時頃～21時頃 20時頃～21時頃 {%- when 'seino' -%} 午前（9:00～12:00） 午後（13:00～17:00） {%- when 'fukutsu' -%} 10時〜12時 12時〜14時 14時〜16時 16時〜18時 18時〜20時 {%- when 'nittsu' -%} 午前中 12:00〜14:00 14:00〜16:00 15:00〜18:00 18:00〜20:00 20:00〜21:00 {%- endcase -%} {% render 'icon-caret' %} {%- when 'okihai' -%} {%- assign options = block.settings.options | newline_to_br | split: ' ' -%} {{ block.settings.label }} 選択してください {%- for option in options -%} {{ option | strip }} {%- endfor -%} {% render 'icon-caret' %} {%- endcase -%} {%- endfor -%} {%- if section.settings.caption != blank -%} {{ section.settings.caption }} {%- endif -%}

const showCalendarButton = document.querySelector('.delivery-date--show-calendar'); const deliveryDateInput = document.querySelector('#deliveryDate-{{ section.id }}'); const closeCalendarButton = document.querySelector('.delivery-date--dialog-close'); const calendar = document.querySelector('.delivery-date--dialog'); const calendarInputRadio = document.getElementsByName('delivery-date--radio'); const bodyTag = document.body;

showCalendarButton.addEventListener('click', showCalendar); closeCalendarButton.addEventListener('click', closeCalendar); calendarInputRadio.forEach((radio) => { radio.addEventListener('click', function () { const dataValue = radio.getAttribute('data-value'); const date_sprit = dataValue.split('-'); const buttonLabel = showCalendarButton.querySelector('span'); deliveryDateInput.value = radio.value; buttonLabel.textContent = `${date_sprit[0]}年${date_sprit[1]}月${date_sprit[2]}日`; closeCalendar(); }); });

{% schema %} { "name": "配送日時指定", "class": "section", "tag": "section", "limit": 1, "settings": [ { "type": "text", "id": "title", "label": "タイトル", "default": "配送日時指定" }, { "type": "richtext", "id": "caption", "label": "キャプション", "default": " 地域によって指定日にお届けできない場合もございます。

" } ], "blocks": [ { "type": "date", "name": "配送日", "limit": 1, "settings": [ { "type": "text", "id": "label", "label": "ラベル", "default": "お届け希望日" }, { "type": "text", "id": "attributes", "label": "属性値", "default": "配送日", "info": "attributes[◯◯◯]" }, { "type": "text", "id": "date_format", "label": "日付フォーマット", "default": "%Y-%m-%d" }, { "type": "range", "id": "date_min", "label": "最短で指定できる配送希望日", "min": 1, "max": 14, "step": 1, "unit": "日", "default": 2 }, { "type": "range", "id": "date_max", "label": "最長で指定できる配送希望日", "min": 15, "max": 30, "step": 1, "unit": "日", "default": 30 }, { "type": "checkbox", "id": "holiday", "label": "土日祝を選択不可にする", "default": false, "info": "※チェックを入れると土日祝を除く平日のみ選択できます" }, { "type": "range", "id": "close_time", "label": "締め時間", "min": 1, "max": 24, "step": 1, "unit": "時", "default": 13 }, { "type": "select", "id": "week_start", "label": "週の始まり", "options": [ { "value": "sunday", "label": "日曜日" }, { "value": "monday", "label": "月曜日" } ], "default": "sunday" } ] }, { "type": "timezone", "name": "配送時間帯", "limit": 1, "settings": [ { "type": "text", "id": "label", "label": "ラベル", "default": "お届け希望時間帯" }, { "type": "text", "id": "attributes", "label": "属性値", "default": "配送時間", "info": "attributes[◯◯◯]" }, { "type": "radio", "id": "company", "label": "配送業者", "options": [ { "value": "yamato", "label": "ヤマト運輸" }, { "value": "sagawa", "label": "佐川急便" }, { "value": "yupack", "label": "ゆうパック" }, { "value": "seino", "label": "西濃運輸" }, { "value": "fukutsu", "label": "福山通運" }, { "value": "nittsu", "label": "日本通運" } ], "default": "yamato" } ] }, { "type": "okihai", "name": "置き配", "limit": 1, "settings": [ { "type": "text", "id": "label", "label": "ラベル", "default": "置き配の指定" }, { "type": "text", "id": "attributes", "label": "属性値", "default": "置き配", "info": "attributes[◯◯◯]" }, { "type": "textarea", "id": "options", "label": "選択項目", "default": "玄関\n宅配ボックス\nガスメーターボックス\n自転車かご\n車庫\n建物内受付/管理人\n郵便受け\n利用しない" } ] } ], "presets": [ { "name": "配送日時指定", "blocks": [ { "type": "date" }, { "type": "timezone" }, { "type": "okihai" } ] } ] } {% endschema %}

上から順番に説明します。 まずは最初のif分岐でカートに商品があるかを判別し、空ならセクションが出力されないようになっています。 続いてスタイルシートを読み込みます。このCSSファイルは後ほど作成します。 後はセクションブロック操作で出力フォームを制御できる仕組みで、Javascriptでカレンダーのモーダル開閉や日付反映を制御しています。 モーダルには を採用しており、ライトボックス系のJSライブラリを使わず最も軽量にモーダルを実装できます。デフォルトでは開閉アニメーションが無いのが難点ですが、簡単なJSとCSSを付け加えるだけでスムーズに開閉できます。 Javascriptはいたってシンプルです。 カレンダーを表示させる をクリックするとイベントが発生し タグを「aria-hidden="false"」、 タグにクラス「overflow-hidden」を付与します。 クローズボタンや日付をクリックするとモーダルが閉じて、 タグのaria-hidden属性が「true」になり、クラス「overflow-hidden」が削除されます。 は展開時に「open」属性が付与されますが、クローズ時のアニメーション用に敢えてaria-hidden属性をつけております。 モーダルが閉じるタイミングを200ミリ秒遅延させており、その間にaria-hidden属性に設定したアニメーションが実行される仕組みです。 また、カレンダーの日付をクリックするとその日付が と隠し要素の タグに反映されます。 本来は と を統合した方が構造的にはシンプルなのですが、表示用と送信用の日付フォーマットを変えたかったのでこの仕様にしてあります。 のカレンダーアイコンは著作権の関係で掲載することはできませんので、お好きなアイコン（svg）をご用意ください。 セクション設定や各ブロック設定に関しては以下の通りです。ショップに合わせて編集してください。 セクション設定

タイトル セクションタイトルを設定します。

キャプション 注意事項などを入力します。

それぞれ空欄なら出力されません。 ブロック設定 配送日ブロック

ラベル フィールドのラベルを設定します。

属性値 連携システムに合わせて、Cart attributes（attributes[◯◯◯]）の属性を指定できます。

日付フォーマット Cart attributesの値に設定する日付フォーマットを指定できます。

最短で指定できる配送希望日 カレンダーのラジオボタン操作を制御します。例：当日から◯日後から指定可能

最長で指定できる配送希望日 カレンダーのラジオボタン操作を制御します。例：最短日から◯日後まで指定可能

土日祝を選択不可にする 配送業者に合わせて土日祝日を選択不可にできます。

締め時間 締め時間を過ぎると最短選択可能日が翌日になります。

Cart attributesは出荷用に外部システムと連携させているショップ向けの設定です。基本的にはデフォルトの仕様で問題ありませんが、日付フォーマットと併せてご利用システムに合わせて編集してください。 カートページに表示される日付は、読みやすいように「%Y年%m月%d日」形式で出力していますので、ブロック設定の「日付フォーマット」は反映されません。システム自体に影響はありませんが、編集したい場合は、39行目と167行目を編集してください。 配送時間帯ブロック

ラベル フィールドのラベルを設定します。

属性値 連携システムに合わせて、Cart attributes（attributes[◯◯◯]）の属性を指定できます。

配送業者 主要配送業者6社より選択し、配送時間帯のセレクトボックスを変更できます。

各社の配送時間帯は予め設定してありますが、リストにない場合や、変更になった場合、連携システムのフォーマットに合わない場合は、72〜11行目を編集してください。 置き配ブロック

ラベル フィールドのラベルを設定します。

属性値 連携システムに合わせて、Cart attributes（attributes[◯◯◯]）の属性を指定できます。

選択項目 選択項目を改行区切りで追加・削除できます。

設定できる選択項目の初期値はAmazonに合わせてありますが、ブロック設定で自由に編集できます。 アセットファイルを作成 「新しいアセットを追加する」より「cart-delivery-date.css」を追加し、以下のスタイルシートを貼り付けてください。 .delivery-date--container { display: grid; gap: 2rem; }

.delivery-date--container .field__input, .delivery-date--container .select__select { font-size: 1.4rem; line-height: 1; color: rgba(var(--color-foreground), 0.75); padding: 1.5rem 2rem; cursor: pointer; }

.delivery-date--date .field__input { display: flex; justify-content: space-between; align-items: center; }

.delivery-date--date .field__input .icon { width: 1.8rem; height: 1.8rem; }

@media (min-width: 750px) { .delivery-date--container { display: flex; justify-content: space-between; } .delivery-date--container > * { flex: 1; } }

/* Calendar */ .delivery-date--dialog { top: 0; right: 0; bottom: 0; left: 0; place-content: center; display: grid; max-width: unset; max-height: unset; width: auto; height: auto; background: none; padding: 0; border: none; z-index: -1000; }

.delivery-date--dialog[aria-hidden="false"] { z-index: 1000; }

.delivery-date--dialog::backdrop { background: rgba(0, 0, 0, 0); transition: .2s linear; }

.delivery-date--dialog[aria-hidden="false"]::backdrop { background: rgba(0, 0, 0, .1); backdrop-filter: blur(1rem); }

.delivery-date--dialog-content { position: relative; width: 100%; max-width: 80rem; background: #fff; padding: 1em; opacity: 0; border-radius: 1em; box-shadow: 0 0 1rem rgba(0, 0, 0, .1); transform: scale(0); transition: .2s linear; }

.delivery-date--dialog[aria-hidden="false"] .delivery-date--dialog-content { opacity: 1; transform: scale(1); }

.delivery-date--dialog-title { font-size: 1.2em; text-align: center; margin: .5em 0; } .delivery-date--dialog-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: grid; place-content: center; width: 4rem; height: 4rem; cursor: pointer; }

.delivery-date--calendar { display: grid; grid-template-columns: 1fr; gap: 3rem; padding: 1.5rem; border: none; }

.delivery-date--calendar .calendar-title { text-align: center; margin: 0 0 1.5em; }

.delivery-date--calendar .calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; text-align: center; }

.delivery-date--calendar .calendar .day { line-height: 1; letter-spacing: 0; }

.delivery-date--calendar .calendar .day[data-week="sun"], .delivery-date--calendar .calendar .holiday { color: #c00; }

.delivery-date--calendar .calendar .day[data-week="sat"] { color: #069; }

.delivery-date--calendar .calendar .day.disabled { opacity: .5; pointer-events: none; }

.delivery-date--calendar .calendar .day input { display: none; }

.delivery-date--calendar .calendar .day label { display: grid; place-content: center; width: 2em; height: 2em; border-radius: 50%; cursor: pointer; transition: .1s linear; }

.delivery-date--calendar .calendar .day label:hover { background: rgb(204, 0, 0, .1); }

.delivery-date--calendar .calendar .day input:checked + label { background: #c00; color: #fff; }

@media (min-width: 560px) { .delivery-date--calendar { grid-template-columns: repeat(2, 1fr); }

.business-calendar-information .business-holiday { justify-content: center; } } Dawnテーマ実装用のシンプルなスタイルですので、ご利用テーマに合わせて編集してください。 ポイントとなるのが前述にもある通り、 タグにアニメーションをつけるための仕組みです。 要素に「transition」を加えクローズ時のスタイルを記述し、「aria-hidden="false"」に展開時のスタイルを記述しています。 アニメーションを変更する場合は「transition」の値を編集し、時間を変更した場合はJSの「setTimeout」も併せて編集してください。 はデフォルトで「display」の「block/none」で表示/非表示の切り替えとなりますが、アニメーション用に「display」は「grid 」で固定し「z-index」で切り替える仕様になっています。 背景は「::backdrop」で指定できるので「background」と「backdrop-filter」で、コンテンツ部分は「transform」と「opacity」でそれぞれアニメーションを展開します。 後は 要素やカレンダーのスタイルです。 設定 カスタマイザーより「カートページ」を開き「配送日時指定」セクションを追加します。

Dawnの場合はアイテムと小計の間がバランスいいですね。 必要に応じてセクション及びブロック設定を編集し、不要なブロックは削除または非表示にしてください。 以上でテーマの編集・設定は完了です。 チェックアウト画面を編集 注文完了画面に配送日時や置き配の情報を掲載したい場合は、「設定→チェックアウト」を開き、追加スクリプトの欄に以下のコードを設置します。 {% if attributes %} Shopify.Checkout.OrderStatus.addContentBox( ' 配送希望日時 ', ' {{ attributes["配送日"] | date: '%Y年%-m月%-d日' }} {{ attributes["配送時間"] }} 置き配：{{ attributes["置き配"] }}

', ) {% endif %} Shopifyの仕様に合わせてh2とpタグでの構成になります。たったこれだけのコードで、注文完了画面のデザインに合わせたコンテンツボックスを出力できます。

カートにアイテムが追加されました

カートページに配送日時と置き配指定セクションを実装するチュートリアル

カートページに配送希望日時と置き配の場所を指定できるセクションをアプリを使わずに実装する方法をご紹介。

2024年7月

2024年8月