LiteCommerce:FlyoutCategories - Revision history

Dohtur at 09:01, 31 May 2012

2012-05-31T09:01:40Z

Ivka at 05:46, 16 September 2010

2010-09-16T05:46:38Z

Ivka at 06:48, 12 February 2010

2010-02-12T06:48:49Z

Ivka at 06:47, 12 February 2010

2010-02-12T06:47:22Z

Ivka at 06:45, 12 February 2010

2010-02-12T06:45:09Z

Show changes

Ivka: Created page with 'The LiteCommerce '''Flyout Categories''' add-on module lets you control the visual presentation of your categories structure. You can select from several layout schemes available…'

2010-02-12T05:47:45Z

Created page with 'The LiteCommerce '''Flyout Categories''' add-on module lets you control the visual presentation of your categories structure. You can select from several layout schemes available…'

New page

The LiteCommerce '''Flyout Categories''' add-on module lets you control the visual presentation of your categories structure. You can select from several layout schemes available in different color variations or create your own templates.

'''Flyout Categories''' enhances LiteCommerce navigation system by introducing several new styles of categories menu, and makes browsing categories convenient for your customers. The module enables you to use four major menu styles: a horizontal menu, tree-style menu (Explorer), menu with buttons (Candy) and menu with icons (Icons). Each of the major menu styles includes several variants of menu design. You are welcome to use one of the pre-designed image sets bundled with the module or create images of your own. Skin based architecture allows you to create a unique design for your menus without modifying any PHP code.

== Configuring the module ==

After you have successfully installed the LiteCommerce '''Flyout Categories''' add-on module, click on the '''Flyout Categories''' module name in the list of installed modules to enter the module configuration page.

=== Basic settings ===

'''Selected scheme: '''select one of predefined layout schemes. When the module is first installed none of the schemes is selected.

[[Image:lc-fc-15.gif|center|LC-FC-15]]

'''Automatically rebuild category menu layout: '''select this check box so that each time you modify a category the category pages are updated and rebuilt automatically.

Leave the check box empty if you would like to be able to control when your category pages are rebuilt. When you modify a category and click ''''Update'''' you see a message "Category structure has been changed" and a link 'Rebuild category menu layout'. Click on this link to reflect the new category structure in the layout.

{{Note1|You might want to turn off the automatic category menu rebuilding feature when you do a bulk update of your category structure, to save time. After you are done with modifying categories, do not forget to click on the 'Rebuild category menu layout' link to reflect the changes in your category menu.}}

'''Force JavaScript in the layout engine:''' Select the check box to insert just the calls to JavaScript files into your store pages source code. Leave this checkbox empty to insert the HTML code of the category menu.

{{Note1|It is a good idea to switch this option off when you modify the templates to make it easier to trace possible mistakes in code.}}

Click ''''Update and rebuild layout'''' to apply the new settings.

=== Small icons ===

Small icons are used in the categories menu for some of the layout schemes.

[[Image:lc-fc-16.png|center]]

The following options are set on the '''Flyout Categories''' module configuration page:

'''Small category icon width: '''select the width of 16, 32 or 64 pixels. This is the size of the icon image which will be stored in the database. It might be a good idea to set the 64 pixels width here to store a larger image. Then you can set the icon width of 32 or 16 pixels in the options for the specific layout scheme.

'''Small category icon resize quality: '''the category icon image will be resized preserving normal, good or best quality. Please pay attention to the resulting file size as the images with best quality tend to be larger.

If the '''Flyout Categories''' module is enabled when you modify a category, one more option appears below the category icon selection option: category small icon selection.

[[Image:lc-fc-17.gif|center|<br> Category modification page]]

Select the 'Generate "Small Icon" from category "Icon"' option to automatically generate small icons from the regular icons you have already selected. Leave the check box empty to be able to use different images for small icons.

{{Note1|Small icons are generated automatically if GD library is installed on your server.}}

Small category icons also constitute a separate category in the 'Image files' section of the 'Maintenance' menu.

[[Image:lc-fc-18.png|center|<br>]]

{{Note1|If you store small category icons on the file system that helps keep the store database compact and improves the response time of your store.}}

=== Scheme settings ===

There are four generic layout schemes available with several color solutions for each one. It is also possible to disable the module functionality by selecting ''''None'''' from the 'Selected scheme' drop-down box. This way the layout of the Customer zone will not be affected, but the administrator is still able to make changes and configure the module settings. The following schemes are available:

* [[#Icons | Icons]]
* [[#Explorer | Explorer]]
* [[#Horizontal Menu | Horizontal Menu]]
* [[#Candy | Candy]]

Depending on which scheme you have chosen, options for the scheme vary. The set of existing options appears automatically when you select a scheme from the drop-down box.

==== Icons ====

The following settings are available for the 'Icons' scheme:

'''Maximum depth of the tree:''' select depth from 1 to 7 nodes. This shows the possible number of nested categories.

'''Show categories icons: '''select this check box to display icons for categories next to the category names.

'''Show subcategories icons (arrow): '''select this check box to display arrows next to the names of the categories which have subcategories.

[[Image:lc-fc-19.gif|center|LC-FC-19]]

'''Show icons for root category: '''select this check box to display icons for root category names.

'''Drop direction: '''select 'right' or 'left' depending on where you want the menu to drop to.

'''Drop logic: '''select either 'smart' or 'fixed' drop logic. If 'fixed' is selected, the menus drop to the direction specified in the 'Drop direction' option, regardless whether there is space available or not. In this case a horizontal scroll bar appears if the resulting page width exceeds browser window width. If 'smart' is selected and not enough space is available (for example, at the side of the screen), the menu drops to the other direction, overriding of the 'Drop direction' option value.

'''Select color: '''select a color from the drop-down box. At least three color solutions are available by default for each scheme.

'''Category popup delay (sec.): '''set the number of seconds after which the nested categories expand.

'''Category close delay (sec.): '''set the number of seconds after which the expanded categories collapse.

'''Root categories icons width / Subcategories icons width: '''select the width of 16, 32 or 64 pixels. The settings override the 'Category small icon width' setting value, and the icon images are resized correspondingly.

@@ Line 1: / Line 1: @@
 {{LC_2.x}}
@@ Line 254: / Line 255: @@
 <div style="border: 1px solid rgb(0, 0, 0); padding: 4px; background: white none repeat scroll 0% 0%; overflow: auto; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 650px; height: 100px;">
 <nowiki><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();"></nowiki>
 <br/>
 <nowiki></div></nowiki>
@@ Line 264: / Line 267: @@
 <div style="border: 1px solid rgb(0, 0, 0); padding: 4px; background: white none repeat scroll 0% 0%; overflow: auto; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 650px; height: 100px;">
 <nowiki>{if:data.scheme.options.rootcat_icons.value}</nowiki>
 <br/>
 <nowiki><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></nowiki>
 <br/>
 <nowiki>{end:}</nowiki>
 <br/>
 <nowiki><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();"></nowiki>
 <br/>
 <nowiki></div></nowiki>
 <br/>
 <nowiki>{if:data.scheme.options.rootcat_icons.value}</nowiki>
 <br/>
 <nowiki></td></tr></table></nowiki>
 <br/>
 <nowiki>{end:}</nowiki>

@@ Line 1: / Line 1: @@
 The LiteCommerce '''Flyout Categories''' add-on module lets you control the visual presentation of your categories structure. You can select from several layout schemes available in different color variations or create your own templates.
@@ Line 252: / Line 254: @@
 <div style="border: 1px solid rgb(0, 0, 0); padding: 4px; background: white none repeat scroll 0% 0%; overflow: auto; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 650px; height: 100px;">
 <nowiki><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();"></nowiki>
 <br/>
 <nowiki></div></nowiki>
 </div>
@@ Line 260: / Line 264: @@
 <div style="border: 1px solid rgb(0, 0, 0); padding: 4px; background: white none repeat scroll 0% 0%; overflow: auto; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 650px; height: 100px;">
 <nowiki>{if:data.scheme.options.rootcat_icons.value}</nowiki>
 <br/>
 <nowiki><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></nowiki>
 <br/>
 <nowiki>{end:}</nowiki>
 <br/>
 <nowiki><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();"></nowiki>
 <br/>
 <nowiki></div></nowiki>
 <br/>
 <nowiki>{if:data.scheme.options.rootcat_icons.value}</nowiki>
 <br/>
 <nowiki></td></tr></table></nowiki>
 <br/>
 <nowiki>{end:}</nowiki>
 </div>

@@ Line 252: / Line 252: @@
 <div style="border: 1px solid rgb(0, 0, 0); padding: 4px; background: white none repeat scroll 0% 0%; overflow: auto; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 650px; height: 100px;">
 <nowiki><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();"></nowiki>
 <br/>
 <nowiki></div></nowiki>
 </div>
@@ Line 260: / Line 260: @@
 <div style="border: 1px solid rgb(0, 0, 0); padding: 4px; background: white none repeat scroll 0% 0%; overflow: auto; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 650px; height: 100px;">
 <nowiki>{if:data.scheme.options.rootcat_icons.value}</nowiki>
 <br/>
 <nowiki><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></nowiki>
 <br/>
 <nowiki>{end:}</nowiki>
 <br/>
 <nowiki><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();"></nowiki>
 <br/>
 <nowiki></div></nowiki>
 <br/>
 <nowiki>{if:data.scheme.options.rootcat_icons.value}</nowiki>
 <br/>
 <nowiki></td></tr></table></nowiki>
 <br/>
 <nowiki>{end:}</nowiki>
 </div>
@@ Line 305: / Line 305: @@
 The color combinations available for the 'Flat Layout' scheme are blue, blue_grey and yellow_grey.
-== 2.2 Icons ==
+=== Icons ===
 If you select 'Icons' from the 'Selected scheme' drop-down box, the 'Categories' menu will look like this.
@@ Line 315: / Line 315: @@
 The color solutions available for the 'Icons' scheme are blue, grey and yellow.
-== 2.3 Explorer ==
+=== Explorer ===
 If you select 'Explorer' from the 'Selected scheme' drop-down box, the 'Categories' menu will look like this:
@@ Line 325: / Line 325: @@
 To expand all the nested categories click on the [[Image:lc-fc-12.gif|14px|LC-FC-12]] icon. To collapse all the nested categories click on the [[Image:lc-fc-13.gif|13px|LC-FC-13]] icon.
-== 2.4 Candy ==
+=== Candy ===
 If you select 'Candy' from the 'Selected scheme' drop-down box, the 'Categories' menu will look like this.

@@ Line 255: / Line 255: @@
 <br/>
 <nowiki></div></nowiki>
 </div>
@@ Line 261: / Line 260: @@
 <div style="border: 1px solid rgb(0, 0, 0); padding: 4px; background: white none repeat scroll 0% 0%; overflow: auto; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 650px; height: 100px;">
 <nowiki>{if:data.scheme.options.rootcat_icons.value}</nowiki>
 <br/>
@@ Line 294: / Line 292: @@
 Select the required actions and click ''''Update''''.
 [[Category:LiteCommerce user manual]]
 [[Category:LiteCommerce modules]]