Jump to content

[TUTORIAL] How to Hook the Layered Navigation Block to the Center Column

Recommended Posts

  • 7 months later...

Thats great and acutally helped me to move the layered navigation block to the center.


However two things are not working now:

 I cannot click the x to remove the filters again. Nothing happens (But I think I can fix it, it is a js error)

JS Error: cannot read property 'search' of undefined

Edited by SirupB (see edit history)

Share this post

Link to post
Share on other sites

Thank you for your answer. 


Sure, I should give better explanation about the error. I followed exactly the instructions from the above link. It worked like a charm. 


Setting a filter works perfectly. However when I try to click the X to cancel a filter, the error is thrown. Here is a screenshot:




The error is thrown in the cancelFilter Code of "blocklayered.js". 

Error is thrown at: if ($(this).data("rel").search(/_slider$/) > 0).

I tried to change the regex /_slider$/ to just / / but the same error happens. I also tried to choose a different variable instead of "rel", for example download. 

Here is the function: 

function cancelFilter()
	$(document).on('click', '#enabled_filters a', function(e){
		if ($(this).data("rel").search(/_slider$/) > 0)
			if ($('#'+$(this).data('rel')).length)
				$('#'+$(this).data('rel')).slider('values' , 0, $('#'+$(this).data('rel')).slider('option' , 'min' ));
				$('#'+$(this).data('rel')).slider('values' , 1, $('#'+$(this).data('rel')).slider('option' , 'max' ));
				$('#'+$(this).data('rel')).slider('option', 'slide')(0,{values:[$('#'+$(this).data('rel')).slider( 'option' , 'min' ), $('#'+$(this).data('rel')).slider( 'option' , 'max' )]});
			else if($('#'+$(this).data('rel').replace(/_slider$/, '_range_min')).length)
				$('#'+$(this).data('rel').replace(/_slider$/, '_range_min')).val($('#'+$(this).data('rel').replace(/_slider$/, '_range_min')).attr('limitValue'));
				$('#'+$(this).data('rel').replace(/_slider$/, '_range_max')).val($('#'+$(this).data('rel').replace(/_slider$/, '_range_max')).attr('limitValue'));
			if ($('option#'+$(this).data('rel')).length)
				$('#'+$(this).data('rel')).attr('checked', false);
				$('.'+$(this).data('rel')).attr('checked', false);
				$('#layered_form input[type=hidden][name='+$(this).data('rel')+']').remove();

I set a breakpoint at that line, and here is my this object before the error is thrown (seems "rel" exists?)

e: n.Event
this: a
accessKey: ""
attributes: NamedNodeMap
baseURI: "http://XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/de/21-oolong-tee#/blatttyp-ganzblatt_gerollt"
charset: ""
childElementCount: 1
childNodes: NodeList[1]
children: HTMLCollection[1]
classList: DOMTokenList[0]
className: ""
clientHeight: 18
clientLeft: 0
clientTop: 0
clientWidth: 11
contentEditable: "inherit"
coords: ""
dataset: DOMStringMap
dir: ""
download: ""
draggable: true
firstChild: i.icon-remove
firstElementChild: i.icon-remove
hash: ""
hidden: false
hreflang: ""
id: ""
innerHTML: "<i class="icon-remove"></i>"
innerText: ""
isContentEditable: false
lang: ""
lastChild: i.icon-remove
lastElementChild: i.icon-remove
localName: "a"
name: ""
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: null
nextSibling: text
nodeName: "A"
nodeType: 1
nodeValue: null
offsetHeight: 18
offsetLeft: 537
offsetParent: div#center_column.center_column.col-xs-12.col-sm-9
offsetTop: 150
offsetWidth: 11
onabort: null
onautocomplete: null
onautocompleteerror: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onblur: null
oncancel: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
onclose: null
oncontextmenu: null
oncopy: null
oncuechange: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onloadeddata: null
onloadedmetadata: null
onloadstart: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpaste: null
onpause: null
onplay: null
onplaying: null
onprogress: null
onratechange: null
onreset: null
onresize: null
onscroll: null
onsearch: null
onseeked: null
onseeking: null
onselect: null
onselectstart: null
onshow: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
ontoggle: null
onvolumechange: null
onwaiting: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
onwheel: null
outerHTML: "<a href="#" rel="layered_id_feature_58" title="Abbrechen"><i class="icon-remove"></i></a>"
outerText: ""
ownerDocument: document
parentElement: li
parentNode: li
password: ""
pathname: "/de/21-oolong-tee"
ping: ""
port: ""
prefix: null
previousElementSibling: null
previousSibling: text
protocol: "http:"
rel: "layered_id_feature_58"
rev: ""
scrollHeight: 18
scrollLeft: 0
scrollTop: 0
scrollWidth: 10
search: ""
shadowRoot: null
shape: ""
spellcheck: true
style: CSSStyleDeclaration
tabIndex: 0
tagName: "A"
target: ""
text: ""
textContent: ""
title: "Abbrechen"
translate: true
type: ""
username: ""
webkitdropzone: ""
__proto__: HTMLAnchorElement
Edited by SirupB (see edit history)

Share this post

Link to post
Share on other sites

Sorry this wasn't clear. It is the following line in the blocklayered.js I posted above:

if ($(this).data("rel").search(/_slider$/) > 0)

It is the fourth line of the code.

Share this post

Link to post
Share on other sites

I sent you a personal message containing the link to my test server. This might be easier.



<a href="#" rel="layered_id_feature_58" title="Abbrechen"><i class="icon-remove"></i></a>

The rel and the content is actually the <a> element over the X.

Share this post

Link to post
Share on other sites
  • 3 weeks later...


if ($(this).data("rel").search(/_slider$/) > 0)


if ($(this).attr('rel').search(/_slider$/) > 0)

Now there is no js error anymore - but the behaviour is not changed. The filter is NOT removed (as shown as in the picture in the first post above).



Share this post

Link to post
Share on other sites
  • 1 year later...

No there is no error, but when I tried doing this:


/*if ((isset($this->context->controller->display_column_left) && !$this->context->controller->display_column_left)
&& (isset($this->context->controller->display_column_right) && !$this->context->controller->display_column_right))
return false;*/


it worked. What could be the solution if I don't have to use this. 


Thank you

Share this post

Link to post
Share on other sites
  • 5 months later...

Hey fellows! Just wrote a new tut, seeing this is where many people on the forums have trouble: how to properly hook the layered navigation to the center column (category page, of course)







i have prestashop,  can you say me how i must to do it?


show me step by step


thank you

Share this post

Link to post
Share on other sites
  • 1 year later...

Thank you, it is working fine in

I want to make make category page "full width" - without left column , but if i disable left column (category) in my theme editor , the blocklayered is not working. What i have to do now please? :)

Thank you Nemo

Edited by Kaper (see edit history)

Share this post

Link to post
Share on other sites

Hey, there is a condition that checks it in the blocklayered.php file, I forgot the name to be honest, so I can't help you off the top of my head, but it should simply return false if there is no column

Share this post

Link to post
Share on other sites
  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More