< / div >
< / div >

Sitecore 商务:为商务渲染添加渲染变体支持

< / div >

贴在2020年9月29日 评论 阅读时间5分钟 作者

< / div >
时间阅读: 大约10 - 15分钟
用于: Sitecore 商务开发者和Sitecore开发者
主要结论: 大多数商务呈现不支持开箱即用的呈现变体. 这篇文章概述了你需要知道什么来修改它们来处理渲染变量.

与许多SXA呈现不同，商务呈现不支持呈现变体. 但也有两个例外. 这些是产品包和产品信息页面内容的变体. 这并不能为多个站点实例提供很大的灵活性, 特别是如果每个站点都希望产品页面有不同的外观和感觉. 在最近的一个客户端中，我们遇到了这个问题，该客户端需要在产品页面上提供呈现变体的灵活性. 在这篇文章中，我将介绍我们如何修改商务 目录渲染来使用渲染变体. 虽然我将重点关注目录呈现，但您也可以在其他商务呈现中使用这些细节.

网站核心体验商业产品详细信息页面的例子，显示4K电视出售.
一个网站核心体验商业产品细节页面的例子

创建新的渲染模型

任何要使用呈现变量的呈现都需要继承其呈现模型 Sitecore.XA.基金会.变体.抽象.模型.变体呈现Model. 此模型包括 变体Fields 属性保存在Sitecore中配置的变量定义. 你可能只需要在你的渲染模型上实现这个字段，然后自己填充它就可以了. 但是有一些参考文献 变体呈现Model 在一些字段渲染中，如果我们那样做，你可能会失去一些功能.

我们要做的就是更新 Sitecore.商务.XA.功能.目录.模型.目录项呈现Model 继承 变体呈现Model. 不幸的是，它已经继承了自己的基类 Base商务呈现Model. 我们需要重新创建它和其他几个类来让它工作. 以下是我所采取的步骤. 您将需要一个像dotPeek这样的反编译器来重新实现原始Sitecore代码的部分.

  1. 重新实现 Sitecore.商务.XA.基金会.常见的.模型.Base商务呈现Model as Base商务变体呈现Model 继承 变体呈现Model 而不是
  2. 重新实现 Sitecore.商务.XA.功能.目录.模型.目录项呈现Model as 目录项变体呈现Model 继承新 Base商务变体呈现Model class.
    • 这里的另一个选项是使用传递属性到原始对象 目录项呈现Model 让升级变得更容易. 我没有这么做，因为我们对产品结构进行了重大更新，而且无论如何都需要重新实现大部分模型
  3. 更新ModelProvider以解析新模型. 您需要为此创建一个配置补丁. 例子:

    
    <目录项变体呈现Model type="S和box.功能.目录.模型.目录项变体呈现Model,沙箱.功能.目录" />

创建新的Base目录Repository

现在我们有了一个新的渲染模型，可以使用渲染变量, 我们需要一个新的存储库来填充它. 就像模型一样，我们将使用现有的存储库作为起点. 我们将重新实现 Sitecore.商务.XA.基金会.常见的.存储库.Base商务ModelRepository as Base目录变体Repository. 大部分代码将与原始代码保持一致，您只需要进行以下更改.

  1. 替换所有出现的 Base商务呈现Model 与 Base商务变体呈现Model
  2. 替换所有出现的 目录项呈现Model 与 目录项变体呈现Model
  3. 更新 Current目录项呈现ModelKeyName 常数到新值. 这将防止我们的更新引起未修改的渲染的问题
  4. 中的新呈现模型将返回新的模拟数据模型 GetProduct 方法
  5. 确保呈现项 项 和 Page项 属性设置为当前编目项. 这将允许在呈现变体中使用目录字段

渲染视图

现在我们已经有了新的基类，我们需要更新目录呈现来使用它们. 为此，我将使用产品图像渲染作为一个例子. 首先，我们需要重新实现 ProductImagesRepository 返回我们的新模型. 这很简单，因为它只是调用 GetProduct 在基础存储库中. 我们需要做的就是确保它继承 Base目录变体Repository 我们刚刚创建了一个方法，它返回 目录项变体呈现Model 通过 GetProduct 方法.

现在我们需要一个新的控制器动作来进行渲染，并需要一个新的cshtml视图进行渲染. 它所需要做的就是调用新的 ProductImagesRepository.

公共ActionResult ProductImages ()
{
    返回视图(Get呈现View (nameof (ProductImages)), productImagesRepository.GetProductImages呈现Model (visitorContext null));
}

我们需要一个简单的视图文件来渲染我们将在Sitecore中创建的变量. 外壳将与原来的视图相同, 但内容将被一个用于呈现Variant Fields的循环所取代


    

        @ if(模型.项 != null)
        {
            BaseVariantField在模型中的变化字段.VariantFields)
            {
                @Html.呈现变体 ().RenderVariant (variantField模型.项,模型.呈现WebEditingParams模型)
            }
        }

把它们放在一起

现在我们有了合适的后端，我们需要将其连接到Sitecore中. 现在我们只更新开箱即用的渲染. 在实践中，我强烈建议通过克隆创建自己的渲染版本，以防止更新破坏我们的工作.

首先我们需要更新 控制器 在产品图像渲染到我们的新控制器. 然后我们需要包括 / sitecore /模板/基础/经验加速器/变量/ / IComponentVariant呈现参数 将“Product Images Parameters”模板修改为“Product Images Parameters”模板. 这是需要显示的变体下拉在体验加速器.

最后，我们需要在Sitecore中创建渲染变量，让一些东西真正呈现到页面上. 您可以使用原始视图文件作为起点. 下面是我创建的一个例子，默认是开箱即用的外观和一个替代，排除缩略图. 你在这里做什么由你决定.

< / div >

这只是解决问题的一种方法. 缺点是，您需要修改您想要呈现的变体功能上的每一个呈现. 如果您想要包含任何新功能，那么重新实现基类也会使升级变得更加困难. 然而，呈现变体为商务组件提供了与SXA组件相同的灵活性. 尽管本文并没有详尽地介绍如何将呈现变体集成到商务呈现中, 如果您决定在将来实现它，我希望它能给您一个很好的起点.

< / div >
< / div >
< / div > < / div > < / div > < / div > < / div > < / div >