ProNav‎ > ‎

ProNav Static Block Examples

The following examples shows static block implementations of the drop down, based on the examples in our demo store at http://demo.brandammo.co.uk


+ ADDING A PRONAV STATIC BLOCK:

1. To create the drop down part of your ProNav, access the ‘Static Blocks’ section (CMS > Static Blocks).


2. Click ‘Add New Block’ button to create a new static block.


3. Enter the your preference for each row.

IMPORTANT: You should always prefix the 'Block Title' & 'Identifier' with the ‘pronav’. This is required for a static block to show up in ‘Static Block’ select set, when creating your ProNav item.

  • Block Title
  • Identifier: A unique string to identify the new block.
  • Status: Enabled/Disabled.
  • Content: HTML for static block. Check below for default structure to use.

4. You can now go back to your ProNav Items (CMS > ProNav), and choose and select your ProNav Item, and under the static block drop down, it will display the list of compatible static blocks. Choose the new static block you have just created.



+ PRONAV STATIC BLOCK STRUCTURE:

The basic structure of ProNav is defined by rows and columns, rows are represented by divisions (div) calling on the class row, and columns are defined with UL's. The LI's can be represented as the navigation items. Please see examples below.



The below will output a single row with 2 columns:

<div class="row">
    <ul>
        <li></li>
    </ul>
    <ul>
        <li></li>
    </ul>
</div>



The below will output a single row with 4 columns:

<div class="row">
    <ul>
        <li></li>
    </ul>
    <ul>
        <li></li>
    </ul>
    <ul>
        <li></li>
    </ul>
    <ul>
        <li></li>
    </ul>
</div>



The below will output 2 rows with 4 columns in each:

<div class="row">
    <ul>
        <li></li>
    </ul>
    <ul>
        <li></li>
    </ul>
    <ul>
        <li></li>
    </ul>
    <ul>
        <li></li>
    </ul>
</div>

<div class="row">
    <ul>
        <li></li>
    </ul>
    <ul>
        <li></li>
    </ul>
    <ul>
        <li></li>
    </ul>
    <ul>
        <li></li>
    </ul>
</div>



Taking the example; single row with 2 columns, we can add links into the columns, the below shows 1 link in each column:

<div class="row">
    <ul>
        <li><a href="your-product-url">Your Product Name</a></li>
    </ul>
    <ul>
        <li><a href="your-category-url">Your Category Name</a></li>
    </ul>
</div>

You can also use ProNav widgets to generate category listings for you, or manually add them in; like the above example for a more customised menu.

You can place promos into these columns as well, see some more examples below.



+ GENERIC DROPDOWN WITH PROMOS:

This example references the "Dropdown with Promos" (1 Row x 4 Cols) featured in our demo store at: http://demo.brandammo.co.uk

The Pre-installed themes already supports this style of drop down, you may duplicate the css file and modify it if you like if you are using your own css.

Create a static block and use the code below as a starting point...

<!-- COPY FROM BELOW THIS LINE -->
<div class="row">
    <ul>{{widget type="pronav/category_widget_subcategories_list" levels="4columns="1" template="pronav/items/widget/link/subcategories/list.phtml" id_path="category/18"}}</ul>
    <ul>{{widget type="pronav/category_widget_subcategories_list" levels="4columns="1" template="pronav/items/widget/link/subcategories/list.phtml" id_path="category/15"}}</ul>
    <ul>{{widget type="pronav/category_widget_subcategories_list" levels="4columns="1" template="pronav/items/widget/link/subcategories/list.phtml" id_path="category/12"}}</ul>
    <ul class="ul-promo">
        <li>
            <div class="promo-container">
                <div class="promo-large"><iframe width="280" height="158" src="http://www.youtube.com/embed/iCkYw3cRwLo?rel=0" frameborder="0" allowfullscreen></iframe></div>
                <div class="promo-small left-promo"><a href="#small-promo"><img src="{{media url="wysiwyg//promos/sample-promo-small.jpg"}}" alt="" width="135" height="112" /></a></div>
                <div class="promo-small right-promo"><a href="#small-promo"><img src="{{media url="wysiwyg//promos/sample-promo-small-2.jpg"}}" alt="" width="135" height="112" /></a></div>
            </div>
        </li>
    </ul>
</div>
<!-- STOP COPYING ABOVE THIS LINE -->

You can modify the code (highlighted in red) to match the attributes relating to your store.
href="#small-promo", you can replace this with a link to your promotional offer.
levels="4", relate to deepness of sub categories, in this example, it will pull out up to 3 sub categories, excluding the root category.
category/12, defines the category id to be outputted, in this example, it is 12.



+ DROPDOWN WITH CATALOG:

This example references the "Dropdown with Catalog" featured in our demo store at: http://demo.brandammo.co.uk

The Pre-installed themes already supports this style of drop down, you may duplicate the css file and modify it if you like if you are using your own css.

Make sure you add the ID category-products to the pronav list-item-id that you want to attach the form to.

Create a static block and use the code below as a starting point...

<!-- COPY FROM BELOW THIS LINE -->
<div class="row">
    <ul>
        <li>
            {{block type="catalog/product_list" name="home.catalog.product.list" column_count="5" template="catalog/product/list-pronav.phtml" category_id="20"}}
        </li>
    </ul>
</div>
<!-- STOP COPYING ABOVE THIS LINE -->

You can modify the code (highlighted in red) to match the attributes relating to your store.
name="home.catalog.product.list", name this block relevant to your store.
column_count="5", number of columns your category should be divided by, in this example, 5 products per row.
template="catalog/product/list-pronav.phtml", should you ever need to modify the appearance of this category, we have already set this up to use its own template file.
category_id="20", defines the category id to be outputted, in this example, it is 20.



+ DROPDOWN WITH FORM:

This example references the "Dropdown with Form" featured in our demo store at: http://demo.brandammo.co.uk

The Pre-installed themes already supports this style of drop down, you may duplicate the css file and modify it if you like if you are using your own css.

Make sure you add the ID account-login to the pronav list-item-id that you want to attach the form to.

Create a static block and use the code below as a starting point...

<!-- COPY FROM BELOW THIS LINE -->
<div class="row">
    <ul>
        <li>{{block type="customer/form_login" name="customer_form_login" template="customer/form/login-pronav.phtml" }}</li>
    </ul>
</div>
<!-- STOP COPYING ABOVE THIS LINE -->

template="customer/form/login-pronav.phtml", should you ever need to modify the appearance of this form, we have already set this up to use its own template file.
Comments