SFRA Student guide - Salesforce B2C Commerce course

The Storefront Reference Architecture (SFRA) demonstrates best practices for building and customizing a storefront site. You can use SFRA as a starting point for developing your own site.

The purpose of this course is to cover the new architecture implemented on Salesforce Commerce Cloud that replace the old SiteGenesis. This course will help you to migrate to SFRA easily or just to know how this new architecture works.

Here you’ll find the list of topics covered by this course. Mention that some references to Trailhead (Salesforce website) will be found in this course, because some topics are fully explained there.

Getting Started with Salesforce Commerce Cloud (SFCC)

If you ever did an online purchase, you probably know what an e-commerce site looks like. Behind the scenes, that is what SFCC does.

After finishing these modules you should have a pretty good idea about what Commerce Cloud has to offer.

Getting Started with Business Manager

Now that you know about the responsibilities that you have with your sandbox, let’s do some exploration.

If your sandbox doesn’t have two factor authentication enabled fill username and password with your sandbox credentials to login.

Managing your storefront data

In order for you to understand what you can and cannot do with your storefront, let’s review some basic concepts.

  • Products: A product is everything that you can sell on your website
  • Categories: Organize the structure of products on a storefront.
  • Catalogs are flexible and extensible frameworks…

Preparing your Work Environment

Now that we’ve seen how to do the basics with Business Manager it is time to check our programming environment.

Also, there is an SFCC extension that was developed to Visual Studio code, called Prophet, that does the same job, but instead of having to execute a command in the terminal, it gives us menu options to do the job.

Exploring the Cartridge folder

A cartridge is a directory structure that provides a flexible deployment mechanism for customized functionality. It can contain many different types of files including static files (CSS, JavaScript, etc.), image files, etc.

It also contains folders for Commerce Cloud Digital specific files, such as scripts, templates, and form definitions.

Adding Logic with Controllers

Controllers are server-side scripts written in JavaScript and Salesforce B2C Commerce script that handle storefront requests.

They manage the flow of data in your application and create View Models to process each storefront request as a route and generate an appropriate response.

Displaying Data with Templates

ISML stands for Internet Store Markup Language. These files have the .isml extension and they define how data, tags, and page markup are transformed into HTML that is sent to the browser, using Cascading Style Sheets (CSS) for page layout and styling.

Salesforce Commerce Cloud Digital uses templates to generate dynamic HTML-based web pages for responses sent back to the client.

Getting Data with Models and Sending Data with ViewModels

We’ve discussed Controllers, Templates and briefly mentioned View Models but without many details, now we will discuss differences between models and view models and why SFRA architecture make use of view models.

It would be nice if you have previous experience in MVC pattern before going deeper, so if it’s not the case, take a look to this link before continue.

System’s data with SFCC Digital Script API

All requires we have seen in previous chapters of SFRA course that starts with dw/ means that are part of the Salesforce Commerce Cloud API. we don’t have access to the source code. In case you need details, functions, attributes about any of them, refer to the official documentation.

You can access the API from both controllers and ISML templates for expressions or inside <isscript> tags.

Define your code once and reuse it with Scripts

Now that you have a good grasp on the whole architecture and understand how data flows from one place to another, let’s talk about scripts. And no, we are not talking about the SFCC Digital Scripts API this time.

Now we are going to talk about the scripts folder you have inside your cartridge.

Content Assets and Content Slots

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…

Handling Forms with Forms Framework

Salesforce Commerce Cloud Digital provides tools to simplify form display and processing. Use the Digital Forms framework to control how consumer-entered values are validated by the application, rendered in a browser, and possibly stored on a server.

To use the DigitalForms framework, you need the following files: XML, Controllers, Resources and ISML.

Managing data with Objects and Site Preferences

We are going to learn about 2 important SFCC features, which allow us to persist and retrieve data from Business Manager. The first one is called Objects and we have 2 types: System and Custom. The second one is called Site Preferences.

How do you think that Business Manager stores Products, Catalogs or Categories? How does the API work with them?

Do you like cookies? 🍪 We use cookies to ensure you get the best experience on our website. Learn more.