SXA Storefront architecture

Version: 10.0

SXA Storefront is a framework that enables you to tap into the features and functions of Sitecore Commerce to build web shops quickly and easily using commerce-specific controls. SXA Storefront (shown in blue in the following illustration) sits on top of various components including:

  • Sitecore Experience Platform–a customer experience management software that contains state-of-the-art CMS and marketing functionality to give you complete control over the customer experience. It allows you to unify all activities across multiple channels, from campaigns to visitor activity to performance measurement.

  • Experience Accelerator–a developer application used to customize web sites that enables the reuse of components, layouts, and templates across sites.

  • Sitecore Experience Commerce–an e-commerce engine focused on delivering a personalized experience throughout the customer lifecycle. It encompasses catalog and sellable item management, inventory management, customer management, orders management, promotions management, and pricing management.

  • Commerce Connect–the Sitecore Commerce API for storefront developers, which is an integration layer between a front-end webshop solution and a back-end external commerce system. The back-end system can be any e-commerce system for which Commerce Connect connectors have been created by Sitecore or a third-party vendor. Reports generated through Connect include Experience Profile reports for Commerce and Experience Analytics reports for Commerce.

The following illustration shows the components that make up the Sitecore solution.

Overview diagram of the Sitecore solution

SXA Storefront includes a Storefront site template, which provides you with a predefined structure and format that you can use to quickly create and deploy a web shop on premise or in the Cloud. The template is a web shop template built with Commerce renderings. It uses the Habitat catalog and includes sample themes. 

Commerce Foundation layer

The Commerce Foundation layer provides various services and functionalities.

Commerce Foundation layer structure

As the customer interacts with the storefront, Commerce renderings make calls to the Commerce Foundation layer.

Storefront site template

There are several reasons to use the Storefront site template.

  • It provides you with a starting point for building B2C e-commerce solutions based on Sitecore best practices and state-of-the-art technologies.

  • It can be adopted, skinned using SXA themes, and customized for production.

  • It takes advantage of engagement functionality in the Sitecore Experience Platform to track, act and follow up on visitor behavior to help create personal customer experiences and win customers for life.

When you use the Storefront site template, all the elements required for a web shop are added to the Content Editor. Depending on customer requirements, you can customize these elements to better suit your needs. For more information about customizing Storefront components, see the Storefront developer documentation as well as the Sitecore Experience Accelerator documentation.

Note

To allow online payment during checkout, the Storefront site template includes integration with BrainTree. Contact BrainTree to negotiate an agreement and obtain the necessary merchant ID. Developer accounts are available for storefront development and testing, You can create a custom commerce component to integrate the payment provider of your choice. For a video overview of how to integrate the Braintree payment provider with Sitecore, see the Discover Sitecore channel.

SXA Storefront architecture

The SXA Storefront is built with best practices in mind and is based on a modular architecture; for more information see the Sitecore Helix development guidelines.

The following technologies are used in the SXA storefront:

  • Sitecore Experience Platform

  • Sitecore Experience Accelerator

  • Basic Bootstrap

  • JQuery

  • Knockout – a JavaScript library that helps you create responsive user interfaces with a clean underlying data model

  • Sitecore and Microsoft ASP.NET MVC

  • HTML 5

  • Newtonsoft JSON

With the SXA Storefront architecture:

  • There is a clear separation of content, presentation, and catalog data.

  • The Storefront implementation favors standard functionality over injecting custom code and hooking into Sitecore.

  • SXA Storefront does not introduce any cookies.

  • The product catalog appears in Sitecore as regular items using a highly optimized data provider.

  • The implementation is completely Sitecore MVC-based. All renderings are controller based.

All components are updated using component API calls (AJAX). This has the following advantages:

  • Objects and data are loaded on demand (lazy loading) and there are no page post-backs.

  • There are progress indicators on buttons and tables when an operation is in process.

  • Knockout.js is used for dynamic data binding.

  • Component API calls return JSON.

Do you have some feedback for us?

If you have suggestions for improving this article,