Upcart でカスタムテンプレートを設定する

⚠️ 重要なお知らせ

カスタムテンプレートには、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
説明: カート内の現在のアイテム数を文字列形式にしたもの
使い方: カスタムヘッダーのデザインにカートのアイテム数を表示します

<h2>Shopping Cart ({props.cartQuantity})</h2>

closeHandler

型: () => void
説明: トリガーされるとカートを閉じるコールバック関数
使い方: カートを閉じるために、ボタン、アイコン、その他のインタラクティブ要素にアタッチします

<button  
  onClick={props.closeHandler}  
  aria-label="Close cart"  
>×</button>

titleComponent

型: React.ReactElement | null
説明: 適切なスタイルと翻訳を含む、事前レンダリングされたカートヘッダーのタイトルコンポーネント
使い方: カート設定の構成に基づいてカートのタイトルを表示します

<div>{props.titleComponent}</div>

Body セクション

アナウンス

Announcements モジュールを使用すると、タイマーの制御や条件付き表示といったアナウンスの基本機能を維持しながら、独自のデザインでアナウンス表示をカスタマイズできます。

利用可能な props - Full テンプレート

announcementTemplate

型: string
説明: アナウンスメッセージの HTML コンテンツ
使い方: カスタム実装でアナウンスメッセージを表示します

<div dangerouslySetInnerHTML={{ __html: props.announcementTemplate }} />

timer

型: string
説明: 文字列形式にした現在のタイマー値
使い方: カスタムのアナウンス実装でカウントダウンタイマーを表示します

<div>Time remaining: {props.timer}</div>

shouldUseTimer

型: boolean
説明: このアナウンスでタイマー機能が有効かどうかを示します
使い方: タイマー関連のコンテンツとコントロールを条件付きでレンダリングします

<div>  
  {props.shouldUseTimer && (  
    <span>{props.timer}</span>   
  )}  
</div>

isTimerExpiredAndShouldHide

型: boolean
説明: タイマーが期限切れになり、アナウンスを非表示にすべきかどうかを示します
使い方: タイマーの状態に基づいてアナウンス全体の表示を制御します

<div>  
  {!props.isTimerExpiredAndShouldHide && (  
    <div>{props.timer}</div>  
  )}  
</div>

段階的リワード

Rewards モジュールを使用すると、マイルストーンの追跡、進捗の可視化、リワードメッセージの表示といったリワードの基本機能を維持しながら、独自のデザインでリワード進捗の表示をカスタマイズできます。

利用可能な props - Full テンプレート

rewardsMessageHtml

型: string
説明: リワードメッセージの HTML コンテンツ
使い方: カスタム実装でリッチな書式付きのリワードメッセージを表示します

<div dangerouslySetInnerHTML={{ __html: props.rewardsMessageHtml }} />

milestonesCompleted

型: number
説明: 達成済みのマイルストーンの数
使い方: 達成数の表示や達成率の計算に使用します

<div>  
  {Math.round((props.milestonesCompleted / props.milestonesData.milestonesToRender.length) * 100)}% Complete  
</div>

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 パターンを構築できます

<div>
  {props.rules.map((rule) => (
    <div key={rule.id}>
      <h3>{rule.title}</h3>
      <p>{rule.conditionsMet ? "Reward unlocked!" : rule.description}</p>
    </div>
  ))}
</div>

showSection

型: boolean
説明: Discounts セクションを表示すべきかどうかを示します
使い方: Discounts モジュール全体の表示を制御します

<div>  
  {props.showSection && (  
    <div>  
      <h2>Available Rewards...</h2>  
    </div>  
  )}  
</div>

onToggleSection

型: () => void
説明: Discounts セクションの表示状態を切り替えるコールバック関数
使い方: ユーザーがリワードセクションの表示/非表示を切り替えられるように、ボタンやインタラクティブ要素にアタッチします

<button type="button" onClick={props.onToggleSection}>  
  {props.showSection ? "Hide Rewards" : "Show Available Rewards"}  
</button>

レコメンデーション

Recommendation モジュールを使用すると、バリエーションの選択、カート追加アクション、商品情報の表示といった E コマースの基本機能を維持しながら、独自のデザインでアップセル商品の表示をカスタマイズできます。

利用可能な props - Recommendation タイルテンプレート

レコメンデーションタイルテンプレートは、Upsells モジュールのアップセルタイルテンプレートと同じ prop インターフェースを共有します。利用可能なすべての 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<HTMLInputElement>) => 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 型を参照)
説明: すべての情報を含む生のカートアイテムデータ

利用可能な props - Variant テンプレート

item

型: CartItem(下記の 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<string, any> | 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
使い方: ユーザーナビゲーションを向上させるために、商品詳細ページへのリンクを作成します

<a href={props.itemUrl} className="product-link">  
  <img src={props.imageUrl} alt={props.altText} />  
</a>

imageUrl

型: string | undefined
説明: 商品画像の URL
使い方: カスタムのアップセル実装で商品画像を表示します
フォールバック: undefined の値はプレースホルダー画像で適切に処理してください

description

型: string
説明: 商品の説明
使い方: カスタムのアップセル実装で商品の説明を表示します

altText

型: string
説明: アクセシビリティのための商品画像の代替テキスト
使い方: スクリーンリーダーのサポートを提供し、アクセシビリティ準拠を向上させます

<img   
  src={props.imageUrl}   
  alt={props.altText}  
  className="product-image"  
/>

productId

型: string
説明: 商品の一意の識別子
使い方: 商品の追跡、分析の実装、カート追加機能での使用に利用します

productTitle

型: string
説明: 商品のタイトル/名前
使い方: カスタムのアップセル実装で商品名を表示します

<div>  
  <h3>{props.productTitle}</h3>  
</div>

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
説明: 商品のカート追加を処理する関数
使い方: 適切な商品およびバリエーションの識別情報を伴うカート追加機能を実装します

<button   
  onClick={() => props.onAddClick(props.productId, props.selectedVariantId)}  
  disabled={props.addLoading}  
>  
  {props.addLoading ? 'Adding...' : props.addButtonText}  
</button>

rating & reviewCount

型: number | undefined(rating)、string | undefined(reviewCount)
説明: 商品の評価とフォーマット済みのレビュー数テキスト
使い方: ソーシャルプルーフと商品品質の指標を表示します

addLoading & addButtonText

型: boolean(addLoading)、string(addButtonText)
説明: カート追加アクションのローディング状態とボタンテキスト
使い方: カート操作中にユーザーへフィードバックを提供し、ボタンテキストをカスタマイズします

cartItemsCount

型: number
説明: カート内の現在のアイテム数
使い方: カートの状態を表示したり、カートに基づくロジックを実装したりします

追加メモ

Notes モジュールを使用すると、展開可能なセクション、テキスト入力の処理、ローディング状態といったメモの基本機能を維持しながら、独自のデザインでカートメモ機能をカスタマイズできます。

利用可能な props - Full テンプレート

cartNote

型: string
説明: 顧客が入力した現在のカートメモの内容
使い方: カスタム実装でカートメモのテキストを表示および管理します

<textarea  
  value={props.cartNote}  
  ...  
/>

notesPlaceholder

型: string
説明: メモ入力フィールドのプレースホルダーテキスト
使い方: メモに何を含めるべきかについて顧客にガイダンスを提供します

<textarea  
  placeholder={props.notesPlaceholder}  
  ...  
/>

notesTitle

型: string
説明: メモセクションのタイトル/ヘッダーテキスト
使い方: カスタムのメモ実装でセクションタイトルを表示します

<h3 className="notes-title" dangerouslySetInnerHTML={{ __html: props.notesTitle }} />

chevronDownIconComponent

型: React.ReactElement
説明: 展開/折りたたみ機能用の事前レンダリングされたシェブロンアイコンコンポーネント
使い方: カスタム実装で一貫性のある展開/折りたたみインジケーターを表示します

loadingIndicatorComponent

型: React.ReactElement | null
説明: 非同期操作用の事前レンダリングされたローディングインジケーターコンポーネント
使い方: メモの保存操作中にローディング状態を表示します

handleCartNoteChange

型: (newCartNote: string) => void
説明: カートメモの内容変更を処理する関数
使い方: ユーザーがテキストを変更したときにカートメモを更新します

isExpanded

型: boolean
説明: メモセクションが現在展開されているかどうかを示します
使い方: メモ入力エリアの表示を制御します

toggleCollapsible

型: () => void
説明: メモセクションの展開/折りたたみ状態を切り替える関数
使い方: セクションの表示を制御するために、ボタンやインタラクティブ要素にアタッチします

アドオン

Addons モジュールを使用すると、商品情報の表示、価格設定、トグルコントロール、通貨のフォーマットといった E コマースの基本機能を維持しながら、独自のデザインでアドオン商品の表示をカスタマイズできます。

利用可能な props - Full テンプレート

addonProduct

型:

{  
  product: {  
    id: number;  
    title: string;  
    description: string;  
  };  
  variant: {  
    id: number;  
    price: number;  
    compare_at_price: number | null;  
  };  
  image: {  
    src: string;  
    alt: string;  
  };  
}

説明: 商品の詳細、バリエーションの価格、画像データを含む、アドオン商品の完全な情報
使い方: アドオン商品の表示に必要なすべての商品情報にアクセスします
構造: 包括的な商品データを持つ、ネストされた product、variant、image オブジェクトが含まれます
- Product オブジェクトのプロパティ addonProduct.product
  - id: 商品の一意の数値識別子
  - title: アドオン商品の表示名
  - description: 商品の HTML 形式の説明コンテンツ
- Variant オブジェクトのプロパティ
  - id: バリエーションの一意の数値識別子
  - price: 現在の価格(セント単位)
  - compare_at_price: 元の価格(セント単位、比較価格がない場合は null)
- Image オブジェクトのプロパティ
  - src: 商品画像の URL
  - alt: 画像の代替テキスト(アクセシビリティ用)

toggle

型:

{  
  state: 'enabled' | 'disabled' | 'loading';  
  handleEnable: () => void;  
  handleDisable: () => void;  
} | null

説明: アドオンの有効化/無効化のためのトグルコントロールの状態とハンドラー
使い方: アドオン選択のためのインタラクティブなトグル機能を実装します
状態: enabled、disabled、loading の 3 つの状態があります
ハンドラー: 有効化と無効化のアクションごとに個別の関数があります

moneyFormat

型: string
説明: 価格のフォーマットに使用される通貨フォーマット文字列
使い方: 一貫した通貨表示のために formatMoney 関数に渡します

formatMoney

型:

(options: {  
  cents: string | number;  
  format?: string;  
  shouldRemoveHTML?: boolean;  
}) => string

説明: 通貨の値をフォーマットするユーティリティ関数
使い方: ストアの通貨設定に沿って価格を一貫してフォーマットします
パラメーター: セント単位の値、オプションのフォーマット文字列、HTML 除去オプションを受け取ります

ディスカウントコード

Discount Code モジュールを使用すると、コードの検証、フォーム送信、ユーザーへのフィードバックといった E コマースの基本機能を維持しながら、独自のデザインでディスカウントコード入力機能をカスタマイズできます。

利用可能な props - Full テンプレート

indicator

型: 'validating' | 'invalid' | 'none'
説明: ディスカウントコード入力の現在の検証状態
使い方: 検証状態に基づいて適切な UI フィードバックを表示します
状態:
- validating: コードが処理/検証中
- invalid: コードの検証に失敗
- none: 検証状態なし(デフォルト/アイドル)

discountCodeInput

型: string
説明: ディスカウントコード入力フィールドの現在の値
使い方: ユーザーが入力したディスカウントコードのテキストを表示および管理します

<input  
  type="text"  
  value={props.discountCodeInput}  
  onChange={(e) => props.setDiscountCodeInput(e.target.value)}  
  ...  
/>

discountCodePlaceholder

型: string
説明: ディスカウントコード入力フィールドのプレースホルダーテキスト
使い方: 入力欄に何を入力すべきかについてユーザーにガイダンスを提供します

discountCodeButtonText

型: string
説明: 適用/送信ボタンに表示するテキスト
使い方: ディスカウントコード送信用のボタンテキストをカスタマイズします

setDiscountCodeInput

型: (value: string | ((prev: string) => string)) => void
説明: ディスカウントコードの入力値を更新する関数
使い方: ディスカウントコードフィールドでのユーザー入力の変更を処理します

handleSubmit

型: (e: React.FormEvent<HTMLFormElement>) => void
説明: ディスカウントコード適用のためのフォーム送信を処理する関数
使い方: ディスカウントコードの検証と適用を処理します
イベント: フォーム送信イベントを処理します

<form onSubmit={props.handleSubmit} >  
  <div className="input-group">  
    <input  
      type="text"  
      value={props.discountCodeInput}  
      onChange={(e) => props.setDiscountCodeInput(e.target.value)}  
      placeholder={props.discountCodePlaceholder}  
    />   
    <button   
      type="submit"  
      disabled={props.indicator === 'validating' || !props.discountCodeInput.trim()}  
    >  
      {props.discountCodeButtonText}  
    </button>  
  </div>  
</form>

カートサマリー

Cart Summary モジュールを使用すると、ディスカウント管理、割引額の計算、価格の透明性といった E コマースの基本機能を維持しながら、独自のデザインでカートサマリーとディスカウントの表示をカスタマイズできます。

利用可能な props - Full テンプレート

totalSavingsText

型: string
説明: 合計割引額セクションのテキストラベル
使い方: カスタムのカートサマリー実装で割引額のラベルを表示します

discountApplications

型:

{  
  key: string;  
  title: string;  
  type: 'discount_code' | '';  
}[]

説明: 適用されたディスカウントコードと自動ディスカウントの配列
使い方: すべての有効なディスカウントをタイトルとタイプとともに表示します
構造: 各ディスカウントには、一意のキー、表示タイトル、タイプ識別子が含まれます

cartTotalDiscount

型: number
説明: ディスカウントの合計額(セント単位)
使い方: 計算やカスタムフォーマットのために生のディスカウント値にアクセスします

showCartTotalDiscount

型: boolean
説明: ディスカウントの合計を表示すべきかどうかを示します。showTotalSavings を推奨として非推奨マークが付いていますが、下記の注記を参照してください — カスタムテンプレート内では、依然としてこれが利用できる prop です。
使い方: 設定に基づいてディスカウント情報を条件付きでレンダリングします

formattedCartTotalDiscount

型: string
説明: ディスカウント合計額の事前フォーマット済み HTML 文字列。formattedTotalSavings を推奨として非推奨マークが付いていますが、下記の注記を参照してください。
使い方: 通貨記号付きの適切にフォーマットされたディスカウント額を表示します

showTotalSavings と formattedTotalSavings はカスタムテンプレート内では利用できません。 これらはモジュールの内部コンテキストに存在しますが、Cart summary テンプレートに渡されるのは showCartTotalDiscount と formattedCartTotalDiscount のみです — 新しい方のペアを読み取ると undefined が返されます。上記の 2 つを使用してください。また、これらはディスカウント合計のみを表示し、Show compare-at price savings in footer total 設定には従わないことに注意してください。

isRemovingDiscount

型: boolean
説明: ディスカウント削除の操作が進行中かどうかを示します
使い方: ディスカウント削除中にローディング状態を表示します

handleRemoveDiscount

型: () => Promise<void>
説明: ディスカウントコードの削除を処理する関数
使い方: 適用されたディスカウントコードをカートから削除します

totalCompareAtPrice

型: number
説明: 割引前価格の合計(カート内のすべてのアイテム)
使い方: 割引額や元の価格情報の計算と表示に使用します

totalAfterAllDiscounts

型: number
説明: すべてのディスカウント適用後の最終カート合計(セント単位)
使い方: 顧客が支払う最終価格を表示します

originalTotalPrice

型: number
説明: ディスカウント適用前の元のカート合計(セント単位)
使い方: 透明性と割引額計算のために元の価格を表示します

cartItemCount

型: number
説明: カート内のアイテムの合計数
使い方: カートサマリーでアイテム数の情報を表示します

トラストバッジ

Trust Badges モジュールを使用すると、条件付きのバッジ表示や適切な画像処理といった信頼構築の基本機能を維持しながら、独自のデザインでトラストバッジの表示をカスタマイズできます。

利用可能な props - Full テンプレート

showBadge

型: boolean
説明: トラストバッジを表示すべきかどうかを示します
使い方: モジュール設定に基づいてトラストバッジの表示を制御します

badgeUrl

型: string
説明: 表示するトラストバッジ画像の URL
使い方: カスタム実装におけるトラストバッジ画像のソース URL

⌘I

​⚠️ 重要なお知らせ

​コードエディターの機能

​TypeScript IntelliSense

​編集可能なテンプレート本体

​General セクション

​ヘッダー

​利用可能な props - Full テンプレート

​Body セクション

​アナウンス

​利用可能な props - Full テンプレート

​段階的リワード

​利用可能な props - Full テンプレート

​ディスカウント

​利用可能な props - Full テンプレート

​レコメンデーション

​利用可能な props - Recommendation タイルテンプレート

​カートアイテム

​利用可能な props - Product タイルテンプレート

​利用可能な props - Variant テンプレート

​利用可能な props - Properties テンプレート

​利用可能な props - Bundle テンプレート

​利用可能な props - Price テンプレート

​CartItem オブジェクトのプロパティ

​コア識別情報

​商品情報

​価格(すべての価格はセント単位)

​メディアと URL

​バリエーションとオプション

​カスタムプロパティとメタデータ

​ディスカウントとプロモーション

​バンドル商品

​ビジネスルール

​サブスクリプション情報

​統合メタデータ

​アップセル

​利用可能な props - Upsell タイルテンプレート

​追加メモ

​利用可能な props - Full テンプレート

​Footer セクション

​アドオン

​利用可能な props - Full テンプレート

​ディスカウントコード

​利用可能な props - Full テンプレート

​カートサマリー

​利用可能な props - Full テンプレート

​トラストバッジ

​利用可能な props - Full テンプレート

⚠️ 重要なお知らせ

コードエディターの機能

TypeScript IntelliSense

編集可能なテンプレート本体

General セクション

ヘッダー

利用可能な props - Full テンプレート

Body セクション

アナウンス

利用可能な props - Full テンプレート

段階的リワード

利用可能な props - Full テンプレート

ディスカウント

利用可能な props - Full テンプレート

レコメンデーション

利用可能な props - Recommendation タイルテンプレート

カートアイテム

利用可能な props - Product タイルテンプレート

利用可能な props - Variant テンプレート

利用可能な props - Properties テンプレート

利用可能な props - Bundle テンプレート

利用可能な props - Price テンプレート

CartItem オブジェクトのプロパティ

コア識別情報

商品情報

価格(すべての価格はセント単位)

メディアと URL

バリエーションとオプション

カスタムプロパティとメタデータ

ディスカウントとプロモーション

バンドル商品

ビジネスルール

サブスクリプション情報

統合メタデータ

アップセル

利用可能な props - Upsell タイルテンプレート

追加メモ

利用可能な props - Full テンプレート

Footer セクション

アドオン

利用可能な props - Full テンプレート

ディスカウントコード

利用可能な props - Full テンプレート

カートサマリー

利用可能な props - Full テンプレート

トラストバッジ

利用可能な props - Full テンプレート