Customize your menu

Customize your menu

The menu part of your productlist can be fully customized if needed. The default templates implement this menu with the default myshop extension: myshop-block:menu-default. This menu is the default myshop menu and cannot be customised extensively.

This page will show you how to build the look and feel of your own menu using the following myshop extensions:

• myshop-has:menu
• myshop-block:menu
• myshop-is-menupart:items
• myshop-label:item-header-level-n
• myshop-repeat:menuitems-level-n
• myshop-is-active:menu-item
• myshop-not-is-active:menu-item
• myshop-label:menu-item
• myshop-action:menu-item

The best way to show how these extensions can be used to create a customized menu is by showing an example of one.

Example

The Example below show howto implement a customized menu in a productlist template.

<table width="100%" cellpadding="0" cellspacing="0" border="1">
        <tr>
                <td valign="top" width="10%" style="myshop-has:menu">
                        <table style="myshop-block:menu" border="0">
                                <tr style="myshop-is-menupart:items">
                                        <td valign="top">
                                                <table>
                                                        <tr>
                                                                <td style="myshop-label:item-header-level-1">header level 1</td>
                                                        </tr>
                                                        <tr style="myshop-repeat:menu-items-level-1">
                                                                <td nowrap="nowrap">
                                                                        <span style="myshop-is-active:menu-item">
                                                                                <span style="myshop-label:menu-item;font-weight:bold"/>
                                                                        </span>
                                                                        <span style="myshop-not-is-active:menu-item">
                                                                                <a style="myshop-action:menu-item">
                                                                                        <span style="myshop-label:menu-item"/>
                                                                                </a>
                                                                        </span>
                                                                </td>
                                                        </tr>
                                                </table>
                                        </td>
                                </tr>
                        </table>
                </td>
                <td>
                        <!-- insert your productlist here -->
                </td>
        </tr>
</table>

The following lines of this example are important for the customized menu:

• Line 3 – This line checks if the menu is activated in the productlist settings using myshop-has:menu
• Line 4 – The menu block starts with myshop-block:menu
• Line 5 – myshop-is-menupart:items checks if there is a items part in the menu (there can also be other parts like a shopping cart content block)
• Line 9 – On this line the header label of level 1 of the menu is shown. The value of this label will be the name of the column you defined for the level 1 menu items.
• Line 13 – This line initiates a loop through all the menu items in level 1. All code within this tag (a tr tag) will be repeated for each item within the given level (level 1).
• Line 15 – myshop-is-active:menu-item checks if the current item (from the loop on Line 13) is the active item.
• Line 16 – Displays the item label using myshop-label:menu-item.
• Line 18 – This line checks for the exact opposite of line 15. myshop-not-is-active:menu-item will be true when the current item is not active.
• Line 19 – Creates a clickable label for the item with myshop-action:menu-item (for the click action) and myshop-label:menu-item (to display the label).

The code on lines 9 and 13-19 can be repeated for each level you have selected in you productlist settings (each level is a selected column in the menu settings).