Introduction

With Intershop Commerce Suite 7.6 a new customization approach for the storefront is introduced.

The storefront cartridges are no longer part of a projects base assembly (commerce_management_b2c or commerce_management_b2x). They now completely belong to the projects component set. This way it is necessary for the projects to get the storefront cartridges as source cartridges.

For this Intershop introduced the Responsive Starter Store. This blue print is a good starting point for customer projects. It consists of a working component set of storefront cartridges and demo cartridges and of two assemblies, one for B2C and one for B2X scenarios.

The Responsive Starter Store replaces our PrimeTech Reference Site with the new inSPIRED demo organization and completely reworked storefront cartridges that provide a new responsive storefront styling.

The inSPIRED organization structure of the Responsive Starter Store:

Screenshots

The homepage of the Responsive Starter Stores B2C demo channel - inTRONICS - in basically three different view sizes.

Benefits

For Development

With the introduction of the Responsive Starter Store the projects get all the different options to customize the storefront of the project. They are no longer limited to building their changes on top of a fixed set provided by Intershop or creating a completely own storefront. By providing the storefront sources it is now possible within the project to work with the provided functionality and change it in pretty much the same way as Intershop developers can when developing the storefront functionality.

With the provided sources it is now also possible to work with the included Content Model and completely fit it to the projects needs. Content Model artifacts can now be removed, added or changed in the „original“ cartridges. There is no need to work with overrides any more, even though this functionality is still working as before. In addition any project specific functionality that hides unwanted content artifacts (black listing/white listing) is no longer needed since those artifacts can easily be removed in the sources.

For pipelines and ISML templates it is now possible too to directly make the changes in the original without the need to use the overloading mechanism, even though it might still be good practice for project specific customizations.

For Migration

With the new customization approach the project cartridges set - that might include the storefront cartridges of the Responsive Starter Store - is supposed to work as is on following Intershop versions. Only adaptions regarding actual API changes - that should be communicated - might be needed.

With the Responsive Starter Store, Intershop does not automatically update this part of the storefront cartridges when updating to a new Intershop version. Only the base assembly (commerce_management_b2c or commerce_management_b2x) is updated through Gradle but all the other parts are project code. This way it is up to a projects responsibility to do updates/migrations.

Any storefront updates come as a new blue print, e.g., a new version of the Responsive Starter Store. In which way this updated blue print is used to update the projects sources is up to the projects.

Content

The Responsive Starter Stores component set (a_responsive) basically contains the storefront cartridges that contain the storefronts “View Layer” and the Content Model. These cartridges can be copied and used in the projects component set to provide the standard storefront functionality. In addition, demo cartridges are provided that set up the inSPIRED demo organization with its channels and applications. Those demo cartridges can be used as starting point by the projects to base their initialization cartridges on.

Cartridge overview of the Responsive Starter Store component set:

Besides the component set the Responsive Starter Store also provides two assemblies as project blue prints, one for B2C (inspired-b2c) and one for B2X (inspired-b2x).

The Recipe: Set Up Project Based on the Responsive Starter Store describes in detail how the content of the Responsive Starter Store can be used as base for a customer project.

Used Technology

Bootstrap

The storefront of the Responsive Starter Store is based on Bootstrap, a HTML, CSS and JS framework for developing responsive projects on the web (used version at time of development 3.3.5).

Bootstrap includes a responsive grid system that by default appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts. The storefront of the Responsive Starter Store uses this 12 column grid system as defined in Bootstrap. No changes were made. Therefore, the Bootstrap documentation can be used as reference for working with the Responsive Starter Store (English documentation, German documentation). All the described CSS classes should be usable within the Responsive Starter Store.

Besides the grid system several Bootstrap components and its Javascript components are used throughout the storefront like Modal, Carousel, Popover, Collapse. Any other Bootstrap components should be usable too since the complete Bootstrap framework is included in the Responsive Starter Store.

Less

With the integration of Bootstrap its underlying default CSS preprocessor - Less - was integrated in the Responsive Starter Store too.

For a convenient Less development environment a Less editor was integrated into Intershop Studio and a Less compiler was added as Gradle task.

For further information on how to work with Less in the Responsive Starter Store read the Cookbook - Storefront Less Integration.

BootstrapValidator

For the client side form validation the BootstrapValidator in version 0.5.0 is used. This version was used even though a newer version exists, since this older version is licensed under the MIT License. A documentation for version 0.5.2 can be found here. The current development version is called FormValidation but it no longer uses such an open licensing model. For documentation you can still refer to their web site but be aware of the necessary translations or newer features.

Slick Carousel

For product lists the fully responsive, swipe enabled, desktop mouse dragging, infinite looping, fully accessible with arrow key navigation slick carousel was integrated.

Fonts

As default font families for the Responsive Starter Store Roboto and Roboto Condensed is used.