Loading...
Area: Optimizely B2B Commerce

Page templates in Classic

Recommended reading 

Overview

Page templates provide the basic structure of HTML used to render a page. The available templates are shared by all page types, with the exception of Header and Footer. They generally contain minimal HTML and DotLiquid, as the majority of the HTML is rendered by widgets and directives. Out of the box, almost all pages will use the "Standard" template shown below:

<div class="row main-row [[Model.CssClass]] [[Model.DynamicCssClass]]">
    <div class="medium-12 large-12 columns">
        [% zone 'Content' %]
    </div>
</div>

This contains some basic HTML and has page specific css classes injected. The model used to render the DotLiquid is a ContentItemModel for the corresponding page.

The Theme Configuration file may be used to modify the default template used for pages; otherwise, by page, a different template may be selected using the CMS.

Page templates exist at ~/Views/Pages/*.liquid

Header/Footer

The Header and Footer are special cases. They are treated like Pages in most of the site, but do not share templates with regular pages. They also ignore the DefaultPageTemplate.

Templates for these two pages exist at ~/Views/Pages/[Footer|Header]/*.liquid.

Upgrading

Existing Themes Without Page Templates

To maintain backwards compatibility for git themes - if a theme is loaded and it contains no page templates, then the page templates from the responsive theme will be automatically loaded into it at start up. These page templates will only exist in the database; the git theme itself is not modified.

If a git theme is then modified to include at least one page template, then those responsive page templates will be removed from the theme at start up. Therefore, it is important to add all required page templates to a git theme when it is being upgraded. Adding just a single new custom page template could result in a site that won't render properly.

Legacy Templates

There are a number of legacy page templates included in the Responsive theme. These templates ensure that a git theme can be upgraded without any changes required to the theme. The old razor page templates were almost all identical, but had a few variations that could cause issues without these legacy templates. For example, the Legacy-ContentDiv:

<div class="row main-row [[Model.CssClass]]">
    <div class="medium-12 large-12 columns">
        <div class="content">
            [% zone 'Content' %]
        </div>
    </div>
</div>

This variation was used by the ProductComparisonPage and included an extra div with a class of content. The Responsive theme had no styles specific to this div, so it could be safely removed; however, a cloud theme may have a style rule that expected it there:

.product-comparison .columns .content { color: pink; }

Because of this, the legacy templates were created and are used by any existing cloud sites. The pages that use legacy templates can be tested using the default template using CMS. If there are no issues, the change can be published and the legacy templates can be removed.

The following pages make use of legacy templates:

Page Template Notes for Switching to Standard Template
CheckoutAddressPage Legacy-MissingDiv  
ContentPage Legacy-ExtraDivs There may be many ContentPages in a site. About Us and Contact Us are two examples in the default site.
HomePage Legacy-ExtraDivs  
MyListDetailPage Legacy-UploadLibraries There are changes to insite.base-upload.ts that are required. The old page template loaded some JS libraries. The new version of insite.base-upload.ts now loads those libraries.
OrderConfirmationPage Legacy-MissingDiv  
OrderUploadPage Legacy-UploadLibraries There are changes to insite.base-upload.ts that are required. The old page template loaded some JS libraries. The new version of insite.base-upload.ts now loads those libraries.
ProductComparisonPage Legacy-ContentDiv  
QuickOrderPage Legacy-MissingDiv  
RequisitionConfirmationPage Legacy-MissingDiv  
ReviewAndPayPage Legacy-MissingDiv  
SiginInPage Legacy-SignIn There are changes in sign-in.scss that are required. Prior to these changes the a number of css rules expected a structure of .sign-in .main-row, they were modified to not require .main-row
TemplatePage Legacy-ExtraDivs
Do you find this information helpful? Please log in to provide feedback.

Last updated: Dec 11, 2020

Recommended reading