Salesforce Storefront Reference Architecture (SFRA) for Salesforce B2C Commerce Cloud
Why SFRA?
- Simpler to launch
- Pre-configured default templates
- Also, quickly adopt technologies like Apple Pay–providing shoppers with an awesome experience.
- SFRA customization model makes it easy for developers to build, maintain, and update storefront.
- Leverage existing JavaScript controllers development model along with a new MVC architecture approach for customization.
- Leverage UX best practices, data driven design, and use of the popular Bootstrap mobile UI framework to optimize the shopping experience across mobile devices
- Greater extensibility and adaptability for future upgrades.
Summary of Architectural Improvements
Who Is The SFRA Intended For:
The new Salesforce Storefront Reference Architecture has these two primary audiences in mind:
- Merchants who are beginning new site implementations with Commerce Cloud or who are adding a new brand as a new storefront in their current Salesforce CC.
- Merchants who are making a major overhaul of their existing storefront.
Who is the Storefront Reference Architecture for?
Adoption options and scenarios available to customers today
New Customers
Existing Customers with New Sites
Existing Sites
- Merchants do not have to reimplement their digital platform to take advantage of the Salesforce Storefront Reference Architecture. All the pre-existing data, merchant rules, etc., built in Commerce Cloud Digital will remain unaffected.
- Merchants can use the existing SiteGenesis architecture and the new Salesforce Storefront Reference Architecture across different brands or regions at the same time. For example, one brand or region could run on the Salesforce Storefront Reference Architecture, and another brand or region could run on SiteGenesis.
Reference Architecture
SITE GENESIS & SFRA:
Available Reference Architectures
Reference Architectures Available Today to Commerce Cloud Customers
Site Genesis Reference Architecture
Currently, over 2,700 Commerce Cloud Sites are using Site Genesis including some of the world’s leading brands.
Storefront Reference Architecture
It is the futuristic architecture being used in over 50 storefronts. It contains the latest in user experience site design, extensibility and Commerce Cloud developer innovation.
Understanding the SFRA Design Process
Mobile-First design best practices adopted to implement storefront features
- Developed the mobile experience first and then incrementally expanded use-case support for tablet and desktop view ports.
- Leveraged data-driven insight, heat mapping and shopper journey analysis from the B2C Commerce community of over 2,000 mobile sites.
- The end-result is a lighter codebase that emphasizes customer experience best practices across each view-port – instead of focusing on functional parity
Understanding the SiteGenesis Mobile Design Process
Desktop to Mobile support achieved by extending the reference architecture
- Not a best practice – but the quickest way to achieve Time to Market for our customers
- Involves layering Additional UX Code (Styles and javascript) to create tablet/mobile experiences
- Each experience incrementally increases complexity and maintainability of the storefront
- Responsive support was delivered – but did so by introducing new maintenance responsibilities
- This coupled with the architecture and development model incrementally increases TCO
Comparing Business Value Generated by SiteGenesis and SFRA
SFRA consistently generates more business value in each category
Storefront Reference Architecture
Maintainability and Extensibility
Improved extensibility and inheritance model encouraging modular code and smaller changes
Customer Experience
Mobile first design best practices influenced by data-driven insights, heat mapping and shopper journey analysis
Continuous Integration
Improved support for continuous integration and automated testing – including unit, integration and functional tests.
Total Cost of Ownership
Collectively, the mobile-first approach and architectural improvements are designed to reduce TCO compared to SiteGenesis
SiteGenesis
Maintainability and Extensibility
Legacy inheritance model functional but encourages code duplication; more challenging to maintain as codebase ages
Customer Experience
Desktop to responsive design includes more features per form factor to maintain within the storefront codebase
Continuous Integration
Includes support for continuous integration but lacks the examples that ship with SFRA or the command line tooling.
Total Cost of Ownership
Although, it is an effective option for the customers but SiteGenesis will have a higher TCO compared to SFRA to maintain in the future.
Feature Comparison
SiteGenesis vs. Storefront Reference Architecture
Feature Parity with SiteGenesis
- Homepage: Product tiles, content slots, product recommendations, email signup, store locator, header and footer, product quick-view.
- Product Detail Page: Basic products, products with variants, size chart, product sets, product bundles. Bonus products, promotions, Einstein product recommendations, Einstein predictive sort, in-store inventory views, variation groups, quick view.
- Cart: Persistent cart, Einstein product recommendations, bonus products, coupons, mini-cart
- Checkout: Cart page, receipt page, shipping, billing, form handling, multiple shipping options, pick-up-in-store, registered and unregistered checkout, confirmation emails, one touch payment options
- Search and Search Results: Search results, search suggestions, search refinements, Einstein predictive sort, category landing pages, search-as-you-type, search not found, show more, international linguistic support
- My Account: Login, Edit Profile, password recovery, order history, social login, remember me functionality
Wishlists and Gift Registry
- Customer Service: About us, Contact us, security and privacy, customer help
- General Site Management Features: Responsive design, Localization, error pages, breadcrumbs, navigation, header/footer
Technical Comparison
SiteGenesis vs. Storefront Reference Architecture
Feature Parity with SiteGenesis
- Full Platform Functionality: Underpinning the storefront is a multi-tenant cloud platform for innovation enabling a continuous delivery of new features and enhancements
- Open Commerce API’s (OCAPI): A full set of APIs wrap the platform and expose core commerce functionality such as cart, checkout, and search as well as data objects such as product or catalog, through the REST API layer.
- JavaScript Controllers: Enables developers to build custom business logic with a common language that ensures productivity.
- LINK technology Partner Program: Leverage best-of-breed 3rd party integrations
o Many storefront LINK cartridges are in the process of being integrated
- My Account: Login, Edit Profile, password recovery, order history, social login, remember me functionality
SFRA Technical Advantages
- Model View Controller Architecture (MVC): Developers are empowered to write better organized, more maintainable code with a less complexities and dependencies
- Efficient Storefront Maintenance & Updates: A modular separation of core reference features, merchant customization and integration cartridges makes implementing new features and maintenance a breeze.
- Bootstrap Mobile Framework: The most popular HTML, CSS and JS framework for developing responsive, mobile-first sites. Bootstrap’s open source toolkit makes front-end development easier.
- Extensibility: Build “pixel perfect sites” with an extensibility model that allows developers to build unique brand experiences with open architectures and frameworks that enable fast, easy customization.
- Mobile Wireframes: Annotated documentation that provides a guide for mobile page schematics and associated storefront best practices.
Architectural Comparison
SiteGenesis vs. Storefront Reference Architecture
Royal Cyber:
For more information on our Salesforce services, please check the below URL:
https://www.royalcyber.com/technologies/salesforce-commerce-cloud-demandware
