Using the ModelReference field renderer in rendering variants

Version: 10.3

SXA comes with a set of default renderings and rendering variants (including the Reference and the Model field renderers). To process a model property of the type collection, however, you must use the ModelReference field renderer.

The ModelReference field renderer iterates over a specified collection in the rendering model and allows you to extract data using additional Model field renderers as subitems. You specify the collection in the Pass through field field of the item. The model collection property that it targets must implement the IEnumerable interface.

Rendering variant structure diagram.

You can use any standard field renderer in a nested fashion below the ModelReference field renderer. You can also nest the ModelReference field renderer to target collection properties in models with multiple levels of nested objects (hierarchies) as shown in the following illustration for the Product Bundle - Deprecated.

The following class diagram shows an example of how you can use the ModelReference field renderer. In the diagram, there are four nested collections through which the ModelReference renderer is used to iterate over the default rendering variant of the product bundle component:

  • The ProductBundleRenderingModel iterates through the LineItems collection.

  • The ProductVariant class iterates through the VariantSelections collection.

  • The BundleVariantsReference iterates through the ValidProductVariants collection.

  • The Options class iterates through the Options collection.

  • The BundleValueVariantsReference iterates through the Variants collection.

Diagram of the Product Bundle Rendering Model

You can customize the product bundle by modifying the Scriban template.

To use the ModelReference renderer, you must create a rendering model class with a collection property. The model class must inherit from the VariantsRenderingModel.

RequestResponse
using Sitecore.XA.Foundation.Variants.Abstractions.Models; 
namespace ProductList.Models 
{ 
    public class ProductListRenderingModel: VariantsRenderingModel 
    { 
        public ICollection<Product> Products { get; set; } 
    } 
}

Configuration

To register the ModelReference field renderer in the Sitecore.Commerce.XA.Foundation.Common.config configuration file, use the following code snippet:

RequestResponse
<sitecore> 
    <services> 
        <register                             serviceType="Sitecore.Commerce.XA.Foundation.Common.RenderingVariants.Services.ICollectionPropertyExtractor, Sitecore.Commerce.XA.Foundation.Common" implementationType="Sitecore.Commerce.XA.Foundation.Common.RenderingVariants.Services.CollectionPropertyExtractor, Sitecore.Commerce.XA.Foundation.Common" lifetime="Singleton"/> 
    </services> 

<parseVariantFields> 
    <processor type="Sitecore.Commerce.XA.Foundation.Common.RenderingVariants.ParseVariantFields.ParseModelReference, Sitecore.Commerce.XA.Foundation.Common" resolve="true" /> 
</parseVariantFields> 

<renderVariantField> 
    <processor type="Sitecore.Commerce.XA.Foundation.Common.Pipelines.RenderVariantField.RenderModelReference, Sitecore.Commerce.XA.Foundation.Common" resolve="true" /> 
</renderVariantField> 
</sitecore>

Do you have some feedback for us?

If you have suggestions for improving this article,