コンテンツにスキップ

配送計算プラグイン (Shipping Calculator Plugin)

概要

Ritsubiのブランド別配送料金と直送モード(サーチャージ)を計算するVendureカスタムプラグイン。複雑な配送料金体系とゾーン別料金設定に対応します。

直送モード (Direct Shipping Mode)

顧客が「ユーザー直送モード」を選択した場合、注文内容に対して一定のサーチャージを加算します。この設定は管理画面から統合管理できます。

1. 直送モードの設定項目

管理画面の「設定 > 直送モード設定」から以下の項目を変更可能です。

  • 表示名: ストアフロントでの表示名称。
  • 加算率: 注文小計に対する加算率(デフォルト: 0.1 = 10%)。
  • 注意文: カート画面やチェックアウト画面でユーザーに表示される説明文。
  • 対象カテゴリ/商品: 直送モードが適用される制限条件(将来拡張用)。

2. 計算ロジック

直送サーチャージは PriceCalculationService において、以下の式で計算されます。

直送サーチャージ = 注文小計 × 加算率
最終合計金額 = 注文小計 + 直送サーチャージ + 配送料

加算率は ShippingModeEntitysurchargeRate フィールドから取得されます。

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

設定手順

  1. 管理画面にログインし、サイドメニューの「基本設定 > 直送モード設定」を開きます。
  2. 「編集」ボタンをクリックして、加算率や注意文を編集します。
  3. 「保存」をクリックすると、即座にストアフロントの表示と価格計算に反映されます。