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!