カタログとバリエーション

正しい識別子を使用する

店頭の製品 ID、SKU、またはバリアント ID は、自動的には SPREEAI 衣類 ID にはなりません。インジェストまたは Shopify 同期ワークフローを通じて作成されたマッピングを維持します。衣服は認証されたパートナーのものであり、試着できるものでなければなりません。

製品選択をマッピングする

TypeScript

import type { RenderTryOnButtonOptions } from "@spreeai/web-sdk";

export const productOptions: RenderTryOnButtonOptions = {
  elementId: "spreeai-try-on",
  garments: [{
    garmentId: "SPREEAI_GARMENT_ID",
    variant: { color: "blue", fit: "regular" },
    availableSizes: ["S", "M", "L"],
    price: "$59.00",
  }],
  showSizes: true,
  showPrices: true,
};

variant 色、フィット感、性別、スタイルをフィルタリングできます。文書化された照合では大文字と小文字が区別されません。名前で色を一致させます。 blue16 進値ではなく、

衣服の準備

状態または状態	統合アクション
同期されていない/取り込みが不完全です	通常の製品エクスペリエンスを維持します。試着の可能性を約束するものではありません。
準備完了ですが、Shopify では無効になっています	目的の製品を確認し、明示的に有効にします。準備だけでは生きていけません。
利用可能な衣服と一致するバリエーション	その選択範囲のボタンをレンダリングします。
一致する衣装がありません	配列内の最初のガーメントへのフォールバックが期待されます。
検証が失敗する	ボタンは表示されません。コンソールと製品のマッピングを調査します。

製品データを最新の状態に保つ

製品の選択が変更された場合は、表示価格と在庫サイズを更新します。
個別の製品ボタンには一意のコンテナ ID を使用します。
ボタンを再レンダリングするときは、現在の衣服とバリアントの選択を渡します。
カートのミューテーションを作成する前に、返されたカートデータを独自のカタログと照合して確認します。

衣服アセットを準備する

現在のものを使用する衣服の画像基準サポートされている画像とメタデータについては。製品を有効にする前に処理の問題を解決します。本番データの代わりにプレースホルダの衣類 ID を使用しないでください。

出典参照