FAQ

---

A. Adapting Layered Navigation to Right Column Layout

In order to adapt Multiple Select in Layered Navigation extension to theme with right column layout, please follow these steps:

Copy app/design/frontend/base/default/layout/mana_filters.xml to app/design/frontend/[yout package]/[your theme]/layout/mana_filters.xml. In copied file, change to (3 times - for catalog pages, for quick search pages and for CMS pages). Save changes and refresh Magento layout cache.

B. Show Layered Navigation on Home Page(or any other CMS page)

MANAdev Layered Navigation extension can be put into any CMS page including Home Page. Here is how:

1. Open CMS->Pages->[your page] in Magento Admin Panel.

2. Add the following layout instructions to Design tab->Page Layout->Layout Update XML:

<update handle="cms_page_layered" />
<!-- add category products to content column -->
<reference name="cms.products">
<block type="catalog/product_list" name="product_list" 
  template="catalog/product/list.phtml">
  <action method="setCategoryId"><category_id>3</category_id></action>
  <block type="catalog/product_list_toolbar" name="product_list_toolbar" 
      template="catalog/product/list/toolbar.phtml">
    <block type="page/html_pager" name="product_list_toolbar_pager"/>
  </block>
  <action method="addColumnCountLayoutDepend">
      <layout>empty</layout>
      <count>6</count>
  </action>
  <action method="addColumnCountLayoutDepend">
      <layout>one_column</layout>
      <count>5</count>
  </action>
  <action method="addColumnCountLayoutDepend">
      <layout>two_columns_left</layout>
      <count>4</count>
  </action>
  <action method="addColumnCountLayoutDepend">
      <layout>two_columns_right</layout>
      <count>4</count>
  </action>
  <action method="addColumnCountLayoutDepend">
      <layout>three_columns</layout>
      <count>3</count>
  </action>
  <action method="setToolbarBlockName"><name>product_list_toolbar</name></action>
</block>
</reference>
<reference name="before_body_end">
<block type="mana_filters/layer" name="mana_layer" as="mana_layer" before="-">
    <action method="setCategoryId"><category_id>3</category_id></action>
</block>
</reference>

3.Also insert ID of desired category in < category_id >3< /category_id > (2 times).

4.Open desired category of your store through Catalog->Manage Categories. Make sure that Is Anchor=Yes on Display Settings tab.

C. Hiding/Showing Filters in Specific Categories

Using Multiple Select in Layered Navigation extension you can hide/show particular filters in specific categories. Below listed are the steps:

1. Open category in which you'd like to hide certain filter.
2. Go to "Custom Design" tab.

3. In "Custom Layout Update" field, add:

   hide_attribute_code 1

4.Instead of above_products.nav, you may use leftnav or rightnav (to specify in which layered navigation you intend to do the change).

5.Instead of hide, you may write show (to force showing a filter in this category even if it is hidden in all the other categories).

6.Instead of attribute_code write color, price, category, screen_size etc. (attribute code). You can also write all_filters to hide or show all filters.

7.Save category.

8.NOTE. Filter still won‘t show up if there is no products having that attribute.

9.NOTE. By default Magento applies layout updates to subcategories. If you'd like NOT to hide filters in subcategories - open each subcategory and set Custom Design -> Use Parent Category Settings to "No". Please also note that in such cases, if you apply a category filter in parent category, then "Custom Layout Update" field will still be used from parent category.

D. Setting Category-Specific Filter Labels in Layered Navigation

You can easily set category-specific filter labels. Here is how:

1. Open category in which you'd like to change filter label.
2. Go to "Custom Design" tab.

3. In "Custom Layout Update" field, add:

   More Electronics

4.Instead of above_products.nav, you may use leftnav or rightnav (to specify in which layered navigation you intend to do the change).

5.Instead of Category, you may write Color, Price, etc (take attribute code, like some_attribute_name and remove underscores and capitalize first letters, like SomeAttributeName).

6.Save category.

Please note that by default Magento applies layout updates to subcategories. If you'd like NOT to propagate the changes into subcategories, please open each subcategory and set Custom Design -> Use Parent Category Settings to "No". Please also note that in such cases, if you apply a category filter in parent category, then "Custom Layout Update" field will still be used from parent category.

E. Using ManaDev Extension with Magento 1.9 Standard Responsive Theme(rwd/default)

All MANAdev Extensions work with Magento 1.9 standard responsive theme (rwd/default). Still most of them contain dynamic Javascript features and thus require a slight modification which is described in detail in this article.

The reason is simple: some of MANAdev extension scripts are served from js directory , but Magento rwd jQuery is served from skin directory and js directory is rendered before skin directory (hence all the MANAdev Javascript files expecting jQuery to be already included do not work). In future we plan to move all our scripts to skin directory.

Modification itself is quite simple - jQuery which ships with Magento rwd theme should be disabled and instead jQuery which ships with MANAdev extension should be enabled on all frontend pages. Here is how to do it step-by-step:

• Open app/design/frontend/rwd/default/layout/page.xml for editing.

• Replace

<action method="addItem"><type>skin_js</type><name>js/lib/jquery-1.10.2.min.js</name></action>

with

<!--<action method="addItem"><type>skin_js</type><name>js/lib/jquery-1.10.2.min.js</name></action>-->

• Save and upload the file.

• Refresh Magento cache in System->Cache Management.

• Set System->Configuration->MANAdev->General->JavaScript Libraries for Store Frontend->jQuery to Load on all pages (minified version) and press Save config button.

F. Using with Lesti FPC

Full Page Cache (FPC) solutions allows store owners to increase site performance. Magento during each page load executes a lot of costly operations: a lot of SQL queries, tons of file reads, XML transformations and more. FPC solutions save fully rendered page in cache and upon subsequent requests avoid most of those costly operations and instead serve the page from cache (which is a lot faster).

All MANAdev Layered Navigation extensions work with FPC solution which comes with Magento Enterprise Edition (no configuration required) and with Lesti FPC (additional configuration required, see below). There may be more compatible FPC solutions, but these were not explicitly tested to the moment of writing.

For MANAdev layered navigation extensions to work with Lesti FPC (A internal Magento Full Page Cache extension by Gordon Lesti) Session Params and Uri Params should be added.

In System->Configuration->Sytem->Lesti FPC add the following to Session Params:

manapro_filterajax_request

In System->Configuration->Sytem->Lesti FPC add the following to Uri Params:

m-layered,
cat,
no_cache,
your_filterable_attribute_code1,
your_filterable_attribute_code2,
...

Example for standard magento 1.7.0.2 sample data:

id,
category,
page_id,
p,
limit,
dir,
order,
mode,
m-layered,
cat,
no_cache,
color,
contrast_ratio,
price,
computer_manufacturers,
manufacturer,
megapixels,
shape,
shoe_type

G. Customizing Appearance of ManaDev Extension

On most themes MANAdev extensions look fine out of the box. Despite that, you can easily customize look and feel of the extension:

• Change CSS styles
• Change images
• Change HTML templates
• Adapt layout
• Adapt javascript to changed HTML template

General Rules

Appearance customization process in its core is simple: you find a file you need to modify in base/default theme, copy it to [your package]/[your theme] and modify it there. For extension to be easily upgradable, you need to follow these simple rules:

• Never modify original files.
• Never copy original files to your theme unless you need to modify them.

You should also keep in mind that when searching for a theme file some_dir/some_file.ext, Magento always try several locations (order is important):

• [your package]/[your theme]/some_dir/some_file.ext
• [your package]/default/some_dir/some_file.ext
• base/default/some_dir/some_file.ext

Note. In some edge cases, search scheme is more complicated than the one described above.

Customizing CSS Files

Use browser's Inspect Element function (available in Chrome and Firefox) to see currently applied CSS styles and in which files they are located.

Then locate a file in skin/frontend/base/default/css/mana*.css

In order to customize file, copy it to skin/frontend/[your package]/[your theme]/css/ and modify it there.

Note. In case CSS file contains relative image paths like ../images/[some image file], please do copy all such files to your theme as well.

Changing Style Images Use browser's Inspect Element function (available in Chrome and Firefox) to see currently used image files.

Then locate a file you need to substitute in skin/frontend/base/default/images/mana*/*

Upload new image with the same file name to skin/frontend/[your package]/[your theme]/images/mana*/

Customizing HTML Templates

• Enable template path hints in System->Configuration:
• Set Current Configuration Scope to your website or your store view.
• Enable Advanced->Developer->Debug->Template Path Hints.
• Consider adding you external IP address to Advanced->Developer->Developer Client Restrictions.
• Save config.

In frontend, notice which red box surronds HTML you want to change and notice associated template path hint like "mana/filters/items/list.phtml".

Then locate a file in app/design/frontend/base/default/template/mana*/*.phtml

In order to customize file, copy it to app/design/frontend/[your package]/[your theme]/template/mana*/*.phtml.

Adapting Javascripts to HTML Template Changes

Some .js files depend on specific HTML element structure and if you modify .phtml file, you may break that dependency (and hence break javascript functionality).

In such cases, view page source and in its element check for all included skin/frontend/base/default/js/mana*.js files.

In each of this files, check for CSS selector rules like $('div.m-some-class p'). In case you find something to be adapted, copy the file to skin/frontend/[your package]/[your theme]/js/mana*.js.

Adapting to Theme Layout

There are cases when layout files located in app/design/frontend/base/default/layout/mana*.xml need to be adapted to theme:

• Refer to FAQ(1), Adapting Layered Navigation to Right Column Layout

H. Changing Block Orders

All blocks in left column are sorted using before="..." and after="..." attributes, like this:

Inside quotes in before="..." you put the name of the block before which you want to put the block you are currently editing. You can also write before="-" to put you block before all blocks. Similarly you put block after specific blocka or after all blocks using after="..." attribute.

For instance, our layered navigation block is defined in app/design/frontend/base/default/layout/mana_filters.xml as follows:

<block type="mana_filters/view" name="mana.catalog.leftnav" before="-" template="catalog/layer/view.phtml"/>

To put layered navigation after block X, typically you have to edit 2 blocks:

• definition of block X (which should go before layered navigation)
• definition of layered navigation block itself.

Here is step by step instrcution:

1. In layout XML files located in **`app/design/frontend/[your package]/[your theme]/layout directory`** find definition of block X (which should go before layered navigation). If not found, find it in layout XML files located in **`app/design/frontend/base/default/layout directory`** and copy it to **`app/design/frontend/[your package]/[your theme]/layout directory`**. Some 3rd party vendors put their files in **`app/design/frontend/default/default/layout directory`** if you find it there, copy it to **`app/design/frontend/[your package]/[your theme]/layout directory`**.
   

2. In the file containing block X, edit definition of block X as follows:
   

<block type="x" name="x" before="mana.catalog.leftnav" ...>.

3.Save and upload this file.

4.Copy app/design/frontend/base/default/layout/mana_filters.xml to app/design/frontend/[your package]/[your theme]/layout/mana_filters.xml. in it, find the definition of layered navigation block:

<block type="mana_filters/view" name="mana.catalog.leftnav" before="-" template="catalog/layer/view.phtml"/>

5.Instead of before="-", write before="currency" or before="cart_sidebar" (choose a block which should be below layered navigation block), like this:

<block type="mana_filters/view" name="mana.catalog.leftnav" before="currency" template="catalog/layer/view.phtml"/>

6.Save and upload this file.

7.Clear Magento cache.