Early-stage e-commerce websites were essentially a collection of pages displaying a set of products and prices, with a rudimentary ‘Add to Cart’ functionality – of course, at that time, the shopping cart was an absolute technology highlight!
As the popularity of online shopping grew, e-commerce websites became more and more complex, with robust backend platforms running at the backend – until they became so complex as to become inflexible. The high-tech backend systems had to be configured to be able to launch a storefront and the user interface was linked to the backend platform, making it necessary to make backend technical changes for UI changes to the look-and-feel or display of the storefront.
We’re back full circle – online shopping is at the peak of its popularity in 2020 – and for all we know, this is not its highest peak – online shopping is here to stay. The most significant new development in e-commerce platforms has been the launch of headless commerce by most of the major e-commerce technology providers such as SAP, Salesforce, and Magento.
What is headless commerce?
Headless commerce essentially refers to the decoupling of the e-commerce website’s backend technical functionality from its frontend functionality and user interface. The most significant advantage of this being that frontend changes, design changes, and content updates can be made independently of the technology platform that powers the storefront at the backend. No changes in coding or configuration are needed to launch frontend changes. This makes it much easier, faster, and cheaper to update the website more often and provide a seamless customer experience.
Websites that were earlier technology-bound have now been set free by headless commerce! UI/UX designers are now free to use any technology at the frontend, irrespective of the technology platform. By separating out the frontend content from the backend core commerce functionality, e-commerce has reached a new level of flexibility and scalability.
Progressive web app design
PWAs or progressive web apps are at the cutting edge of modern Javascript-based technologies. Combining the best of websites and mobile apps, these PWAs are expected to bring in game-changing functionalities. Progressive web app design allows you to build a web app that does not need any app store to house it – yet it can run offline – almost like a native app. Together, headless commerce and progressive web app design can help businesses build a digital storefront that ticks off all the items on a seller’s wish-list!
Spartacus from SAP is one such example of a PWA. Featuring a headless commerce architecture, it is an open-source, Javascript-based Single Page Application or SPA. As the SAP product documentation defines it:
“Spartacus is a lean, Angular-based JavaScript storefront for SAP Commerce Cloud. Spartacus talks to SAP Commerce Cloud exclusively through the Commerce REST API.”
Spartacus is built for SAP Commerce Cloud and requires the Commerce Cloud at the backend as it is completely API-driven and depends on the backend commerce functionality and CMS content to work.
Spartacus is expected to replace the older SAP ‘accelerator’ concept. The accelerators were based on templates that were intertwined with the backend technology platform and therefore, the accelerators could not be independently released. But since Spartacus uses a set of libraries that are independent of the SAP Commerce Cloud backend platform, it is extensible and designers would be able to use either Spartacus at the frontend of SAP Commerce Cloud or a custom frontend.
Benefits of Spartacus
- It provides excellent control over the UI of the storefront, thereby allowing for better customer experience at the frontend
- Website changes and catalog display changes can be done more often, quickly, and easily as no backend store configurations or code changes are involved and releases of frontend changes are independent of the backend.
- It is modular and extensible and third-party microservices can be bought from the SAP Cloud Platform Extension Factory.
- It has pre-built features like search, registration, checkout, and order processing which reduce development time and allow for rapid storefront launch and quicker time to market.
- It supports search indexing through SSR (server-side rendering) optimizing the storefront for SEO. It also supports SEO meta tags which help in search indexing the product details as separate pages even though it is a Single Page Application.
- It loads fast as only elements that need to be updated are loaded.
- It makes customization of frontend elements easy with global style variables.
Sapours RetailCX is a PWA and Spartacus-based framework designed to suit Retail and F&B businesses
We built RetailCX using Spartacus headless architecture, providing our clients with more design flexibility to showcase the front-end as required by their brand or customer preferences. RetailCX has enabled our clients to deliver a seamless, unified experience to their customers.
RetailCX supports the strategic business objectives of retail and F&B storeowners and delivers faster time-to-value. Request a demo of RetailCX to see how
Vipin Killedar
Co-Founder and Director (Commerce)
Over 12 years of cross-cultural experience handling Technology and Systems across industries such as Retail, E-commerce, IT consulting and Logistics, and leading towards Digital Transformation.
