商品リスト レンダリングとプロモーション商品レンダリングを使用するためのデフォルトの Storefront サイト テンプレート ページの変更

概要

商品リスト レンダリングとプロモーション商品レンダリングを使用するようにデフォルトの Storefront サイト テンプレート ページする方法。

Storefront サイト テンプレートには、デフォルトのさまざまなページおよびレンダリングが含まれています。Sitecore 9.3 以降、Commerce 検索結果レンダリングが、Storefront サイト テンプレートで使用されるデフォルトのレンダリングとなっています。次の手順では、必要に応じて Storefront サイト テンプレートで商品リスト レンダリングとプロモーション商品レンダリングを使用する方法について説明します。2 つのアプローチを比較を確認するには、「商品リストに利用可能なレンダリングの選択」を参照してください。

Commerce ホーム ページを変更するには、次の手順に従います。

  1. コンテンツ エディターで、sitecore/Content/Sitecore/Storefront/Home に移動します。

  2. リボンの [プレゼンテーション] タブにある [レイアウト] グループで、[詳細] をクリックします。

  3. [レイアウト詳細] ダイアログ ボックスの [共有レイアウト] タブにある [デフォルト] セクションで、[編集] をクリックします。

  4. [デバイス エディター] の [コントロール] タブで、次のアイテムを選択し、[削除] をクリックします。

    • リッチ テキスト /main/row-2-2/container-4

    • Commerce 検索結果 /main/row-2-2/container-4

    • 結果をさらに表示 /main/row-2-2/container-4

    • リッチ テキスト /main/row-1-2/container-3

    • Commerce 検索結果 /main/row-1-2/container-3

    • 結果をさらに表示 /main/row-1-2/container-3

  5. [コントロール] タブで、[追加] をクリックします。

  6. [レンダリングを選択してください] ダイアログ ボックスで Renderings/Feature/Commerce Experience Accelerator/Commerce Catalog に移動し、[プロモーション商品] をクリックして、[選択後にプロパティ ダイアログ ボックスを開く] チェック ボックスをオンにし、[選択] をクリックします。

  7. [コントロール プロパティ] ダイアログ ボックスの [プレースホルダー] フィールドに、「/main/row-1-2/container-3」と入力します。

  8. [一般] セクションの [データ ソース] で、[参照] をクリックします。

  9. [関連付けられたコンテンツを選択してください] ダイアログ ボックスで、[ホーム ページ プロモーション商品] をクリックします。

  10. [コントロール プロパティ] ダイアログ ボックスの [プロモーション商品] セクションで、[商品リスト] フィールドをクリックし、[テレビのセール中] をクリックして、[OK] をクリックします。

  11. 以下の手順を除き、Mira ラップトップに対して手順 5 〜 10 を繰り返します。

    • 手順 7 で、「/main/row-2-2/container-4」と入力します。

    • 手順 10 で、[Mira ラップトップ] を選択します。

  12. リボン メニューの [保存] をクリックし、インクリメンタル パブリッシュを使用して変更をパブリッシュします。

Commerce カテゴリー ページを変更するには、次の手順に従います。

  1. コンテンツ エディターで、sitecore/Content/Sitecore/Storefront/Presentation/Page Designs に移動します。

  2. [コンテンツ] タブの [デザイン変更] セクションで、[Commerce カテゴリー] の横にあるフィールドをクリックし、[Commerce カテゴリー ページ] をクリックします。

    パーシャル デザインへのページのマップ
  3. リボン メニューの [保存] をクリックし、インクリメンタル パブリッシュを使用して変更をパブリッシュします。

商品詳細ページを変更するには、次の手順に従います。

  1. コンテンツ エディターで sitecore/Content/Sitecore/Storefront/Presentation/Partial Designs に移動し、[デフォルトのメイン商品ページ コンテンツ] をクリックします。

  2. リボンの [プレゼンテーション] タブにある [レイアウト] グループで、[詳細] をクリックします。

  3. [レイアウト詳細] ダイアログ ボックスの [共有レイアウト] タブにある [デフォルト] セクションで、[編集] をクリックします。

  4. [デバイス エディター] の [コントロール] タブで、次のアイテムを選択し、[削除] をクリックします。

    • リッチ テキスト /main/column-1-3

    • Commerce 検索結果 /main/column-1-3

    • 結果をさらに表示 /main/column-1-3

  5. [コントロール] タブで、[追加] をクリックします。

  6. [レンダリングを選択してください] ダイアログ ボックスで Renderings/Feature/Commerce Experience Accelerator/Commerce Catalog に移動し、[プロモーション商品] をクリックして、[選択後にプロパティ ダイアログ ボックスを開く] チェック ボックスをオンにし、[選択] をクリックします。

  7. [コントロール プロパティ] ダイアログ ボックスの [プレースホルダー] フィールドに、「/main/column-1-3」と入力します。

  8. [一般] セクションの [データ ソース] で、[参照] をクリックします。

  9. [関連付けられたコンテンツを選択してください] ダイアログ ボックスで [関連商品] をクリックし、[OK] をクリックします。

  10. [コントロール プロパティ] ダイアログ ボックスの [プロモーション商品] セクションで、[リレーションシップ タイプ] フィールドをクリックし、[関連商品] をクリックします。[OK] をクリックして、[コントロール プロパティ] ダイアログ ボックスを閉じます。[OK] をもう一度クリックして、デバイス エディターを閉じます。

  11. リボン メニューの [保存] をクリックし、インクリメンタル パブリッシュを使用して変更をパブリッシュします。

ページにパーシャル デザインを関連付けるには、次の手順に従います。

  1. コンテンツ エディターで、sitecore/Content/Sitecore/Storefront/Home/Search に移動します。

  2. [コンテンツ] タブの [デザイン変更] セクションで、[ページ デザイン] フィールドをクリックし、[Commerce 検索結果ページ] をクリックします。

  3. コンテンツ ツリーで、sitecore/Content/Sitecore/Storefront/Presentation/Page Designs に移動します。

  4. [Page Designs] の下のすべてのページについて、[コンテンツ] タブの [デザイン変更] セクションで、[デフォルト Commerce ヘッダー] を [Commerce ヘッダー] に置き換えます。

    ページへのページ デザインの割り当て

    重要

    上の画像に示されているように、パーシャル デザインを正確な順序に並べてください。

  5. リボンの [保存] をクリックし、インクリメンタル パブリッシュを使用して変更をパブリッシュします。