[SOLVED]Layered Navigation block needs to be improved a bit.

[nakul]

Hi,

 

I gone fond of this module.

Just want a little improvement in this module. Let me describe.

 

Suppose we select some checkboxes & we see the same values in "Enabled filters:" heading. & oppposite to them is button to clear those selections.It is working fine.

 

Can any one develop or give me code for a single button to clear all the checks that are enabled. (without disturbing above functionality).

Simply a clear/reset button to clear all the values at once.

 

Thanks.

[PascalVG]

Hi Nakul,

 

Try if you like this: (Example code from 1.5.4.1)

Edit file themes/<your theme folder>/modules/blocklayered/blocklayered.tpl (Please backup first)

 

At the top, we will add some small javascript function that does the work: (Add the red text)

 

<!-- Block layered navigation module -->

{if $nbr_filterBlocks != 0}

<script type="text/javascript">

current_friendly_url = '#{$current_friendly_url}';

{if version_compare($smarty.const._PS_VERSION_,'1.5','>')}

param_product_url = '#{$param_product_url}';

{else}

param_product_url = '';

{/if}

 

function uncheckAll()

{

var checkboxes = new Array();

checkboxes = document.forms['layered_form'].getElementsByTagName('input');

 

for (var i = 0; i < checkboxes.length; i++) {

if (checkboxes.type === 'checkbox') {

checkboxes.checked = false;

}

}

}

 

</script>

 

 

Then,

 

Just below that code the following cod starts:

 

<div id="layered_block_left" class="block">
<p class="title_block">{l s='Catalog' mod='blocklayered'}</p>
<div class="block_content">
 <form action="#" id="layered_form">
  <div>
   {if isset($selected_filters) && $n_filters > 0}
   <div id="enabled_filters">
 <span class="layered_subtitle" style="float: none;">{l s='Enabled filters:' mod='blocklayered'}</span> <input type="button" name="Reset_button" value="Reset" onclick="uncheckAll()">
 <ul>

 

At the end here you see some extra code, that isn't there in the original one:

<input type="button" name="Reset_button" value="Uncheck all" onclick="uncheckAll()">

Add it to the place shown above

 

save the file and refresh page with layered filter (Maybe disable cache and force recompilation in Advanced parameters->Performance to see the result)

 

What you will (hopefully) see is the normal layered filter. When you select one or more checkboxes, the 'summaary' pops up, where you see the 'enabled filters'. Just behind this text, a small button with "Uncheck all" will be shown. Clicking on it will uncheck all checkboxes, as asked.

 

Hope this does the trick,

pascal

 

N.B. If you have attributes with sliding scales and colours etc, these are NO checkboxes. You can probably add in a similar way these attributes to the uncheck function as well to reset them. Maybe a little more work, haven't tried it, as you asked for check boxes only in the question. If these are needed as well, (try first yourself :-) ) and ask when you get stuck.

[nakul]

Hi PascalVG

 

Hearty thanks for your help , i worked perfectly :D :D :D

But its not working for the color buttons

I tried my self , spend my whole night in finding the way to reset those color boxes.

I could not find the solution because COLORS are BUTTON type="button" (i found it on firebug)

So i have no idea how to uncheck a button??? :blink: :blink:

 

Please help me with this.

You can check this at my site www.tabsort.org

go to narrow your search >> check any color box.

 

Thanks.

Edited August 4, 2013 by nakul (see edit history)

[nakul]

Messed with that color button since 2 days, and solved it by very FUNNY way.

Funny bcoz its not at all the appropriate solution but its working

 

function uncheckAll()

{

var checkboxes = new Array();

checkboxes = document.forms['layered_form'].getElementsByTagName('input');

 

for (var i = 0; i < checkboxes.length; i++) {

if (checkboxes.type === 'checkbox') {

checkboxes.checked = false;

}

}

window.location ="http://www.tabsort.org/39-narrow-your-search";

}

 

here the link is reloading the page so all the checks gets reloaded and dis appears.

[PascalVG]

nakul,

Yep, this will work as well. (I believe you even can ONLY use your window.location =..... line, without doing the stuff with checkboxes. They will also reset automatically :-) )

Of course page will have to reload, but as it is cached already when loading the first time, it shouldn't be a big problem.

 

Shall we mark it as solved?

pascal

[nakul]

many many thanks.

 

yes make it as solved

Edited August 5, 2013 by nakul (see edit history)

[[email protected]]

Gret idea and thanks for the code think im going to make the change to the module aswell

[nakul]

Hi everyone,

 

I am very greatful to have such a helping communtiy.

Wanted some more help.

 

Go to http://www.tabsort.org/39-narrow-your-search

In the left you will find Layered Navigation BLock

Where there are many categories.

How can I apple functionality like

http://www.webdesignerwall.com/demo/jquery/collapsible-panels.html

 

How can i put this functionality. ie just first one panel is opened and others are closed.

 

I did much r&d on blocklayered.js and blocklayered.tpl but could not succeeded.

 

thanks.

NakuL

[Enoteca]

I resurrect this topic as I'm not finding a solution to expanding/collapsing the filters.

  

So far, we are able to include a "clear all filters" button. Is there a way to make the filters collapsed by default, or at least add a "expand/collapse all" button?

[Enoteca]

N.B. If you have attributes with sliding scales and colours etc, these are NO checkboxes. You can probably add in a similar way these attributes to the uncheck function as well to reset them. Maybe a little more work, haven't tried it, as you asked for check boxes only in the question. If these are needed as well, (try first yourself :-) ) and ask when you get stuck.

 

Also, I don't know how to write script for sliders and radio buttons. Can you help?

Edited March 12, 2014 by Enoteca (see edit history)

[PascalVG]

Hi Enoteca,

as this Topic is marked as SOLVED , I expect not too many people will answer here anymore. Please open a new topic, with the exact question. (You can send me a link in a Private Message (PM) ).

N.B. In your new topic, you of course can link to this topic, to refer to my old solution that may be partly useful for people to look at when answering the question, to not start from scratch.)

 

I will try to answer there (Please be patient, extremely busy at the moment. Maybe someone else picks it up first. That's why a new topic may work better...)

 

pascal.

[ps3z]

Hi Nakul,

 

Try if you like this: (Example code from 1.5.4.1)

Edit file themes/<your theme folder>/modules/blocklayered/blocklayered.tpl (Please backup first)

 

At the top, we will add some small javascript function that does the work: (Add the red text)

 

<!-- Block layered navigation module -->

{if $nbr_filterBlocks != 0}

<script type="text/javascript">

current_friendly_url = '#{$current_friendly_url}';

{if version_compare($smarty.const._PS_VERSION_,'1.5','>')}

param_product_url = '#{$param_product_url}';

{else}

param_product_url = '';

{/if}

 

function uncheckAll()

{

var checkboxes = new Array();

checkboxes = document.forms['layered_form'].getElementsByTagName('input');

 

for (var i = 0; i < checkboxes.length; i++) {

if (checkboxes.type === 'checkbox') {

checkboxes.checked = false;

}

}

}

 

</script>

 

 

Then,

 

Just below that code the following cod starts:

 

<div id="layered_block_left" class="block">
<p class="title_block">{l s='Catalog' mod='blocklayered'}</p>
<div class="block_content">
  <form action="#" id="layered_form">
   <div>
    {if isset($selected_filters) && $n_filters > 0}
    <div id="enabled_filters">
	 <span class="layered_subtitle" style="float: none;">{l s='Enabled filters:' mod='blocklayered'}</span> <input type="button" name="Reset_button" value="Reset" onclick="uncheckAll()">
	 <ul>

At the end here you see some extra code, that isn't there in the original one:

<input type="button" name="Reset_button" value="Uncheck all" onclick="uncheckAll()">

Add it to the place shown above

 

save the file and refresh page with layered filter (Maybe disable cache and force recompilation in Advanced parameters->Performance to see the result)

 

What you will (hopefully) see is the normal layered filter. When you select one or more checkboxes, the 'summaary' pops up, where you see the 'enabled filters'. Just behind this text, a small button with "Uncheck all" will be shown. Clicking on it will uncheck all checkboxes, as asked.

 

Hope this does the trick,

pascal

 

N.B. If you have attributes with sliding scales and colours etc, these are NO checkboxes. You can probably add in a similar way these attributes to the uncheck function as well to reset them. Maybe a little more work, haven't tried it, as you asked for check boxes only in the question. If these are needed as well, (try first yourself :-) ) and ask when you get stuck.

 

 

hi Pascal

 

i hope you are fine. i have the same problem by longtime. my prestashop is 1.6.1.0 how do i fix the issue please help me

 

 

 

Greetings

Ps3z