In this tutorial, I'm going to show you how to use JetSmartFilters Events to run your own code after a filtering event.
This tutorial works for both Elementor and Bricks Builder.
It's useful if you want to run a custom function after a filtering event. Say your loop item depends on some custom JS, and you want to run that JS again after the post grid or product grid updates.
This tutorial seeks to help understand how to listen to JetSmartFilters events and run custom code in response.
If you don't already have JetSmartFilters, get a Crocoblock discount for your purchase.
Listening to JetSmartFilters Events
JetSmartFilters dispatches various events during its operation. By listening to these events, you can execute additional custom JavaScript, such as updating WooCommerce products dynamically.
To hook into these events, we are going to use the window.JetSmartFilters.events.subscribe method provided by JetSmartFilters. This method allows you to listen for specific events and trigger custom JS in response.
Example: Listening to a Filter Apply Event
Let's say you have a custom function updateWooProducts().
If you want to run updateWooProducts() after a filter is applied and the content is loaded, you would listen to the ajaxFilters/end-loading event as follows:
<script> /* Please login to get the code * The code will be for the How To Use Crocoblock JetSmartFilters JavaScript Events tutorial * Found at this URL https://element.how/crocoblock-jetsmartfilters-javascript-events/ */ </script>
Key JetSmartFilters Events
JetSmartFilters offers several events you can hook into. Here are some of the key events and when they are fired:
- ajaxFilters/updated: Fired after the AJAX filter update is complete.
- ajaxFilters/start-loading: Fired at the start of the AJAX filtering process.
- ajaxFilters/end-loading: Fired after the AJAX content update is complete.
- fiter/apply: Fired when a filter is applied.
- pagination/change: Fired when pagination changes.
- activeItems/change: Fired when active filter items change.
Targeting Specific Filters
If your page includes multiple filters and you need to target a specific one, you might refine your listener to check for a specific provider or queryId:
<script> /* Please login to get the code * The code will be for the How To Use Crocoblock JetSmartFilters JavaScript Events tutorial * Found at this URL https://element.how/crocoblock-jetsmartfilters-javascript-events/ */ </script>
Replace 'your-specific-filter-provider-id' with the ID of the filter you're targeting.
Quick start
To quickly get started, and easily find out which event you need, and when which event is fired, just go on the front end of your page with the Smart Filters, open the browser console (F12 on Chrome, Option + ⌘ + C on Safari), and paste this there, then click Enter.
<script> /* Please login to get the code * The code will be for the How To Use Crocoblock JetSmartFilters JavaScript Events tutorial * Found at this URL https://element.how/crocoblock-jetsmartfilters-javascript-events/ */ </script>
Now, simply use the filters, and you will see the logs in the console showing up at various step of the filtering process.
Important: when running code in the console like this, it's only active for the current page load. As soon as the page location is changed or the page is refreshed, it's not there. You need to Paste + Enter to run it again.
Concrete Examples
Here are a few real-world examples showing how you can leverage JetSmartFilters events.
Example 1: Bricks Builder WooCommerce Product Grid Update
I used this on a Bricks Builder WooCommerce website. JetSmartFilters's code (as of early April 2024) does not rerun the native Bricks Woo functions, like it does other native Bricks functions.
So in order for the product grid to still work perfectly fine after AJAX filtering with JetSmartFilters, I had to add this code. Now it all works really well.
<script> /* Please login to get the code * The code will be for the How To Use Crocoblock JetSmartFilters JavaScript Events tutorial * Found at this URL https://element.how/crocoblock-jetsmartfilters-javascript-events/ */ </script>
Example 2: Modifying Page Content Based on Filters
Suppose you want to modify other parts of your page (like showing or hiding content sections) based on the selection of a specific filter:
<script> /* Please login to get the code * The code will be for the How To Use Crocoblock JetSmartFilters JavaScript Events tutorial * Found at this URL https://element.how/crocoblock-jetsmartfilters-javascript-events/ */ </script>
Example 3: Custom Data Tracking for Filter Usage
Track how users interact with filters on your eCommerce site to gather insights for data gathering purposes:
<script> /* Please login to get the code * The code will be for the How To Use Crocoblock JetSmartFilters JavaScript Events tutorial * Found at this URL https://element.how/crocoblock-jetsmartfilters-javascript-events/ */ </script>
Example 4: Refreshing Additional Components After Filtering
After applying filters, you may need to refresh other components on the page, such as sliders or dynamic content blocks:
<script> /* Please login to get the code * The code will be for the How To Use Crocoblock JetSmartFilters JavaScript Events tutorial * Found at this URL https://element.how/crocoblock-jetsmartfilters-javascript-events/ */ </script>
Example 5: Conditional Loading More Products
For an online store, you may want to automatically load more products when a specific filter is applied, improving user experience:
<script> /* Please login to get the code * The code will be for the How To Use Crocoblock JetSmartFilters JavaScript Events tutorial * Found at this URL https://element.how/crocoblock-jetsmartfilters-javascript-events/ */ </script>
Conclusion
I hope you found this tutorial helpful!
Cheers!