テーマのモジュール ライブラリ コンポーネントをオーバーライドする
この記事では、テーマでのカスタマイズを可能にするためにモジュール ライブラリのコンポーネントを上書きする方法について説明します。
Microsoft Dynamics 365 Commerce モジュール ライブラリには、さまざまなモジュール ライブラリ モジュールが使用し、上書きできる一連の TypeScript コンポーネントが含まれています。 これらのコンポーネントは、モジュール HTML の HTML をレンダリングし、イベントを処理し、サーバー側の呼び出しを行うのに役立つビジネス ロジックやその他のロジックを含むヘルパー API で構成されています。
コンポーネントのロジックを変更する必要がある場合は、コマンド ライン インターフェイス (CLI) add-component-override コマンドを使用して、選択したテーマのコンポーネントを上書きできます。 たとえば、取り消し価格のロジックを変更する場合は、価格コンポーネントを上書きできます。 モジュール ビューの上書きなどの他の変更は、視覚化の変更に使用できます。 まれに、必要なすべての変更を行うために、 モジュールのクローンが必要になる場合があります。
コンポーネントの一覧
コンポーネントの一覧を取得するには、次の CLI コマンドを使用できます。
yarn msdyn365 add-component-override --list-components
コンポーネントのソース コードは、インストールされているオンライン ソフトウェア開発キット (SDK) のディレクトリ内の \node_modules\@msdyn365-commerce\components\src\ にあります。 ソース コードを参照して、各コンポーネントで使用できるオプションを確認できます。
次の表に、モジュール ライブラリの一部として含まれているコンポーネントの一覧を示します。 コンポーネントは、使用するモジュール ライブラリのバージョンによって異なる場合があります。
| コンポーネント | Description |
|---|---|
| AddToCart | このコンポーネントは、カートに製品を追加するために使用されます。 これは、グローバル状態パッケージに存在するカート状態と組み合わせて機能します。 このコンポーネントは、製品の詳細ページ (PDP) のボタンとして表示されます。 このボタンが選択されている場合、製品の在庫確認を検証し、Retail Server addcartline API を呼び出して製品をカートに追加します。 |
| AddToWishlist | このコンポーネントは、製品を欲しい物リストに追加したり、製品を削除するために使用されます。 これは、グローバル状態パッケージに存在する欲しい物状態と組み合わせて機能します。 このコンポーネントは、欲しい物の追加/削除ボタンのユーザー インターフェイス (UI) を表示します。 onclick イベントも処理します。 onclick イベントは、ユーザーがサインインしていることを確認します。 |
| CartIcon | このコンポーネントは、HTML をレンダリングして、ヘッダー モジュールにカート アイコンを表示するために使用されます。 カート アイコンが選択されている場合、このコンポーネントによってカート ページが開きます。 モジュール ライブラリには、このコンポーネントとは別の CartIcon モジュールもあります。 CartIcon モジュールがヘッダー モジュールで構成されていない場合、このコンポーネントはフォールバックとして使用されます。 |
| CartLineItem | このコンポーネントは、HTML をレンダリングして、カートに 1 つの項目を表示するために使用されます。 これは、商品画像、PDP の購入ボックス モジュールで選択された製品詳細、製品数量、割引を適用した製品価格で構成されます。 |
| 価格 | このコンポーネントは、HTML をレンダリングして、サイト全体で製品価格を正しい形式で表示するために使用されます。 API 呼び出しは行いません。 |
| 製品 | このコンポーネントは、HTML をレンダリングして、サイト全体で製品をカード形式で表示するために使用されます。 これは、製品の画像、タイトル、説明、価格、および評価で構成されます。 |
| PromoCode | このコンポーネントは、プロモーション コードまたは割引コードをカートに適用するために使用されます。 これは、グローバル状態パッケージに存在するカート状態と組み合わせて機能し、カート内のプロモーションを適用または削除します。 |
| 評価 | このコンポーネントは、HTML をレンダリングして、サイト全体で製品評価で表示するために使用されます。 API 呼び出しは行いません。 このコンポーネントは、評価を更新するクリック イベントも処理します。 |
| SocialMedia | このコンポーネントは、購入ボックス モジュールで製品を共有するソーシャル メディア アイコンを表示するために使用します。 現在、Facebook、LinkedIn、Mail、Pinterest、および Twitter がサポートされています。 |
| WishListIcon | このコンポーネントは、HTML をレンダリングして、ヘッダー モジュールに欲しい物リスト アイコンを表示するために使用されます。 また、欲しい物リスト ページを開くためのクリック イベントも処理します。 |
テーマのコンポーネントをオーバーライドする
テーマのコンポーネントをオーバーライドするには、次の CLI コマンドを実行できます: yarn msdyn365 add-component-override [themeName] [componentName] [--list-components]。 このコマンドを実行した後、テーマの \view\components ディレクトリで新しい TypeScript ファイルを見つける必要があります。 その後、必要に応じてそのディレクトリのファイルを変更できます。
例
yarn msdyn365 add-component-override spring add-to-cart