営業日カレンダーを実装するチュートリアル

はじめに このチュートリアルでは、フッターセクションのブロック設定で動的に編集できる「営業カレンダー」を出力させるカスタマイズ方法を紹介しております。 このカスタマイズを応用すれば、フッター以外に出力させたり、セクションとして実装したりも可能です。 セクションファイルを編集 セクションファイルを開く フッター部分を出力するセクションファイルを開きます。Dawnの場合「sections/footer.liquid」が該当しますが、他のテーマではファイル名が異なる場合がございます。 セクション設定を追加 {% schema %}内のblocks下に以下のブロックを追加します。 { "type": "calendar", "name": "営業日カレンダー", "settings": [ { "type": "text", "id": "calendar_title", "label": "タイトル", "default": "営業日カレンダー" }, { "type": "color", "id": "holiday_color", "label": "休業日の背景色", "default": "#fcc" }, { "type": "select", "id": "week_start", "label": "週の始まり", "options": [ { "value": "sunday", "label": "日曜日" }, { "value": "monday", "label": "月曜日" } ], "default": "sunday" }, { "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コードを追加 続いて同ファイルの{% case block.type %}下に以下のコードを追加します。 {%- when 'calendar' -%} :root { --holiday-bg: {{ block.settings.holiday_color }}; } {{ 'business-calendar.css' | asset_url | stylesheet_tag }} {% if block.settings.calendar_title != blank %} {{ block.settings.calendar_title }} {% endif %} {% render 'business-calendar', week_start: block.settings.week_start, regular_holiday: block.settings.regular_holiday, business_holiday: block.settings.business_holiday, business_day: block.settings.business_day, holiday: block.settings.holiday, %}

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

' endif -%} シンプルなHTML構造ですので、テーマやお好みに合わせて編集してください。 CSSファイルを作成 「新しいアセットを追加する」より「business-calendar.css」を作成し、以下のCSSコードをコピペします。 .business-calendar-container { display: grid; grid-template-columns: 1fr; gap: 3rem; }

.calendar-title { text-align: center; }

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

.calendar .day { line-height: 1; padding: .5em; }

.calendar .day[data-week="sun"], .calendar .holiday { color: red; }

.calendar .day[data-week="sat"] { color: blue; }

.calendar .day[data-holiday="true"] { background: var(--holiday-bg); }

.calendar .day[data-business-day="true"] { background: none; }

.calendar .day.current { box-shadow: 0 0 0 1px red inset; }

.calendar .day.disabled { opacity: .5; }

.business-calendar-information .business-holiday { display: flex; align-items: center; gap: .5em; }

.business-calendar-information .business-holiday::before { content: ""; display: inline-block; width: 1em; height: 1em; background: var(--holiday-bg); }

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

.business-calendar-information .business-holiday { justify-content: center; } } レスポンシブ設計でスマホでは1列、タブレットやデスクトップは2列でカレンダーが表示されます。 休業日マスの背景色はブロック設定と連動しており「var(--holiday-bg)」です。土日祝日マスの色は「blue」「red」となっておりますが、サイトデザインに合わせて編集してください。 必要最低限のシンプルデザインとなっておりますので、お好みに合わせて編集してください。 スニペットファイルを作成 「新しいスニペットを追加する」より「business-calendar.liquid」を作成し、以下のコードをコピペします。 {%- liquid assign regular_holidays = regular_holiday | replace: '日', 'Sun' | replace: '月', 'Mon' | replace: '火', 'Tue' | replace: '水', 'Wed' | replace: '木', 'Thu' | replace: '金', 'Fri' | replace: '土', 'Sat' | split: ',' assign business_holidays = business_holiday | newline_to_br | strip_newlines | split: ' ' assign business_days = business_day | newline_to_br | strip_newlines | split: ' ' if week_start == 'sunday' assign week = '日/sun,月/mon,火/tue,水/wed,木/thu,金/fri,土/sat' | split: ',' elsif week_start == 'monday' assign week = '月/mon,火/tue,水/wed,木/thu,金/fri,土/sat,日/sun' | split: ',' endif assign now_year = 'now' | date: '%Y' | abs assign now_month = 'now' | date: '%-m' | abs assign now_day = 'now' | date: '%-d' | abs if now_month == 12 assign next_year = now_year | plus: 1 assign next_month = 1 else assign next_year = now_year assign next_month = now_month | plus: 1 endif assign start_date = 'now' | date: '%Y-%m-01' if week_start == 'sunday' assign start_week = start_date | date: '%w' elsif week_start == 'monday' assign start_week = start_date | date: '%w' | minus: 1 endif assign end_date = 'now' | date: '%Y-%m-31' | date: '%-d' | abs capture end_day if end_date == 1 echo 30 elsif end_date == 2 echo 29 elsif end_date == 3 echo 28 else echo 31 endif endcapture assign next_end_date = next_year | append: '-' | append: next_month | append: '-31' | date: '%-d' | abs capture next_end_day if next_end_date == 1 echo 30 elsif next_end_date == 2 echo 29 elsif next_end_date == 3 echo 28 else echo 31 endif endcapture capture calendar_week for weekday in week assign week_name = weekday | split: '/' echo week_name[0] | prepend: ' ' | replace: 'data_week', week_name[1] | append: ' ' endfor endcapture echo ' ' echo now_year | append: '年' | append: now_month | append: '月' | prepend: ' ' | append: ' ' echo ' ' echo calendar_week for blank in (1..start_week) echo blank | prepend: ' ' | append: ' ' endfor for day in (1..end_day) assign date_format = now_year | append: '-' | append: now_month | append: '-' | append: forloop.index | date: '%Y-%m-%d' assign day_week = date_format | date: '%a' assign attr_date = date_format | json | prepend: ' data-date=' assign attr_week = date_format | date: '%a' | downcase | json | prepend: ' data-week=' assign attr_holiday = 'false' | json | prepend: ' data-holiday=' if regular_holidays contains day_week or business_holidays contains date_format assign attr_holiday = attr_holiday | replace: 'false', 'true' endif assign replace_tag = 'div' | append: attr_date | append: attr_week | append: attr_holiday | append: attr_business_day if forloop.index == now_day assign day_class = 'day current' else assign day_class = 'day' endif assign day_number = date_format | date: '%-d' | prepend: ' ' | append: ' ' echo day_number | prepend: ' ' | replace: 'day_class', day_class | replace: 'div', replace_tag | append: ' ' endfor echo ' ' assign next_start_date = next_year | append: '-' | append: next_month | append: '-01' if week_start == 'sunday' assign next_start_week = next_start_date | date: '%w' elsif week_start == 'monday' assign next_start_week = next_start_date | date: '%w' | minus: 1 endif echo ' ' echo next_year | append: '年' | append: next_month | append: '月' | prepend: ' ' | append: ' ' echo ' ' echo calendar_week for blank in (1..next_start_week) echo blank | prepend: ' ' | append: ' ' endfor for day in (1..next_end_day) assign date_format = next_year | append: '-' | append: next_month | append: '-' | append: forloop.index | date: '%Y-%m-%d' assign day_week = date_format | date: '%a' assign attr_date = date_format | json | prepend: ' data-date=' assign attr_week = date_format | date: '%a' | downcase | json | prepend: ' data-week=' assign attr_holiday = 'false' | json | prepend: ' data-holiday=' if regular_holidays contains day_week or business_holidays contains date_format assign attr_holiday = attr_holiday | replace: 'false', 'true' endif assign replace_tag = 'div' | append: attr_date | append: attr_week | append: attr_holiday | append: attr_business_day assign day_class = 'day' assign day_number = date_format | date: '%-d' | prepend: ' ' | append: ' ' echo day_number | prepend: ' ' | replace: 'day_class', day_class | replace: 'div', replace_tag | append: ' ' endfor echo ' ' -%}

{%- if holiday -%} let holidays_jp = 'https://holidays-jp.github.io/api/v1/date.json'; fetch(holidays_jp) .then((response) => response.json()) .then((holidaysData) => { let holidays = Object.keys(holidaysData); for (holiday of holidays) { let targets = document.querySelectorAll('[data-date="' + holiday + '"]'); for (target of targets) { target.setAttribute('data-holiday', 'true'); target.classList.add('holiday'); } } }); {%- endif -%} かなり長くなりましたが、ざっくり説明します。 Liquid上でカレンダーを出力する為に取得するのは主に「月の始め」と「月の終わり」。 「月の始め」は「'now' | date: '%Y-%m-01'」で簡単に出せるのですが、「月の終わり」は28日〜31日まである為、分岐で計算します。 例えば「'now' | date: '%Y-%m-31'」だと、11月31日は存在しないので12月1日として出力されますが、この末尾にさらに「date: '%-d'」を加えることで「1」として出力されます。これを条件分岐して、1の場合は30日が末日、2の場合は29日が末日、3の場合は28日が末日、それ以外は31日が末日ということになります。 「当月の始め」から「date: '%w'」で曜日番号を取得し、開始する曜日を計算。開始日の前に空のマスを並べます。続いて1日から末日までをForloopで出力します。 Forloop内では「今年-今月-forloop.index」で日付を算出し、「date: '%a'」で曜日を出力「data-week」属性に格納します。

ブロック設定の定休日や休業日は「data-holiday」属性に「true」値として格納されます。 祝日情報は「Holidays JP API」から最後の で取得しており、「祝日を休業日に設定」にチェックを入れることで、「data-holiday」属性が「true」に書き換えられます。 翌月分のカレンダーも同様の仕組みで出力しております。 「週の始まり」を変更するのは必要ないかとは思いましたが、WordPressでも選択できるようになっているので、とりあえず「日曜日」か「月曜日」だけ選択できるようにしました。 休日マスの背景色も本来はCSSで指定でよいのですが、とりあえず付けてみました。ブロック設定に追記すれば土日祝のテキストカラーも変更できるようになります。 さらにカスタマイズすれば「午前休み」や「午後休み」「出荷のみ」とかの設定もできます。 以上でテーマのカスタマイズは完了です。 ブロック設定 カスタマイザーのフッターセクションに「営業日カレンダー」ブロックを追加すれば、サイト上に反映されます。 ブロック設定の機能は以下の通りです。

タイトル カレンダー上に表示されるタイトルを編集できます。デフォルトは「営業日カレンダー」ですが、空欄で非表示になります。 休業日の背景色 テーマに合わせて休業日マスの背景色を編集できます。デフォルトは「#ffcccc」です。 カレンダーの週始めの曜日を変更できます。デフォルトは「日曜日」で、「月曜日」からに変更できます。 定休日 カンマ区切りで定休日を設定できます。デフォルトは「土,日」で、月曜日の場合は「月」と入力してください。 休業日

営業日でも休業する場合は、テキストエリアにYYYY-MM-DD形式で入力するとカレンダーに反映されます。複数日の場合は改行してご入力ください。

営業日

定休日や祝日でも休業する場合は、テキストエリアにYYYY-MM-DD形式で入力するとカレンダーに反映されます。複数日の場合は改行してご入力ください。

祝日を休業日に設定 チェックを入れることで、祝日が休業日としてカレンダーに反映されます。

インフォメーション カレンダー下に定休日や営業時間などの情報をフリーテキストで入力できます。空欄で非表示になります。

最後に

元々は営業日カレンダーを作る予定ではなく、カート画面の配送希望日入力をアプリやjQuery、JSライブラリを使わずに実装する方法を考えていて派生しました。 Javascriptで営業日カレンダーを実装する方法は、探せばいくらでも出てくるのですが、Liquidで出力する方法は当記事を執筆した時点では見つかりません。 設計するにあたり、最後まで悩んだのが祝日判定でした。 この記事を書くまではGoogle Calendar APIから祝日カレンダーを取得する方法の予定でしたが、APIキーを取得するためにクレジットカード情報の入力など手間が増え記事も長くなるので、その部分だけ設計を変更しました。 そのおかげで、3ステップでテーマに実装できる簡単設計になっております。

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

営業日カレンダーを実装するチュートリアル

カスタマイザーで編集可能なピュアリキッドの営業日カレンダーが実装できます

2024年4月

2024年5月