allBlogsList

Salesforce

Technical

Basit Junaid Afzal

SFCC Architect

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

PromotionalContent7

system-objecttype-extensions.xml

<?xml version="1.0" encoding="UTF-8"?>
<metadata xmlns="http://www.demandware.com/xml/impex/metadata/2006-10-31">
    <type-extension type-id="Category">
        <custom-attribute-definitions>
            <attribute-definition attribute-id="categoryPromotions">
                <display-name xml:lang="x-default">Category Promotions</display-name>
                <description xml:lang="x-default">This field will contain the concatenated string in Format:&#13;
    &lt;Promotion-Position&gt;^&lt;Promotion-Tile-Size&gt;^&lt;Promotion-Tile-Content-Asset-ID&gt;&#13;
    Example:&#13;
    1^1^promo-how-to-order&#13;
    7^2^promo-super-saver</description>
                <type>set-of-string</type>
                <localizable-flag>false</localizable-flag>
                <mandatory-flag>false</mandatory-flag>
                <externally-managed-flag>false</externally-managed-flag>
            </attribute-definition>
        </custom-attribute-definitions>
        <group-definitions>
            <attribute-group group-id="PromotionalContent">
                <display-name xml:lang="x-default">Promotional Content</display-name>
                <attribute attribute-id="categoryPromotions"/>
            </attribute-group>
        </group-definitions>
    </type-extension>

    <type-extension type-id="SitePreferences">
        <custom-attribute-definitions>
            <attribute-definition attribute-id="enableCategoryPromotions">
                <display-name xml:lang="x-default">Enable Category Promotions</display-name>
                <type>boolean</type>
                <mandatory-flag>false</mandatory-flag>
                <externally-managed-flag>false</externally-managed-flag>
                <default-value>false</default-value>
            </attribute-definition>
        </custom-attribute-definitions>

        <group-definitions>
            <attribute-group group-id="Category">
                <display-name xml:lang="x-default">Category</display-name>
                <attribute attribute-id="enableCategoryPromotions"/>
            </attribute-group>
        </group-definitions>
    </type-extension>

</metadata>

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: <PromotionTilePosition>^<PromotionTileSize>^<PromotionContentAssetID>

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: <TilePosition>^<TileSize>^<ContentAssetID>

PromotionalContent2

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.

<?xml version="1.0" encoding="UTF-8"?>
<library xmlns="http://www.demandware.com/xml/impex/library/2006-10-31">
    <content content-id="promo-1">
        <display-name xml:lang="x-default">plp-promo 1x1</display-name>
        <online-flag>true</online-flag>
        <searchable-flag>true</searchable-flag>
        <page-attributes/>
        <custom-attributes>
            <custom-attribute attribute-id="body" xml:lang="x-default">&lt;style&gt;&#13;
        a {&#13;
               text-decoration: underline;&#13;
        }&#13;
&lt;/style&gt;&#13;
&lt;div class="product category--promotions"&gt;&#13;
        &lt;h5&gt;This is a Promotional Tile of size 1x1&lt;/h5&gt;&#13;
        &lt;p&gt;It is coming from a Content Asset&lt;/p&gt;&#13;
        &lt;p&gt;It can be utilized to render any HTML content including images, text, or even &lt;a href="#"&gt;links&lt;/a&gt; to a specific &lt;a href="#"&gt;product&lt;/a&gt; or a different &lt;a href="#"&gt;webpage&lt;/a&gt;.&lt;/p&gt;&#13;
&lt;/div&gt;</custom-attribute>
        </custom-attributes>
    </content>

    <content content-id="promo-2">
        <display-name xml:lang="x-default">plp-promo 2x1</display-name>
        <online-flag>true</online-flag>
        <searchable-flag>true</searchable-flag>
        <page-attributes/>
        <custom-attributes>
            <custom-attribute attribute-id="body" xml:lang="x-default">&lt;style&gt;&#13;
        a {&#13;
               text-decoration: underline;&#13;
        }&#13;
&lt;/style&gt;&#13;
&lt;div class="product category--promotions"&gt;&#13;
        &lt;h5&gt;This is a Promotional Tile of size 2x1&lt;/h5&gt;&#13;
        &lt;p&gt;It is coming from a Content Asset&lt;/p&gt;&#13;
        &lt;p&gt;It can be utilized to render any HTML content including images, text, or even &lt;a href="#"&gt;links&lt;/a&gt; to a specific &lt;a href="#"&gt;product&lt;/a&gt; or a different &lt;a href="#"&gt;webpage&lt;/a&gt;.&lt;/p&gt;&#13;
&lt;/div&gt;</custom-attribute>
        </custom-attributes>
    </content>

</library>

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:

PromotionalContent1

Limitations

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

PromotionalContent6