Share In a previous article, I’ve illustrated how we created the core functionality for using product data with promotional content. In this article, I’ll show how we used this core functionality to create a client specific implementation.

We successfully implemented the core banner functionality provided by Mercury for one of our clients on multiple levels.

First, we identified the various product banners that were needed and then implemented functionality to create and maintain these banners within the client solution. I will not go into detail about which banner types were identified. A simple banner type is used as an example to show how easy it is to create and place a new product banner on a site’s homepage using the default content editor tool in Sitecore, the Experience Editor.

We start by adding a new component to the homepage. This shows the available placeholders where a new component can be added.

kwantum-product-banners.png 

Next, we need to select a rendering to add to the page. In this example, we’ll add a simple price banner.
  
kwantum-product-banners-sitecore-rendering.png

Once the rendering has been added to the page, we can either select an existing banner (or data source in Sitecore terminology) or create a new one. In this case, we’ll opt to create a new banner. A new popup is displayed to select the banner type we want to use, as shown in this simple demo.

kwantum-product-banners-sitecore-associated-content.png

Although the data source item and the rendering have been created, we still need to add an image and product details to the data source. For this purpose, we’ve created an additional Experience Editor button so the content editor can quickly edit the banner properties. Clicking this button will show the banner properties available for editing.

kwantum-product-banners-sitecore-small-label.png 

kwantum-product-banners-sitecore-banner-link.png

As you can see, for this banner type we can edit the image to be displayed, we can add a pre-defined header (price signal), which is shown at the top of the banner when selected, and we can add a product ID. In this case, I have selected a responsive couch image to display but have not selected a price signal.

I have also entered the corresponding ID of the product. By using the product ID, the price block knows which data to return: the product name, the price and the URL for displaying the product detail page for this specific item.

After saving and publishing the page, the result will look like this.

kwantum-product-banners-end-result.png
 
Please note that the component could use output caching for performance reasons. The actual price displayed might therefore be different.
 

Related articles

Articles related to this topic

Share a Tweet
Nice article on how Kwantum uses product banners with @sitecoremercury in their Sitecore platform http://bit.ly/2HmkGx1 #SITECORE # PRODUCTBANNERS # EXPERIENCE  Share
or
See how one of Hollands largest furnishers uses dynamic product banners in Sitecore to create a richer customer experience http://bit.ly/2HmkGx1 #SITECORE # PRODUCTBANNERS # EXPERIENCE  Share