Promotional Content on the Product Listing Page

Purpose

The purpose of adding these Promotional Content Slots/Content Assets is to have the ability to show some special message to the customers. It could be an offer, or guide to a new feature on our site, a link to a sponsored product, or a page. The possibilities are endless.

Layout

The new Promotional Content would be merged into the Product Landing Pages (PLP) seamlessly without disturbing the design and alignment of the existing Product Tiles. So, this new addition would be of the same size as 1 Product Tile (1x1). Or additionally, we can make a bigger block with a size of 2 product tiles in width, but the height would stay the same as of a single product tile (2x1).

Content of Promotional Blocks / Tiles

The content inside the Promotional Content Assets would be any possible HTML consisting of text, images, links, buttons, etc.

Metadata Updates

system-objecttype-extensions.xml

    
        
            
                Category Promotions
                This field will contain the concatenated string in Format:
    <Promotion-Position>^<Promotion-Tile-Size>^<Promotion-Tile-Content-Asset-ID>
    Example:
    1^1^promo-how-to-order
    7^2^promo-super-saver
                set-of-string
                false
                false
                false
            
        
        
            
                Promotional Content
                
            
        
    

    
        
            
                Enable Category Promotions
                boolean
                false
                false
                false
            
        

        
            
                Category
                
            
        
    

Site Metadata file for Import

• Navigate from Business Manager to Administration > Site Development > Site Import & Export
• Upload this zip file PromoSlotInPLP.zip
• Run the Import process

Configurations

The content and position of the new Promotional blocks would be manageable through Business Manager.

There would be a custom Site Preference to enable/disable this custom feature entirely from the Storefront.

There would be a new custom attribute on System Object: Category, which would be of type Set-of-String . This custom attribute will hold a set of concatenated strings with the following values separated by a hat ^ :

• Promotion Tile Position
• Promotion Tile Size
• Promotion Content Asset ID

Format: ^^

Examples:

• 1^1^promo-BigDiscount (Position#1 in product tiles, Size:1x1, Content Asset ID: promo-BigDiscount)
• 5^2^promo-howToRedeemBonusPoints (Position#5 in product tiles, Size:2x1, Content Asset ID: promo-howToRedeemBonusPoints)

Updates in Categories

Navigate in Business Manager to a category.
BM Path: Merchant Tools > Products and Catalogs > Catalogs > Storefront Catalog - EN > New Arrivals > Mens

Add values in custom attribute Category Promotions
Format: ^^

Content Assets

After creating and updating the metadata in Business Manager mentioned above. Create some new Content Assets for the Promotional content to be displayed on PLP. IDs of these Content Assets are inserted in the custom attribute of categories as described in the previous section.

    
        plp-promo 1x1
        true
        true
        
        
            <style>
        a {
               text-decoration: underline;
        }
</style>
<div class="product category--promotions">
        <h5>This is a Promotional Tile of size 1x1</h5>
        <p>It is coming from a Content Asset</p>
        <p>It can be utilized to render any HTML content including images, text, or even <a href="#">links</a> to a specific <a href="#">product</a> or a different <a href="#">webpage</a>.</p>
</div>
        
    

    
        plp-promo 2x1
        true
        true
        
        
            <style>
        a {
               text-decoration: underline;
        }
</style>
<div class="product category--promotions">
        <h5>This is a Promotional Tile of size 2x1</h5>
        <p>It is coming from a Content Asset</p>
        <p>It can be utilized to render any HTML content including images, text, or even <a href="#">links</a> to a specific <a href="#">product</a> or a different <a href="#">webpage</a>.</p>
</div>
        
    

Code

Extend (Append) the Controller's Search-Show and Search-Update to read the values of custom attribute categoryPromotions from category in Business Manager. Pass these values to ISML templates in ViewData and use them in the code to display the content from template productTiles.isml

Final Result on Storefront PLP

The final output of the PLP with Promotional Content would look like the below screenshot:

Limitations

There are some limitations / known issues in the current version of this feature. These could be improved in future versions/releases.