• Home
• Designer Documentation
• Tweak Library
• Footer
• Featured Brands Menu

Featured Brands Menu

Your featured brands, offering another way to search for items.

Industries

• Fitness & Supplements

Wireframe

Coding Instructions

Step 1: Connect to the website via FTP

Step 2: Open the Footer template

Edit the footer file called template.html. This can be found in httpdocs/assets/themes/skeletal/templates/footers/template.html . If using a different template, go into that template instead of the 'skeletal' template.

Open the template using a text editor. We suggest either Sublime Text or Atom. Add a [%list%] at line 28, after the closing [%menu%] B@se tag but inside the div with the class row.

Before adding the B@se function, change one of the classes from the above [%menu%] div. On line 16, there is an opening HTML div tag with the classes col-xs-12 and col-sm-4. Change col-sm-4 to col-sm-3 to add another column for the Feature Brands Menu.

Step 3: Add Brand Menu Code into template

[%list type:'content' filter:'content_type=brand'  sortby:'sortorder, name' limit:'6'%]
    [%param header%]
        <div class="col-xs-12 col-sm-3">
            <h4>Featured Brands</h4>
            <ul class="nav nav-pills nav-stacked">
    [%/param%]
    [%param *body%]
        <li><a href="[@url@]">[@content_name@]</a></li>
    [%/param%]
    [%param footer%]
            </ul>
        </div>
    [%/param%]
[%/list%]

The [%list%] dynamically generates a menu based on the content type defined in the parameters. The following parameters are used in this [%list%]:

• type : The content type you'd like to target for the menu.
• filter: Filters the list to a specific content type.
• sort : The sort order for the pages in your menu. To set which brands we want to display, give them a sortorder higher then the rest of the brands and they will display instead of the other brands. Sortorder may be edited in the back-end of the brand page in the cPanel.
• limit : Sets a limit of items generated in the menu.

Inside the [%list%] there are three [%params%]: header, level_1, footer. The level_1 param loops through every item that matches the parameters defined at the top of the [%list%] and gives the defined html markup:

<li><a href="[@url@]">[@content_name@]</a></li>

Two B@se data tags are used here:

• [@url@] : URL to the contents page.
• [@content_name@] : The name of the content.

The header and footer param wrap around the level_1 param. The header param is opening a <div class="col-xs-12 col-sm-3"> with a title and opens a <ul>. The level_1 is looping through the brands, and the footer param is closing the <ul> and the main col-xs-12 div.

Now a list of featured brands will show within the footer: