After upgrading to 1.9.0.1 we had a problem with javascript scripts not refreshing after AJAX updates.The official support time is 6 months but even 1 ... Read more

Apr 14, 2015 Poleposition

Certified Magento Enterprise developer Certified Magento developer Certified Magento theme developer Certified Magento specialist

Manadev is certified extension and theme
developer for Magento

How To Add Attribute Option Page to Your Magento Store

Overview

Attribute option page is a category-like automatically updated landing page based on attribute option

  • The page can show products with specific attribute option for all the store or for specified category.
  • Product list for the page will be updated automatically, depending on product settings.
  • Attribute option page can be created either original Magento Layered Navigation or SEO Layered Navigation Plus extension by MANAdev is used.

Attribute Option Page

What Is Product Attribute Option In Magento?

Attribute option can be set in product configuration form:

Product Attribute Option

How To Add Attribute Option Page If Original Magento Layered Navigation Is Used

  • Create a CMS page on which you will place a list of products with specific attribute option. To do it go to menu CMS-> Pages and press Add New Page in Magento Admin Panel.

  • Fill in the fields as usual, specifying page title, URL key and content.

  • In Design tab->Page Layout add the following layout instructions into Layout Update XML area, specifying attribute name in <attribute_code> and option name in <option> fields. Below is the example of red colored products:

<reference name="content">
    <!-- this block when present on page applied attribute filter -->
    <block type="manapro_productcollections/filtered" name="product_filter">
          <action method="setCategoryId"><category_id>3</category_id></action>
          <action method="addFilter">
              <attribute_code>color</attribute_code>
              <option>Red</option>
          </action>
    </block>
    <!-- add category products to content column -->
    <block type="catalog/product_list" name="product_list" after="product_filter" 
      template="catalog/product/list.phtml">
      <action method="setCategoryId"><category_id>3</category_id></action>
      <block type="core/text_list" name="product_list.name.after" as="name.after" />
      <block type="core/text_list" name="product_list.after" as="after" />
      <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>
<!-- add layered navigation to left column -->
<reference name="left">
    <block type="catalog/layer_view" name="catalog.leftnav" after="currency" template="catalog/layer/view.phtml" before="-">
      <block type="core/text_list" name="catalog.leftnav.state.renderers" as="state_renderers" />
    </block>
</reference>

How To Add Attribute Option Page If SEO Layered Navigation Plus Extension Is Used

  • Create a CMS page on which you will place a list of products with specific attribute option. To do it go to menu CMS-> Pages and press Add New Page in Magento Admin Panel.

  • Fill in the fields as usual, specifying page title, URL key and content.

  • In Design tab->Page Layout add the following layout instructions into Layout Update XML area, specifying attribute name in <attribute_code> and option name in <option> fields. Below is the example of red colored products:

<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="core/text_list" name="product_list.name.after" as="name.after" />
      <block type="core/text_list" name="product_list.after" as="after" />
      <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>
    <!-- this block when present on page applies attribute filter -->
    <block type="manapro_productcollections/filtered" name="product_filter">
          <action method="setCategoryId"><category_id>3</category_id></action>
          <action method="addFilter">
              <attribute_code>color</attribute_code>
              <option>Red</option>
          </action>
    </block>
</reference>

Important Notes

  1. All XML instructions above adds product list to content area of the page, layered navigation block to left column and remove all products with regular products from the list.
  2. Make sure 2 column layout is selected in Design tab->Page Layout->Layout. In case you prefer right column instead of left column, change <reference name="left"> to <reference name="right">. If you do not need layered navigation remove <reference name="left"> ... </reference>.
  3. Also insert ID of root category in <category_id>3</category_id>(3 times). Check How To Find Category ID in order to define root category ID of your store.
  4. Open root category or other needed category of your store through Catalog->Manage Categories. Make sure that Is Anchor=Yes on Display Settings tab (only needed if you want layered navigation to work).

In case you use our layered navigation extension from SEO Layered Navigation Plus series, you may also specify any category ID - in this case additional category filter will be applied. You still have to make sure that specified category is set to Is Anchor = Yes.

How To Find Category ID

If attribute option page should contain option products for all the store it is necessary to find root category ID before configuration. It can be done in two steps.

In case the page should show product for any other category, you need to perform only second step.

  • First, find store root category name. Here you can find instruction how to do it.

  • Second step is to define ID of root or other category. Here you can find instruction how to do it.

How To Filter On Multiple Options

In above examples attribute page is filtering products by only one Red option value.

There is a possibility to join several conditions using logical OR. For example, if you like to add the option of Green too so that it shows Red & Green products, instead of the block

    <block type="manapro_productcollections/filtered" name="product_filter">
          <action method="setCategoryId"><category_id>3</category_id></action>
          <action method="addFilter">
              <attribute_code>color</attribute_code>
              <option>Red</option>
          </action>
    </block>

you need to place a block

<block type="mana_page/expr" name="product_filter0">
    <action method="setOperation"><logical>or</logical></action>
    <block type="manapro_productcollections/filtered" name="product_filter1">
          <action method="setCategoryId"><category_id>3</category_id></action>
          <action method="addFilter">
                  <attribute_code>color</attribute_code>
                  <option>Red</option>
          </action>
    </block>
    <block type="manapro_productcollections/filtered" name="product_filter2">
          <action method="setCategoryId"><category_id>3</category_id></action>
          <action method="addFilter">
                  <attribute_code>color</attribute_code>
                  <option>Green</option>
          </action>
    </block>
</block>

How To Exclude Products From Specific Subcategory

If products from specific child category should not be shown on attribute option page, you can exclude them by placing block:

<block type="mana_page/categoryFilter" name="category_exclusion_filter">
    <action method="setCategoryId"><category_id>2</category_id></action>
    <action method="exclude"><excluded_category_id>18</excluded_category_id></action>
</block>

It will work either original Magento Layered Navigation or or SEO Layered Navigation Plus extension by MANAdev is used.

We Accept: PayPal Visa MasterCard American Express Discover