次世代プラットフォーム非推奨

「製品の詳細」ページの拡張

オンラインで編集

「製品詳細」 ページをカスタマイズするには、アコーディオン・ペインで新しいアコーディオン・ペインを追加するか、既存のすぐに使用可能なコンポーネントを置き換えます。

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

「商品詳細情報」 ページでアコーディオン項目をカスタマイズするには、以下の手順を使用します。

  1. store-extensions-srcの下に以下のフォルダー構造を作成します (まだ存在しない場合)。

    store-extensions-src/app/features/orders/order-capture-wizard-page/add-product-page

  2. orders-extension.module.ts ファイルを WORKSPACE/store-frontend/src/app/features/orders から WORKSPACE/store-frontend/store-extensions-src/app/features/order にコピーする。
    注: orders-extension.module.ts が既に存在する場合は、ファイルをコピーしないでください。 カスタム・コンポーネントおよびプロバイダーは、このファイルで宣言されます。
  3. add-product-page.config.ts ファイルを WORKSPACE/store-frontend/src/app/features/orders/order-capture-wizard-page/add-product-page/ から WORKSPACE/store-frontend/store-extensions-src/app/features/order/order-capture-wizard-page/add-product-page/ にコピーする。
  4. 新規アコーディオン項目を追加するには、対応するオブジェクトを add-product-page.config.tsの accordionItems 配列内に追加します。
  5. アコーディオン項目を削除するには、 add-product-page.config.tsの accordionItems 配列から対応する項目を削除します。

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

「商品詳細情報」 ページの「主要商品詳細情報」ペインをカスタマイズできます。 例えば、どの商品についても SKU 情報が表示されないようにこのペインをカスタマイズするには、以下のステップを使用します。
  1. store-extensions-srcの下に以下のフォルダー構造を作成します (まだ存在しない場合)。

    store-extensions-src/app/features/orders/order-capture-wizard-page/add-product-page

  2. primary-detail コンポーネントを /store-frontend/src/app/features/orders/order-capture-wizard-page/add-product-page/primary-detail から store-extensions-src/app/features/orders/order-capture-wizard-page/add-product-page にコピーする。
  3. 新しくコピーされたコンポーネントを更新して、SKU エレメントを HTML から削除します。

add-product-page.config.ts プロパティー

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

    primaryData - getCompleteItemList API からの応答。

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