12ヶ月先まで指定できる配送日時指定＆営業日カレンダーのチュートリアル

はじめに 冒頭にもありますが、このカスタマイズは「配送日時指定」を改善したバージョン2といった感じです。 「営業日カレンダー」出力も同じスニペットファイルで機能しますので、その実装方法も併せて紹介します。 12ヶ月先まで出力できるため、2ヶ月以上の場合はユーザビリティを考慮し、自作のJavascriptを使ってカレンダーの月を切り替えられるようにしてあります。 また、極力シンプルな構造にするため、「週の始まり」や「休日の色」などの不要な設定はなくしたり、その他も微調整しました。 「Dawn（11.0.0）」への実装をベースに紹介していきますが、Shopify2.0対応テーマであればCSSの調整くらいで実装可能です。 前バージョンと重複する説明は省略しておりますので、コードの仕組みを知りたい方は併せて読むと理解が深まります。 アセットファイルを作成 js-slider.js 「新しいアセットを追加する」より「js-slider.js」を作成し、以下のコードを貼り付けます。 class Slider { constructor(selector, options = {}) { this.slider = document.querySelector(selector); this.slides = this.slider.querySelectorAll('.slide'); this.slideMax = this.slides.length; this.sliderPrev = this.slider.querySelector('.slider-prev'); this.sliderNext = this.slider.querySelector('.slider-next'); this.sliderController = this.slider.querySelector('.slider-controls'); this.options = Object.assign({ keyboard: false, pagination: false, clickable: false, labelSlider: 'Slider', labelPrev: 'Previous', labelNext: 'Next', labelSlide: 'Slide {index}', labelDot: 'Go to slide {index}', buttonPrev: 'Prev', buttonNext: 'Next' }, options); this.init(); } init() { this.sliderPrev.disabled = true; this.currentSlideIndex = 0; if (this.options.pagination) { this.createPagination(); } this.setupIntersectObserver(); this.setupArrowNavigation(); if (this.options.keyboard) { this.setupKeyboardNavigation(); } this.addWaiAria(); this.setupButtons(); this.updateButtonStates(); } addWaiAria() { this.slider.setAttribute('aria-label', this.options.labelSlider); this.slider.setAttribute('role', 'region'); this.sliderPrev.setAttribute('aria-label', this.options.labelPrev); this.sliderNext.setAttribute('aria-label', this.options.labelNext); if (this.options.pagination) { const dots = this.slider.querySelectorAll('.dot'); dots.forEach((dot, index) => { const dotLabel = this.options.labelDot.replace('{index}', (index + 1)); dot.setAttribute('aria-label', dotLabel); }); } this.slides.forEach((slide, index) => { const slideLabel = this.options.labelSlide.replace('{index}', (index + 1)); slide.setAttribute('aria-label', slideLabel); }); } setupButtons() { this.sliderPrev.innerHTML = this.options.buttonPrev; this.sliderNext.innerHTML = this.options.buttonNext; } createPagination() { this.sliderDots = document.createElement('div'); this.sliderDots.classList.add('slider-dots'); this.slides.forEach((slide, index) => { const dot = document.createElement('span'); dot.classList.add('dot'); dot.setAttribute('data-slide', index); if (index === 0) { dot.classList.add('current'); } if (this.options.clickable) { this.sliderDots.setAttribute('data-clickable', true); dot.addEventListener('click', () => { this.goToSlide(index); this.updateButtonStates(); }); } this.sliderDots.appendChild(dot); }); this.sliderController.appendChild(this.sliderDots); }

setupIntersectObserver() { const options = { root: this.slider.querySelector('.slider-main'), rootMargin: '0px -50%', threshold: 0 }; this.observer = new IntersectionObserver(this.handleIntersect.bind(this), options); this.slides.forEach((slide) => { this.observer.observe(slide); }); }

handleIntersect(entries) { entries.forEach((entry) => { if (entry.isIntersecting) { const currentIndex = Array.from(this.slides).indexOf(entry.target); if (currentIndex !== this.currentSlideIndex) { this.currentSlideIndex = currentIndex; this.updateButtonStates(); } } }); }

activatePagination(targetSlide) { const newIndex = Array.from(this.slides).indexOf(targetSlide); this.slider.querySelector('.dot.current').classList.remove('current'); this.slider.querySelector(`.dot[data-slide="${newIndex}"]`).classList.add('current'); }

setupArrowNavigation() { this.slider.addEventListener('click', (event) => { const target = event.target.closest('.slider-prev, .slider-next'); if (target) { const direction = target.classList.contains('slider-prev') ? 'prev' : 'next'; this.navigateSlides(direction); } }); }

navigateSlides(direction) { let newIndex; if (direction === 'prev') { this.currentSlideIndex = Math.max(0, this.currentSlideIndex - 1); newIndex = this.currentSlideIndex; } else { this.currentSlideIndex = Math.min(this.slideMax - 1, this.currentSlideIndex + 1); newIndex = this.currentSlideIndex; } this.goToSlide(newIndex); this.updateButtonStates(); }

goToSlide(index) { const targetSlide = this.slides[index]; targetSlide.scrollIntoView({ behavior: 'smooth' }); if (this.options.pagination) { this.activatePagination(targetSlide); } } updateButtonStates() { this.sliderPrev.disabled = this.currentSlideIndex === 0; this.sliderNext.disabled = this.currentSlideIndex === this.slideMax - 1; }

setupKeyboardNavigation() { document.addEventListener('keydown', (event) => { if (event.key === 'ArrowLeft') { this.navigateSlides('prev'); } else if (event.key === 'ArrowRight') { this.navigateSlides('next'); } }); }

}

これはJSライブラリを使わずにChat GPTを使って作成した、カレンダーを切り替えるだけの専用JSです。 「Swiper」や「Splide」などのJSライブラリを使うのが手っ取り早いんですが、CSSの再定義が面倒ですし、バージョンアップするたびに機能が増えて重くなる傾向にあるので、必要最低限の機能のみ実装しています。

ボタン切り替え（前・次） ページネーション（クリッカブル可） キーボード操作（左右のみ） aria-label属性の編集（デフォルトは英語） ボタンテキスト（SVG可）

比較すると、圧縮していないにも関わらず、かなり軽量なのがわかりますね。

JS CSS

js-slider 約5KB 約1KB

Splide 約30KB 約5KB

Swiper 約149KB 約18.5KB

実行コードは以下になります。 const slider = new Slider('.js-slider'); また、各オプションを有効にするには以下のように記述します。 const slider = new Slider('.js-slider', { keyboard: true, // キーボード操作を有効化 clickable: true, // ページネーションのクリッカブルを有効化 pagination: true // ページネーションを表示 labelSlider: 'スライダー', // 全体のaria-label labelPrev: 'Previous', // 戻るボタンのaria-label labelNext: 'Next', // 次へボタンのaria-label labelSlide: 'Slide {index}', // スライドのaria-label labelDot: 'Go to slide {index}', // ページネーションのaria-label buttonPrev: 'Prev', // 戻るボタンのテキスト buttonNext: 'Next' // 次へボタンのテキスト }); キーボード操作はモバイルではあまり意味がないので、デフォルトで無効にしています。（いっそのことこの機能を無くせばさらに軽量化できますが） ページネーションは、クリッカブルにすると「タップターゲットのサイズが適切でない」というSEOの減点対象になるので、回避するためにデフォルトで無効にしています。（ドットのサイズが48×48px以上のサイズが推奨）また、不要なケースもありますので、表示/非表示を選択できるようにしています。 戻るボタンと次へボタンはデフォルトでテキスト出力ですが、SVGアイコンに変更するには以下のようにテンプレートリテラルを使って定義します。 const slider = new Slider('.js-slider', { buttonPrev: `{% render 'icon-prev' %}`, buttonNext: `{% render 'icon-next' %}` }); 詳細は省きますが、CSSの「scroll-snap-type」を活用してコントロールする仕組みです。 cart-delivery-date.css 「新しいアセットを追加する」より「cart-delivery-date.css」を作成し、以下のコードを貼り付けます。 /* Layout */ .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; gap: 2rem; } .delivery-date--container > * { flex: 1; } }

/* Modal */ .delivery-date--dialog { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-content: center; padding: 0; border: none; z-index: -1000; background: rgba(0, 0, 0, 0); transition: 0.2s linear; } .delivery-date--dialog[data-modal="true"] { background: rgba(0, 0, 0, 0.1); backdrop-filter: blur(1rem); z-index: 1000; } .delivery-date--dialog-content { position: relative; background: #fff; padding: 2rem; opacity: 0; border-radius: 1em; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1); transform: scale(0); transition: 0.2s linear; } .delivery-date--dialog[data-modal="true"] .delivery-date--dialog-content { opacity: 1; transform: scale(1); } .delivery-date--dialog-title { font-size: 1.2em; text-align: center; margin: 0.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; } @media (min-width: 560px) { .delivery-date--dialog-content { padding: 4rem; } }

/* Calendar */ .delivery-date--calendar { text-align: center; } .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: 0.5rem; text-align: center; } .delivery-date--calendar .calendar .day { display: grid; place-content: center; line-height: 1; letter-spacing: 0; height: 2em; } .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: 0.5; pointer-events: none; } .delivery-date--calendar .calendar .day input { display: none; } .delivery-date--calendar .calendar .day label { border-radius: 50%; cursor: pointer; transition: 0.1s linear; display: grid; place-content: center; width: 2em; height: 2em; } .delivery-date--calendar .calendar .day label:hover { background: rgb(204, 0, 0, 0.1); } .delivery-date--calendar .calendar .day input:checked + label { background: #c00; color: #fff; }

/* JS Slider */ .slider-main { display: flex; max-width: 30rem; overflow: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } .slider-main::-webkit-scrollbar { display: none; } .slider-main .slide { min-width: 100%; scroll-snap-align: start; } .slider-controls { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; } .slider-controls button { display: grid; place-content: center; width: 3rem; height: 3rem; background: #000; color: #fff; padding: 0; margin: 0; border: none; border-radius: 0; cursor: pointer; } .slider-prev { order: 1; } .slider-next { order: 3; } .slider-dots { order: 2; flex: 1; display: flex; justify-content: center; align-items: center; gap: 0.5rem; } .slider-dots .dot { display: block; width: 0.5rem; height: 0.5rem; background: #eee; border-radius: 50%; transition: 0.2s linear; } .slider-dots .dot.current { background: #000; } .slider-dots[data-clickable="true"] .dot { cursor: pointer; } 1-32行目はセクションのレイアウト、34-93行目はモーダル、95-145行目はカレンダー、147行目移行がJS Sliderの制御部分となります。 サイトデザインに合わせて自由に編集してかまいませんが、JS Slider部分を編集する際はご注意下さい。 スニペットファイルを作成 「新しいスニペットを追加する」より「calendar.liquid」を作成し、以下のコードを貼り付けます。 {%- liquid assign regular_holiday = setting.regular_holiday | replace: '日', 'sun' | replace: '月', 'mon' | replace: '火', 'tue' | replace: '水', 'wed' | replace: '木', 'thu' | replace: '金', 'fri' | replace: '土', 'sat' | split: ',' assign business_holiday = setting.business_holiday | newline_to_br | strip_newlines | split: ' ' assign business_day = setting.business_day | newline_to_br | strip_newlines | split: ' ' assign holiday = setting.holiday

if delivery_date assign day = 86400 assign date_min = setting.date_min | times: day assign close_time = setting.close_time assign calendar_size = setting.calendar_size endif

if slide assign calendar_wrap_class = 'calendar-wrap slide' else assign calendar_wrap_class = 'calendar-wrap' endif

for blank in (1..set_start_week) echo blank | prepend: ' ' | append: ' ' endfor

for day in (1..31) assign set_date = set_year | append: '-' | append: set_month | append: '-' | append: day | date: '%Y-%m-%d' assign set_week = set_date | date: '%a' | downcase assign day_class = 'day' if set_date == now_date assign day_class = 'day current' endif assign data_holiday = false if regular_holiday contains set_week or business_holiday contains set_date assign data_holiday = true endif if business_day contains set_date assign data_holiday = false endif if delivery_date assign now_date_s = now_date | date: '%s' | abs assign set_date_s = set_date | date: '%s' | abs assign now_time = 'now' | date: '%k' | abs

assign set_min_date = now_date_s | plus: date_min | abs

if now_time > close_time assign set_min_date = set_min_date | plus: day | abs endif if set_date_s < set_min_date or holiday and set_week == 'sat' or set_week == 'sun' assign day_class = 'day disabled' endif endif

echo ' ' echo ' ' endfor -%}

document.addEventListener('DOMContentLoaded', function () { 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(); }); });

function showCalendar() { bodyTag.classList.add('overflow-hidden'); calendar.setAttribute('data-modal', true); } function closeCalendar() { bodyTag.classList.remove('overflow-hidden'); calendar.setAttribute('data-modal', false); }

const slider = new Slider('.js-slider', { keyboard: true, pagination: true }); }); {%- endif -%}

{% 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": "calendar_size", "label": "出力するカレンダー数", "min": 2, "max": 12, "step": 1, "unit": "ヶ月", "default": 12 }, { "type": "checkbox", "id": "holiday", "label": "土日祝を選択不可にする", "default": false, "info": "※チェックを入れると土日祝を除く平日のみ選択できます" }, { "type": "range", "id": "close_time", "label": "締め時間", "min": 1, "max": 24, "step": 1, "unit": "時", "default": 13 } ] }, { "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": "日本通運" }, { "value": "other", "label": "その他" } ], "default": "yamato" }, { "type": "textarea", "id": "custom_option", "label": "その他の選択項目", "placeholder": "value/label\nvalue/label\nvalue/label", "info": "配送業者が「その他」の場合に適用されます。" } ] }, { "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 %} こちらも前回のコードとほぼ同じなので、変更ポイントだけご紹介します。 配送日ブロック 以前は最短日がデフォルト値に入っていましたが、選択後に値が反映されるようになっています。連休を挟んだり臨時休業日や定休日が設定されていた場合、本来の選択不可日がデフォルト値に入ったりするケースがあったからです。 モーダル 以前は タグを使って制御していましたが、スライドショーの仕様によってレイアウト崩れが起きたりするケースもありますし、 タグで制御した方がコードも減らせて便利なのに気づきました。 calendar_id フッターに営業日カレンダーが出力されていた場合、祝日反映にエラー出てしまうので、重複しないIDを設けました。 JS Slider 基本的には以下のHTML構造で動きます。 1 2 3 4 Prev Next クラス名さえ一緒なら多少は構造を変えても構いません。例えば、 を「slider-controls」の外に出してもページ送りは動作しますが、「slider-controls」自体はページネーションの出力に使いますので必要です。 {% render 'calendar' %} 配送日指定カレンダーの出力に必要な変数パラメータは以下の4つです。

setting: block.settings delivery_date: true calendar_id: calendar_id slide: true

SVGアイコン 恐らくこのままコピペしても「snippet/icons.liquid」が無いため、Liquidエラーがでると思います。以下のアイコンをご用意の上、必要に応じて{% render 'icons' %}部分のコードを編集してください。

カレンダー 閉じる 戻る 次へ

配送時間ブロック デフォルトで主要配送会社を6社登録していますが、連携システムによってvalue値に半角英数字以外が入っていたりするとエラーが出るケースもあります。このLiquidのHTML部分を編集すればよいのですが、なるべくノーコードで編集できるように「その他」の選択肢を設け、その他の選択項目へスラッシュ＆改行区切りで入力すれば反映されるようになっています。 // その他の選択項目 9:00-12:00/9時から12時 13:00-17:00/13時から17時

// 出力結果 9時から12時 13時から17時 Javascript こちらはモーダルの開閉用コードを、data-modal属性の「true/false」で制御する仕様に変更しました。あとは「js-slider.js」の読み込みとその実行コードを追加した程度です。 配送日時指定のセットアップは以上です。 営業日カレンダーの設定 基本的には前回と同様ですが、フッターのブロック以外にもセクションとしてページにも利用可能となっています。 Schema まずは設定から。ブロックとして出力する場合はブロック設定、セクションとして出力する場合はセクション設定に以下の設定を反映させます。 { "type": "text", "id": "calendar_title", "label": "タイトル", "default": "営業日カレンダー" }, { "type": "text", "id": "regular_holiday", "label": "定休日", "default": "土,日", "info": "複数の場合はカンマ区切り。" }, { "type": "textarea", "id": "business_holiday", "label": "休業日", "info": "営業日でも休業する場合は、YYYY-MM-DDで入力。複数の場合は改行。" }, { "type": "textarea", "id": "business_day", "label": "営業日", "info": "定休日でも営業する場合は、YYYY-MM-DDで入力。複数の場合は改行。" }, { "type": "checkbox", "id": "holiday", "label": "祝日を休業日に設定", "default": false }, { "type": "textarea", "id": "information", "label": "インフォメーション", "default": "定休日：土日祝日\n営業時間：9:00〜18:00" } Liquid 続いて以下の構造で同ファイルに設置します。セクション化する場合は「block」を「section」に変更してください。 {% assign calendar_id = section.id | prepend: 'Calendar-' %} {{ 'business-calendar.css' | asset_url | stylesheet_tag }} {% if block.settings.calendar_title != blank %} {{ block.settings.calendar_title }} {% endif %} {% render 'calendar', setting: block.settings, calendar_id: calendar_id, calendar_size: 2 %}

{%- if block.settings.regular_holiday != blank or block.settings.holiday != true -%} 休業日

{%- endif -%} {%- liquid if block.settings.information echo block.settings.information | newline_to_br | prepend: ' ' | append: '

' endif -%} 前述にもありますが、「calendar_size」にて出力数を制御しています。 フッターにブロックとして設置する例なので値を「2」としていますが、ページに年間スケジュールとして出力する場合は最大「12」を目安に編集してください。 CSS 「business-calendar.css」は以下を見習って設置します。 .business-calendar-container { font-size: 0.9em; text-align: center; border: none; } .business-calendar .calendar-title { margin: 0 0 1.5em; } .business-calendar .calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5em; } .business-calendar .calendar .day { position: relative; min-width: 2em; line-height: 2; letter-spacing: 0; } .business-calendar .calendar .day[data-week="sun"], .business-calendar .calendar .holiday { color: #c00; } .business-calendar .calendar .day[data-week="sat"] { color: #069; } .business-calendar .calendar .day::after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ""; display: block; width: 2em; height: 2em; border-radius: 50%; z-index: -1; } .business-calendar .calendar .day.current::after { box-shadow: 0 0 0 1px #c00 inset; } .business-calendar .calendar .day[data-holiday="true"]::after { background: rgba(204, 0, 0, 0.1); } .business-calendar-information { text-align: center; margin-top: 1em; } .business-calendar-information .business-holiday { display: flex; justify-content: center; align-items: center; gap: 0.5em; } .business-calendar-information .business-holiday::before { content: ""; display: inline-block; width: 1.5em; height: 1.5em; background: rgba(204, 0, 0, 0.1); border-radius: 50%; } 休業日の色などを減らしたので、前回と多少コードが変わっています。といってもカラー値くらいですが。 サイトに合わせてご自由に編集してくださいね。 営業日カレンダーのセットアップは以上です。

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

12ヶ月先まで指定できる配送日時指定＆営業日カレンダーのチュートリアル

営業日カレンダーも使い回せて、12ヶ月先まで出力できる多機能な配送日指定を開発しました。

2024年5月

2024年6月