What is the Storefront Application?

The storefront application is the web application that runs your site. As shoppers interact with your site, the storefront application interfaces with your theme files and with the Kibo eCommerce API to respond to specific requests. The following table provides a brief summary of the major components of the storefront application:

Component Description
Routing engine

Handles routes to Kibo eCommerce resources, such as obtaining the login page when the www.yourSite.com/user/login URL is requested.

In addition, interfaces with the Kibo eCommerce API and with Admin to gather tenant settings, catalog information, model data for the theme, manage authentication and shopper sessions, serve resources like images, scripts, and stylesheets, execute operations on CMS documents, and interface with order data, among other examples.

Custom routing In addition to the default Kibo eCommerce routes, the storefront application executes user-defined custom routes on your site.
Hypr templating engine Accesses theme files and renders Hypr templates.
Resource pipeline Processes resources for use on your site. Namely:
  • Transforms LESS files into CSS.
  • Enables image manipulation functionality so that images can be resized, cropped, compressed, etc.
  • Executes compiled or uncompiled versions of files in accordance to debug mode settings.

The Storefront At Work

The following is a simplified summary of how the storefront application works, meant to give you a basic idea of how it keeps your site up and running:

  1. A shopper clicks the My Account link on your site.
  2. The routing engine obtains the correct resource for the shopper.
  3. The routing engine checks whether the shopper is logged in.
  4. The routing engine obtains necessary data from the API or Admin.
  5. The Hypr templating engine obtains the template for the page.
  6. The routing engine provides required data to the Hypr model.
  7. The Hypr templating engine renders the template.
  8. The resource pipeline creates CSS, manipulates images, and compiles scripts as needed.
  9. The routing engine serves the My Account page to the shopper's browser.
  10. If applicable, the routing engine responds to additional shopper actions, rendering new data requested through JavaScript on the shopper's browser.