This article has moved to a new home. View the updated version Tweak Library

Brands Menu

A list of brands that, when hovered over, provides users with a simple way to find branded products.

Industries

  • Fitness & Supplements
  • Health & Beauty
  • Alcohol
  • Music & Instruments
  • Sports & Recreation
  • Toys & Games
  • Animal & Petcare
  • Events & Party Supplies
  • Food & Beverages

Wireframe

Brands Menu

Coding Instructions

Step 1: Connect to your website via FTP

Step 2: Open up Header template

Locate the header template.html. This can be found in /httpdocs/assets/themes/skeletal/templates/headers/template.html. If using a different template, go into that template instead of the 'skeletal' template.

Open the template in your text editor. We suggest either Sublime Text or Atom. Add a [%list%] at line 77 which is after the opening ul with the classes nav navbar-nav.

Step 3: Add the Brands Menu code into template

Add the following code and save the template:

[%list type:'content' filter:'content_type=brand' limit:'6' sort:'sortorder'%]
    [%param *header%]
        <li class="dropdown dropdown-hover"><a >Brands <span class="caret"></span></a>
            <ul class="dropdown-menu">
    [%/param%]
    [%param *body%]
        <li> <a href="[@url@]">[@content_name@]</a></li>
    [%/param%]
    [%param *footer%]
            </ul>
        </li>
    [%/param%]
[%/list%]

The [%list%] dynamically generates a menu based on the content type you define in the filter parameter. 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 the menu. To set which brands to display, give them a sortorder higher then the rest of the brands and they will display instead of the other brands. Sortorder is editable in the backend 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, body, footer. The body 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>

We are using two B@se data tages here:

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

The header and footer param wrap around the body param. The header param opens an overall <li> with a title of Brands and then the <ul class="dropdown-menu> heads the body param. The body loops through the brands, and then the footer param is closing the <li> and <ul>.


Now it will show a list of featured brands at the start of the main navigation in the header of every page:


1 related articles found: