docs
  1. SCAYLE Resource Center
  2. Developer Guide
  3. Getting Started
  4. What is Storefront?

What is Storefront?

About Storefront Boilerplate

Storefront Boilerplate 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 build a best-in-class shop frontend. The latest version of Storefront Boilerplate is based on Nuxt and Vue 3 and consists of two parts:

  • Storefront Core (SFC): the headless storefront that provides design-agnostic business logic and integrations with the SCAYLE backend.
  • Storefront Boilerplate (SFB): the complete starter Nuxt application which includes the Storefront Core along with all features and pages that are required for a modern e-commerce frontend.

The Storefront Boilerplate 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
    • Integration with a headless CMS for managing content
  • Reusability/Scaling: modular features, which 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.

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.

Storefront Core solution overview.

Headless Storefront

The Storefront Core is a headless solution. It is an NPM package that is registered as a module inside a Nuxt application. It provides additional functionality functions 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.

Components of Storefront Core.

Browser support

Since Storefront Boilerplate is built using the Nuxt framework, we follow the same guidelines defined by Nuxt for browser support:

  • Nuxt 3 officially supports evergreen browsers only.
  • The core browser set targets the 2 most recent major versions of Chrome, Firefox, and Edge on a monthly basis and Safari on a yearly basis.

Further education - SCAYLE Academy

Previous
Getting Started
Next up
Setup your Storefront