SXA Storefront

Accelerate the development and deployment of storefronts through the customization of your storefront solution. This section covers common developer tasks around the setup and configuration of SXA Storefront, how to customize renderings, as well as troubleshooting solutions.

Frontend development encompasses the following elements.

Front end development elements.

Backend development follows Helix principles and encompasses the following elements.

Backend development elements.

The feature layer of the SXA Storefront solution includes all the renderings required to build out a storefront site. These renderings are built as:

  • Scriban-only renderings (for example, the Order Lines rendering)

  • Scriban with Knockout binding (for example, the Product Bundle rendering)

  • Razor-only renderings (for example, the Login rendering)

  • Razor with Knockout binding (for example, the Product Inventory rendering)

For Scriban-only renderings, the HTML markup is in the Scriban template; however, you still require a Razor view with, at a minimum, code such as what is shown in the following example for the Product Price rendering.

<div @Html.Sxa().Component(Model.Rendering.RenderingCssClass ?? "cxa-productprice-component", Model.Attributes) data-cxa-component-class="ProductPrice" data-cxa-component-initialized="false" data-cxa-component-type="component">
    <div class="component-content">
        @if (Model.Item != null)
        {
            foreach (BaseVariantField variantField in Model.VariantFields)
            {
                @Html.RenderingVariants().RenderVariant(variantField, Model.Item, Model.RenderingWebEditingParams, Model)
            }
        }
    </div>
</div>

For a general overview of key topics for developers, see Getting started with Sitecore for developers.