How to Use a Listing Grid as a Filter and Hide Results Until Applied in JetSmartFilters

How to Use a Listing Grid as a Filter and Hide Results Until Applied in JetSmartFilters

How to Use a Listing Grid as a Filter and Hide Results Until Applied in JetSmartFilters
How to Use a Listing Grid as a Filter and Hide Results Until Applied in JetSmartFilters
July 7, 2024
Participants
Description

Learn how to use a listing grid as a filter and hide the results until a filter is applied with JetSmartFilters. This tutorial walks you through the entire process, including custom CSS and JavaScript adaptations.

Related Resources:

GitHub: Jet Engine Listing as Filter
https://github.com/Crocoblock/jet-engine-listing-as-filter

Crocoblock Knowledge Base: Hiding Listing Grid Before Filtering
https://crocoblock.com/knowledge-base/tips-and-tricks/jetsmartfilters-hiding-listing-grid-before-filtering/

Code Snippets Used:

 // Handle deselecting the radio filter
window.JetSmartFilters.events.subscribe('jet-filter-checkboxes/deselect', function() {
for (const groupName in window.JetSmartFilters.filterGroups) {
const filterGroup = window.JetSmartFilters.filterGroups[groupName],
$provider = filterGroup?.$provider,
query = filterGroup?.currentQuery || {};

if (!$provider.closest('.hide-before-filter')?.length) {
continue;
}

if (!Object.keys(query).length) {
hideProvider($provider, '.hide-before-filter');
} else {
showProvider($provider, '.hide-before-filter');
}
}
});

If you found this video helpful, please like, comment, and subscribe for more tutorials!

Tags : JetEngine | JetSmartFilters | Query Builder
Play Video
What you think about How to Use a Listing Grid as a Filter and Hide Results Until Applied in JetSmartFilters ?
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
Scroll to Top