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.
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.
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.
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.
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!
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:
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:
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:
There are many rules that drive the appearance of a slot: marketing campaigns, ranks, AB tests, customer groups, etc.
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.
Creating a content slot requires a collaborative effort:
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:
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.
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:
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:
Then it loops through the slotcontent.content (the content provided for the slot): Inside the loop the code uses the tag:
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:
The merchant then selects one of the templates designed to display HTML from the Template drop-down menu.
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.
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: