Commerce検索結果MVCビュー

Version:

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

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

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

メモ

必要に応じて、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>

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

An example of the enclosing markup for the rendering

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