商品カスタマイザー：関連オプション機能を使用してデザインをレンダリングする

顧客が1つまたは複数の部分を選択してカスタマイズできるデザインを提供する商品カスタマイゼーションサービスでは、関連オプション機能を使用して、部分のコンテンツ、特性、または属性をオプションとして設定し、対応する部分（画像やテキストなどの実際の要素）が顧客が効果をプレビューできる最終デザインにレンダリングされます。これにより、カスタマイゼーションサービスが直感的でダイナミックな体験になります。

ユースケース

例1

顧客は説明テキスト付きの画像を選択し、プレビューではそれが全体のデザインにオーバーレイされた状態を表示します。

例2

顧客はキャラクターの肌の色をカラースワッチから選択し、プレビューではその肌の色が反映されたキャラクター画像が表示されます。

例3

顧客はドロップダウンメニューからテキストを選択し、それが商品画像にレンダリングされます。

この機能の動作方法

このカスタマイゼーション体験を実現するために、実際に2つのオプションセットを作成します。最初のセットは顧客が操作するためのものです。これは、単純なカラースワッチ、テキストのドロップダウン、またはカスタマイズの選択肢を明確に表すものであることがあります。2つ目は最終的な商品画像をレンダリングするためのものです。それらを関連付け、それぞれのセットからのオプションを一致させます。たとえば、最初のセットが猫のキャラクターのためのカラースワッチで、白、黒、オレンジ、グレーの順である場合、2つ目のセットでは同じ順序で猫の画像を提供する必要があります（つまり、白い猫、黒い猫、オレンジの猫、グレーの猫）。したがって、顧客がオレンジ色を選択すると、プレビューでは商品画像にオレンジ色の猫の画像がオーバーレイされます。

一般的な手順は以下の通りです:

1. 顧客が見て選択する最初のオプション（A）を作成します。これらのオプションはレンダリングに使用されないため、キャンバスエリアの外に移動します。
2. レンダリング用の2番目のセット（B）を作成します。 このオプションを非表示にする を選択してください。そのため、商品ページにオプションとして表示されません。
   
3. セットAとBを関連付けるには、セットAのコンポーネントで「B」を関連オプション ドロップダウンメニューから選択します。AとBのオプションの順序が正しく一致していることを確認してください。