---
title: "ウォークスルー:カテゴリ別に視覚的ナビゲーションを設定する"
slug: "walkthrough--configuring-visual-navigation-by-category"
abstract: "カテゴリごとにナビゲーションをより視覚的に設定する方法。"
---
# ウォークスルー:カテゴリ別に視覚的ナビゲーションを設定する

通常のメニューをレンダリングするよりも、より視覚的にカテゴリごとにナビゲートしたい場合は、クエリを使ってSXA Search結果レンダリングで画像付きのカテゴリを表示できます。

![Example of search by category](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/CategorySearchLive.png)

この手順は、ストアフロントのサイトテンプレートとHabitatカタログを使用していることを前提としていますが、カスタムカタログやサイトにも同じ手順が適用されます。

> !注サンプルのScribanテンプレートをネストされたsc\_searchメソッドに拡張するか、レンダリングバリアントの各レベルごとにScribanテンプレートをネストすることで、この構成を複数のカテゴリーレベルにリストできます。

このウォークスルーでは、以下の方法を紹介します:

-   [検索範囲とクエリを作成してください](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/walkthrough--configuring-visual-navigation-by-category.html#UUID-70f0c7c5-7bcd-6525-a38b-2c826145f01a_section-idm231815136307322 "Create a search scope and query")
-   [Search Resultsレンダリングバリアントを作成する](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/walkthrough--configuring-visual-navigation-by-category.html#UUID-70f0c7c5-7bcd-6525-a38b-2c826145f01a_section-idm231815214233666 "Create a Search Results rendering variant")
-   [画像フィールドの設定](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/walkthrough--configuring-visual-navigation-by-category.html#UUID-70f0c7c5-7bcd-6525-a38b-2c826145f01a_section-idm231815136445469 "Configure an image field")
-   [Search Resultsレンダリングの設定](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/walkthrough--configuring-visual-navigation-by-category.html#UUID-70f0c7c5-7bcd-6525-a38b-2c826145f01a_section-idm231815193113629 "Configure a Search Results rendering")

## 検索範囲とクエリを作成してください

検索範囲とクエリの設定:

1.  コンテンツエディターで */sitecore/Content///Settings*へ行ってください。
    
2.  右クリックで**Scopeを** 選び、**Insert、Scope**を選びます。
    
3.  **メッセージ**ダイアログボックスで*「カテゴリ」カタログの範囲*を入力し、「**OK」**をクリックします。
    
4.  **コンテンツ**タブの**スコープ**セクションで、「**ビルドクエリ**」ハイパーリンクをクリックしてください。
    
5.  「 **Build Search Query** 」ダイアログボックスで、検索クエリが次の画像と一致するようにフィルターを追加し、**OK**をクリックします。
    
    -   Commercesearchitemtype:category つまり、検索はカテゴリーのみに焦点を当てるということです。
    -   \_Parent: {B893C063-6238-ED57-700D-72862C56038D} 親が部門にするのです。カスタムカタログを使っている場合は、親項目のアイテムIDをコピーして挿入してください。
    
    検索アイコンをクリックして検索を実行し、目的のカテゴリリストが表示されるか確認してください。複数言語のカテゴリが結果に表示されることがありますが、これらは後でフィルタリングされます。
    
    ![Query elements](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/SearchCategories.png)
    
6.  リボンメニューで「 **保存**」をクリックします。
    

## 画像フィールドの設定

各トップレベルカテゴリに画像を関連付けるには、まずCommerce Categoryテンプレートを修正して、各カタログカテゴリごとに画像フィールドを用意する必要があります。または、Commerce Engineでカテゴリテンプレートに画像フィールドを追加するように変更することもできますが、単純化のためここではこのオプションは使用されていません。詳細については、「 [カタログアイテムテンプレートに新しいフィールドを追加する](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/add-new-fields-to-a-catalog-item-template.html "Add new fields to a catalog item template")」をご覧ください。

画像フィールドの設定:

1.  コンテンツエディターで */sitecore/Templates/Project//Commerce Category*に行き、**ビルダー** タブの「 **新しいセクションを追加** 」欄をクリックして「カテゴリ画像」と入力してください。
    
2.  「 **新しいフィールドを追加** 」ボックスをクリックして画像を入力し、関連するタイプリストから **「ツリーリスト** 」をクリックして変更を保存してください。
    
3.  カタログカテゴリ(例えば */sitecore/Content/Sitecore/Storefront/Home/Catalogs/Habitat\_Master/Habitat\_Master-Departments/Habitat\_Master-Cameras* )に行き、「 **コンテンツ** 」タブをクリックしてください。
    
4.  **Category Images**セクションの**Images**欄で、カテゴリに関連付けたい画像を選び、ダブルクリックして**Selected**リストに移動させます。
    
    ![Category image selected](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/CategoryImage.png)
    
5.  ステップ3を繰り返して、画像をカタログ内のすべてのカテゴリーに関連付けます。
    
6.  変更を保存して公開してください。
    

## Search Resultsレンダリングバリアントを作成する

Search Resultsレンダリングのバリアントを作成するには:

1.  コンテンツエディターで */sitecore/Content///Presentation/Rendering Variants*に行き、**Search結果**を右クリックし、「 **挿入」→「バリアント定義**」をクリックします。
    
2.  **メッセージ**ダイアログボックスで*Category variant*を入力し、**OK**をクリックします。
    
3.  ツリービューで、右クリックでカテゴリバリアントを選び、「 **挿入」→「スクリバン** 」をクリックし、**メッセージ** ダイアログボックスでデフォルト名を受け入れて**OK**をクリックします。
    
4.  Scribanを右クリックし、「 **Insert」→「Respondn Image** 」をクリックし、**メッセージ** ダイアログボックスでデフォルト名を受け入れて**OK**をクリックします。
    
5.  ツリービューでScribanをクリックし、**Content**タブの**VariantDetails**セクションで、以下のコードを **テンプレートフィールドに** コピー&ペーストしてください。
    
    <div class="product-summary" data-id="{{ i\_item.name }}">
    {{displayName = i\_item.display\_name | html.escape}}
    <div class="product-photo">
     <a title="{{ displayName }}" href="https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/%7B%7B%20i/_item.url%20%7D%7D">
     {{
     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="https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/%7B%7B%20i/_item.url%20%7D%7D">
     {{ displayName }}
     </a>
     </div>
     </div>
    
6.  ツリービューで「レスポンシブ画像」をクリックし、**コンテンツ** タブの **「バリアント詳細** 」セクションで以下の値を入力してください:
    
    -   サイズ **欄で** (最大幅:320px)280px、(最大幅:480px)440px、800px
    -   **幅**フィールドには320,480,800を入力してください
    -   **デフォルト**サイズ欄に400を入力してください
7.  変更を保存してください。
    

## Search Resultsレンダリングの設定

トップレベルのカテゴリ表示時に株価や価格情報が必要ないため、Commerce Search Resultsレンダリングの代わりにSXA Search結果レンダリングを使用できます。

Search Resultsレンダリングの設定:

1.  エクスペリエンスエディターでカテゴリを表示したいページに移動し、ツールボックスの **Search** セクションで **Search** 結果のレンダリングをクリックし、ページにドラッグします。
2.  **関連コンテンツ**ダイアログボックスで「デフォルト」をクリックし、**その後「OK」**をクリックします。
3.  **Search Results**ツールバーの**Variant**リストから「Category variant」を選択してください。
4.  **Search Results**ツールバーで、「**More」→「Edit components properties**」をクリックし、**Control Properties**ダイアログボックスの**SearchCriteria**セクションの**Search scope**欄で「Categories catalog scope」をクリックしてください。
5.  **デフォルト言語フィルタリング**欄で「現在の言語」をクリックします。
6.  **デフォルトのソート順**フィールドで「**タイトル説明**」をクリックし、**その後「OK」**をクリックします。
7.  変更を保存してください。

カテゴリナビゲーションで各カテゴリの画像が表示され、クリックすると通常のカテゴリページにリダイレクトされ、そのカテゴリ内の各商品カードが表示されます。