5

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

  • What version of Magento are you using? – jsims281 Nov 5 '15 at 12:40
  • Magento version is community 1.9.2.1 – Bobadevv Nov 5 '15 at 12:43
2

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         

});
  • Cheers Tisch seems like a really clean and lightweight solution, ill have a look into this. – Bobadevv Nov 5 '15 at 17:55
  • Javascript based solution worked like a charm, I was able to get this done in a single JS function didnt have to change anything with default layered nav template! Cheers – Bobadevv Nov 10 '15 at 10:24
  • Looks like a nice solution, where did you insert this code? – K.I Mar 30 '17 at 15:13
  • how to do the same in magento2.i created button on filters form and converted all filters to checkbox now after selected checkbox vale coming each url so how to take params from that urls and make single url with params ? – sangan Feb 8 '18 at 10:03
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.

  • Thanks Marius, between yours and Sanders answer definitely pushed me in the right direction on how this can be done. – Bobadevv Nov 5 '15 at 17:53
2

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

  • 1
    Thank you I didn't even consider this going to have a play about and see what I can put together going from your and Marius answers. – Bobadevv Nov 5 '15 at 17:54

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.