Magento – Drop Down Filter by Attribute in Products List Toolbar

attributesdropdown-attributefiltertoolbar

friends, I create custom pages for mobile Products list.
I added a filter in the form of drop down on the top toolbar, there is Filter by Category, Filter by Attribute and Sort By (Position, Name, Price, and Brand).
I've successful create a drop down Filter by Category and Sort by, and functioning properly.
I'm adding Filter by Category and Sort by in app\design\frontend\andi\phone\template\catalog\product\list\ctoolbar.phtml

Filter by Attribute Mockup

Filter by Attribute, I have not managed to make his drop down.

Here's what I do to display the Filter by Attribute in toolbar :

Go into catalog.xml and in delete left thing

Put this after the line with product_list name: 

<block type="catalog/layer_view" name="filter_by_attributes" template="catalog/layer/view.phtml"/>

Then in list.phtml call :

<?php echo $this->getChildHtml('filter_by_attributes'); ?>

My View.phtml to call the Filter Attribute (app\design\frontend\andi\phone\template\catalog\layer\view.phtml) :

<?php if($this->canShowBlock()): ?>
<?php echo $this->__('Filter') ?>
<div class="block-layered-nav">
<dl id="narrow-by-list">
    <?php $_filters = $this->getFilters() ?>
    <?php foreach ($_filters as $_filter): ?>
       <?php echo $_filter->setTitle($_filter->getName())->getHtml() ?>
    <?php endforeach; ?>
</dl>
<script type="text/javascript">decorateDataList('narrow-by-list')</script>


<script type="text/javascript">
   //<![CDATA[
     var _used_filter = [];
     <?php foreach ($_filters as $_filter): ?>
     _used_filter.push('<?php echo $_filter->getRequestVar() ?>');
     <?php endforeach; ?>
   //]]>
</script>
<?php endif; ?>

Filter by Attribute Not Done

then the main question is

how to make the dropdown Filter by Attribute based on catalog\layer\view.phtml?

Best Answer

i found the solution.

Adding <block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml"> inside <catalog_category_layered> in catalog.xml :

<!--Category layered Navigation Layout-->
<catalog_category_layered>
    <reference name="content">
        <block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
            <block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
                <block type="catalog/layer_view" name="filter_by_attributes" template="catalog/layer/view.phtml"/>                    
                <block type="catalog/product_list_ctoolbar" name="product_list_ctoolbar" template="catalog/product/list/ctoolbar.phtml">                                              
                </block>
                <action method="setToolbarBlockName"><name>product_list_toolbar</name></action>
            </block>
        </block>
    </reference>
</catalog_category_layered>

adding javascript in catalog\layer\view.phtml :

<button onclick="showAttribute()"><?php echo $this->__('Filter') ?></button>
<?php if($this->canShowBlock()): ?>
<div class="block-layered-nav" style="display: none;">
<dl id="narrow-by-list">
    <?php $_filters = $this->getFilters() ?>
    <?php foreach ($_filters as $_filter): ?>
            <?php echo $_filter->setTitle($_filter->getName())->getHtml() ?>
    <?php endforeach; ?>
</dl>
<script type="text/javascript">decorateDataList('narrow-by-list')</script>
</div>
<script type="text/javascript">
 //<![CDATA[
  var _used_filter = [];
  <?php foreach ($_filters as $_filter): ?>
   _used_filter.push('<?php echo $_filter->getRequestVar() ?>');
  <?php endforeach; ?>

  function showAttribute() {
    if(jQuery(".block-layered-nav").is(":visible"))
        jQuery(".block-layered-nav").hide(); 
    else
        jQuery(".block-layered-nav").show();
   }
//]]>
</script>
<?php endif; ?>

modify template\catalog\layer\attribute.phtml :

<div class="filter-box-container">
<select class="filter-atts" id="filter-atts" name="<?php echo $this->getRequestVar()?>[]">
    <option><?php echo $this->__('%s', $this->getTitle()) ?></option>
    <?php foreach ($this->getItems() as $_item):?>
        <option onchange="doFilter()" value="<?php echo $_item->getValue()?>" <?php echo $_item->getIsSelected() ? 'selected':''?>>
            <?php echo $_item->getLabel() ?>        
        </option>
    <?php endforeach ?>
</select>

and the rest is resolved with css

Related Topic