# 機能設計書 37-オフキャンバスカート

## 概要

本ドキュメントは、Shopwareストアフロントにおけるオフキャンバス（サイドバー）形式のカート表示機能の設計について記述する。

### 本機能の処理概要

本機能は、画面右側からスライドインするサイドバー形式でショッピングカートを表示する機能である。商品追加時やカートアイコンクリック時に表示され、ページ遷移なしでカート内容を確認できる。

**業務上の目的・背景**：ECサイトにおいて、商品追加後の即座のフィードバックは顧客体験向上に重要である。オフキャンバスカートにより、ページを離れることなくカート内容を確認でき、ショッピングの継続性を維持できる。モバイルデバイスでも効果的なUIパターンであり、画面を最大限活用しながらカート情報を提供する。

**機能の利用シーン**：
- 商品をカートに追加した際の自動表示
- ヘッダーのカートアイコンをクリックした際
- カート内商品の数量変更時
- プロモーションコード適用時

**主要な処理内容**：
1. カートデータの取得
2. 利用可能な配送方法の取得
3. カートエラーのフラッシュメッセージ変換
4. 配送方法変更によるリダイレクト処理
5. オフキャンバステンプレートのレンダリング

**関連システム・外部連携**：
- 配送プロバイダ（配送方法の有効性確認）

**権限による制御**：特になし（匿名ユーザーも利用可能）

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 8 | オフキャンバスカート | 主画面 | サイドバー形式のカート表示（CheckoutController::offcanvas） |
| 7 | カートページ | 遷移先画面 | カートページへの遷移ボタン |

## 機能種別

データ取得・表示（Read操作 / Ajax通信）

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| redirected | bool | No | リダイレクトループ防止フラグ | - |

### 入力データソース

- クエリパラメータ
- SalesChannelContext（セッショントークン、顧客情報）

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| page | OffcanvasCartPage | オフキャンバスカートページオブジェクト |
| page.cart | Cart | カートデータ |
| page.cart.lineItems | LineItemCollection | カート内商品一覧 |
| page.cart.price | CartPrice | カート価格情報 |
| page.cart.errors | ErrorCollection | カートエラー一覧 |
| page.shippingMethods | ShippingMethodCollection | 利用可能な配送方法 |

### 出力先

- HTMLフラグメント（@Storefront/storefront/component/checkout/offcanvas-cart.html.twig）
- Ajax通信によるオフキャンバス表示

## 処理フロー

### 処理シーケンス

```
1. リクエスト受信（Ajax）
   └─ CheckoutController::offcanvas()がXmlHttpRequestを受信
2. OffcanvasCartPageLoader呼び出し
   └─ オフキャンバスカートページのロード処理を開始
3. GenericPageLoader呼び出し
   └─ 共通ページ情報をロード
4. メタ情報設定
   └─ robots: noindex,followを設定
5. カートデータ取得
   └─ StorefrontCartFacadeでカートを取得
6. 配送方法取得
   └─ ShippingMethodRouteで利用可能な配送方法を取得
7. イベントディスパッチ
   └─ OffcanvasCartPageLoadedEventを発行
8. フック実行
   └─ CheckoutOffcanvasWidgetLoadedHookを実行
9. カートエラー処理
   └─ addCartErrors()でフラッシュメッセージ変換
10. 配送方法変更チェック
    └─ routeNeedsReload()でリダイレクト判定
11. テンプレートレンダリング
    └─ offcanvas-cart.html.twigをレンダリングして返却
```

### フローチャート

```mermaid
flowchart TD
    A[開始: offcanvas Ajax] --> B[OffcanvasCartPageLoader::load]
    B --> C[GenericPageLoader::load]
    C --> D[メタ情報設定 noindex,follow]
    D --> E[StorefrontCartFacade::get カート取得]
    E --> F[ShippingMethodRoute::load 配送方法取得]
    F --> G[OffcanvasCartPageLoadedEvent発行]
    G --> H[CheckoutOffcanvasWidgetLoadedHook実行]
    H --> I[addCartErrors フラッシュメッセージ]
    I --> J{配送方法変更?}
    J -->|Yes| K{redirectedフラグ?}
    K -->|No| L[同一ルートへリダイレクト]
    K -->|Yes| M[テンプレートレンダリング]
    J -->|No| M
    M --> N[終了]
    L --> A
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-37-01 | SEOインデックス除外 | seo: false、robots: noindex,follow | 常時 |
| BR-37-02 | Ajax専用 | XmlHttpRequestのみ対応 | 常時 |
| BR-37-03 | 利用可能配送方法のみ | onlyAvailable: trueで有効な配送方法のみ取得 | 常時 |
| BR-37-04 | カートエラー表示 | カートエラーはフラッシュメッセージとして表示 | エラー存在時 |
| BR-37-05 | リダイレクトループ防止 | redirectedフラグでループを検知して停止 | 2回目のリダイレクト試行時 |

### 計算ロジック

**リダイレクト判定（routeNeedsReload）**:
- ShippingMethodChangedError または PaymentMethodChangedError が存在する場合、リダイレクト必要
- redirectedフラグがtrueの場合はリダイレクトしない（ループ防止）

## データベース操作仕様

### 操作別データベース影響一覧

| 操作 | 対象テーブル | 操作種別 | 概要 |
|-----|-------------|---------|------|
| カート取得 | cart | SELECT | セッショントークンに紐づくカートを取得 |
| 配送方法取得 | shipping_method | SELECT | 有効な配送方法を取得 |

### テーブル別操作詳細

#### cart

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| SELECT | token, payload, price, line_items, errors | token = {セッショントークン} | Redis使用時はRedisから取得 |

#### shipping_method

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| SELECT | id, name, price, availability_rule_id | active = true AND availability条件 | onlyAvailable: true |

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| SHIPPING_METHOD_CHANGED | 配送方法変更 | 選択中の配送方法が無効になった場合 | 代替配送方法に自動変更、リダイレクト |
| PRODUCT_NOT_FOUND | 商品エラー | カート内商品が削除された場合 | エラーメッセージ表示 |

### リトライ仕様

特になし（読み取り専用処理のためリトライ不要）

## トランザクション仕様

読み取り専用処理のため、トランザクション制御なし

## パフォーマンス要件

- レスポンス時間: 300ms以内（ユーザー操作への即時フィードバック）
- カートデータはRedis等でキャッシュ（設定による）

## セキュリティ考慮事項

- セッショントークンによるカート分離
- XSS対策としてテンプレート側でエスケープ処理
- オフキャンバスカートはnoindexを設定

## 備考

- カートが空の場合も正常に表示（空カートメッセージ）
- カートエラーはページ表示後にクリアされる
- フロントエンドJavaScriptでオフキャンバスの開閉を制御

---

## コードリーディングガイド

本機能を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

まず、オフキャンバスカートで使用されるデータ構造を理解することが重要。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | OffcanvasCartPage.php | `src/Storefront/Page/Checkout/Offcanvas/OffcanvasCartPage.php` | オフキャンバスカートページの構造 |
| 1-2 | Cart.php | `src/Core/Checkout/Cart/Cart.php` | カートエンティティの構造 |

**読解のコツ**: OffcanvasCartPageはCartとShippingMethodCollectionを保持する。CheckoutCartPageと異なり、支払方法や国リストは保持しない。

#### Step 2: エントリーポイントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | CheckoutController.php | `src/Storefront/Controller/CheckoutController.php` | offcanvasメソッドがエントリーポイント |

**主要処理フロー**:
1. **278-284行目**: ルート定義（/checkout/offcanvas, XmlHttpRequest専用）
2. **285行目**: offcanvasメソッドの開始
3. **287行目**: OffcanvasCartPageLoaderの呼び出し
4. **289行目**: CheckoutOffcanvasWidgetLoadedHookの実行
5. **291-293行目**: カートエラー処理
6. **295-303行目**: routeNeedsReloadによるリダイレクト判定
7. **307行目**: テンプレートレンダリング

#### Step 3: ページローダーを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | OffcanvasCartPageLoader.php | `src/Storefront/Page/Checkout/Offcanvas/OffcanvasCartPageLoader.php` | オフキャンバスカートページロード処理 |

**主要処理フロー**:
- **40-59行目**: load()メソッド - ページ生成のメイン処理
- **42行目**: GenericPageLoaderで共通情報取得
- **44行目**: OffcanvasCartPage::createFromで変換
- **46-48行目**: メタ情報設定（robots: noindex,follow）
- **50行目**: StorefrontCartFacadeでカート取得
- **52行目**: getShippingMethodsで配送方法取得
- **54-56行目**: イベントディスパッチ
- **61-66行目**: getShippingMethods() - 配送方法取得ロジック

### プログラム呼び出し階層図

```
CheckoutController::offcanvas()
    │
    ├─ OffcanvasCartPageLoader::load()
    │      │
    │      ├─ GenericPageLoader::load() [共通ページ情報]
    │      │
    │      ├─ OffcanvasCartPage::createFrom()
    │      │
    │      ├─ setMetaInformation() [robots設定]
    │      │
    │      ├─ StorefrontCartFacade::get() [カート取得]
    │      │
    │      ├─ getShippingMethods() [配送方法取得]
    │      │      └─ ShippingMethodRoute::load()
    │      │
    │      └─ EventDispatcher::dispatch() [OffcanvasCartPageLoadedEvent]
    │
    ├─ hook() [CheckoutOffcanvasWidgetLoadedHook]
    │
    ├─ addCartErrors() [フラッシュメッセージ変換]
    │
    ├─ routeNeedsReload() [リダイレクト判定]
    │
    └─ renderStorefront() [テンプレートレンダリング]
```

### データフロー図

```
[入力]                    [処理]                         [出力]

セッショントークン ──────▶ OffcanvasCartPageLoader ───▶ OffcanvasCartPage
                              │                              │
                              ├─ StorefrontCartFacade        ├─ cart
                              │      │                       │   ├─ lineItems
                              │      ▼                       │   ├─ price
                              │  cart テーブル               │   └─ errors
                              │  (Redis)                     │
                              │                              └─ shippingMethods
                              └─ ShippingMethodRoute                │
                                     │                              ▼
                                     ▼                  offcanvas-cart.html.twig
                              shipping_method                       │
                              (onlyAvailable)                       ▼
                                                            HTMLフラグメント
                                                            (オフキャンバス表示)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| CheckoutController.php | `src/Storefront/Controller/CheckoutController.php` | コントローラー | HTTPリクエスト処理 |
| OffcanvasCartPageLoader.php | `src/Storefront/Page/Checkout/Offcanvas/OffcanvasCartPageLoader.php` | ページローダー | オフキャンバスカートページデータ取得 |
| OffcanvasCartPage.php | `src/Storefront/Page/Checkout/Offcanvas/OffcanvasCartPage.php` | DTO | オフキャンバスカートページデータ構造 |
| StorefrontCartFacade.php | `src/Storefront/Checkout/Cart/SalesChannel/StorefrontCartFacade.php` | ファサード | カート取得 |
| Cart.php | `src/Core/Checkout/Cart/Cart.php` | エンティティ | カートデータ |
| ShippingMethodRoute.php | `src/Core/Checkout/Shipping/SalesChannel/ShippingMethodRoute.php` | Store-APIルート | 配送方法取得 |
| offcanvas-cart.html.twig | `src/Storefront/Resources/views/storefront/component/checkout/offcanvas-cart.html.twig` | テンプレート | オフキャンバスカートビュー |
| CheckoutOffcanvasWidgetLoadedHook.php | `src/Storefront/Page/Checkout/Offcanvas/CheckoutOffcanvasWidgetLoadedHook.php` | フック | 拡張ポイント |
| off-canvas-cart.plugin.js | `src/Storefront/Resources/app/storefront/src/plugin/offcanvas-cart/offcanvas-cart.plugin.js` | JavaScript | フロントエンドオフキャンバス制御 |
