はじめに このカスタマイズ方法は現在の日付から「◯日後」や「締め時間」で分岐させるシンプルな仕様です。 出力日が祝日だった場合は翌日に変換されますが、連休には対応しておりません。また、出力結果は土日を除くことはできますが、臨時休業や平日の定休日には対応しておりませんので、長期休暇案内セクションを実装や営業日カレンダーを実装と併用してご利用いただくか、さらにカスタマイズしてご利用ください。 スニペットファイルを追加 「新しいスニペットを追加する」より「product-shipping-date.liquid」を作成し以下のコードを順番にコピペしてください。 Liquidコード {% liquid assign day = 86400 assign now = 'now' | date: '%s' assign now_time = 'now' | date: '%k' | abs assign date_format = block.settings.date_format assign shipping_days = block.settings.shipping_day | times: day assign shipping_close_time = block.settings.shipping_close_time assign holiday = block.settings.holidays_jp_api assign show_weekday = block.settings.show_weekday assign exclude_weekend = block.settings.exclude_weekend if now_time <= shipping_close_time assign set_day = now | plus: shipping_days else assign set_day = now | plus: shipping_days | plus: day endif capture shipping_date assign set_date = set_day assign weekday = set_day | date: '%a' if exclude_weekend if weekday == 'Sat' assign set_date = set_day | plus: day | plus: day assign weekday = set_day | plus: day | plus: day | date: '%a' elsif weekday == 'Sun' assign set_date = set_day | plus: day assign weekday = set_day | plus: day | date: '%a' endif endif if show_weekday capture weekday_jp if weekday == 'Sun' echo '日曜日' elsif weekday == 'Mon' echo '月曜日' elsif weekday == 'Tue' echo '火曜日' elsif weekday == 'Wed' echo '水曜日' elsif weekday == 'Thu' echo '木曜日' elsif weekday == 'Fri' echo '金曜日' elsif weekday == 'Sat' echo '土曜日' endif endcapture endif echo set_date | date: date_format | append: weekday_jp assign data_shipping_date = set_date | date: '%Y-%m-%d' endcapture %} 順に説明します。 2行目の「day」で1日を秒数としたもの、3行目で現在の日付をUNIX時間、4行目の「now_time」で現在の時刻を定義しています。 5〜10行目はそれぞれブロック設定を割り当てており、「shipping_days」は「日数×86400」で出荷日までの日数を秒に変換しています。 12〜16行目は締め時間の分岐で、現在の時刻が締め時間を超えた場合に1日追加される仕組みです。 18〜52行目にて、出力される日付を定義しています。締め時間分岐で算出された日時が土曜日だった場合は＋2日、日曜日だった場合は＋1日が追加され、オプションとして曜日が日本語で出力されるようになっています。 HTMLコード <div class="shipping-date-box"> {%- capture date_format -%} <strong id="ShippingDate" class="shipping-date" data-shipping-date="{{ data_shipping_date }}">{{ shipping_date }}</strong> {%- endcapture -%} <p>{{ block.settings.label | replace: 'date', date_format }}</p> </div> 「date_format」にて算出した日付を定義します。ブロック設定で「発送予定日: date」とした場合、「date」部分を日付と置換されるようになっています。また、「data_shipping_date」では「YYYY-MM-DD」形式で発送日が出力されます。 HTML構造はお好みで編集してください。 Javascriptコード {%- if holiday -%} <script> const ShippingDate = document.getElementById('ShippingDate'); const DataShippingDate = ShippingDate.getAttribute('data-shipping-date'); const holidays_jp = 'https://holidays-jp.github.io/api/v1/date.json'; const formatOptions = { year: 'numeric', month: 'long', day: 'numeric', {% if show_weekday %}weekday: 'long',{% endif %} }; const fetchHolidays = async () => { try { const response = await fetch(holidays_jp); const holidaysData = await response.json(); if (holidaysData[DataShippingDate]) { const currentDate = new Date(DataShippingDate); currentDate.setDate(currentDate.getDate() + 1); const nextShippingDate = new Intl.DateTimeFormat('ja-JP', formatOptions).format(currentDate); ShippingDate.textContent = nextShippingDate; ShippingDate.setAttribute('data-shipping-date', currentDate.toISOString().split('T')[0]); } } catch (error) { console.error('Failed to fetch holidays:', error); } }; fetchHolidays(); </script> {%- endif -%} これは祝日に発送しない場合のみ出力されます。 Liquidコードでは日本の祝日に対応していないため、「Holidays JP API」という日本の祝日を出力するAPIを使用して、「data-shipping-date」属性の値が祝日だった場合に翌日に書き換えるというJavascriptです。 冒頭にもありますが連休には対応しておりませんので、対応させたい場合はこの部分をカスタマイズしてください。 以上で、スニペットファイルは完了です。 セクションファイルを編集 商品ページを出力するファイルを開きます。Dawnの場合は「sections/main-product.liquid」が該当します。 スキーマにブロックを追加 {% schema %}内の「blocks」に以下のブロックを追加します。 { "type": "shipping_date", "name": "発送予定日", "limit": 1, "settings": [ { "type": "text", "id": "label", "label": "出力テキスト", "default": "発送予定日: date", "info": "dateで日付を出力" }, { "type": "text", "id": "date_format", "label": "日付フォーマット", "default": "%Y年%-m月%-d日", "info": "[Rubyドキュメント](https://ruby-doc.org/core-3.1.1/Time.html#method-i-strftime)または[strftimeリファレンスとサンドボックス](https://www.strfti.me/)を参照してください。" }, { "type": "range", "id": "shipping_day", "label": "発送日", "min": 0, "max": 14, "step": 1, "unit": "日後", "default": 2, "info": "「0」で締め時間までは当日発送" }, { "type": "range", "id": "shipping_close_time", "label": "締め時間", "min": 0, "max": 23, "step": 1, "unit": "時", "default": 12 }, { "type": "checkbox", "id": "show_weekday", "label": "曜日を表示", "default": true }, { "type": "checkbox", "id": "exclude_weekend", "label": "週末を除外", "default": true, "info": "土日を発送日から除外し翌営業日を出力します。" }, { "type": "checkbox", "id": "holiday", "label": "祝日を除外", "default": true, "info": "[Holidays JP API](https://holidays-jp.github.io/)より日本の祝日情報を取得します。" } ] } ブロック設定の詳細に関しては、後ほど「設定」にてご説明します。 「発送日」は14日後まで設定できるようになっていますが、それ以上の日数を設定する場合は「max」の値を編集してください。 2.0に未対応のテーマに実装する場合は、ブロック設定をセクション設定に置き換えるなどしてください。 スニペットファイルを読み込む {% case block.type %}〜{% endcase %}内の最後の方に以下のコードをコピペしてください。 {%- when 'shipping_date' -%} {% render 'product-shipping-date' block: block %} 2.0に未対応のテーマをご利用の際は{% when %}以外の2行を、購入ボタン付近に分岐などして実装してください。 以上でテーマの編集は終わりです。 設定 カスタマイザーより商品ページを開き、「ブロックを追加」で「発送予定日」ブロックを追加し、お好きな位置にドラッグしてください。 2.0に未対応のテーマをご利用の際は不要です。 各設定について上から順に説明します。 「出力テキスト」では実際に出力するテキストを設定できます。「発送予定日: date」とした場合は「発送予定日: YYYY年MM月DD日」と出力されます。「date」部分が日付に置換されますので、「YYYY年MM月DD日に発送」といった感じでも出力できます。 「日付フォーマット」はサイトに合わせて好きなフォーマットで出力できます。「%Y-%m-%d」とすれば「YYYY-MM-DD」、「%Y/%m/%d」で「YYYY/MM/DD」と出力されます。 「発送日」は何日後に発送するのかを設定します。当日出荷の場合は「0」日で設定してください。 「締め時間」では受付の締め切り時間を設定できます。特に設定しない場合は定時などを設定してください。 「曜日を表示」にチェックで日付の末尾に曜日を出力できます。曜日は「○曜日」と日本語表記となりますが「（月）」などカッコ書きを希望の場合は、2-1のLiquidコードを編集してください。 「週末を除外」にチェックで土日を出力結果から除外し、翌月曜日の日付が出力されます。 「祝日を除外」にチェックで、日付の出力結果が祝日だった場合に翌日が出力されます。冒頭にもありますが連休には対応しておりませんので、連休前に「発送日」を操作するなどして対応する必要があります。
