Out of the box the OffCanvas element supports having WPGridBuilder‘s facets inside to be used with any query loops on the page. This is useful for keeping things nice and clean on the page, and revealing all of the facets only when needed, just with a click. Especially useful for mobile where screen real estate is more valuable.
Using Facets with the OffCanvas
WPGridBuilder has a free Bricks-addon, which makes it very easy to add their facets to a page. With our OffCanvas it’s as simple as just adding in the facet element to the page and dragging them inside of the OffCanvas, and then selecting which grid it controls on the page, ie which query loop.
Everything will work out of the box. The user opens the OffCanvas (by clicking whatever button you’re using for that) and then the user can use the filters to change the query loop.
However, if we’re using facets and have a ‘submit / apply filters’ button that applies the filters only after that button is pressed, we may also want the OffCanvas to then automatically close the moment that the submit button has been clicked (to move out of the way so we can see the results of the filtering).
We’ll go through how to do this.
Events/Methods
This is where the events/methods found in both the WPGridbuilder’s and BricksExtra’s documentation come in handy. You can think of these as tools to allow different elements to react to each other in different ways.
We can listen for certain events happening, and then tell another element to do something when that event happens.
In this case, we want to listen out for the facets events, specifically when the facets are refreshed (which in this case means the user has clicked the submit button). When this event takes place, we can then tell the OffCanvas to close.
We can refer to WPGB’s documentation on their JS Events to find out how to listen for the facets refreshing.
That gives us this code..
window.WP_Grid_Builder && WP_Grid_Builder.on( 'init', function( wpgb ) {
wpgb.facets.on( 'refresh', function() {
/* do something on refresh */
} );
} );Now we’re listening for the facets to be refreshed, we just need to instruct the OffCanvas to close when this happens. We can refer to the OffCanvas’ documentation, which tells us how to programmatically close the OffCanvas.
That gives us this code.. (where ‘offcanvas-1’ would be the ID of the OffCanvas)
xCloseOffCanvas( 'offcanvas-1' )So it’s just a case of putting them together and then adding inside our page settings > custom code > footer scripts. (remembering to add the script tags, as is needed in Bricks)
<script>
window.WP_Grid_Builder && WP_Grid_Builder.on( 'init', function( wpgb ) {
wpgb.facets.on( 'refresh', function() {
/* close the offcanvas with ID of offcanvas-1 */
xCloseOffCanvas( 'offcanvas-1' )
} );
} );
</script>That’s it
Now the moment the submit button is clicked, and the refresh event is triggered, the OffCanvas with that ID will automatically close (if it’s open).
Hopefully, this simple example gives you some insight on how to use the JS events provided by WPGridBuilder. Their documentation shows there are lots of different events that trigger at different times, and understanding how to use these could open up some new possibilities if you are unfamiliar with them.