配送計算プラグイン (Shipping Calculator Plugin)¶
概要¶
Ritsubiのブランド別配送料金と直送モード(サーチャージ)を計算するVendureカスタムプラグイン。複雑な配送料金体系とゾーン別料金設定に対応します。
直送モード (Direct Shipping Mode)¶
顧客が「ユーザー直送モード」を選択した場合、注文内容に対して一定のサーチャージを加算します。この設定は管理画面から統合管理できます。
1. 直送モードの設定項目¶
管理画面の「設定 > 直送モード設定」から以下の項目を変更可能です。
- 表示名: ストアフロントでの表示名称。
- 加算率: 注文小計に対する加算率(デフォルト: 0.1 = 10%)。
- 注意文: カート画面やチェックアウト画面でユーザーに表示される説明文。
- 対象カテゴリ/商品: 直送モードが適用される制限条件(将来拡張用)。
2. 計算ロジック¶
直送サーチャージは PriceCalculationService において、以下の式で計算されます。
直送サーチャージ = 注文小計 × 加算率
最終合計金額 = 注文小計 + 直送サーチャージ + 配送料
加算率は ShippingModeEntity の surchargeRate フィールドから取得されます。
3. ストアフロントでの表示¶
直送モードが有効な場合、以下の箇所に注意文(DirectShippingNotice
コンポーネント)が表示されます。
- カート画面: カート項目の上部。
- チェックアウト画面: 各ステップ(配送先、配送・支払、確認)のメインエリア上部。
- 注文完了画面: 注文サマリーの上部。
技術仕様¶
エンティティ¶
ShippingModeEntity¶
配送モード(通常配送 or 直送モード)の設定を管理するエンティティ。
mode: モード識別子 (standard|direct)name: 表示名description: 管理用説明noticeText: ストアフロント用注意文surchargeRate: サーチャージ率isEnabled: 有効フラグtargetCategoryIds: 対象カテゴリIDリスト (JSON)targetProductIds: 対象商品IDリスト (JSON)
API エクステンション¶
Query¶
shippingModes: 全ての配送モード設定を取得directShippingMode: 直送モードの設定を単体取得
Mutation (Adminのみ)¶
updateShippingMode: 配送モード設定を更新
開発とテスト¶
単体テスト¶
コンポーネントの表示ロジックは以下のコマンドで検証できます。
pnpm --filter ritsubi-storefront test src/components/shipping/direct-shipping-notice.test.tsx
E2Eテスト (検証用)¶
NEXT_PUBLIC_STOREFRONT_API_MOCKING=enabled pnpm --filter ritsubi-storefront exec playwright test tests/e2e/direct-shipping-notice.spec.ts
設定手順¶
- 管理画面にログインし、サイドメニューの「基本設定 > 直送モード設定」を開きます。
- 「編集」ボタンをクリックして、加算率や注意文を編集します。
- 「保存」をクリックすると、即座にストアフロントの表示と価格計算に反映されます。