Block Layered Navigation: To change the default layout of to collapse all categories

[chrispin2]

Hi,

 

If anyone out there can help . I would like my layered navigation to be collapsed by default. Right now it is expanded and i can view the options of each category.

 

i would like to achieve the user seeing only the categories and not its options.

 

http://thedesignerportfolio.com/6-Categories

[Arcio]

workin on PS 1.5 (I think in 1.4 should be very similar)
modules/blocklayered/blocklayered.js
about line 30 find:

openCloseFilter();

add under:

$('#layered_form span.layered_close a').trigger('click');

[Arcio]

additionaly, if someone want to show for example 3 first filters, and make the rest visible by clicking "show more filters'

in root/themes/YOURTHEME/modules/blocklayered/blocklayered.tpl (if you don't have that file , use root/modules/blocklayered/blocklayered.tpl

about line 85 find <div>

replace with

<div{if $filter@iteration > 3}{$count =  $filter@iteration} class="morethan3"{/if}>

about line 240 find </form>
add under

<a id="allfilters" onclick="$('.morethan3').attr('style', 'display:block !important');$(this).hide();">Więcej filtrów</a>

add in root/themes/YOURTHEME/css/global.css at the end

.morethan3{display:none!important;}

[Enoteca]

adding

$('#layered_form span.layered_close a').trigger('click');

doesn't work for me. Was too simple to be true. How did you solve this issue?

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

[Enoteca]

In latest PS 1.5.6, about line 307 there's a piece of code, maybe it was included by the developers after this topic's feedback? It reads:

function openCloseFilter()
{
	$('#layered_form span.layered_close a').live('click', function(e)
	{
		if ($(this).html() == '<')
		{
			$('#'+$(this).attr('rel')).show();
			$(this).html('v');
			$(this).parent().removeClass('closed');
		}
		else
		{
			$('#'+$(this).attr('rel')).hide();
			$(this).html('<');
			$(this).parent().addClass('closed');
		}
		
		e.preventDefault();
	});
}

What do exactly we have to change to make default the collapsed view?

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

[jaguarcity]

 

workin on PS 1.5 (I think in 1.4 should be very similar)

modules/blocklayered/blocklayered.js

about line 30 find:

openCloseFilter();

add under:

$('#layered_form span.layered_close a').trigger('click');

The result is positive, but the Ajax request returns all into place, how to fix it?

[jmtroit]

Anyone found a solution for this that works on 1.6? I also would like the categories to be collapsed by default and just can't find out how to....

[dtgmaze]

Hi, 

 

Did anyone find a solution for the collapsed view of blocklayered module for prestashop 1.6

 

Kind regards, 

[rraulinio]

Put in footer.tpl in your theme the following:

$(window).load(function() {
					$('#layered_form span.layered_close a').trigger('click');
				});

Explication: when page is fully loaded, it will perform the trigger, which "clicks" on all the minus signs that collapses the blocks.

And then try accessing a category (with "#" at the end). It will work, just like it worked for me!

Edited March 18, 2016 by rraulinio (see edit history)

[Misa Amane]

As it has been previously mentionned, Ajax request (after selecting a value for a filter) reopen everything.

Anyone know how to fix it ?

[Rissinko]

Someone who know how to hide layered navigation modul with selected values on mobile devices ?? 

[somits1]

Hi,

 

This is Somit. I am using prestashop 1.5.6. my site is http://www.slmobileprice.com

 

In my website Layered navigation module is working only on desktop computer not on mobile devices. Please help me to solve the issue.

 

Please tell me to enable layered navigation module for mobile site.

 

Thanks,

Somit

[Cnic]

Hello,

 

Just solved it without adding anything to the footer.tpl

ok, in blocklayered.tpl i modified the following lines

                        <div class="layered_subtitle_heading">
                            <h2 class="title_block">{$filter.name|escape:'html':'UTF-8'}</h2>
                            <span class="layered_close">
                            	<a href="#" data-rel="ul_layered_{$filter.type}_{$filter.id_key}"></a>
                            </span>
						</div>
						<ul id="ul_layered_{$filter.type}_{$filter.id_key}" class="col-lg-12 layered_filter_ul{if isset($filter.is_color_group) && $filter.is_color_group} color-group{/if}">
						

to

                        <div class="layered_subtitle_heading">
                            <h2 class="title_block">{$filter.name|escape:'html':'UTF-8'}</h2>
                            <span class="layered_close">
                            	<a href="#" data-rel="ul_layered_{$filter.type}_{$filter.id_key}">&lt;</a>
                            </span>
						</div>
						<ul style="display: none" id="ul_layered_{$filter.type}_{$filter.id_key}" class="col-lg-12 layered_filter_ul{if isset($filter.is_color_group) && $filter.is_color_group} color-group{/if}">
						

1. inserted the &lt; into the address, without this the icon remains - and you have to click twice to open up the menu

2. added style="display: none"  - without this you have to click twice to open up the menu