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.
Next, we need to select a rendering to add to the page. In this example, we’ll add a simple price banner.
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.
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.
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.
Please note that the component could use output caching for performance reasons. The actual price displayed might therefore be different.
Related articles