Commerce 検索結果 MVC ビュー

概要

Commerce 検索結果 MVC ビューの構造とコードの概要。

MVC (Model View Controller) モデルでは、ルート (HTTP 要求を解析するコード) は、モデル (オブジェクト) を生成するコントローラー (.NET コード) を指します。このオブジェクトは、ビュー (SXA Storefront では Razor ビュー) によって解析されます。ビューは、データの表示方法を決定するプレゼンテーション コンポーネントで構成されています。

MVC ビュー

注記

Commerce 検索結果 MVC ビューは、必要に応じてカスタマイズできます。詳細については、「デフォルトのレンダリング ビュー プロバイダーをオーバーライドする」と「サイトごとにレンダリング HTML をカスタマイズする」を参照してください。

Commerce 検索結果 MVC ビューは、/views/Commerce/CommerceSearchResults 下の専用フォルダーに格納されます。Commerce 検索結果 MVC ビューの構造は次のとおりです。

/* Reference the model containing all the catalog content but excluding price and stock info */
@model Sitecore.XA.Feature.Search.Models.SearchResultsRenderingModel

@{
  /* SXA handling of the data class variant attribute */
  string variantClass = string.Empty;
  if (Model.Attributes.ContainsKey("class"))
  {
    variantClass = Model.Attributes["class"].Aggregate();
  }

  /* Get a handle to the storefront context */
  var storefrontContext = ServiceLocator.ServiceProvider.GetRequiredService<IStorefrontContext>();
}

/* Component enclosing markup, including data properties specifying the search service endpoint and parameters as JSON */
<div @Html.Sxa().Component(Model.Rendering.RenderingCssClass ?? "search-results", Model.Attributes) data-class-variant="@variantClass" data-properties='@Model.JsonDataProperties' data-cxa-component-class="CommerceSearchResults" data-cxa-component-initialized="false" data-cxa-component-type="component">

  /* 
     Label translations originating from storefront Commerce Terms in Commerce Control Panel. 
     Included as hidden markup as Scriban template cannot get a reference to it with the standard extension methods
  */
  @Html.Hidden("InStockDisplayName", storefrontContext.GetProductStockStatusName(CatalogFeatureConstants.InventoryStatuses.InStock))
  @Html.Hidden("OutOfStockDisplayName", storefrontContext.GetProductStockStatusName(CatalogFeatureConstants.InventoryStatuses.OutOfStock))
  @Html.Hidden("BackOrderableDisplayName", storefrontContext.GetProductStockStatusName(CatalogFeatureConstants.InventoryStatuses.BackOrderable))
  @Html.Hidden("PreOrderableDisplayName", storefrontContext.GetProductStockStatusName(CatalogFeatureConstants.InventoryStatuses.PreOrderable))

  /* When exporting markup using Creative Exchange, show 'Results not found' output */
  @if (WebUtil.GetQueryString(Sitecore.XA.Feature.Search.Constants.CreativeExchangeExport) != "true")
  {
    <div class="component-content">
      @Model.MessageIsEmpty
      <div class="no-results" style="display: @Model.StyleDisplay">
        @Html.Sxa().Field("ResultsNotFoundText", Model.DataSourceItem, !Model.IsControlEditable)
        @Html.Sxa().Field("Text", Model.Item, !Model.IsControlEditable)
      </div>
      <div class="progress"></div>
    </div>
  }
  else
  {
    /* Product cards are rendered using unordered lists HTML as markup */
    <ul class="search-result-list">
      <li>
		/* Loop processing the content of the rendering variant against the model and current item */
        @foreach (BaseVariantField variantField in Model.VariantFields)
        {
          @Html.RenderingVariants().RenderVariant(variantField, Model.PageItem, false, Model)
        }
      </li>
    </ul>
  }
</div>
@using System.Web.Mvc.Html
@using Microsoft.Extensions.DependencyInjection
@using Sitecore.Commerce.XA.Feature.Catalog
@using Sitecore.Commerce.XA.Foundation.Common.Context
@using Sitecore.DependencyInjection
@using Sitecore.Web
@using Sitecore.XA.Foundation.MarkupDecorator.Extensions
@using Sitecore.XA.Foundation.RenderingVariants.Extensions
@using Sitecore.XA.Foundation.SitecoreExtensions.Extensions
@using Sitecore.XA.Foundation.Variants.Abstractions.Fields

@model Sitecore.XA.Feature.Search.Models.SearchResultsRenderingModel

@{
  string variantClass = string.Empty;
  if (Model.Attributes.ContainsKey("class"))
  {
    variantClass = Model.Attributes["class"].Aggregate();
  }
  var storefrontContext = ServiceLocator.ServiceProvider.GetRequiredService<IStorefrontContext>();
}

<div @Html.Sxa().Component(Model.Rendering.RenderingCssClass ?? "search-results", Model.Attributes) data-class-variant="@variantClass" data-properties='@Model.JsonDataProperties' data-cxa-component-class="CommerceSearchResults" data-cxa-component-initialized="false" data-cxa-component-type="component">

  @Html.Hidden("InStockDisplayName", storefrontContext.GetProductStockStatusName(CatalogFeatureConstants.InventoryStatuses.InStock))
  @Html.Hidden("OutOfStockDisplayName", storefrontContext.GetProductStockStatusName(CatalogFeatureConstants.InventoryStatuses.OutOfStock))
  @Html.Hidden("BackOrderableDisplayName", storefrontContext.GetProductStockStatusName(CatalogFeatureConstants.InventoryStatuses.BackOrderable))
  @Html.Hidden("PreOrderableDisplayName", storefrontContext.GetProductStockStatusName(CatalogFeatureConstants.InventoryStatuses.PreOrderable))

  @if (WebUtil.GetQueryString(Sitecore.XA.Feature.Search.Constants.CreativeExchangeExport) != "true")
  {
    <div class="component-content">
      @Model.MessageIsEmpty
      <div class="no-results" style="display: @Model.StyleDisplay">
        @Html.Sxa().Field("ResultsNotFoundText", Model.DataSourceItem, !Model.IsControlEditable)
        @Html.Sxa().Field("Text", Model.Item, !Model.IsControlEditable)
      </div>
      <div class="progress"></div>
    </div>
  }
  else
  {
    <ul class="search-result-list">
      <li>
        @foreach (BaseVariantField variantField in Model.VariantFields)
        {
          @Html.RenderingVariants().RenderVariant(variantField, Model.PageItem, false, Model)
        }
      </li>
    </ul>
  }
</div>

以下は、ストアフロント サイトでライブで実行しているときのレンダリングの囲みマークアップの例です。

レンダリングの囲みマークアップの例