Configure dynamic content

With Dynamic Content, merchandisers can return dynamic content alongside products and navigation.

This section applies to Open Storefront Framework (OSF) and Storefront Classic.

For one or more search terms, or for any collection, you can choose dynamic media from the media library. When a shopper enters one of the search terms, or navigates to the collection, the metadata for the image along with the search results are returned. For example, a search containing the term "sale" may display a clickable banner with "Click here to go to our sale page".

Open the Dynamic Content page from the Search page. You must be assigned the Admin or Search role. Changes to the dynamic content do not affect your store until after you publish.

You can see how your dynamic content rules behave when shoppers search for terms or view a collection by previewing your store by clicking Save and Preview. If a widget has been created and placed on the Search Results or Collection layout, you can see the destination and that the image you specified is displayed.

Create a dynamic content rule

Follow these steps to create a new dynamic content rule:

1. On the Search page, click Dynamic Content.
2. Click New Content Rule.
3. Select the site the rule applies to.
4. Select a collection or enter one or more search terms to define the search results where you want to spotlight your content. Or you can select All destinations on the selected sites.
5. Click Select Media to select or add an image to display. Multiple image selection is not supported.
6. Optionally enter URL information in the Link URL field. A shopper who clicks on the image will be taken to this URL.
7. Click Create.

Update a dynamic content rule

Follow these steps to edit an existing dynamic content rule:

1. On the Search page, click Dynamic Content.
2. Click to open the dynamic content rule you want to edit from the list of dynamic content rules.
3. Update the site, destination or media.
4. Click Save.
5. Optionally click Save and Preview to preview the search results. For site-specific rules, click the preview button on the header of the administration interface.

Delete a dynamic content rule

Follow these steps to delete a dynamic content rule:

1. On the Search page, click Dynamic Content.
2. Click to open the dynamic content rule you want to delete from the list of dynamic content rules.
3. Click Delete.
4. When the confirmation appears, click Delete.

Create dynamic content widgets

To display dynamic content, you create a dynamicContentList widget. The widget can be added to the Search Results layout or the Collection layout of Storefront or Agent. The widget also ensures that a shopper who clicks on the image is redirected to the URL specified in the rule.

In the search response, the dynamic content is returned in the additional content property and this is mapped to the additional content property in the searchResultsDetails view model. The widget instances interact with the view model to retrieve and display the image.

A dynamicContentList widget could be created in a way similar to the following example, which you could store in a file named dynamiccontent-widget.js:

define(
  ['jquery', 'knockout', 'ccLogger', 'pubsub'],
  function($, ko, CCLogger, pubsub) {
    'use strict';
    return {
       
    onLoad : function(widget) {
      widget.dynamicContentList = ko.observableArray();
      widget.searchSuccess = function(result) {
        if(this.dynamicContent && this.dynamicContent.contents && this.dynamicContent.contents.length>0){
          widget.dynamicContentList(this.dynamicContent.contents);
        } else {
          widget.dynamicContentList([]);
        }
      };
      $.Topic(pubsub.topicNames.SEARCH_RESULTS_UPDATED).subscribe(widget.searchSuccess);
      $.Topic(pubsub.topicNames.SEARCH_RESULTS_FOR_CATEGORY_UPDATED).subscribe(widget.searchSuccess);
       }
    }
  }
);

Once you have retrieved the dynamic content image URL, you can display it using your widget template. The display.template file might contain the following:

<div id="cc-dynamic-content">
<!-- ko if: dynamicContentList().length > 0 -->
<h3> Displaying dynamic content </h3>
<!-- ko foreach: dynamicContentList-->
<!-- ko if: $data['@type'] == "Media" -->
<div id="banner" >
<a data-bind="attr:{href: $data['linkURL']}">
<img class="img-responsive center-block" data-bind="ccResizeImage: {
          isSrcSetEnabled : true,
          source: $data['imageUrl'] }"/>
</a>
<br/>
</div>
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</div>