Storefront
General
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.
Benefits
- 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
.envfiles. - 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.
Architecture
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.
.png)
Storefront Core solution overview
Headless Storefront
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.
.png)
Components of Storefront Core.
Getting Started
To learn more about how to get started with the Storefront Boilerplate, head over to the Storefront Guide.
Further education - SCAYLE Academy
