'Expert' mode

Return to Introduction  Previous page  Next page

When you switch to 'Expert' mode, several changes happen throughout.

Keynames are displayed next to the option names in the Scheme Manager as well as on the module configuration page. These are the expressions in brackets, which are used to call this option in the templates. For example, "Show categories icons [cat_icons]". Here [cat_icons] is the keyname.
You are able to modify every available option: change its description, keyname and option type. There are three available option types for each option: text box, select box and check box.
You are able to add options. To add a user-defined option complete the required fields and click 'Add option' below.

LC-FC-06

The following fields need to be completed:

Keyname: enter a name you want the template to use to call this option. The keyname must be unique!
Option type: select 'Text box', 'Select box' or 'Check box'. If you choose 'Select box', a field 'Option points' appears where you specify the option points to select from. Each option point must go on its own line.

For example, for the option 'Drop direction' there are two option points to select from - 'right' and 'left'.

Option description: enter a short description for the option.

For example, "Show categories icons [cat_icons]". Here 'Show categories icons' is the option description.

You are able to use the keyname to call your options in the templates. You need to know PHP and Flexy to create and use new options. Here are the steps you need to perform to reflect your option value in the customer zone:

1. Create an option

2. Click 'Browse' next to the 'Templates location' field and click on the necessary template name. There are three templates in each Flyout Categories template directory:

categories.tpl is a necessary template you will not need to change.

cat_template.tpl provides for the appearance and logic of operation of the main categories menu

scat_template.tpl provides for the appearance and logic of operation of the subcategory menus

3. Edit the template.

The syntax of a condition is as follows:

{if:data.scheme.options.color.value=#blue#}

...

{end:}

 

where

data.scheme.options is a prefix common for all the Flyout Categories options,

color is a keyname,

value=#blue# is the option value. If the option is a check box, you do not need the '=#blue#' part as there are only two possible values: true and false.

{else:} and {end:} are used to close or alternate If statements.

4. Save the modifications or click 'Cancel' to discard the changes you have made.

5. Select the necessary option value on the Flyout Categories module configuration page.

Example

For example, you want to show root categories icons if the Horizontal Menu scheme is active, but there is no such an option. Here is what you need to do:

1. As Horizontal Menu is a predefined scheme, it cannot be edited, so you need to clone it first. Click 'Clone' next to Horizontal Menu scheme name in the Scheme Manager.

2. Click 'Edit' next to your new scheme name. Switch to 'Expert' mode if you have not done it yet.

3. Create an option. For example:

keyname - rootcat_icons

type - check box

option description - Show icons for root categories

4. Click 'Browse' next to the 'Template location' field. Click on cat_template.tpl.

5. Modify the code.

note

This code assumes that your images are stored in the database, not on the file system.

Replace this part:

<div id="menu_{item.category.category_id}" style="position: relative; left: 0; top: 0;" onMouseOver="javascript:hideMenu(); show_menu('submenu_{item.category.category_id}','rootmenu','menu_{item.category.category_id}'); cancelCloseMenu(); " OnMouseOut="javascript: initiateHideMenu();">

</div>

with the following:

{if:data.scheme.options.rootcat_icons.value}

<table border=0 cellpadding=0 cellspacing=0><tr><td valign=top><img src="{item.image_url}" width="16" align=absmiddle border=0 class=CatImageBorderOut></td><td valign=top>

{end:}

              <div id="menu_{item.category.category_id}" style="position: relative; left: 0; top: 0;" onMouseOver="javascript:hideMenu();show_menu('submenu_{item.category.category_id}','rootmenu','menu_{item.category.category_id}'); cancelCloseMenu();" OnMouseOut="javascript: initiateHideMenu();">

              </div>

{if:data.scheme.options.rootcat_icons.value}

</td></tr></table>

{end:}

 

6. Save the modifications and select the corresponding check box on the Flyout Categories module configuration page.