Layered nav apply filters button

Question

I am looking into the possibility of choosing multiple filters within layered navigation and apply them at the same time via a form submit, rather than applying one filter at a time.

Anyone looked into this before? Is this even doable?

If anyone could shed any light on this would be much appreciated.

Magento version is community 1.9.2.1

Answer 1

Something like this could work (not tested and class names need replacing to match your own) - This method also means that you don't need to have a Form in place:

var filters; 

jQuery('.layered-nav .option').click(function(ev){ 
  ev.preventDefault();

  var pathname = window.location.pathname; // Returns path only
  var url      = window.location.href;     // Returns full URL
  var query = url.substr(url.indexOf("?") + 1); // Return Query String

  filters = filters + query;
  window.location.href = "http://stackoverflow.com?"+filters; // load the URL         

});

Answer 2

Here is an idea.
The filtering is done via $_GET.
So you will need a form that is sent via get to the same page.
You can edit the app/design/frontend/{package}/{theme}/template/catalog/layer/view.phtml file and add a form around the whole block:

<?php if($this->canShowBlock()): ?>
    <form action="<?php echo $this->getClearUrl() ?>" method="get">
        .... rest of the template here
        ...add submit button here
    </form>
<?php endif;?>

Then you need to change the links to radio buttons.
So you need to change app/design/frontend/b{package}/{theme}/template/catalog/layer/filter.phtml and make it look something like this:

<ol>
<?php foreach ($this->getItems() as $_item): ?>
    <li>
        <?php if ($_item->getCount() > 0): ?>
        <?php $name = $_item->getFilter()->getRequestVar();?>
        <?php $value = $_item->getValue();?>
        <input type="radio" name="<?php echo $name?>" value="<?php echo $value?>" id="filter_<?php echo $name.'_'.$value?>" />
        <label for="filter_<?php echo $name.'_'.$value?>"><?php echo $_item->getLabel() ?></label>
        <?php else: echo $_item->getLabel() ?>
        <?php endif; ?>
        <?php if ($this->shouldDisplayProductCount()): ?>
        (<?php echo $_item->getCount() ?>)
        <?php endif; ?>
    </li>
<?php endforeach ?>
</ol>

You might need to add a new radio button above all items that means "no selection" so you can reset the selection. (I have no idea yet how you can do that).

This is enough to get you started (I think).
The problem I see here is that once you filtered by some attributes and you want to apply an other filter your previous filters will be lost.
To overcome this, you might need to change the app/design/frontend/{package}/{theme}/template/catalog/layer/state.phtml and add some hidden inputs with the values already selected.

something like

<input type="hidden" name="<?php $_filter->getRequestVar()?>" value="<?php echo $_filter->getValue();?>" />

inside the foreach loop.
The code above is not tested, is just an idea on where to start.

Answer 3

Layered navigation works adding variables to a URL (women/women-new-arrivals.html?color=21&sleeve_length=46). Normally that would be done by links but using a form is also possible

You'll need to edit 2 frontend templates:

catalog/layer/filter.phtml

<ol>
<?php foreach ($this->getItems() as $_item): ?>
    <li>
        <?php if ($_item->getCount() > 0): ?>
            <input type="radio" value="<?php echo $_item->getValue()" name="<?php echo $_item->getFilter()->getRequestVar();?>"/>
            <?php echo $_item->getLabel() ?>
        <?php else: echo $_item->getLabel() ?>
        <?php endif; ?>
        <?php if ($this->shouldDisplayProductCount()): ?>
        (<?php echo $_item->getCount() ?>)
        <?php endif; ?>
    </li>
<?php endforeach ?>
</ol>

The value and name come from the class Mage_Catalog_Model_Layer_Filter_Item that is used to populate each filter item.

Now we have our filters as radio inputs but we still need a form. For that open up catalog/layer/view.phtml

After <div class="block block-layered-nav"> add

<form method="GET" action="<?php echo Mage::registry('current_category')->getUrl();?>">

And before the last </div> add

   <button type="submit">
      <span><span><?php echo $this->__('Submit');?></span></span>
   </button>
</form>

Haven't tested above changes but should work