With the Responsive Starter Store 3.0.0 - corresponding to Intershop Commerce Management 22.214.171.124 - the default way of including the storefront styling and the inclusion of an optional branding package has been changed. This change was necessary to provide an automatic cache busting for the CSS that comes from the deployed cartridges. CSS files that are changed via changing the branding package were already taking care of the cache busting via changed
If the automatic cache busting is not important or if the higher flexibility regarding the styling changes via branding packages is important then the CSS styles inclusion without automatic cache busting is still valid and possible in the Responsive Starter Store 3.0 and no migration is necessary.
The Responsive Starter Store in its original version (1.0) introduced the inclusion of the storefront styling with only one reference to the theme.css. The automatic generation from Less already takes care of combining and minifying the resulting theme.css. Even the optional usage of a branding package is handled with this one stylesheet reference.
<iscontent type="text/html" charset="UTF-8" compact="true"> <!--- Branding package hook ---> <link rel="stylesheet" type="text/css" media="all" href="<isinclude url="#URL(Action('IncludeBranding-Resource'), Parameter('Resource_Name','/css/theme.css'))#">"/>
A branding package for this way of referencing the theme.css needs to have the following structure in the uploaded branding.zip file.
| +---css | theme.css +---img logo.png firstname.lastname@example.org logoEmail.png
The content of the theme.css in such a branding package can be as simple as in the demo branding packages (e.g., branding-inTRONICS.zip).
@import the default theme.css of the deployed cartridges is used.
Including the theme.css in the branding package structure allows to add additional styling to the default styling, but also makes it possible to completely replace the styling from the cartridges' theme.css by using a modified theme.css that is not importing the styling information of the cartridges at all. This way of including the storefront styling provides the most flexible customization options.
A shortcoming of this way of including the default theme.css that it cannot take care of automatic cache busting via a last modified date. This made it necessary to change the way of including the default theme.css and optional branding styles.
Beginning with the Responsive Starter Store 3.0 the default was changed as can be seen in the BaseCSS.isml listing below.
<iscontent type="text/html" charset="UTF-8" compact="true"> <!--- include the default theme.css generated from Less with a lastModified time stamp for automatic cache busting ---> <isfilebundle name="/css/theme.min.css" processors="CSSCompressor,CSSURLRewriter"> <isrender><link rel="stylesheet" type="text/css" media="all" href="#webRoot().'/'.encodeValue(File:Name).'?lastModified='#<isprint value="#File:LastModified#" formatter="0">"/></isrender> <isfile name="/css/theme.css"/> </isfilebundle> <!--- include an additional branding.css if a branding package is installed ---> <isinclude url="#URL(Action('IncludeBranding-StyleSheetHook'), Parameter('Hook_StyleSheet_Name','branding.css'))#"> <!--- Use this way of referencing the theme.css instead of the activated inclusions if the branding package should be able to completely replace the theme.css instead of adding to it. This way does not provide automatic cache busting for the theme.css. ---> <!--- <link rel="stylesheet" type="text/css" media="all" href="<isinclude url="#URL(Action('IncludeBranding-Resource'), Parameter('Resource_Name','/css/theme.css'))#">"/> --->
The Less generated theme.css is now included via
<isfilebundle> that provides means of determining the
LastModified date of the current file. This date can be used to generate a distinct reference to the CSS file that will change whenever the file is changed. These different references will then ensure to the automatic cache busting for the theme.css.
With this way of including the default styling it is necessary to include the branding styles separately in the branding.css. For this reason the branding package structure needed to be changed too.
| | branding.css | +---img logo.png email@example.com logoEmail.png
The separate branding.css allows for adding styles to the default styling of the storefront cartridges. A complete replacement of the default styling is not possible with this referencing.
For convenience reasons the original styling inclusion was kept in ISML comments and can still be used. If doing so, this requires the former branding package structure and results in the shortcoming regarding the automatic cache busting for the theme.css.
The information provided in the Knowledge Base may not be applicable to all systems and situations. Intershop Communications will not be liable to any party for any direct or indirect damages resulting from the use of the Customer Support section of the Intershop Corporate Web site, including, without limitation, any lost profits, business interruption, loss of programs or other data on your information handling system.