> ## Documentation Index > Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt > Use this file to discover all available pages before exploring further. # Upcart でカスタムテンプレートを設定する > この記事では、Upcart のテンプレートをカスタマイズするために利用できる主要な props を説明し、コア機能を維持しながらカート体験をパーソナライズできるようにします。
## ⚠️ **重要なお知らせ**
カスタムテンプレートには、HTML、CSS、JavaScript、React の高度な技術知識が必要です。作業を進める前に、十分な開発経験があるか、資格のある Shopify 開発者に依頼できることを確認してください。**当社のサポートチームは、カスタムテンプレートの開発、デバッグ、トラブルシューティングに関するサポートは提供しません。** 技術的な質問は、Shopify エキスパートまたは資格のある開発者に相談してください。 ***
## コードエディターの機能
カスタムテンプレートのコードエディターには、有効なテンプレートをより簡単に書けるようにする組み込みツールが含まれています。
### TypeScript IntelliSense
エディターは TypeScript を理解するため、入力中に、利用可能なすべての `props` に対するオートコンプリートの候補、型チェック、インラインドキュメントが表示されます。prop の型ヒントは、テンプレートの記述を支援するためのエディター専用の IntelliSense です — テンプレートに書き込むものではなく、ストアフロントで実行されることもありません。
### 編集可能なテンプレート本体
エディターにはテンプレートの編集可能な JSX 本体のみが表示され、ロックされた行はありません。周囲の関数ラッパーはビルド時に自動的に追加され、エディターに表示されることはありません。 編集によってテンプレート構造が壊れた場合は、いつでも **Reset to default** を使用して元のテンプレートを復元できます。 ***
## General セクション
Header モジュールを使用すると、アイテム数の表示や閉じるボタンの提供といったカートの基本機能を維持しながら、独自のデザインでカートヘッダーをカスタマイズできます。
### **利用可能な props - Full テンプレート**
Cart タイトル、アイテム数、閉じるボタンが表示された cart drawer のヘッダー `cartQuantity` * **型**: `string` * **説明**: カート内の現在のアイテム数を文字列形式にしたもの * **使い方**: カスタムヘッダーのデザインにカートのアイテム数を表示します ```

Shopping Cart ({props.cartQuantity})

``` `closeHandler` * **型**: `() => void` * **説明**: トリガーされるとカートを閉じるコールバック関数 * **使い方**: カートを閉じるために、ボタン、アイコン、その他のインタラクティブ要素にアタッチします ``` ``` `titleComponent` * **型**: `React.ReactElement | null` * **説明**: 適切なスタイルと翻訳を含む、事前レンダリングされたカートヘッダーのタイトルコンポーネント * **使い方**: カート設定の構成に基づいてカートのタイトルを表示します ```
{props.titleComponent}
``` ***
## Body セクション
## アナウンス
Announcements モジュールを使用すると、タイマーの制御や条件付き表示といったアナウンスの基本機能を維持しながら、独自のデザインでアナウンス表示をカスタマイズできます。
### 利用可能な props - **Full テンプレート**
顧客の商品を取り置きしているカウントダウンタイマー付きのカートアナウンスバー `announcementTemplate` * **型**: `string` * **説明**: アナウンスメッセージの HTML コンテンツ * **使い方**: カスタム実装でアナウンスメッセージを表示します ```
``` `timer` * **型**: `string` * **説明**: 文字列形式にした現在のタイマー値 * **使い方**: カスタムのアナウンス実装でカウントダウンタイマーを表示します ```
Time remaining: {props.timer}
``` `shouldUseTimer` * **型**: `boolean` * **説明**: このアナウンスでタイマー機能が有効かどうかを示します * **使い方**: タイマー関連のコンテンツとコントロールを条件付きでレンダリングします ```
{props.shouldUseTimer && ( {props.timer} )}
``` `isTimerExpiredAndShouldHide` * **型**: `boolean` * **説明**: タイマーが期限切れになり、アナウンスを非表示にすべきかどうかを示します * **使い方**: タイマーの状態に基づいてアナウンス全体の表示を制御します ```
{!props.isTimerExpiredAndShouldHide && (
{props.timer}
)}
```
## 段階的リワード
Rewards モジュールを使用すると、マイルストーンの追跡、進捗の可視化、リワードメッセージの表示といったリワードの基本機能を維持しながら、独自のデザインでリワード進捗の表示をカスタマイズできます。
### 利用可能な props - **Full テンプレート**
送料無料と商品のマイルストーンアイコンがある段階的リワードのプログレスバー `rewardsMessageHtml` * **型**: `string` * **説明**: リワードメッセージの HTML コンテンツ * **使い方**: カスタム実装でリッチな書式付きのリワードメッセージを表示します ```
``` `milestonesCompleted` * **型**: `number` * **説明**: 達成済みのマイルストーンの数 * **使い方**: 達成数の表示や達成率の計算に使用します ```
{Math.round((props.milestonesCompleted / props.milestonesData.milestonesToRender.length) * 100)}% Complete
``` `milestonesData` * 型: ``` { milestonesToRender: { id: string; label: string; icon: React.ReactElement; isCompleted: boolean; positionPercent: number; }[]; progressPercent: number; showMilestones: boolean; settings: { iconContainerSize: string; iconAlignment: string; labelAlignment: string; hideLabel: boolean; }; } ``` * **説明**: リワードシステムの完全なマイルストーン設定と進捗データ * **使い方**: マイルストーン情報、進捗率、表示設定にアクセスします * **プロパティ**: * `milestonesToRender`: 達成状況と位置情報を持つマイルストーンオブジェクトの配列 * `progressPercent`: 現在の進捗率(0〜100) * `showMilestones`: マイルストーンマーカーを表示するかどうか * `settings`: マイルストーン表示の視覚的な設定
## ディスカウント
Discounts モジュールはカスタムテンプレートをサポートしており、ルール管理、セクションの表示、リワードの提示といった基本機能を維持しながら、独自の表示をデザインできます。カスタムテンプレートの内部モジュールタイプ識別子は、既存のカスタムテンプレートコードとの後方互換性のため `TRIGGERED_REWARDS` です。
### **利用可能な props - Full テンプレート**
`rules` * **型**: ``` { id: string; title: string; description: string; conditionsMet: boolean; }[] ``` * **説明**: 現在有効なディスカウントルールの配列 * **使い方**: 利用可能なリワード、そのタイトル、説明、各ルールの条件が満たされているかどうかを表示します * **プロパティ**: * `id`: リワードルールの一意の識別子 * `title`: ディスカウントルールのタイトル * `description`: リワードルールの説明 * `conditionsMet`: ルールの条件が現在カートによって満たされているかどうか。これを使用して、「X を解除しました」と「あと \$Y の購入で X を解除」のような UX パターンを構築できます ```
{props.rules.map((rule) => (

{rule.title}

{rule.conditionsMet ? "Reward unlocked!" : rule.description}

))}
``` `showSection` * **型**: `boolean` * **説明**: Discounts セクションを表示すべきかどうかを示します * **使い方**: Discounts モジュール全体の表示を制御します ```
{props.showSection && (

Available Rewards...

)}
``` `onToggleSection` * **型**: `() => void` * **説明**: Discounts セクションの表示状態を切り替えるコールバック関数 * **使い方**: ユーザーがリワードセクションの表示/非表示を切り替えられるように、ボタンやインタラクティブ要素にアタッチします ``` ```
## レコメンデーション
Recommendation モジュールを使用すると、バリエーションの選択、カート追加アクション、商品情報の表示といった E コマースの基本機能を維持しながら、独自のデザインでアップセル商品の表示をカスタマイズできます。
### **利用可能な props - Recommendation タイルテンプレート**
価格と Add ボタン付きのスノーボード商品を表示するレコメンデーションタイル *レコメンデーションタイルテンプレートは、Upsells モジュールの[アップセルタイルテンプレートと同じ prop インターフェース](#available-props-upsell-tile-template)を共有します。利用可能なすべての props、型、使用例は、以下の Upsells モジュールのセクションに記載されています。*
## カートアイテム
Cart Items モジュールを使用すると、E コマースの基本機能を維持しながら、独自のデザインでカートアイテムの表示をカスタマイズできます。このモジュールは複数のテンプレートタイプを提供しており、それぞれがカートアイテム表示のさまざまな側面に対応した固有の props を持っています。 **カート追加やカート更新中にローディングインジケーターを表示する:** 標準の Cart Items モジュールには、組み込みの「カートに追加中」スピナーはありません。アイテムの追加中やカート操作の進行中にローディング状態を表示したい場合は、Product タイルテンプレートを使用し、`isLoading` と `loadingOperation` の props(以下に記載)を読み取って、スピナーやオーバーレイを条件付きでレンダリングしてください。カスタムテンプレートには開発経験が必要です — このページ上部の注意事項を参照してください。
### **利用可能な props - Product タイルテンプレート**
**注:** *Product Tile* テンプレートを有効にすると、**Variant テンプレート**、**Properties テンプレート**、**Bundle テンプレート**、**Price テンプレート**を含む、このモジュール内の他のすべてのテンプレートが上書きされます。\ それらのテンプレートでカスタムコードを使用したい場合は、***必ず*** *Product Tile テンプレートをオフにする必要があります。* 画像、バリエーション、セール価格、数量セレクター、サブスクライブボタン付きのカート商品タイル `title` * **型**: `string` * **説明**: 商品のタイトル/名前 * **使い方**: カートアイテムにメインの商品名を表示します `variant` * **型**: `React.ReactNode` * **説明**: 事前レンダリングされたバリエーション情報コンポーネント * **使い方**: バリエーションの詳細を React コンポーネントとして表示します `properties` * **型**: `React.ReactNode` * **説明**: 事前レンダリングされた商品プロパティコンポーネント * **使い方**: 商品プロパティとサブスクリプション情報を React コンポーネントとして表示します `bundle` * **型**: `React.ReactNode` * **説明**: 事前レンダリングされたバンドル詳細コンポーネント * **使い方**: バンドル情報を React コンポーネントとして表示します `compareAtPrice` * **型**: `string | undefined` * **説明**: フォーマット済みの割引前価格(元の価格) * **使い方**: セール商品の元の価格を表示します `price` * **型**: `string` * **説明**: フォーマット済みの現在価格 * **使い方**: アイテムの現在の価格を表示します `savings` * **型**: `string | undefined` * **説明**: フォーマット済みの割引額 * **使い方**: 顧客がどれだけ節約できるかを表示します `imageUrl` * **型**: `string | undefined` * **説明**: 商品画像の URL * **使い方**: 商品画像を表示します `productUrl` * **型**: `string | undefined` * **説明**: 商品ページの URL * **使い方**: 商品詳細ページへのリンクに使用します `quantity` * **型**: `number` * **説明**: カート内のアイテムの現在の数量 * **使い方**: アイテムの数量の表示と管理に使用します `showQuantitySelector` * **型**: `boolean` * **説明**: 数量コントロールを表示するかどうか * **使い方**: 数量セレクターを条件付きで表示します `discountCodes` * **型**: `string[] | undefined` * **説明**: このアイテムに適用されたディスカウントコードの配列 * **使い方**: アイテム固有のディスカウントを表示します `subscription` * **型**: ``` { subscriptionUpgradeData: { buttonText: string; defaultSellingPlanId: number; } | null; sellingPlansData: { sellingPlanGroups: { name: string; selling_plans: { id: number; name: string; }[]; }[] | null; activeSellingPlanId: string; oneTimePurchaseText: string | null; } | null; upgradeSellingPlan: (item: CartItem, sellingPlanId: number) => void; changeSellingPlan: (item: CartItem, value: string) => void; getSellingPlanGroupText: (groupName: string, planName: string) => string; } ``` * **説明**: アップグレードデータ、販売プラン、ハンドラー関数を含む完全なサブスクリプション管理オブジェクト * **使い方**: サブスクリプション機能を管理します * subscription オブジェクトには次のものが含まれます: * **subscriptionUpgradeData**: アップグレード情報(アップグレードが利用できない場合は null) * `buttonText`: アップグレードボタンのテキスト * `defaultSellingPlanId`: アップグレード用のデフォルト販売プランの ID * **sellingPlansData**: 利用可能な販売プランのオプション(プランがない場合は null) * `sellingPlanGroups`: 販売プランを持つプラングループの配列 * `activeSellingPlanId`: 現在選択されている販売プランの ID * `oneTimePurchaseText`: 1 回限りの購入オプションのテキスト(利用できない場合は null) * **upgradeSellingPlan**: 特定の販売プランにアップグレードする関数 * **changeSellingPlan**: 現在の販売プランを変更する関数 * **getSellingPlanGroupText**: 販売プランの表示テキストをフォーマットするユーティリティ関数 `onIncrease` * **型**: `() => void` * **説明**: アイテムの数量を増やす関数 * **使い方**: 数量増加のアクションを処理します `onDecrease` * **型**: `() => void` * **説明**: アイテムの数量を減らす関数 * **使い方**: 数量減少のアクションを処理します `onDeleteProduct` * **型**: `() => void` * **説明**: アイテムをカートから削除する関数 * **使い方**: アイテムの削除を処理します `onQuantityChange` * **型**: `(quantity: string) => void` * **説明**: 数量の直接入力を処理する関数 * **使い方**: 手動での数量変更を処理します `handleInputChange` * **型**: `(e: React.ChangeEvent) => void` * **説明**: 数量フィールドの入力変更ハンドラー * **使い方**: 数量入力フィールドの変更を処理します `replaceItemWithVariant` * **型**: `(variantId: string) => Promise<{ success: boolean }>` * **説明**: アイテムを別のバリエーションに置き換える関数 * **使い方**: バリエーションの切り替えを処理します `isLoading` * **型**: `boolean` * **説明**: カート操作のローディング状態 * **使い方**: ローディングインジケーターを表示します `loadingOperation` * **型**: `'increase' | 'decrease' | 'inputChange' | 'remove' | 'subscription' | undefined` * **説明**: 現在ローディング中の特定の操作 * **使い方**: 操作ごとのローディング状態を表示します `setLoadingOperation` * **型**: `(op: "increase" | "decrease" | "inputChange" | "remove" | "subscription" | undefined) => void` * **説明**: ローディング操作の状態を設定する関数 * **使い方**: さまざまな操作のローディング状態を管理します `rawItem` * **型**: `CartItem`([下記](#cartitem-object-properties)の `CartItem` 型を参照) * **説明**: すべての情報を含む生のカートアイテムデータ
### **利用可能な props - Variant テンプレート**
選択されたサイズ Medium を表示するカートアイテムのバリエーション行 `item` * **型**: `CartItem`([下記](#cartitem-object-properties)の `CartItem` 型を参照) * **説明**: バリエーション情報を含む生のカートアイテムデータ * **使い方**: カートアイテムからバリエーションの詳細にアクセスします
### **利用可能な props - Properties テンプレート**
ギフトメッセージのメモを表示するカートアイテムのプロパティ行 `productProperties` * **型**: `{ key: string; value: string; isUrl?: boolean; }[]` * **説明**: 商品プロパティの配列(カスタムフィールド、ラインアイテムのプロパティ) `subscriptionLabel` * **型**: `string | undefined` * **説明**: サブスクリプション情報のラベル
### **利用可能な props - Bundle テンプレート**
バリエーション付きの 3 つのコンポーネント商品を一覧表示する展開されたバンドル `getSizedImageUrl` * **型**: `getSizedImageUrl: ({ src, width, height }: SizedImageParams) => string` * **説明**: 適切なサイズの画像 URL を取得するユーティリティ関数 `item` * **型**: ``` { itemComponents: { quantity: number; image: { url: string; height: number | null; width: number | null; alt: string; }; product: { title: string; has_only_default_variant: boolean; }; variantTitle: string; }[]; variantTitle: string | undefined; hasComponents: boolean; } ``` * **説明**: コンポーネントを含むバンドルアイテムの情報。`itemComponents` はコンポーネントオブジェクトの配列です — map で処理して各バンドルコンポーネントをレンダリングしてください。 `showDetailsText` * **型**: `string | undefined` * **説明**: 「詳細を表示」アクションのテキスト * **使い方**: 展開ボタンのテキストを表示します `hideDetailsText` * **型**: `string | undefined` * **説明**: 「詳細を非表示」アクションのテキスト `isExpanded` * **型**: `boolean` * **説明**: バンドルの詳細が展開されているかどうか `toggleCollapsible` * **型**: `() => void` * **説明**: バンドル詳細の表示を切り替える関数 * **使い方**: 展開/折りたたみのアクションを処理します `chevronDownIconComponent` * **型**: `React.ReactElement` * **説明**: 展開/折りたたみ用の事前レンダリングされたシェブロンアイコン * **使い方**: 一貫性のある展開/折りたたみインジケーターを表示します
### **利用可能な props - Price テンプレート**
元の価格に取り消し線が引かれ、セール価格と割引額が表示されたカート価格 `compareAtPrice` * **型**: `string | undefined` * **説明**: フォーマット済みの割引前価格(元の価格) * **使い方**: セール商品の元の価格を表示します `price` * **型**: `string` * **説明**: フォーマット済みの現在価格 * **使い方**: アイテムの現在の価格を表示します `savings` * **型**: `string | undefined` * **説明**: フォーマット済みの割引額 * **使い方**: 顧客がどれだけ節約できるかを表示します
### **CartItem オブジェクトのプロパティ**
`CartItem` オブジェクトには、カートのラインアイテムに関するすべての詳細情報が含まれています。このオブジェクトは、Product Tile テンプレートでは props.rawItem として、Variant テンプレートでは props.item として利用できます。
#### **コア識別情報**
* `key (string)` - このカートアイテムの一意の識別子。 * `id (number)` - バリエーション ID(レガシーフィールド、代わりに variant\_id を使用してください) * `variant_id (number)` - このアイテムの Shopify バリエーション ID * `product_id (number)` - Shopify 商品 ID * `lineIdxFrom1 (number)` - 変更前の元のカートにおける、このアイテムの 1 始まりのインデックス
#### **商品情報**
* `title (string)` - ラインアイテムのタイトル(通常はバリエーションのタイトル) * `product_title (string)` - メインの商品タイトル * `handle (string)` - 商品 URL のハンドル(例: 「camp-stool」) * `vendor (string)` - 商品の販売元/ブランド名 * `product_type (string)` - 税務目的の商品カテゴリー/タイプ * `sku (string)` - SKU(在庫管理単位)識別子 * `product_description (string)` - 商品の完全な説明 * `product_has_only_default_variant (boolean)` - 商品にバリエーションが 1 つしかないかどうか
#### **価格(すべての価格はセント単位)**
* `quantity (number)` - カート内のこのアイテムの数 * `price (number)` - ディスカウント前の単価 * `original_price (number)` - price と同じ * `discounted_price (number)` - 商品レベルのディスカウント後の単価 * `compare_at_price (number | null)` - 割引前価格(MSRP)。注: このフィールドは Upcart によって追加されるもので、Shopify のカート API では提供されません * `final_line_price (number)` - 商品レベルのディスカウント後の合計価格(quantity × discounted\_price) * `original_line_price (number)` - ディスカウント前の合計価格(quantity × price) * `line_price (number)` - すべてのディスカウント後の合計価格 * `final_price (number)` - **非推奨** - 商品ディスカウント後の単価(数量は考慮されません) * `total_discount (number)` - line\_level\_total\_discount と同じ * `line_level_total_discount (number)` - このラインアイテムに適用されたディスカウントの合計額
#### **メディアと URL**
* `image (string)` - メインの商品画像 URL * `url (string)` - 商品ページへの相対 URL パス(例: 「/products/camp-stool?variant=42789611372803」) * `featured_image (object | null)` - フィーチャー画像の詳細: * `alt (string)` - 画像の代替テキスト * `aspect_ratio (number)` - 画像のアスペクト比 * `height (number)` - 画像の高さ(ピクセル) * `url (string)` - 画像 URL * `width (number)` - 画像の幅(ピクセル)
#### **バリエーションとオプション**
* `variant_title (string | null)` - バリエーションのタイトル(例: 「Large / Red」) * `variant_options (string[])` - バリエーションオプション値の配列 * `options_with_values (Array)` - 詳細なオプション情報: * `name (string)` - オプション名(例: 「Size」) * `value (string)` - オプション値(例: 「Large」) * `untranslated_product_title (string | undefined)` - 翻訳前の元の商品タイトル(カート変更レスポンスのみ) * `untranslated_variant_title (string | undefined)` - 翻訳前の元のバリエーションタイトル(カート変更レスポンスのみ)
#### **カスタムプロパティとメタデータ**
* `properties (Record | null)` - カスタムのラインアイテムプロパティ。ラインにプロパティがない場合は `null` になるため、キーを読み取る前に確認してください。キーが `__` で始まるプロパティは常に顧客から非表示になります。**Hide properties starting with single underscore "\_"** カート設定がオンの場合、単一の `_` で始まるキーも非表示になります。 * `gift_card (boolean)` - このアイテムがギフトカードかどうか * `taxable (boolean)` - このアイテムが課税対象かどうか * `requires_shipping (boolean)` - このアイテムに配送が必要かどうか * `grams (number)` - アイテムの重量(グラム)
#### **ディスカウントとプロモーション**
* `discounts (Array)` - 簡略化されたディスカウント情報: * `amount (number)` - ディスカウント額(セント単位) * `title (string)` - ディスカウントのタイトル/名前 * `line_level_discount_allocations (Array)` - 詳細なディスカウント割り当て情報: * `amount (number)` - ディスカウント額(セント単位) * `discount_application (object)` - ディスカウント適用の完全な詳細: * `allocation_method (string)` - ディスカウントの割り当て方法 * `created_at (string)` - ディスカウントの作成日時 * `description (string | null)` - ディスカウントの説明 * `key (string)` - ディスカウントのキー識別子 * `target_selection (string)` - ディスカウントの対象の選択方法 * `target_type (string)` - 対象のタイプ * `title (string)` - ディスカウントのタイトル * `total_allocated_amount (number)` - 割り当てられた合計額 * `type ('discount_code' | '')` - ディスカウントのタイプ(自動ディスカウントの場合は空文字列) * `value (string)` - ディスカウントの値 * `value_type (string)` - 値の適用方法
#### **バンドル商品**
* `has_components (boolean | undefined)` - このアイテムが他の商品を含むバンドルかどうか(GET カートレスポンスのみ) * `item_components (Array | null | undefined)` - バンドルコンポーネントの詳細: * `quantity (number)` - このコンポーネントの数量 * `image (object)` - コンポーネントの画像: * `url (string)` - 画像 URL * `height (number | null)` - 画像の高さ * `width (number | null)` - 画像の幅 * `alt (string)` - 代替テキスト * `product (object)` - コンポーネントの商品情報: * `title (string)` - 商品タイトル * `has_only_default_variant (boolean)` - 商品にデフォルトのバリエーションしかないかどうか * `variantTitle (string)` - コンポーネントのバリエーションタイトル
#### **ビジネスルール**
* `quantity_rule (object | undefined)` - 数量の制約(GET カートレスポンスのみ): * `min (number)` - 許可される最小数量 * `max (number | null)` - 許可される最大数量(null = 制限なし) * `increment (number)` - 数量の増分ステップ
#### **サブスクリプション情報**
* `selling_plan_allocation (object | undefined)` - サブスクリプション/販売プランの詳細: * `price (number)` - サブスクリプション価格(セント単位) * `compare_at_price (number | null)` - サブスクリプションの割引前価格 * `per_delivery_price (number)` - 配送 1 回あたりの価格 * `selling_plan (object)` - 販売プランの詳細: * `id (number)` - 販売プラン ID * `name (string)` - プラン名 * `description (string)` - プランの説明 * `options (Array)` - プランのオプション: * `name (string)` - オプション名 * `position (number)` - オプションの位置 * `value (string)` - オプション値 * `recurring_deliveries (boolean)` - プランに定期配送があるかどうか
#### **統合メタデータ**
* `__appIntegrated (object | undefined)` - サードパーティアプリの統合データ: * `app ('stay.ai')` - 統合されたアプリの識別子 * `bundleRole ('parent' | 'child')` - バンドル構造における役割
## アップセル
Upsells モジュールを使用すると、バリエーションの選択、カート追加アクション、商品情報の表示といった E コマースの基本機能を維持しながら、独自のデザインでアップセル商品の表示をカスタマイズできます。
### **利用可能な props - Upsell タイルテンプレート**
セール価格、バリエーションドロップダウン、Add ボタン付きの商品を表示するアップセルタイル `itemUrl` * **型**: `string` * **説明**: 商品ページの URL * **使い方**: ユーザーナビゲーションを向上させるために、商品詳細ページへのリンクを作成します ``` {props.altText} ``` `imageUrl` * **型**: `string | undefined` * **説明**: 商品画像の URL * **使い方**: カスタムのアップセル実装で商品画像を表示します * **フォールバック**: undefined の値はプレースホルダー画像で適切に処理してください `description` * **型**: `string` * **説明**: 商品の説明 * **使い方**: カスタムのアップセル実装で商品の説明を表示します `altText` * **型**: `string` * **説明**: アクセシビリティのための商品画像の代替テキスト * **使い方**: スクリーンリーダーのサポートを提供し、アクセシビリティ準拠を向上させます ``` {props.altText} ``` `productId` * **型**: `string` * **説明**: 商品の一意の識別子 * **使い方**: 商品の追跡、分析の実装、カート追加機能での使用に利用します `productTitle` * **型**: `string` * **説明**: 商品のタイトル/名前 * **使い方**: カスタムのアップセル実装で商品名を表示します ```

{props.productTitle}

``` `oldPrice` & `newPrice` * **型**: `string | null`(oldPrice)、`string`(newPrice) * **説明**: フォーマット済みの割引前価格と現在価格 * **使い方**: セール表示とともに価格情報を表示します `isSingleVariant` * **型**: `boolean` * **説明**: 商品にバリエーションが 1 つしかないかどうかを示します * **使い方**: バリエーション選択の UI 要素を条件付きでレンダリングします `productOptions` * **型**: `{ name: string; position: 1 | 2 | 3; values: string[]; }[]` * **説明**: 利用可能なすべての選択肢を含む、商品オプションの完全な構成 * **使い方**: 高度なバリエーション選択 UI のために、詳細な商品オプション情報にアクセスします `variantOptions` * **型**: `{ label: string; value: string }[]` * **説明**: 商品で利用可能なバリエーションオプション * **使い方**: バリエーション選択のドロップダウンやボタンを作成します * **構造**: 各オプションには表示ラベルと一意の値識別子が含まれます `selectedVariantId` & `selectedVariantLabel` * **型**: string(selectedVariantId)、string | undefined(selectedVariantLabel) * **説明**: 現在選択されているバリエーションの ID とその表示ラベル * **使い方**: 選択されたバリエーション情報の追跡と表示に使用します `onVariantChange` * **型**: `(variantId: string) => void` * **説明**: バリエーション選択の変更を処理する関数 * **使い方**: ユーザーが選択したときに選択中のバリエーションを更新します `onAddClick` * **型**: `(productId: string, variantId?: string) => void` * **説明**: 商品のカート追加を処理する関数 * **使い方**: 適切な商品およびバリエーションの識別情報を伴うカート追加機能を実装します ``` ``` `rating` & `reviewCount` * **型**: `number | undefined`(rating)、`string | undefined`(reviewCount) * **説明**: 商品の評価とフォーマット済みのレビュー数テキスト * **使い方**: ソーシャルプルーフと商品品質の指標を表示します `addLoading` & `addButtonText` * **型**: `boolean`(addLoading)、`string`(addButtonText) * **説明**: カート追加アクションのローディング状態とボタンテキスト * **使い方**: カート操作中にユーザーへフィードバックを提供し、ボタンテキストをカスタマイズします `cartItemsCount` * **型**: `number` * **説明**: カート内の現在のアイテム数 * **使い方**: カートの状態を表示したり、カートに基づくロジックを実装したりします
## 追加メモ
Notes モジュールを使用すると、展開可能なセクション、テキスト入力の処理、ローディング状態といったメモの基本機能を維持しながら、独自のデザインでカートメモ機能をカスタマイズできます。
### **利用可能な props - Full テンプレート**
展開可能な特別指示のテキストフィールドがあるカートメモセクション `cartNote` * **型**: `string` * **説明**: 顧客が入力した現在のカートメモの内容 * **使い方**: カスタム実装でカートメモのテキストを表示および管理します ```