🔥💣🔥 Salesforce B2C Commerce Developer Certification Exam Practice Test Buy

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.

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.

Content Assets Menu - Business ManagerContent Assets List - Business Manager

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.

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:

Editing a content Asset - Business Manager

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:

Content Asset Body - Business Manager

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:

HTML Editor for content Asset - Business Manager

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.

Content Assets practical exercices

📝 Exercise: Create and Configure a Content Asset

  1. In Business Manager, select Site > RefArchGlobal > Merchant Tools > Content > Content Assets.
  2. Click on the New button
  3. Provide an ID: salesforceb2c_certification_questions_com
  4. Provide a Name: Salesforce B2C Certification Questions
  5. Set the value Yes to the flag Online
  6. In the Body attribute, click on the link HTML Editor
  7. 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.
  8. Finally, add the following text to the body → This is my 1st content asset's body.
  9. Click on the OK button
  10. Click on the Apply button to save your Content Asset

📝 Exercise: Create and Configure another Content Asset

  1. 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

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

Grouping Content Assets using folders

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:

Library folders - Organize content assets

📝 Exercise: Create a Folder

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

📝 Exercise: Assign a Content Asset to Folder

  1. In Business Manager, select Site > RefArchGlobal > Merchant Tools > Content > Content Assets.
  2. Click on your salesforceb2c_certification_questions_com content asset
  3. In the Edit page, click on the Folders tab
  4. Click on the New button
  5. Check your salesforceb2c_certification_questions_folder folder and click on the Assign button
  6. Now go to Merchant Tools > Content > Library Folder
  7. Click on your salesforceb2c_certification_questions_folder Folder link
  8. 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:

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.

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.

Creating & Configuring Content Slots

Creating a content slot requires a collaborative effort:

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 <isprint> 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:

  1. 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.
  2. For an HTML content slot, an HTML text area displays and the merchant enters the HTML content.
  3. 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.
  4. 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 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:

🔥💣🔥 Salesforce B2C Commerce Developer Certification Exam Practice Test Buy