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)
Link to comment
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)
Link to comment
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.

Link to comment
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).



Link to comment
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

Link to comment
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

Link to comment
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)
Link to comment
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...