チュートリアル: カテゴリ別のビジュアル ナビゲーションの設定

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

[スコープ] を右クリックし、[スコープ]、[挿入] の順にクリックします。

[メッセージ] ダイアログ ボックスで、「カテゴリ カタログ スコープ」と入力し、「OK] をクリックします。

[スコープ] セクションの [コンテンツ] タブで、[バケット クエリを挿入する] のハイパー リンクをクリックします。

[検索クエリを構築] ダイアログ ボックスで、検索クエリが次の画像に一致するようにフィルターを追加し、[OK] をクリックします。

検索アイコンをクリックして、検索を実行し、希望するカテゴリのリストが表示されることを確認します。複数の言語で書かれたカテゴリが検索結果に表示されることがありますが、これらは後ほどフィルタリングされます。

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

コンテンツ エディターで、/sitecore/Templates/Project/<テナント>/Commerce Category に移動します。[テンプレート ビルダー] タブをクリックして "新しいフィールド セクションを追加する" フィールドに入力し、カテゴリ画像を入力します。

[新しいフィールドを追加] ボックスをクリックして画像を入力し、関連するタイプ リストから [ツリーリスト] をクリックして変更を保存します。

カタログのカテゴリ、たとえば、/sitecore/Content/Sitecore/Storefront/Home/Catalogs/Habitat_Master/Habitat_Master-Departments/Habitat_Master-Cameras に移動し、[コンテンツ] タブをクリックします。

[カテゴリ画像] セクションの "画像" フィールドで、カテゴリに関連付ける画像に移動し、画像をダブルクリックして [選択済み] リストに追加します。

手順 3 を繰り返して、カタログ内のすべてのカテゴリに画像を関連付けます。

変更を保存してパブリッシュします。

コンテンツ エディターで、/sitecore/Content/<テナント>/<サイト>/Presentation/Rendering Variants に移動し、[検索結果] を右クリックして [挿入]、[バリアント定義] の順にクリックします。

[メッセージ] ダイアログ ボックスで、「カテゴリ バリアント」と入力して [OK] をクリックします。

ツリー ビューで、[カテゴリ バリアント] を右クリックします。次に、[挿入]、[Scriban] の順にクリックし、[メッセージ] のダイアログ ボックスで、デフォルトの名前のまま [OK] をクリックします。

[Scriban] を右クリックして [挿入]、[レスポンシブ画像] の順にクリックし、[メッセージ] のダイアログ ボックスで、デフォルトの名前のまま [OK] をクリックします。

ツリー ビューで、[Scriban] をクリックし、[コンテンツ] タブの [バリアント 詳細] セクションで、次のコードをコピーして "テンプレート" フィールドにペーストします。

<div class="product-summary" data-id="{{ i_item.name }}">
{{displayName = i_item.display_name | html.escape}}
<div class="product-photo">
    <a title="{{ displayName }}" href="{{ i_item.url }}">
            {{
           productImage = i_item.images.targets | array.first
             if productImage
                   sc_execute productImage "Responsive Image"
                end
            }}
        </a>
    </div>
    <div class="product-info">
       <a class="product-title" title="{{ displayName }}" href="{{ i_item.url }}">
            {{ displayName }}
        </a>
    </div>
        </div>

ツリー ビューで、[レスポンシブ画像] をクリックし、[コンテンツ] タブの [バリアント 詳細] セクションに、次の値を入力します。

変更を保存します。

エクスペリエンス エディターで、カテゴリを表示するページに移動し、ツール ボックスの [検索] セクションで、[検索結果] レンダリングをクリックして、ページにドラッグします。

[関連するコンテンツ] ダイアログ ボックスで、[デフォルト]、[OK] の順にクリックします。

[検索結果] ツールバーで [バリアント] リストから、[カテゴリ] バリアントを選択します。

[検索結果] ツールバーで、[詳細]、[プロパティ] をクリックし、[コントロール プロパティ] ダイアログ ボックスで、[検索条件] セクションの "検索範囲" フィールドにある "カテゴリ カタログ スコープ" をクリックします。

"デフォルト言語 フィルタリング" フィールドで、[現在の言語] をクリックします。

"デフォルト ソート順序" フィールドで、[タイトル 降順] をクリックし、[OK] をクリックします。

変更を保存します。