Content Assets and Content Slots

Introduction

Content management is a very important topic when working on SFCC projects. How to store content? Who creates and maintains this content? What kind of content can be stored?

The amount and variety of content depending on the site. Some sites display simple text while others show a complicated array of asset types. Sites typically display content on how to use their products, profiles of customers wearing their products, and even detailed explanations of techniques related to products, such as composting and mulching for a gardening site.

The most common way to store and use this content is through content assets, organized into library folders for easier retrieval, and content slots.

In Commerce Cloud, a content asset is a database object with attributes. You can extend the object with its own attributes using the metadata system. The most common usage for content assets is to contain HTML that displays on the storefront as a standalone page or embedded within another page.

Content assets are typically used for information that changes infrequently such as an about us page or apparel sizing tables. These HTML blocks can reference images that are stored in a special area of the file system for content-related static files.

But there is something else that is worth being mentioned. If you analyze some Content Assets’ bodies, you will notice that some of them have only text in their body. So, why use Content Assets instead of storing the text inside of Resource Bundle files (.properties)? Because by storing information in Content Assets, we make it possible for the Merchant to modify it whenever he wants.

So the decision of whether to store text inside of a Content Asset or in Resource Bundles will depend will sometimes be based on the fact that the Merchant will want to be able to modify the content him/herself.

As a Commerce Cloud Software Developer, especially if you are a Frontend Developer, dealing with Content Assets will be part of your daily life so it is of utmost importance you know how to deal with them.

Udemy Salesforce Commerce Cloud 101 – Descubre la plataforma líder

Udemy Salesforce Commerce Cloud 201 – Intermediate Course

Udemy Salesforce Commerce Cloud 303 – POD Alerts Cartridge

Content Assets menu

First of all, let’s find where Content Assets are kept. Since they are something used by Merchants, it only makes sense for them to be in the Merchant Tools menu.

Once there, go to Content > Content Assets. Once you click it, the Content Assets management page will be displayed for you.

Before we move on, one very important piece of information. Did you notice at the top that it says Merchant Tools > Content > Libraries > RefArchSharedLibrary > Content?

Where did this RefArchSharedLibrary come from? It is actually the name of the metadata file containing the definitions and data from all content assets in your RefArchGlobal site.

Master the Art of Code: Your Adventure Begins with a Click!

Content Assets Structure

Let’s explore what information we can store in a content asset by opening the about-us asset. The first thing you will notice when open a Content Asset is a warning at the top:

You haven’t locked this content for editing. Click Lock if you need to edit the content. You have seen this same warning when playing with products, right? So to be able to edit it, make sure you click on Lock.

Now, check the fields being displayed:

As you could see, some fields such as Online and Searchable have the value Default by default, which means it is applied to every site but also you have the option to apply different behaviors to different sites.

That’s the moment you realize you/the merchant can create content that can be used across many sites with different behaviors but without having to duplicate the content.

Types of content

Now let’s check the field named Body, at the bottom:

First thing you notice: It is HTML! So it means we can do a lot of customization in content assets. But of course, not all merchants will know HTML. We can also use just pure Text and, the coolest part, include media! Click on the HTML Editor link. A popup should open for you:

Have you noticed there is no HTML being displayed anymore? That’s because the content of the field body displays us the raw content that is created from this HTML Editor. So in this popup, we can do all sorts of things from creating tables to adding images(the icon that looks like a country flag) and, after we click OK the correct HTML will be generated back to the field.

This means that the merchant doesn’t really have to know HTML unless very specific customization is needed such as changing a CSS class or changing the HTML tags for some reason.

Finally, the last field that we pay attention to now is the one named Rendering Template. Why should you pay attention to it? Because it is useful if there is a need to create unique pages with an alternative header, footer, and decorator to the page.

📝 Exercise: Create and Configure a Content Asset

In Business Manager, select Site > RefArchGlobal > Merchant Tools > Content > Content Assets.
Click on the New button
Provide an ID: salesforceb2c_certification_questions_com
Provide a Name: Salesforce B2C Certification Questions
Set the value Yes to the flag Online
In the Body attribute, click on the link HTML Editor
On the new window that will appear, click on the icon that looks like a country flag to upload an image.
1. On the new pop-up window, click on the button Browse Server.
2. On the new pop-up window, in the Files section, click on the Choose file button and an image of your choice
3. When the upload is finished, just click on the file's name to select it.
4. When the pop-up closes, click on the OK button.
5. Try to resize your image to become smaller.
Finally, add the following text to the body → This is my 1st content asset's body.
Click on the OK button
Click on the Apply button to save your Content Asset

📝 Exercise: Create and Configure another Content Asset

Repeat the same steps from above to create another content asset but instead, add the following text on its body: I'm learning Salesforce Commerce Cloud!

📝 Exercise: Rendering a Content Asset

Open the ISML template app_storefront_base\cartridge\templates\default\search\productGrid.isml
On line 2, right after the <isinclude> tag, call your content asset: <iscontentasset aid="salesforceb2c_certification_questions_com"/>
Also, at the top of the page add the following code: <isinclude template="/components/modules" sf-toolkit="off" />
Now go to your storefront and so a search by the term Suit
Your Content Asset should be displayed at the top of the product result page.

Grouping Content Assets using folders

How to be a Certified Salesforce Commerce Cloud Developer for FREE

Unlock a FREE PDF with SFCC B2C Certification questions from our Udemy Course. Join our newsletter!
Check your email, you’ll receive a copy in a few seconds. If you don’t see it, please check your spam folder.

Now that you know about the importance of Content Assets, let’s learn about Folders, an internal structure in Business Manager which is very useful to organize Content Assets.
You can use the Business Manager to define or edit a hierarchical folder structure for your content assets. The Library folder page shows the subfolders that exist in your site library, which can be either a private or a shared library.

All folders can contain content assets. You can organize content assets in more than one folder or subfolder. Folders are looked close to the Content Assets menu:

📝 Exercise: Create a Folder

In Business Manager, select Site > RefArchGlobal > Merchant Tools > Content > Library Folders.
In the Library Folders section, click on the New button in order to create a new Folder
Provide an ID: salesforceb2c_certification_questions_folder
Provide a Name: Salesforce B2C Certification Questions Folder
Set the value Yes to the flag Online
Click on the Apply button to save your Folder.
Now go again to Merchant Tools > Content > Library Folder and you will see your Folder listed.

📝 Exercise: Assign a Content Asset to Folder

In Business Manager, select Site > RefArchGlobal > Merchant Tools > Content > Content Assets.
Click on your salesforceb2c_certification_questions_com content asset
In the Edit page, click on the Folders tab
Click on the New button
Check your salesforceb2c_certification_questions_folder folder and click on the Assign button
Now go to Merchant Tools > Content > Library Folder
Click on your salesforceb2c_certification_questions_folder Folder link
You will see in the Folder Content section your Content Asset listed there

Managing dynamic content with Content Slots

A content slot is an area on the page where a merchant defines the content to display based on certain qualifiers or rules. In Salesforce Commerce Cloud, a content slot, just like a content asset, is a database object with attributes. You can extend the object with its own attributes using the metadata system.

Content slots are typically used for information that changes from time to time such as a promotional banner. A content slot is used to show different types of content:

One or many products selected by the merchant
Category attributes (images or other visual)
ontent assets from the content library
Static HTML and images from the static library

To view a content slot, use the Storefront Toolkit > Content Information tool. Hover the mouse pointer around the page to reveal where content slots exist and to access a link to the slot’s configuration page in Business Manager.

There are several types of content slots:

Global slots can appear on any page.
Category slots appear on category-specific pages since they depend on the category ID.
Folder Slots – appear in content library folders dependent on the folder ID.

There are many rules that drive the appearance of a slot: marketing campaigns, ranks, AB tests, customer groups, etc.

Content Slots vs. Content Assets

Slots can be controlled by campaigns: start/end dates, customer groups, source codes, coupons, and rank are qualifiers that affect the appearance of a slot.

On the other hand, Content Assets are reusable elements that do not have qualifiers which include HTML text, graphics, and video to provide customers non-product related information such as customer support pages, special sales, size charts, and gardening tips.

Content slots and content assets are managed in different areas within the Business Manager.
Content Slots are a marketing tool, therefore configuration information for content slots reside in Site > Online Marketing > Content Slots.
Content assets are a media tool and it resides in Site > Content > Content Assets

Creating & Configuring Content Slots

Creating a content slot requires a collaborative effort:

The developer inserts a <isslot> tag in a template in the location where the slot will appear.
The developer creates a rendering template for the slot that defines how the slot data is to be presented.
The merchant creates a configuration for the slot in the Business Manager.

Creating Content Slots - Developer Tasks

You register a content slot on BM by using the <isslot> tag inside of a template. The tag must be located exactly where it should appear on the page. Here are some examples of tag usage:

				
					<isslot id="header_banner" description="..." context="global"/>
<isslot id="category_top_featured" context="category" description="..." context-object="${pdict.ProductSearchResult.category}"/>
<isslot id="fldr-landing-slotbanner" context="folder" description="Large Folder Landing Banner" context-object="${pdict.ContentSearchResult.folder}"/>

Whenever the template is saved, the new content slot automatically displays in the list of slots under Site > Online Marketing > Content Slots. This occurs because Commerce Cloud Digital scans any template for the use of the <isslot> tag.

Creating the Slot Rendering Template - Developer Tasks

There are 4 possible types of content that slots can display. The developer should create the rendering template taking into account the type of content, how many objects to display, plus any CSS styling required for the slot.

For example, the header_banner-m slot uses the htmlSlotContainer.isml template as the rendering template:

				
					<div class="html-slot-container">
   <isif condition="${slotcontent != null}">
      <isloop items="${slotcontent.content}" var="markupText">
         <isprint value="${markupText.markup}" encoding="off"/>
       </isloop>
   </isif>
</div>

Using slotcontent and inside Content Slots' Rendering Templates

Every slot is rendered by a system pipeline in which you do not have access to this pipeline.

It uses the slot configuration that the merchant creates and provides all the configuration information to the rendering template by means of the TopLevel.global.slotcontent constant. Only slot rendering templates get data via this constant.

The rendering template code checks that the slotcontent variable is not empty and you use isprint to actually display the content:

				
					<isif condition="${slotcontent != null}">
   <comment> Then it loops through the slotcontent.content (the content provided for the slot): </comment>
   <isloop items="${slotcontent.content}" var="markupText">
      <comment> Inside the loop the code uses the <isprint> tag: </comment>
      <isprint value="${markupText.markup}" encoding="off"/>
   </isloop>
</isif>

Creating Content Slot Configurations - Merchant Tasks

Merchants create content slot configurations by navigating to Site > Online Marketing > Content Slots and locating the specific slot that the developer created, e.g. header-banner.

The merchant can select an existing configuration or click New to create a new one.

The merchant then selects the type of content. For example, Product or HTML. Different fields will be displayed depending on the content type selected. For instance:

For a Product content slot, the Product field displays and the merchant enters the IDs of the products to be displayed. The merchant then selects one of the templates designed to display products from the Template drop-down menu.
For an HTML content slot, an HTML text area displays and the merchant enters the HTML content.
For Content Assets, the Content Asset field displays and the merchant enters the IDs of the Content Assets to be displayed. The merchant then selects one of the templates designed to display products from the Template drop-down menu.
For Categories content slot, the Category field displays and the merchant enters the categories to be displayed.

The merchant then selects one of the templates designed to display HTML from the Template drop-down menu.

The Template menu contains all possible rendering templates that are available in all cartridges in the cartridge path for this content type.
The RefArchGlobal app_storefront_base cartridge comes with default templates for every type of content.
The templates are located in specially named folders that Business Manager discovers by default (for example, slots/html for the HTML type).

The merchant can choose to reuse an existing rendering template or use a new one as instructed by the developer. This is why the collaboration between merchant and developer is important. Without a rendering template, there is no way to visualize the slot.

The merchant also provides a schedule for the slot. This is either the default schedule or based on a marketing campaign.

Using Content Link Functions

Salesforce Commerce Cloud uses attributes of type HTML in many places: content assets, content slots with HTML-type content, product descriptions and so on. You can also add an attribute of type HTML to any system object where you may need to show HTML. These attributes are represented by the class dw.content.MarkupText

When using HTML in content assets or content slots, avoid hardcoding hyperlinks to pages or images in the storefront. They are instance-specific (e.g., Staging) and would have to be changed every time after a replication. Instead, SFCC offers the following Content Link Functions for use in attributes of type HTML:

$staticlink$ : Creates a static link to an image.
$url()$ : Creates an absolute URL that retains the protocol of the outer request.
$httpUrl()$ : Creates an absolute URL, with the http protocol.
$httpsUrl()$ : Creates an absolute URL, with the https protocol.
$include()$ : Makes a remote include call (relevant for caching purposes).

Udemy Salesforce Commerce Cloud 303 – POD Alerts Cartridge

SFRA Course on Udemy

About Us

Salesforce Certifications

B2C Commerce Architect
Marketing Cloud
JavaScript Developer I
B2C Solution Architect
B2B Solution Architect
Application Architect
Technical Architect
Salesforce Service Cloud