Storefront is an all-in-one starter kit for building high-performance e-commerce shops for the SCAYLE Commerce Engine. It makes it quick and easy to create a best-in-class shop frontend.
The latest version of Storefront is based on Nuxt and Vue 3 and consists of two parts:
Storefront Core (SFC) is the headless storefront that provides design-agnostic business logic and integrations with the SCAYLE backend.
Storefront Boilerplate (SFB) is a complete starter Nuxt application that includes the Storefront Core and all features and pages required for a modern e-commerce frontend.
Storefront Core is built in a way that makes it easy to change or extend the shop design. An advantage of this approach is that the effort for launching a new e-commerce shop is drastically reduced because you only have to focus on the UI and design layer.
Progressive Technology: Storefront Core provides fast performance while still delivering optimal SEO and mobile experiences due to hybrid rendering.
Fully featured: out of the box, the Storefront Boilerplate provides:
Product listings and detail pages
Category tree navigation and filtering
Wishlist and basket functionality
A complete checkout integration
Best-of-class user tracking
Internationalization
Promotion Engine
Checkout
Integration with a headless CMS for managing content
Reusability/Scaling: modular features that you can easily integrate and reuse.
Easy Configuration: configuration is done via .env files.
Well-tested: Covered by a suite of unit and end-to-end tests, the Storefront Core and Boilerplate are also used with confidence in production by the majority of SCAYLE clients
Customization: the UI and design are customizable, allowing you to deliver a shop frontend according to your wishes.
Storefront Core makes it easy to build a Nuxt-based storefront application on top of the SCAYLE Commerce Engine. It consolidates interactions with various SCAYLE APIs and middlewares into a set of ergonomic composable functions. Additionally, it provides modules to handle caching, redirects, sessions, and authentication.
The Storefront Core is a headless solution. It is a npm package that is registered as a module inside a Nuxt application. It provides additional functionality but does not include any UI code. That is the responsibility of the Storefront Boilerplate and your application. The package includes:
API Layer: An auto-generated API and RPC methods for interacting with the SCAYLE engine.
This is used internally by the composables.
Composables: Methods for interacting with data like products, categories, etc.
Utilities: Functions for managing and interacting with shop data like product attributes.
In this SCAYLE Academy crash course, we explore the technical foundations of SCAYLE's storefront, focusing on key aspects such as Nuxt, server-side rendering, and the steps needed to launch your storefront application. By the end, you'll be equipped to create a seamless and optimized user experience.