商品リストのオンラインでのレンダリング

コンテンツ エディターで sitecore/Content/<テナント>/<サイト>/Home に移動し、[商品] アイテムを右クリックして、[エクスペリエンス エディター] をクリックします。

[エクスペリエンス エディター] の [ツールボックス] で、[コマース カタログ] セクションの [カタログ商品 コンテナ] レンダリングをページにドラッグします。

[カタログ商品コンテナ] ツールバーで [詳細 > コンポーネント プロパティを編集する] をクリックし、[一般] セクションで [データ ソース > 参照] をクリックします。該当する商品カテゴリ、たとえばスマートフォン (/sitecore/Content/Sitecore/Storefront/Home/Catalogs/Habitat_Master/Habitat_Master-Departments/Habitat_Master-Phones/Habitat_Master-Smartphones) に移動し、[OK] をクリックして [コントロール プロパティ] ダイアログ ボックスを閉じます。

[ツールボックス] の [コマース カタログ] セクションで、[商品リスト] レンダリングをクリックし、[カタログ商品コンテナ] 内にドラッグします。

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

[商品リスト] ツールバーで、[詳細 > コンポーネント プロパティを編集する] をクリックします。

[遅延読み込み] セクションで、[遅延読み込みを使用する] チェックボックスをオンにし、"最大ページ サイズ" フィールドに表示する商品の数 (3 など) を入力します。

"最大ページ サイズ" フィールドは、訪問者がページに到着したときにリストに表示される商品カードの数を示します。これは、訪問者が [さらに表示] をクリックするたびにリストに追加される商品の数でもあります。

変更を確定するには、[OK] をクリックし、リボン メニューで [保存] をクリックします。

レンダリングは次のようになります。

コンテンツ エディターで、商品リストが含まれているフォルダーに移動します。たとえば、/sitecore/Content/<テナント>/<サイト>/Data/Commerce/Product Lists に移動します。

右クリックし、[Insert, Named Search] をクリックします。

[メッセージ] ダイアログ ボックスで、新しい商品リストの名前 (「スマートフォン」など) を入力し、[OK] をクリックします。

ツリー表示で、新しく作成した商品リスト (スマートフォン など) をクリックします。リボン メニューの [表示] タブで、[標準フィールド] チェックボックスと [バケット] チェックボックスをオンにします。

[コンテンツ] タブの [アイテム バケット] セクションで、[デフォルト バケット クエリ] ラベルの下にある [クエリを作成する] をクリックします。[検索クエリを作成する] ダイアログ ボックスで検索クエリを作成し、終了したら [OK] をクリックします。たとえば Odyssey ブランドのスマートフォンを検索する場合は、次のクエリを作成します。

リボンの [保存] をクリックします。

クエリをプロモーション商品レンダリングに関連付けるには、エクスペリエンス エディターの商品ページに移動し、ツールボックスの [コマース カタログ] セクションで、[プロモーション商品] レンダリングをページにドラッグします。

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

[プロモーション商品] ツールバーで、[詳細 > コンポーネント プロパティを編集する] をクリックします。

[プロモーション商品] セクションで、[商品リスト] ボックスから使用する商品リスト (スマートフォンなど) をクリックします。

[遅延読み込み] セクションで、[遅延読み込みを使用する] チェックボックスをオンにします。変更を確定するには、[OK] をクリックします。

レンダリングは次のようになります。

コンテンツ エディターで、/sitecore/Content/<テナント>/<サイト>/Data/Commerce> に移動します。

商品の静的リストを作成するには、[商品リスト] を右クリックし、[選択した商品を挿入] をクリックします。次に [メッセージ] ダイアログ ボックスで、選択した商品を入力して [OK] をクリックします。

リボンの [表示] タブで、[バケット] チェックボックスと [Raw 値] チェックボックスをオフにします。

[コンテンツ] タブの [商品] セクションで、表示する商品が含まれているフォルダーに移動します。たとえば、sitecore/Content/<テナント>/<サイト>/Home/Catalogs/Habitat_Master/Departments/Phones に移動します。

[コンテンツ] タブの [商品] セクションで、"タイトル" フィールドをクリックして名前 (「Odyssey Phones」 など) を入力します。

[商品リスト] で、商品が含まれているフォルダー (sitecore/Content/<テナント>/<サイト>/Home/Catalogs/Habitat_Master/Departments/Phones など) に移動します。[選択したリスト] に移動するすべての商品 (すべての Habitat Odyssey スマートフォンなど)をダブルクリックします。完了したら、リボンの [保存] をクリックします。

固定リストを [プロモーション商品] レンダリングに関連付けるには、エクスペリエンス エディターで商品ページに移動し、ツールボックスの [コマース カタログ] セクションで、プロモーション商品レンダリングをページにドラッグします。

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

[プロモーション商品] ツールバーで、[詳細 > コンポーネント プロパティを編集する] をクリックします。

[プロモーション商品] セクションの [商品リスト] ボックスで、[選択した商品] をクリックします。

[遅延読み込み] セクションで、[遅延読み込みを使用する] チェックボックスをオンにします。変更を確定するには、[OK] をクリックします。

変更を保存するには、リボンの [保存] をクリックします。

商品の詳細ページなど、最新のカタログ商品があるページにプロモーション商品レンダリングを挿入します。

レンダリングの [コントロール プロパティ] ダイアログ ボックスで、[リレーションシップ タイプ] ドロップダウン メニューからオプションを選択し、[OK] をクリックします。

sitecore\Content\<テナント>\<サイト>\Settings\Scopes に移動し、[スコープ] を右クリックして、[挿入 > スコープ] をクリックします。次に、名前 (「Optix 商品」など) を入力し、[OK] をクリックします。

[コンテンツ] タブの [スコープ] セクションで [クエリの作成] をクリックします。次に、クエリ ボックスをクリックして検索クエリを定義し、[OK] をクリックします。次に例を示します。

[ブースト調整] セクションで [ルールを編集する] をクリックし、ブースト ルール (DSLR カメラを検索結果リストの一番上に移動するなど) を定義し、[OK] をクリックします。

リボン メニューで、[保存] をクリックします。

エクスペリエンス エディターでページを開き、ツールボックスで [コマース カタログ] セクションから、Commerce 検索結果レンダリングをページにドラッグします。[コントロール プロパティ] ダイアログ ボックスでレンダリング プロパティを設定し、[OK] をクリックします。次に例を示します。

ツールボックスの [検索] カテゴリで、[結果をさらに表示] レンダリングをページにドラッグし、[コントロール プロパティ] ダイアログ ボックスで、前の手順で使用したものと同じ検索署名 (「Optix 商品」など) を入力し、[OK] をクリックします。

ライブ ストアフロントでは、このレンダリングは次のように表示されます。