商品ページの「最短日の表示」ブロックの仕様と設定

screens: オンラインストア → テーマ → カスタマイズ → 商品ページ → アプリブロック「最短日の表示」
verified_from: theme-develop の shortestPorducts.ts / product/getMessage.ts / テーマ拡張の block 定義 (product-cc-dellivery.liquid) / 人間向けマニュアル
note: このブロックは「表示するだけ」。カートに入れたあとの日付の選択はカート側のウィジェットで行う。

SUMMARY

商品ページに、その商品の 最短お届け日 を表示するアプリブロック「最短日の表示」(英語名 Display Shortest Date)。 表示する日付は、管理画面の最短日の設定 (営業日・カレンダーデイ・カットオフ・営業休業日・地域別の調整) を計算した結果と同じ (020 の S-*)。

RULES

P-1  日付は、閲覧中のバリアントを対象に計算する。バリアントを切り替えると再計算する。
P-2  「商品毎のグループを有効にする」が ON のとき、その商品がどのグループになるか (商品の紐づけ・商品タグ・タグ::SKU・条件) で、
     グループごとの最短日を表示する。商品ページでは、ほかにカートへ入っている商品は考慮しない。
     (カート側のウィジェットは、カート内の全商品から priority 最小のグループを使う。ここが食い違いの原因になりやすい)
P-3  条件 (重量/合計金額/在庫) のグループは、このバリアントの重量・金額・数量で判定する。カートに同じバリアントが入っていれば、その数量を使う。
P-4  次の場合はブロックごと表示されない:
     - 非表示商品として設定された商品
     - そのグループ (または配送方法) で「配送希望日を表示しない」設定になっている
     - 「在庫切れの時は表示しない」が ON で、そのバリアントが在庫切れ
P-5  日付の書式は管理画面「カレンダーの設定」の「入力される日付のフォーマット」と同じ。
P-6  現在時刻は、配信設定にタイムゾーンがあればその時刻、無ければ閲覧者のブラウザの時刻 (S-6 と同じ)。
P-7  「配送方法、配送地域などをセレクトボックスで表示する」ON: 商品ページで配送方法/配送地域を選ぶと、その選択肢の分だけ最短日が変わる (S-7)。
     配送方法 (スロット) が有効なときは「配送方法名: 日付」を並べて表示する。
P-8  存在しないバリアントの組み合わせ (選べない組み合わせ) を選ぶと、数秒間は前の表示のままで、そのあと既定のグループの表示になる。
P-9  このブロックは動的チェックアウトとは無関係に、商品ページに「表示」するだけ。注文に配送日時は付かない。

UI_LABELS

アプリブロック「最短日の表示」の設定項目 (テーマカスタマイズの右側):

項目名初期値
最初の文章最短お届け日は
最後の文章です。
ノート(テキスト)
フォントのサイズ / ノートのフォントのサイズ16 / 14
テキストカラー / テキストカラー(ノート) / テキストカラー(最短日)#6A6A6A / #737373 / #121212
在庫切れの時は表示しないOFF
配送方法、配送地域などをセレクトボックスで表示するOFF
選択肢(配送地域など)の初期表示のテキスト-

PROC-P1 商品ページに最短日を表示する

場所: Shopify 管理画面の「オンラインストア」 > 「テーマ」 > 「カスタマイズ」 > 商品ページ > 「ブロックを追加」 > アプリの「最短日の表示」

  1. Shopify 管理画面の「オンラインストア」→「テーマ」→「カスタマイズ」を開く
  2. 上部のページ選択で「商品ページ」(商品テンプレート) を選ぶ
  3. 表示したい位置で「ブロックを追加」→ アプリの「最短日の表示」を選ぶ
  4. 右側で文章・文字サイズ・色を調整して保存する

PROC-P2 配送地域や配送方法で日付を切り替えて見せる

場所: アプリの左メニュー「設定」 > カード「配送希望日」 > チェック「選択肢(配送地域など)による最短日の調整を設定する」 (先に設定) → テーマの「カスタマイズ」 > 「最短日の表示」ブロック

  1. 設定画面で「選択肢(配送地域など)による最短日の調整を設定する」(または配送方法) を設定しておく
  2. 「最短日の表示」ブロックで「配送方法、配送地域などをセレクトボックスで表示する」を ON にする
  3. 必要なら「選択肢(配送地域など)の初期表示のテキスト」を変える (初期値は「-」)

QA

  • Q: 商品ページの最短日は、何をもとに決まるか。調整したい。 A: 最短日の設定 (営業日・カレンダーデイ・カットオフ・営業休業日・地域別の加算) の計算結果。調整は設定画面の該当項目を変える (020 の S-1〜S-7)。
  • Q: 商品ごとに最短日を変えたい。 A: 商品のグループ化 (タグ・商品管理・条件) で、グループごとに最短日を設定する。商品ページのブロックにはグループごとの日付が出る (P-2)。
  • Q: バリアントごとに最短日を変えたい。 A: 「タグ::SKU」でバリアントをグループに紐づける (C-5)。優先順位に注意 (複数タグが付くと priority 最小が使われる)。
  • Q: 商品ページの日付と、カートで選べる最短日が違う。 A: 商品ページは閲覧中のバリアントだけで計算するが、カートはカート内の全商品から priority 最小のグループを使う (P-2)。複数商品・条件グループ・非表示商品の有無を確認する。地域別の加算は、商品ページではセレクトボックスで選ばないと加算されない (P-7)。
  • Q: 商品ページに最短日が出ない。 A: P-4 を順に確認する (非表示商品か / 日付を表示しない設定か / 在庫切れの非表示)。あわせて、ブロックを置いたテンプレートが商品ページか確認する。
  • Q: 日付が表示されるが「今日」になる / 古い。 A: 断定しない。ブラウザ・テーマ・ストアURL を依頼する (ESCALATE)。
  • Q: 商品ページに「配送日時を選ぶカレンダー」を置きたい。 A: 商品ページにも設置できるが、商品ごとのグループ化は反映されない (L-4)。
  • Q: 「発送予定日」と表示したい。 A: 文章は「最初の文章」「最後の文章」で変えられる。計算されるのは最短日で、発送日の計算ではない。別の計算が必要な場合は確認する。

ESCALATE

状況依頼する情報
商品ページの日付が期待とずれる商品URL、バリアント、設定画面の最短日の設定、カート内の商品、ブラウザ
バリアントを切り替えても日付が変わらない / 遅れて変わる商品URL、テーマ名、切り替えたバリアント、ブラウザのコンソールのエラー
ブロックが出ない商品URL、テーマ名、テーマカスタマイズでブロックを追加している画面

SEE

インストール
テックブログ