Home /
Ajax Layered Navigation user manual

Ajax Layered Navigation user manual

1. Description

2. Installation

3. General configurable options

4. Admin interfaces

4. Use cases

Using brands logo images as input elements in layered navigation block
Placing layered navigation block in main column on categories page

5. Support

Description

Quick and easy navigation through the large store certainly leads to final positive decision about the purchase. Magento layered navigation is one of the most popular features and it’s best choice for stores with a lot of items. Our extension helps to bring that navigation type to absolutely new level. The extension Ajax Layered Navigation will help you:

use layered navigation on home page
improve layered navigation SEO with additional text place on layered navigation results page
improve overall look of layered navigation block, using Different layered navigation blocks styles
improve your store look, using Different type of attribute options such as images attributes, checkboxes and drop down options attribute.

Layered navigation module allows to improve price range filters for stores with extremely different products pricing by setting flexible price ranges via admin interface. Usage of our extension isn’t limited to just categories page ,but you also can use it on Catalog Advanced Search and Catalog Search pages in order to improve overall search experience.

Installation

Thank you for downloading our magento extension. Please follow these instructions to proceed with the installation of your theme:

Turn store compillation off

Navigate to Admin -> Tools -> Compilation and deactivate compilation mode for your store.

Copy all files into your magento directory

Simply copy all files from "extension source x.x.x" directory into your magento store directory. In case you want to copy extension templates files to your theme folder then rename folders app/design/frontend/base/default and skin/frontend/base/default.

Turn your magento cache off

Navigate to Admin -> System -> Manage Cache and deactivate cache for your store.

Refresh your admin user access rights

Simply logout from your store admin and then login back.

Next steps

Navigate to System > Configuration > Templates-Master > Ajax Layered Navigation and enable extension for any store you need.
Configure Ajax Layered Navigation module according to your needs.
Add Ajax Layered Navigation to the home page.
Go to Magento Admin->CMS->Page->Home Page->Design Tab and add this code.

<reference name="left"> <block type="ajaxlayerednavigation/layer_view" name="my.catalog.leftnav" before="-" template="tm/ajaxlayerednavigation/layer/homeview.phtml"/></reference>

That's all. Your clients can use Ajax Layered Navigation on your home and categories pages.

General configurable options

In order to configure the main features of the extension, please go to Admin>System>Configuration>Layered Navigation.

General tab

Enabled - please select Yes to enable the extension.
Use Ajax - select Yes to enable ajax within layered navigation.
Show Quantity - select Yes to show the quantity of products in layered navigation block.
Show search form if there is larger then - please specify number 0 if you want to hide the search form.
Count option for attributes - specify the number of options to be shown for each attribute. This option will help you to save space on the page for attributes with multiply values.
Layered Navigation Loader - set the image for ajax data load at layered navigation block.
List Loader - set the image for ajax data load at product listing block.

Navigation style tab

Style - please select the navigation style from the drop down. The Shop By wil be managed by selected style.

If you select Standard Navigation style value, the block Shop By will be displayed as common magento block by default.

If you select Standard Navigation Style (Fixed Column Height), the block Shop By will look like:

Note: the Height for fixed column height nav style field is used for this style only. The feature allows you to set the number of pixel for attributes’ blocks.

If you select Accordion Navigation Style, the block Shop By will look like:

If you select Menu Navigation Style, you can see attribute’s options while clicking the attribute. You'd better use this style for top navigation. The block Shop By will look like:

SEO configuration tab

SEO Layered Navigation URL - select Yes to enable SEO URL in navigation block.
SEO url Suffix - please specify the suffix if you want to share the url by settings of search engines.
Enable nofollow for layered link - select Yes to add nofollow attribute for layered link.

Home page tab

Enabled - select Yes to enable layered navigation block on home page.
Category On Home Page - select root category from drop down list for layered navigation block on home page.
Attribute On Home Page - select visible attributes on home page. You can choose multiple.

Advanced Search Page tab

Enabled - select Yes to enable Catalog Advanced Search.

Price tab

Used Price Slider - select Yes to enable price slider for price layered navigation block.

Default Range - please specify the price ranges for categories comma separated in the layered navigation block.

Note: this feature is very helpful for stores with extremely different prices placed in same categories.

Load jQuery Library (No Conflict mode) - select Yes to load jQuery library using NoConflict mode.

Admin interfaces

To start working with extension interface, please go Admin>Templates-Master>Ajax Layered Navigation. Now you can select what exactly you want to edit. You are allowed to manage filterable attributes and ranges as well.

Manage filters

We recommend to use the interface in order to configure the display view of attribute, to sort attributes according to your needs and to streamline attributes from largest to smallest, and vice versa. Also you can configure the display of attribute as image in different colors.

After you click any filterable attribute, you can edit attribute’s information.

Display Type - please select the display type of attribute. Possible values are labels, images and drop down list.
Sort By - select the attribute position in the block Shop By. Possible values are position, quantities and name.
Order By - select the order of the attributes between SORT_ASC and SORT_DESC.
Position - please specify the weight of attribute. Please notice, you can configure the options of attribute at options tab only after selecting the image value in the display type field.

Please click on Option name you need and continue customizing the settings tab.

Current interface allows to add dynamic content to layered navigation pages. For example you can add filter description, title and image that will be visible when current filter will be selected.

Category Image - please load the image for the attributes category.
Category Title - specify the attributes category name.
Category Description - specify the description for the attributes category.

Note: settings mentioned above are commonly used within top navigation.

Layered Image - please load the image, that will be shown as attribute’s image in the layered navigation block.
Position - specify the weight of layered image.

Manage ranges

Managing ranges is indispensable solution for the stores with extremely different products pricing. Go to Admin>Templates-Master>Layered Navigation>Manage ranges and select the category to configure price range from the grid.

After clicking the attribute you need, you will be able to set the all possible price ranges for this category.

Use cases

Using brands logo images as input elements in layered navigation block

If you want brands to be displayed as images, please go to Admin>Templates-Master>Ajax Layered Navigation>Manage filters and follow next recommendations:

Select and click on the attribute to be edited from the grid.
You can see the Attribute information General tab. Please select images value in the Display settings field.
Now you can configure the options of attribute at options tab. Click on the attribute you need.
At Settings tab load the image to be shown in the Layered Image field.
Press Save button.

Placing layered navigation block in main column on categories page

Go to ftp app/desing/frontend/base/default/layout/tm/ajaxlayerednavigation.xml edit file and uncomment the line of the following code:


<!-- <block type="ajaxlayerednavigation/layer_view" name="tm.catalog.left.navigation" before="-">
                <action method="setTemplate" ifconfig="ajaxlayerednavigation/general/enabled">
                    <template>tm/ajaxlayerednavigation/layer/content_view.phtml</template>
                </action>
            </block> -->

After please comment the following section:


        <reference name="left">
            <block type="ajaxlayerednavigation/layer_view" name="tm.catalog.left.navigation" after="currency">
                <action method="setTemplate" ifconfig="ajaxlayerednavigation/general/enabled">
                    <template>tm/ajaxlayerednavigation/layer/view.phtml</template>
                </action>
            </block>
        </reference>

Save file and refresh magento cache.

Support

Template Master team is always ready to assist you with any issue related to our products.

We do offer:

Free commercial products installation services
Free updates within offered support period
3 months of free guaranteed support

Our duties:

Responsibility for resolving products bugs.
Help with technical queries.
Support of popular web browsers (Firefox, Chrome, Safari, Internet Explorer 7+).
Technical support in installation and usage of our products.

Common questions and ideas

Come up with new ideas!

There are no product questions yet.