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

コンテンツ エディタで、/sitecore/Content/<tenant>/<site>/Settingsに移動します。

Scopesを右クリックし、Insert, Scopeをクリックします。

Messageダイアログボックスで、「Categories catalog scope」と入力し、「OK」をクリックします。

ContentタブのScopeセクションで、Build queryハイパーリンクをクリックします。

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

検索アイコンをクリックして検索を実行し、目的のカテゴリのリストが表示されることを確認します。結果には複数の言語のカテゴリが表示される場合がありますが、これらは後で除外されます。

リボン メニューのSaveをクリックします。

コンテンツ エディターで/sitecore/Templates/Project/<tenant>/Commerce Categoryに移動し、BuilderタブでAdd a new sectionフィールドをクリックして「Category Images」と入力します。

Add a new fieldボックスをクリックして「画像」と入力し、関連付けられたタイプリストから「Treelist」をクリックして変更を保存します。

カタログ カテゴリ ( /sitecore/Content/Sitecore/Storefront/Home/Catalogs/Habitat_Master/Habitat_Master-Departments/Habitat_Master-Camerasなど) に移動し、Contentタブをクリックします。

Category ImagesセクションのImagesフィールドで、カテゴリに関連付ける画像に移動し、ダブルクリックしてSelectedリストに移動します。

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

変更を保存して公開します。

コンテンツ エディターで /sitecore/Content/<tenant>/<site>/Presentation/Rendering Variantsに移動し、Search Resultsを右クリックして、Insert, Variant Definitionをクリックします。

Messageダイアログボックスで、「Category variant」と入力し、「OK」をクリックします。

ツリー ビューで Category variant を右クリックしてInsert, Scribanをクリックし、Messageダイアログボックスでデフォルト名を受け入れてOKをクリックします。

「Scriban」を右クリックし、「 Insert, Responsive Image 」をクリックし、「 Message 」ダイアログボックスでデフォルト名を受け入れて「 OK」をクリックします。

ツリー ビューで Scriban をクリックし、ContentタブのVariantDetailsセクションで、次のコードをコピーしてTemplateフィールドに貼り付けます。

<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>

ツリー ビューで レスポンシブ イメージ をクリックし、ContentタブのVariant Detailsセクションで次の値を入力します。

変更を保存します。

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

Associated Contentダイアログボックスで、「デフォルト」をクリックし、「OK」をクリックします。

Search Resultsツールバーで、Variantリストから「カテゴリバリアント」を選択します。

Search ResultsツールバーでMore, Edit component propertiesをクリックし、Control Propertiesダイアログ ボックスのSearchCriteriaセクションのSearch scopeフィールドで カテゴリ カタログのスコープをクリックします。

Default language filteringフィールドで、現在の言語 をクリックします。

Default sort orderフィールドでTitle Descをクリックし、次にOKをクリックします。

変更を保存します。