Blazingly Fast Composable Commerce Storefront

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. 

Takeaways

- 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.