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

概要

カテゴリー別のナビゲーションを、より視覚的に設定する方法。

通常のメニューをレンダリングするだけではなく、より視覚的な方法でカテゴリー別にナビゲートしたい場合は、SXA の検索結果レンダリングを使用して、クエリで画像付きのカテゴリーを表示することができます。

カテゴリー別検索の例

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

注記

ネストされた sc_search メソッドを使用するように Scriban テンプレートのサンプルを拡張するか、レンダリング バリアントの各レベルの Scriban テンプレートをネストすることで、この構成を拡張して複数のレベルのカテゴリーをリストアップすることができます。

このチュートリアルでは、次の方法を説明します。

検索範囲とクエリを設定するには:

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

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

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

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

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

    • Commercesearchitemtype:category は、カテゴリーのみを検索するためのフィルターです。

    • _Parent: {B893C063-6238-ED57-700D-72862C56038D} 親が "Departments" になります。カスタム カタログを使用している場合は、代わりに親アイテムのアイテム ID をコピーして挿入してください。

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

    クエリ要素
  6. リボン メニューの [保存] をクリックします。

各トップレベルのカテゴリーに画像を関連付けるには、まず、Commerce カテゴリー テンプレートを修正して、各カタログ カテゴリーで画像フィールドを利用できるようにする必要があります。または、Commerce Engine のカテゴリー テンプレートを変更して画像フィールドを含めることもできますが、ここでは簡単にするためにこのオプションは使用しません。詳細については、「カタログ アイテム テンプレートへの新しいフィールドの追加」を参照してください。

画像フィールドを設定するには:

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

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

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

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

    カテゴリー画像が選択されました
  5. 手順 3 を繰り返して、カタログ内のすべてのカテゴリーに画像を関連付けます。

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

検索結果レンダリング バリアントを作成するには:

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

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

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

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

  5. ツリー ビューで、[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>
    
  6. ツリー ビューで、[レスポンシブ画像] をクリックし、[コンテンツ] タブの [バリアント 詳細] セクションに、次の値を入力します。

    • "サイズ" フィールドに、「(max-width:320px)280px, (max-width:480px) 440px, 800px」と入力します。

    • "" フィールドに、「320,480,800」と入力します。

    • "デフォルト" サイズ フィールドに「400」と入力します。

  7. 変更を保存します。

トップレベルのカテゴリーを表示する場合、在庫と価格の情報は必要ないため、Commerce 検索結果のレンダリングの代わりに SXA 検索結果のレンダリングを使用できます。

検索結果レンダリングを設定するには:

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

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

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

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

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

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

  7. 変更を保存します。

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