Bootstrap Layout

Modified on Fri, Feb 9, 2018 at 9:50 AM

Master Content

The Master content is displayed on all pages (except the Default page, see Public Master content). It usually contains the main navigation, banner, cart information as well as the place holder to show the various pages in. {Body} keyword is replaced by the specific page content that is why it is added arbitrarily if not found.

Content Type:

HTML tags

Allowed Keywords:

{Body}            * Required

{Menu}         See below for more details.
{Banner}

{CompanyName}

{CompanyUniqueID}

{CurrentUrl}

{CatalogueVertical} or {CatalogueHorizontal}

{Culture}

{Culture: en-gb;fr-fr}

{PageTitle}   Displays Title of the Page if Defined

{Progress}

{Cart}

{CartSummary}

{FooterHtml}     

{FooterLeft}

{FooterRight}

{Search}       * Use once only

 

Browse Products

The Browse Products content is used when displaying the catalogue pages only. It shows a list of products as designed in Item Template and Alternate Item Template.

{Filter} is used for special case when the product categories are to be controlled by the user and not follow the catalogue structure of ePower. Although the catalogue is used to enter the information but displaying it is the duty of the user. Filter Tag content can be used to automate part of the action.

Content Type:

HTML tags

Allowed Keywords:

{Products}       * Required

{Folders}        Catalogue Categories
{Notes}           Catalogue Category (Node) Description

{CatalogueVertical} or {CatalogueHorizontal}

{CatalogueMsg}

{ProductsLabel}

{Cart}

{CartSummary}

{Search}       * Use once only

{Filter}          * For Category Filter Mode

Filter Tag

Content Type:

HTML tags

Allowed Keywords:

{CategoryName}

{Cartegory}

The template is left blank if the default application filtering is preferred otherwise it will be duplicated as many times as there are valid categories. Valid categories are ones that have no groups or have groups that the user is part of.

{Category} is replaced by the name but with the spaces converted to dashes to make it useable as a class name if the code requires it. See below in Filter Tag.

Item Template

This template is duplicated as many times as products if the alternate template does not exists or alternates with the Alternate Item Template.

Content Type:

HTML tags

Allowed Keywords:

{ ProductName}

{SKU}
{Thumbnail1}  – Small product thumbnail

{Thumbnail2}  –  Large product thumbnail

{Thumbnail}  * Same as {Thumbnail1}

{ProductImage} – Actual Image uploaded for the product

{Description} – Product Description

{Price}

{RunUrl} – Url to load the product page

{Inventory} – Quantity of product left

{ButtonText} – Label of Order Button (culture aware)

{PriceLabel} – Label of Price Text (culture aware)

{InventoryLabel} – Label of Inventory Text (culture aware)

Alternate Item Template

Same as Item Template

Meta Tags

The contents will go into the HTML head area, after loading jQuery and Bootstrap. Link, Style and Script tags are allowed.

Script Tags

The contents will go at the end of the body tag; after loading all required files (usually js) and html tags. Script tags are allowed. It is a good place to run jQuery Ready function.

Public Master

 

The content of the Public Master is used to display pages where users have not logged in yet. This is usually the Default page with the login form. It is also used in the Forgot password/username pages.

Content Type:

HTML tags

Allowed Keywords:

{Body}            * Required

{Banner}

{CompanyName}

{CompanyUniqueID}

{Culture}

{Culture: en-gb;fr-fr}

{CurrentUrl}

{FooterHtml}     

{FooterLeft}

{FooterRight}

 

Custom CSS

Content Type:

CSS Code

Allowed Keywords:

none

Add CSS code as required by the company to style the site.

 

SAMPLE

Example

Public Master

<!-- Master Page Container -->

<div id="ep-master" class="container">

    <!-- Master Page Header -->

    <div class="row ep-master-header">

        {Menu}        Replaced with predefined menu

    </div>

    <!-- Banner Div -->

    <div class="row hidden-xs ep-master-banner">

        {Banner}    Replaced with company banner

    </div>   

    <div class="row ep-master-body">

        <!-- Body Div - Main Contents -->

        {Body}       Replaced with contents of current page

    </div>

    <!-- Footer -->

    <footer class="row footer ep-master-footer">

        <div class="col-md-6">

            {FooterLeft}

        </div>

        <div class="col-md-6 text-right">

            {FooterRight}

        </div>

        <div class="row hidden-xs ep-master-footer">

             {FooterHtml}

        </div>          

    </footer>

</div>

 

Browse Products Contents goes into the {Body} keyword of the master content

<div class="row">

    <div class="col-md-12">

        <div class="col-md-12">

            <div class="col-md-9"></div>

            <div class="col-md-3">

{Search}    Replaced with default Search Form

            </div>      

        </div>

        <div class="col-md-12 text-center">

            {Folders}   Replaced with ePower catalogue entries

        </div>

        <div class="col-md-12 text-center">

            {Notes}   Replaced with catalogue notes

        </div>

        <div class="col-md-12">

                    {Products}  Replaced with one Item Template or Alternate Item Template per product

        </div>

     </div><!-- col-md-12 -->

</div><!-- row -->

 

Item Template

<div class="col-md-4 ep-product-item" style="height: 290px;">

    <div class="thumbnail">

        <img src="{Thumbnail}" alt="{ProductName}" data-toggle="tooltip"

        data-placement="auto" data-html="true" title="{Description}" style="height: 150px;" />

        <div>

            <p  style="height: 40px; overflow: hidden;">

                <Label>{ProductName}</Label>

            </p>

            <p>{PriceLabel} {Price}</p>

            <p>{InventoryLabel} {Inventory}</p>

            <p class="text-center"><a href="{RunUrl}" class="btn btn-primary" role="button">{ButtonText}</a></p>

        </div>

    </div>

</div>

 


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article