The Demo we built includes the key features that should be part of any storefront, features such as transactional emails, tax calculation, checkout flow, abandoned cart emails, CMS, subscriptions as well as promotions/discounts. We wanted to put all these features into a running demo, as well as using the technologies needed to create outstanding performance.
This is what we used:
Open Source, Built on React and NextJs. Gives you a good starter template for an storefront. Enabled for PWA, and has connectors to a number of different commerce engines.
An API-first, headless e-commerce system that’s designed to build B2B, B2C, and marketplaces.
The Sitecore CDP is designed to drive exceptional experiences on all digital channels. It takes the core data management capabilities of a CDP and layers on decisioning, predictive analytics, experimentation, and orchestration.
The easiest email marketing and automation software.
XM Cloud is Sitecore’s cloud-native, modern CMS empowering brands to create, manage, and deliver relevant content at lightning-fast speeds.
Vercel is a platform for frontend frameworks and static sites, built to integrate with your headless content, commerce, or database.
Stripe is a suite of APIs powering online payment processing and commerce solutions for internet businesses of all sizes. Accept payments and scale faster.
Putting the components together
React Storefront's architecture is "connector-based" so we really only needed to create a connector for Sitecore OrderCloud. We did that using the js library from GitHub, and used OrderCloud also to handle users and authentication.
For data and images - we imported product catalog and pricing from a previous Sitecore demo (Experience Commerce - Habitat Storefront) into OrderCloud. We also established a Subscription Module, also fully following MACH standards, obviously using OrderCloud's flexible promotion engine to apply discounts to the subscription orders.
Showing add-to-cart, cart page and finally checkout and order confirmation.
To showcase how easy and fast it is to establish an Abandoned Cart functionality - we used Sitecore CDP combined with Moosend for email sendout as OrderCloud to calculate the Cart data.
Using Sitecore CDP to enable abandoned cart functionality.
Stripe was chosen as the payment provider and Moosend for sending out transactional emails. Now Sitecore has a newer product: Sitecore Send, which was not available at the time we put together the demo, but due to the composable setup it shouldn't be hard switching this out - if there's a benefit doing that.
We used Sitecore XM for managing content using Sitecore Experience Edge the exposed GraphQL endpoint.
Using Moosend to enable transactional emailed from the Storefront
Utilizing the promotion engine in Sitecore OrderCloud to handle discount on subscription orders.
Our Subscription Component runs on Azure, exposes API built in .NET Core, and uses a classic MS SQL Azure Database for storage.
Finally this was all deployed to Vercel - extremely easy to deploy and manage, no need for heavy and time-consuming deployment processes.
- Establishing this demo was impressively fast, and developer productivity impressive.
- The flexibility in the setup is the big win - you don't need to do a "lift and shift" and re-implement it all. You can and should do it in phases and only pay for what you need - and re-use what you already have.
Interested in getting into the details around this demo? Or maybe you want to try it out? Please reach out to us.
ABOUT ALPHA SOLUTIONS
Alpha Solutions works with best-of-breed technologies, leveraging our clients’ current IT portfolios (ERP, CRM, PIM, OMS etc.) to produce measurable, repeatable, and compelling results. With offices in New Jersey, Dallas, Los Angeles and Copenhagen, Alpha Solutions is well positioned to serve our international client base. Alpha Solutions is a leading Sitecore Implementation Partner with responsibility for some of the largest and most complex e-commerce solutions worldwide.