BricksUltimate

Someone asked me this question how he will show the product filters inside the BricksUltimate’s Off-Canvas element for tablet/mobile(without duplicate product filters element)? In this tutorial, I am providing a simple solution for it.

Step 1: Make a product listing template for shop and/or archive pages. I created the two columns layout. I put the product filters on the left side and the products on the right side.

Step 2: Add the filter icon with the help of the Icon element and put it in the left side column. Hide the icon for the desktop(display=none) and show it on tablet/mobile.

If you want you can also hide the product filters element for tablet/mobile. So you can easily customize the design on the builder editor.

Step 3: Add the blank Off-Canvas element of the BricksUltimate add-on and put the filter icon’s ID/CSS class in the trigger selector field of the off-canvas element.

Step 4: Add the Code element and put the following JS code inside the Code element. Enable the “Execute code” option.

<script type="text/javascript">
  	document.addEventListener('DOMContentLoaded', function(){
		let node = document.querySelector( '#brxe-nezwgy' ),
			clone = node.cloneNode(true);

		document.querySelector( '#brxe-bdsejr' ).removeChild( node );

		var showProductFiltersOffCanvas = function() {
			const offcanvas = document.querySelector( '#brxe-buswmq' );
			if( document.documentElement.clientWidth <= 768 ) {
				offcanvas.querySelector('.bu-oc-panel').appendChild( clone );	
			} else {
				document.querySelector( '#brxe-bdsejr' ).appendChild( clone );
				offcanvas.querySelector('.bu-oc-panel').innerHTML = '';
			}

			bricksWooProductsFilter();
		};

	    showProductFiltersOffCanvas();
		window.addEventListener('resize', showProductFiltersOffCanvas );
	});
</script>

#brxe-nezwgy is the product filter element ID. Change it with your ID.
#brxe-bdsejr is the left column ID. Change it with your ID.
#brxe-buswmq is the off-canvas element ID. Change it with your ID.