Sitecore commerce 9.x – Showing custom product attributes on the product details page using SXA.

We will build on from the example provided by a Sitecore KB outlined here. The official Sitecore example adds fields to the SellableItem via a plugin i.e. the backend only. The full source code for the plugin is available download in the KB article. This example adds those fields to the front end using a SXA customization.

In this example we are going to do the following :-

1. Add the standard Sitecore example “Notes” plugin to the commerce SDK and set the values for the new fields in the business tools.
2. Ensure that the new fields are picked up in Sitecore (Data provider)
3. Modify the standard “Product information” SXA component to display the “Warranty information” field on the product detail page.

Step 1 – Add the notes plugin sample to your SDK

• Open the Sitecore Commerce Engine SDK solution “Customer.Sample.Solution”
• Download and extract the notes sample plugin from the KB article above.
• Add the notes sample plugin to your SDK solution
• Add a reference to the notes plugin in the Sitecore.Commerce.Engine project. This tells the engine to use the new functionality. Your solution should look something like this…

• Build and start the engine
• Go to the business tools in your browser, usually https://localhost:4200
• Select a product in the business tools . If you are using the example catalog go to Merchandising > Catalogs > Habitat_Master > Categories > Departments > Appliances > “Habitat Viva 4-Door 22.0 Cubic Foot Refrigerator with Ice Maker”
• If the notes sample plugin loaded correctly, you will see another section for “Notes” and you will have an action that will open a new window where you can set the values for the new fields on your product.
• Add a value for “Warranty information”. Should look like this…

 

Step 2 – View the new fields in the Sitecore content editor

• Open the Sitecore content editor for your instance
• Go to the commerce tab on the Ribbon from anywhere in the content editor
• Select “Update data templates. This creates new sections in the templates for each component on the SellableItem in the commerce engine.
• To verify that the templates are updated go to/sitecore/templates/Commerce/Catalog Generated/ConnectSellableItem. Should look like this…

• Click the “Refresh the commerce cache” button
• Open your product from the commerce catalog in the content editor. Usually located somewhere like this “/sitecore/Commerce/Catalog Management/Catalogs/Habitat_Master/Habitat_Master-Departments/Habitat_Master-Appliances/6042567”
• You should see the value set for the “Warranty information” field.

Step 3 – Modify the SXA component to show the new field on the Site

Now we will create all the artifacts required to modify the SXA component. All we will do is extend the standard rendering model returned by the controller within a custom repository. We will also modify the existing view to include the new field.

Note: Later versions of SXA will include a mechanism for replacing the views (.cshtml) files like we do with the repositories and models below.

This will be the final result of the steps below:-

• Create a new solution in Visual studio
• Create a folder structure as follows  “2. Feature\Feature.Catalog\Website”.
• Add a new website (or class library) project e.g.  named “Sitecore.Services.Examples.Feature.Catalog.Website”
• Create a new folder structure in the project to store configuration changes, as follows “App_config\Include\z.Feature.Overrides”
• Add new patch config file to the new folder above named “zSitecore.Services.Examples.Foundation.Catalog.Website.Overrides.config”
• Add the following mark up to the file, it tells Sitecore to load our extended repository and model rather than the one provided with the OOB SXA component.

• Add a new folder called “Models”
• Add a new class to the class to the folder called “CatalogItemRenderingModel”. We extend the original model with this class to include our new fields.
• Add the following code the class

• Add a new folder called “Repositories”
• Add a new class to the class to the folder called “ProductInformationRepository”. We extend the original repository with this class to include logic to populate our new field.
• Add the following code the class

• Add a new folder structure as follows called “Views\Commerce\Catalog”
• Browse to the view folder of your site and copy the “ProductInformation.cshtml” file into the folder created above. The path to the original file will look something like this “C:\inetpub\wwwroot\xp0.sc\Views\Commerce\Catalog\ProductInformation.cshtml”
• Edit the original file to add the new field, below is the full view

• Your solution should look something like this…

• Build the solution
• Deploy the resultant assembly to your sites bin directory e.g. “C:\inetpub\wwwroot\xp0.sc\bin”
• Deploy the config file to your include directory  e.g. “C:\inetpub\wwwroot\xp0.sc\App_Config\Include\z.Feature.Overrides” (matches the structure of the project)
• Deploy the view (cshtml) file to your commerce view directory (where you copied it from)  e.g. “C:\inetpub\wwwroot\xp0.sc\Views\Commerce\Catalog” (matches the structure of the project)

Note : Automating the deployment using gulp or another mechanism would be better but doing it manually is not a bad way to understand where things should go.

• Verify that your custom repos and models have been loaded by browsing your site config from for example “https://sxa.storefront.com/sitecore/admin/showconfig.aspx”, you should be able to search the config and find your custom name space containing your new models etc.
• You can attach to the w3wp.exe process using visual studio to debug the repo.