Edit Templates and Create Slot Configurations

Brandon Wilson, Cloud Kicks’s merchandiser, is now ready for the developer, Vijay Lahiri, to create an ISML template to display recommendations. Brandon can use this template to create a slot configuration in Business Manager.

Before we continue, let’s talk about how content slots work in Salesforce B2C Commerce and why they come into play here.

Storefront pages are simply HTML pages. B2C Commerce builds them using a variety of tools. (Take a look at the Develop for Salesforce B2C Commerce trail for details.)

An important B2C Commerce developer tool is the template. B2C Commerce uses templates to define how it transforms data and page information into dynamic, HTML-based web pages that it renders on the browser. Developers create templates with the Internet Store Markup Language (ISML), a B2C Commerce proprietary extension to HTML.

A content slot is a specific location on the page as defined in a template. In Business Manager, you can create a content slot configuration that identifies what displays within the location, when, and for how long. Within the content slot you can show products, categories, content assets, or static HTML. A content asset can be a flash graphic, product carousel, product search result set, or a marketing graphic, or in this case, product recommendations.

Recommenders identify the recommended products that display in the content slot based on Einstein results.

The next section gets fairly technical because Vijay must modify an existing template to use as the content slot for the recommendations. Brandon wants to understand every step of the process so that he knows what to ask for the next time. First, they explore the anchor field, which we mentioned in the previous unit.

The anchor field points from the source object to the target object. The source object, for example, is a particular category, product, or product set that Einstein uses in its calculation. The target object is a recommended product. Not surprisingly, the anchors are product-id, category-id, or none (no anchor).

This illustration shows how the anchor fields and their respective strategies map products, product sets, and categories to a recommended product.

The recommender type must always match the anchor, as follows:

• Product to Product: product-id
• Products in a Category: category-id
• Products in All Categories: none
• Recently Viewed: product-id (doesn't require and anchor)
• Complete the Set: product-id

For each type of strategy, Einstein uses an anchor to know which products to display. Here’s how the strategies play out.

For the C ustomers who viewed ultimately bought strategy, for example, data showed Brandon that shoppers who looked at running shoes ended up buying trail runners. Einstein uses this correlation to create a list of recommended products for a shopper who looks at running shoes.

Vijay modifies the ISML templates that define the content slot that Brandon uses in his slot configuration. Here’s how he defines a slot for a product detail page.

<isslot id="product-show-recommend" context="global"
context-object="${pdict.product}"/>

He can also pass the context-object attribute to a basket or collection ( dw.util.Collection) of products. This lets Brandon create and use recommendations based on up to five selected products or all the products in the basket.

Here’s how he defines a slot for a category landing page.

<isslot id="cat-banner" context="category"
context-object="${pdict.productSearchResult.category}" />

For the product details page, Vijay defines the context as global because Brandon wants to configure the content slot as global in Business Manager for this page. For the category landing page, Vijay uses the category context. With this setting, Einstein uses product categories and subcategories defined in Business Manager to create the recommendations. For a slot on either page, he must include a reference to the referring product (or category) ID as part of the context-object attribute.

Vijay already defined content slots on his storefront, so he just needs to create a template to render the recommended products. He already has a template that renders other types of product content slots, so he reuses it with a slight change.

Here’s the product template he copies to create the home_categories-m.isml template.

<iscontent type="text/html" charset="UTF-8" compact="true"/>
<iscomment> should not be cached, the tiles are cached individually.</iscomment>
<isif condition="${slotcontent}">
<div class="product-listing product-listing-1x4">
   <h2>${slotcontent.calloutMsg}</h2>
   <ul class="search-result-items tiles-container">
       <isloop items="${slotcontent.content}" var="product" begin="0" end="3">
           <isobject object="${product}" view="recommendation">
               <li class="grid-tile">
                   <isinclude url="${URLUtils.url('Product-HitTile', 'pid', product.ID,
                   'showswatches', 'true', 'showpricing', 'true', 'showpromotion', 'true',
                   'showrating', 'true')}"/>
               </li>
           </isobject>
       </isloop>
  </ul>
</div>
</isif>

Vijay uploads the new file, home_categories-m, to the staging instance. Product recommendations are dynamic, so he makes sure the entire slot isn't cached. Otherwise, every visitor will see the same recommendations. He makes sure that caching occurs only when rendering individual product tiles and not the entire template.

Brandon wants to configure both global and category content slots to show recommendations. Here’s how content slots map to storefront pages, and which recommender types you can use on a page.

Brandon has all he needs to configure content slots. He’s ready to create a global slot configuration for the product details page. The steps are the same for creating and managing global or category configurations.

In this module, we assume you are a B2C Commerce merchandiser with the proper permissions to perform these tasks. If you’re not a B2C Commerce merchandiser, that’s OK. Read along to learn how your merchandiser would take these steps in a staging instance. Don't try to follow our steps in your Trailhead Playground. B2C Commerce isn't available in the Trailhead Playground. If you have a staging instance of B2C Commerce, you can try out these steps in your instance. If you don't have a staging instance, ask your manager if there is one that you can use.

Now Brandon uses the template that Vijay just created to create a content slot configuration in Business Manager. Brandon can run this configuration on a schedule, automatically showing shoppers some awesome product recommendations.

Here’s how he does it.

1. Open Business Manager.
2. Select site > Merchant Tools > Online Marketing > Content Slots. The resulting list appears on the Business Manager Content Slots page.
3. Select the slot. Brandon selects home-categories-m.
4. Click New to create a new configuration. 
5. Enable the configuration.
6. Select it as the default and enter a description.
7. Select the content type: Recommendation .
8. Select a recommender. Brandon selects the one he created in the previous unit: related-product-brand-x. (Note: You can only see recommenders on a primary instance group (PIG) instance. Einstein is not enabled on a sandbox instance.)
9. Select the template: pdp.isml and click Save. 
10. Click Add Schedule and select a schedule type. A slot interval can't be shorter than 1 hour (60 minutes). Time conditions are always subject to time zone and daylight saving considerations.
11. Assign customer groups: Big Spenders.
12. Click in the Rank column to rank the slot. This tells B2C Commerce which slot to display when you’ve scheduled multiple slot configurations. If multiple slot configurations have equal rank, B2C Commerce uses the last one edited. The lower the rank, the higher the priority.
13. Click Apply.
14. Click the preview icon to see the slot in the storefront.

Vijay and Brandon learned about anchor types and the results of each strategy. Vijay created a new template to render recommended products by copying an existing one. Brandon referenced this template in his new slot configuration. Now it’s time to answer a few questions and earn an awesome badge.