Commerce 検索結果 MVC ビュー
Version: 10.1
日本語翻訳に関する免責事項
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
MVC (Model View Controller) モデルでは、ルート (HTTP 要求を解析するコード) は、モデル (オブジェクト) を生成するコントローラー (.NET コード) を指します。このオブジェクトは、ビュー (SXA Storefront では Razor ビュー) によって解析されます。ビューは、データの表示方法を決定するプレゼンテーション コンポーネントで構成されています。
注記
Commerce 検索結果 MVC ビューは、必要に応じてカスタマイズできます。詳細については、「デフォルトのレンダリング ビュー プロバイダーをオーバーライドする」と「サイトごとにレンダリング HTML をカスタマイズする」を参照してください。
Commerce 検索結果 MVC ビューは、/views/Commerce/CommerceSearchResults 下の専用フォルダーに格納されます。Commerce 検索結果 MVC ビューの構造は次のとおりです。
RequestResponse
/* 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>以下は、ストアフロント サイトでライブで実行しているときのレンダリングの囲みマークアップの例です。
