1. 店舗検索

ウォークスルー

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

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

Example of search by category

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

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

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

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

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

  1. コンテンツエディターで /sitecore/Content///Settingsへ行ってください。

  2. 右クリックでScopeを 選び、Insert、Scopeを選びます。

  3. メッセージダイアログボックスで*「カテゴリ」カタログの範囲*を入力し、「**OK」**をクリックします。

  4. コンテンツタブのスコープセクションで、「ビルドクエリ」ハイパーリンクをクリックしてください。

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

    • Commercesearchitemtype
      つまり、検索はカテゴリーのみに焦点を当てるということです。
    • _Parent: {B893C063-6238-ED57-700D-72862C56038D} 親が部門にするのです。カスタムカタログを使っている場合は、親項目のアイテムIDをコピーして挿入してください。

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

    Query elements

  6. リボンメニューで「 保存」をクリックします。

画像フィールドの設定

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

画像フィールドの設定:

  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

  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セクションで、以下のコードを テンプレートフィールドに コピー&ペーストしてください。

    {{displayName = i\_item.display\_name | html.escape}}
    {{ productImage = i\_item.images.targets | array.first if productImage sc\_execute productImage "Responsive Image" end }}
    {{ displayName }}

  6. ツリービューで「レスポンシブ画像」をクリックし、コンテンツ タブの 「バリアント詳細 」セクションで以下の値を入力してください:

    • サイズ 欄で (最大幅
      )280px、(最大幅
      )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. 変更を保存してください。

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

この記事を改善するための提案がある場合は、 お知らせください!