「製品の詳細」パネルの拡張

Sterling Store Engagement のどのビューからも表示される商品詳細パネルをカスタマイズできます。

アコーディオン項目のカスタマイズ

「商品詳細情報」パネルで、新しいアコーディオン・アイテムを追加したり、既存のすぐに使用可能なアコーディオン・アイテムを置き換えたりすることができます。

「顧客サービス」ビューの「商品詳細情報」パネルのすぐに使用可能なアコーディオン・アイテムをオーバーライドするために更新する必要がある構成ファイルは customer-view-details.config.ts であり、その他のビューの場合は fulfillment-view-details.config.tsです。

「製品の詳細」パネルをカスタマイズするには、以下の手順を使用します。

まだ存在しない場合は、 store-extensions-src の下に以下のフォルダ構造を作成する： store-extensions-src/app/app-common/product-details-modal
WORKSPACE/store-frontend/src/app/app-common から WORKSPACE/store-frontend/store-extensions-src/app/app-common に app-common-extension.module.ts をコピーする。
注: app-common-extension.module.ts が既に存在する場合は、ファイルをコピーしないでください。カスタム・コンポーネントおよびプロバイダーは、このファイルで宣言されます。
カスタマーサービスビューの商品詳細パネルのアコーディオン項目をカスタマイズするには、 WORKSPACE/store-frontend/src/app/app-common/product-details-modal から WORKSPACE/store-frontend/store-extensions-src/app/app-common/product-details-modal に customer-view-details.config.ts ファイルをコピーします。
注文処理、在庫管理、または構成ビューの商品詳細パネルのアコーディオン項目をカスタマイズするには、 WORKSPACE/store-frontend/src/app/app-common/product-details-modal から WORKSPACE/store-frontend/store-extensions-src/app/app-common/product-details-modal に fulfillment-view-details.config.ts ファイルをコピーします。

「主要商品詳細情報」ペインのカスタマイズ

「商品詳細情報」パネルの「主要商品詳細情報」ペインをカスタマイズできます。「顧客サービス」ビューですぐに使用可能な主要商品詳細をオーバーライドするためにカスタマイズする必要があるコンポーネントは customer-view-primary-detail.ts であり、その他のビューでは fulfillment-view-primary-detail.tsです。

以下の表に、 fulfillment-view-details.config.ts ファイルと customer-view-details.config.ts ファイル内のプロパティーをリストします。

表 1. 設定ファイルのプロパティ
プロパティー	タイプ	説明
`primaryDetail`	オブジェクト	ページの主要商品詳細セクションを定義するために使用されます。このプロパティーは、以下の値を取ることができます。 `tid`。テスト用。 `component`。コンポーネント参照。
`accordionItems`	配列<object>	アコーディオン・ペインを個々のオブジェクトとして定義するために使用します。このプロパティーは、以下の値を取ることができます。 `id`。アイテムの固有 ID。条件に基づいてアコーディオン・ペインを展開したり、ケースの切り替えを使用して親コンテナーでデータ・エミッター・ロジックを処理したりするために使用できます。 `tid`。テストに使用されます。 `component`。コンポーネント参照。 `displayBundleKey`。アコーディオン・ペインのタイトル。 `lazyLoad`。オプション。アコーディオン・コンポーネントを最初にロードするか、コンポーネントの展開時にロードするかを示します。

これらのコンポーネントは動的にロードされ、以下の入力がこれらのコンポーネントに渡されます。

主要商品詳細コンポーネントの入力

primaryData。 getCompleteItemList API からの応答。
parentComponentId。構成内のコンポーネント ID および tid 。
activatedRoute このコンポーネントの ActivatedRoute の参照

アコーディオン項目コンポーネントの入力

config。 add-product-page.config.ts ファイルでこのパネルについて言及されている構成。
primaryData。主要詳細コンポーネントについて言及されているものと同じ入力。
activatedRoute。このコンポーネントの activatedRoute の参照。