Storefront

• Repository Link

The Storefront component, conceptually like the Administration sits on top of the Core. Contrary to the Administration the Storefront is a SalesChannel and executes in the same process as the Core. It is architecturally in part a Backend for Frontends and a classical PHP application with HTML rendering, JavaScript enhancements (along the lines of graceful degragation) and SASS styling as an extension of the Bootstrap Framework.

Building Blocks

The Storefront's main concerns are:

Page and pagelets

(Page,

Pagelet)

Contrary to API calls that result in single resource data, a whole page in Storefront displays multiple different data sets on a single page.

Mapping Requests to the Core

(Pagecontroller,

PageletController)

The Storefront uses the SalesChannel API internally and forwards possibly slightly changed requests to the core.

Rendering templates

(page templates)

Contrary to the core that can almost completely omit templating in favor JSON responses, the Storefront contains a rich set of Twig templates to display a fully functional shop.

Theming (styles)

The Storefront not only contains static templates but also inhibits a theming engine to modify the rendered templates or change the default layout programmatically.

These concerns are mapped to a Web-MVC structure:

The Core in this case acts as if it was the domain model wrapping all the sales channel logic. The Page and Pagelet represent the read model, the PageController and PageletController work directly on core services and are the write model.

The Template

Contrary to the core that just contains PHP logic the Storefront template represents a vast part of the functionality of the component. It is worth looking a little deeper into the /Resources directory to gain a better understanding how the Storefront works. When opening the directory you find these subfolders.

<platform/src/Storefront/Resources>
└── app
    └── administration
    └── storefront
        └── build
        └── dist
        └── src
        └── test
└── build
└── config
└── src
    └── script
    └── style
└── snippets
└── views
└── .browserlistrc
└── .gitignore
└── theme.json

The Storefront template is based on the Bootstrap toolkit and therefore fully skinable.