1

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?

2

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

0

This is function of shop by option that often show on sidebar. You can use a custom extension to do this. Please search "Layer Navigation" on magento connect to find a good extension.

  • I've been looking at magento connect but did not find the filter by the attribute's in the toolbar (not sidebar) / could not find a suitable extension. – Andhi Irawan Jul 9 '15 at 7:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.