Sitecore 商务: Adding 呈现 Variant Support to 商务 呈现s

	时间阅读: 大约10 - 15分钟
	用于: Sitecore 商务 developers 和 Sitecore developers
	主要结论: Most 商务 renderings don’t support rendering variants out of the box. This post outlines what you need to know to modify them to work 与 rendering variants.

Unlike many of the SXA renderings, 商务 renderings don’t support rendering variants. 然而，有两个例外. Those being Product Bundles 和 the Product Information Page Content variant. This doesn’t offer a lot of flexibility for multiple site instances, especially if each site wants a different look 和 feel for the product page. We ran into this problem 与 a recent client that needed the flexibility that rendering variants provided on product pages. In this post I’ll go over how we modified the 商务 目录 renderings to work 与 rendering variants. Although I’ll be focusing on the 目录 renderings you’ll be able to use these details on the other 商务 renderings as well.

创建新的渲染模型

For any rendering to work 与 rendering variants its rendering model needs 继承 Sitecore.XA.基金会.变体.抽象.模型.变体呈现Model. 该模型包括 变体Fields property which holds the variant definition configured in Sitecore. It’s possible you may be able to get by 与 just implementing this field on your rendering model 和 populating it yourself. 但是有对 变体呈现Model in some of the field renders, so you may loose some functionality if we do it that way.

我们需要做的是更新 Sitecore.商务.XA.功能.目录.模型.目录项呈现Model 继承 变体呈现Model. Unfortunately it already inherits it’s own base class Base商务呈现Model. We’re going to have to recreate it 和 several other classes to get this to work. 以下是我采取的步骤. You will need a decompiler like dotPeek to reimplement parts of the original Sitecore code.

1. 重新实现 Sitecore.商务.XA.基金会.常见的.模型.Base商务呈现Model as Base商务变体呈现Model 继承 变体呈现Model 而不是
2. 重新实现 Sitecore.商务.XA.功能.目录.模型.目录项呈现Model as 目录项变体呈现Model 继承新 Base商务变体呈现Model class.
   • Another option here is to use pass through properties to the original 目录项呈现Model 使升级更容易. I didn’t do that since we made significant updates to the product structure 和 needed to re-implement much of the model anyway
3. 更新ModelProvider以解析新模型. 你需要为此创建一个配置补丁. 例子:

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

创建新的Base目录Repository

Now that we have a new rendering model that works 与 rendering variants, 我们需要一个新的存储库来填充它. Just like the model we’ll be using the existing repository as a starting point. 我们将重新实现 Sitecore.商务.XA.基金会.常见的.存储库.Base商务ModelRepository as Base目录变体Repository. Much of the code will stay the same as the original, you’ll just need to make the following changes.

1. 替换所有出现的 Base商务呈现Model 与 Base商务变体呈现Model
2. 替换所有出现的 目录项呈现Model 与 目录项变体呈现Model
3. 更新 Current目录项呈现ModelKeyName 将常数转换为新值. This will prevent our updates from causing issues 与 the unmodified renderings
4. You will need to provide a new mock data model that returns the new 呈现 Model in the GetProduct 方法
5. 确保呈现项 项 和 Page项 属性设置为当前目录项. This will allow catalog fields to be used in the rendering variant

渲染视图

Now that we have our new base classes in place we need to update the catalog renderings to use them. For this I’ll use the Product Images rendering as an example. 首先，我们需要重新实现 ProductImagesRepository 来退货我们的新型号. This is pretty easy since it just makes a call to GetProduct 在基本存储库中. All we need to do is ensure that it inherits the Base目录变体Repository 我们刚刚创建了一个返回 目录项变体呈现Model 通过 GetProduct 方法.

Now we need a new controller action for the rendering to hit 和 a new cshtml view to render. 它所需要做的就是呼叫新的 ProductImagesRepository.

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

And we need a simple view file to render the variant we’ll create in Sitecore. 壳层和原来的视图是一样的, but the content will be replaced 与 a loop for rendering the Variant Fields

    

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

把它们放在一起

Now that we have the backend in place we need to wire it all up in Sitecore. For now we’ll just update the out of the box rendering. In practice I highly recommend creating your own version of the rendering through cloning to prevent updates from stepping on our work.

首先我们需要更新 控制器 field on the Product Images rendering to our new controller. 然后我们需要包括 /sitecore/templates/基金会/Experience Accelerator/变体/呈现 Parameters/IComponentVariant template to the Product Images Parameters template. This is needed to show the variants dropdown in the Experience Accelerator.

Finally we need to create rendering variants in Sitecore so something actually renders to the page. You can use the original view file as a starting point. Below is an example I created 与 the default being the out of the box look 和 an alternate that excludes the thumbnails. 你在这里做什么由你决定.

< / div >

这只是一种方法. The downside is that you’ll need to modify every rendering you want rendering variant functionality on. 重新实现ing the base classes also makes upgrades more difficult if you want to include any new functionality. However rendering variants give the 商务 components the same flexibility that SXA components have. Although this isn’t an exhaustive look at how to integrate rendering variants into 商务 renderings, I hope it gives you a good starting point if you decide to implement this in the future.

< / div >

< / div >