Introduction
Salesforce B2C Commerce solution enables customers to enhance their profitability swiftly. Clients of all scales can construct flawless experiences and integrate commerce seamlessly into every interaction point using pre-designed templates, composability, and headless APIs.
Simultaneously, automated AI aids in reducing expenses and boosting the efficiency of merchandisers. By linking the shopping journey through unified marketing, service, and order fulfillment, businesses can provide smooth, personalized experiences across all customer touchpoints while maintaining a comprehensive view of the customer. B2C Commerce stands as the exclusive platform trusted worldwide to consistently deliver success to our customers, regardless of the day, month, or holiday
Platform Transformation
The next picture shows a timeline of the history of the “development architectures” that is used on Salesforce B2C Commerce Cloud throughout the years.
The oldest version platform (and least exciting option): SiteGenesis. It is a powerful and flexible e-commerce platform developed by Salesforce Commerce Cloud (formerly known as Demandware). It serves as the foundation for building and managing online storefronts, providing a robust set of features and capabilities to support the entire e-commerce lifecycle.
The main idea behind SiteGenesis is to offer retailers and brands a comprehensive solution for creating and operating their online presence. It combines various elements, such as website design, product catalog management, shopping cart functionality, payment processing, and order fulfillment, into a cohesive system.
The primary justification for avoiding the usage of SiteGenesis or transitioning away from it stems from its reliance on outdated methodologies and older frameworks.
One such example is the employment of SCSS, which incorporates "responsive design." It's important to note that this approach was widely accepted in 2014 and served its purpose effectively at that time. However, a few years later, it was superseded by the adoption of a mobile-first methodology (which MFRA is built upon, but we will discuss this further later on).
How did the SiteGenesis platform transform into SFRA?
SiteGenesis was the original front-end framework for Salesforce Commerce Cloud, which provided a pre-built, out-of-the-box e-commerce storefront solution. While SiteGenesis served its purpose well, it had certain limitations and lacked the modern development practices and technologies that emerged over time.
To address these limitations and provide a more robust and customizable solution, Salesforce introduced the Storefront Reference Architecture (SFRA). SFRA is a modern, modular, and extensible front-end framework designed to enable developers to build highly customized and responsive e-commerce websites on the Salesforce Commerce Cloud platform.
SFRA adopts the MVC (Model-View-Controller) architectural pattern, which facilitates the incorporation of fresh functionalities through the extension of models and controllers, eliminating the need for template duplication. In this design, all business logic has been extracted from templates and centralized within the controllers.
On the other hand, Site Genesis functions as a singular code component, resembling a monolithic architecture. It represents a relatively outdated software architecture where developers are required to duplicate templates and make modifications to the existing code to introduce new features to the application.
Picture 2 - Architectural Comparison b/w Site Genesis and SFRA
The transition from SiteGenesis to SFRA required developers to migrate existing SiteGenesis-based projects to the new architecture. Salesforce provided documentation, migration guides, and tools to assist developers in this process, ensuring a smooth transition while preserving the core functionalities and customizations of existing e-commerce websites.
The primary evolution of the platform is a movement from Salesforce Commerce Cloud (SiteGenesis model) to SFRA (Store Front Reference Architecture). The transition aimed to provide enhanced flexibility, scalability, and maintainability for e-commerce websites.
Picture 3 - SiteGenesis vs SFRA
Originally, the Demandware platform and the very first SiteGenesis version were built upon the pipeline's approach. Pipelines consisted of various nodes, each carrying out distinct actions. These nodes encompassed a range of functionalities, such as the start node, assign node, script node, decision node, call node, jump node, and others. By utilizing these nodes, the executable logic was established.
However, the pipeline method posed challenges in terms of comprehending the logic, as developers had to delve into the properties of each node to decipher its purpose. Additionally, incorporating pipeline modifications into the repository proved difficult due to the entire structure being represented in a diagrammatic format. Moreover, the system's backend transformed the pipeline diagram into an XML format.
Picture 4 - Overview of Pipelines in SiteGenesis
SFCC revolutionized its architecture to align with emerging technologies. A significant transformation took place as SFCC shifted its pipeline structure to a controllers-based system. The previous method of developing logic with nodes has been replaced entirely with a pure code base. This transition enables the utilization of Demandware APIs for coding all the logic, resulting in enhanced code visibility. By adopting the controllers' approach, SFCC effectively addresses the limitations associated with the previous pipeline structure, marking a significant improvement.
Picture 5 - Overview of controllers in SiteGenesis
The e-commerce market is constantly changing and now heavily relies on mobile devices and mobile e-commerce sites. To cater to this trend, SFCC has introduced the Mobile First Reference Architecture (MFRA) or Storefront Reference Architecture (SFRA). MFRA/SFRA is designed to offer an exceptional experience for visitors accessing e-commerce sites from their mobile devices. The latest SFCC architecture also includes pre-configured default templates that can be customized later to fulfill specific requirements of e-commerce sites.
Picture 6 - Overview of controllers in M(S)FRA
SFRA: Short overview
A reference architecture acts as an initial guide for designing online storefronts, incorporating industry-leading approaches to site design and storefront architecture. It provides a framework for constructing and personalizing your e-commerce storefronts.
The Storefront Reference Architecture (SFRA) serves as a reference architecture, acting as a starting point that combines industry best practices and ready-to-use commerce features in a web storefront. It serves as the foundational framework for creating a new Salesforce Commerce B2C site. SFRA is designed to expedite the launch of your Salesforce Commerce B2C project, enabling you to save time and reduce costs.
Using SFRA allows for rapid development, as it provides a comprehensive set of core site functionalities developed with industry best practices. Additionally, you can explore the Melon Punch Accelerator Options, which offer enhanced features at a reduced cost. The extensive list of out-of-the-box features includes cart management, checkout process, homepage layout, product detail pages, and more. This also simplifies the integration of popular payment technologies like Apple Pay, Amazon Pay, and Google Pay, making it convenient for customers to make purchases, even on mobile devices.
Developers have the freedom to customize and extend the SFRA code base, empowering brands to create visually appealing and unique web experiences. They can introduce new code, integrate with third-party providers, and continually refine their site designs. Consequently, merchants have complete ownership over their storefront and the underlying code base.
The benefits of SFRA can be summarized as follows:
- Improved time to market: By leveraging the prebuilt storefront design and templates, developers can quickly adopt the latest innovations.
- Reduced total cost of ownership (TCO): SFRA provides an easy-to-use code base, enabling developers to add functionality within a shorter timeframe.
- Enhanced mobile shopping experiences: SFRA is developed with a mobile-first approach, ensuring a responsive design that optimizes the shopping experience on any screen size.
- Storefront ownership and limitless customization: The separation of integrations from the core code base allows developers to have full control over the code, facilitating extensive customization based on the brand's unique requirements.
New Features of SFRA
The transformation from SiteGenesis to SFRA involved several key changes:
- Modular Architecture: SFRA introduced a modular architecture that allows developers to organize code into smaller, reusable modules. This modular approach promotes better code organization, separation of concerns, and easier maintenance.
- Front-end Development Frameworks: SFRA leverages modern front-end development frameworks like Node.js, npm, and Webpack. These tools enable developers to utilize industry-standard development practices, such as package management, dependency management, and task automation, improving the efficiency of the development process.
- Customization and Extensibility: SFRA provides a higher degree of customization and extensibility compared to SiteGenesis. It allows developers to override and extend core functionality, implement custom features, and integrate with third-party services more easily.
- Responsive Design: SFRA emphasizes responsive design principles, enabling developers to build websites that adapt to different screen sizes and devices. This is crucial in the mobile-first era, where a significant portion of e-commerce traffic comes from smartphones and tablets.
- Improved Performance: SFRA incorporates performance optimizations, such as code minification and lazy loading of resources, to enhance website speed and loading times, resulting in a better user experience.
SFRA continues to evolve, introducing new features and capabilities that enable retailers to deliver seamless, personalized, and delightful shopping experiences.
The most lovely part of the new architecture is scalability and technical support. Cartridge approach to developing reusable code between projects. The backend piece is the stronger than Front so you can extend controllers, models, scripts, etc. And the page designer approach is nice.
The current use of controllers in SFRA
Controllers in SFRA act as the intermediaries between the storefront's front-end and back-end systems. They handle the logic and flow of data between the user interface and the business logic, enabling dynamic interactions and delivering personalized experiences to online shoppers.
SFRA allows developers to replace, extend and customize controllers to meet specific business requirements. By extending the existing controllers or creating new ones, developers can tailor the behavior and functionality of the storefront to align with the unique needs of their business.
Mobile-First Approach
The proliferation of smartphones and the increasing preference for mobile shopping have made it crucial for businesses to prioritize mobile experiences. Bootstrap, HTML5, and CSS3 were integrated into Mobile-First, streamlining the process of creating mobile-friendly user interfaces. The prominence of mobile-first design in contemporary eCommerce platforms should come as no surprise, given that mobile devices account for 56% of total website traffic as of February 2022, according to Statcounter.
SFRA embraces a mobile-first approach, offering responsive design and optimized performance across various devices. The new features of SFRA focus on enhancing mobile interactions, such as intuitive navigation, faster loading times, and mobile-specific functionalities, ensuring a consistent and engaging experience for customers on smartphones and tablets. To enhance the overall shopping experience and facilitate the seamless development of mobile-first interfaces, Salesforce employed insights gathered from extensive analysis of shopper journeys, heat mapping, and mobile sites. By adopting SFRA, developers can benefit from a leaner codebase that optimizes mobile performance and encourages the implementation of industry-leading mobile experiences.
Design best practices adopted to implement storefront features you can check in the link SFRA
Picture 7 - Mobile-First strategy
Personalization and AI Capabilities. Page Designer
SFRA incorporates advanced personalization and artificial intelligence (AI) capabilities to empower retailers in delivering tailored experiences to their customers. Through integration with Salesforce Einstein AI, SFRA allows businesses to leverage customer data, predictive analytics, and machine learning algorithms to deliver personalized recommendations, dynamic pricing, intelligent search, and targeted marketing campaigns. These features enable businesses to create meaningful interactions, foster customer loyalty, and drive conversions.
In addition, Salesforce recently unveiled its latest tool, the Page Designer, which effectively addresses a long-standing requirement for a user-friendly, visual editor and page-building application that complements its Commerce Cloud solution. The primary purpose of this tool is to provide business teams with an effortless and intuitive editing experience, empowering them to create content elements and pages with branding swiftly and visually, similar to a straightforward web content management system.
To complement this innovation, Cloudinary offers a certified Salesforce Commerce Cloud (SFCC) Page Designer cartridge. This cartridge seamlessly integrates Cloudinary's capabilities, allowing users to embed images and videos from Cloudinary into pages created using the Page Designer. By leveraging Cloudinary's image and video components, you gain the ability to transform, optimize, and deliver your visual content, meeting both performance and design requirements for your website without any hassle.
Picture 8 - Creating Page with Dynamic Layout
Progressive Web Applications (PWA) Kit & Managed Runtime
The latest update to the Salesforce Commerce Cloud platform is the PWA Kit (Introduced in 2021). Mobify, acquired by Salesforce in 2020, provides the Commerce PWA Kit and Commerce Managed Runtime as part of the B2C Commerce solution.
The PWA Kit provided for Salesforce Commerce Cloud enables a seamless migration of your online store to a headless commerce architecture. With the PWA Kit, you gain the ability to leverage the advanced capabilities of the Salesforce Commerce Cloud platform, resulting in faster deployment and cost savings. By delivering app-like user experiences on mobile, tablet, and desktop devices, you can enhance customer engagement and satisfaction.
With the rise of PWAs, SFRA now provides the capability to develop and deploy Progressive Web Applications. PWAs combine the best aspects of web and mobile applications, delivering app-like experiences directly through web browsers. SFRA's PWA support enables businesses to leverage features like offline access, push notifications, and seamless installation, providing a highly engaging and accessible shopping experience for customers across platforms.
Picture 9 - PWA start page
The PWA Kit is the most recent addition to the SFCC family. And it is important to note that this solution is not marketed at the moment to replace SFRA. A good example of the use of PWA is the mobile version of the store www.dolcegabbana.com
Headless Commerce Support
SFRA embraces the concept of headless commerce, which decouples the front-end presentation layer from the back-end commerce functionality. This architectural approach provides flexibility and scalability, allowing businesses to experiment with different front-end technologies while leveraging the robust commerce capabilities of SFRA. By separating the two layers, businesses can create unique and immersive shopping experiences, leveraging modern front-end frameworks and APIs.
A short list of the most famous and Best Salesforce Commerce Cloud Stores:
Conclusion
Salesforce Commerce Cloud's latest features have revolutionized the B2C eCommerce landscape, providing businesses with powerful tools to enhance customer experiences and drive growth. These new features empower businesses to stay ahead of the competition, connect with their customers on a deeper level, and ultimately boost their sales and revenue. By leveraging the latest innovations from Salesforce Commerce Cloud, businesses can unlock the full potential of their B2C eCommerce operations and thrive in today's digital marketplace.
