CMS filter | dynamic filter | save query

Attributes
1

Hello!

I’ve already read some of the questions in this forum, but i was wondering if i could get some support for the following questions:

  1. Is there a way to use dynamic visibility to show a filter (checkbox) only if that filter has results? (given other active filters) → this question was already asked here:
    Show only filters with results.

I couldnt find the correct solution for our site. Vind je perfecte auto | Bekijk ons ruime assortiment auto's

As an example, if i filter on this page, lets say, ‘make → ‘Kia’’, i want the filter ‘models’ to show me only the models available within Kia.

  1. Is there a way to save the site query’s, so if you go to a car-detail page and then go to the ‘previous page’ with the browser controls, you get back to the filtered site? If i do this now, the query is part of the URL, but the filter option isn’t selected.

Love to hear from you!

2

Update:

Problem 1 is fixed! If someone can help me with the second problem, it would be amazing.

3

Thank you for the update @Dennis_Unison!

I’ve been trying to debug the second issue to no success. This should be native behavior as navigating to the page using the same URL correctly sets the active filters…

I’ll open a bug report so this is addressed for V2.

4

Hi Luis,

Thanks for the response! I’ve also asked around within my network and the second issue was fixed by using the following lines of code within an external embed block:

type or paste code here
`<style> 
.w-checkbox:has(input:checked) .w-checkbox-input {
    border-color: var(--yellow-100);
    border-radius: var(--br-0-4-rem);
    background-color: var(--yellow-100);
    background-image: url(https://uploads-ssl.webflow.com/65e975b38d812412bcac7b97/666988b7d5561eb657bb00fa_Icon%20-%20Check.svg) ;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.4rem;
    box-shadow: 1px 1px 3px transparent;
}

</style>``

Maybe it will help you to debug this issue for the v2 version.

Best of luck and again, thank you for the reply :) 

Dennis
1 Like
5

Here is how we’ve fixed problem 1

<script>

window.fsAttributes = window.fsAttributes || [];

// Initialize cmsnest
window.fsAttributes.push([
    'cmsnest',
    (listInstances) => {
        console.log('cmsnest Successfully loaded!');
        window.fsAttributes.cmsfilter.init();
    },
]);

// Initialize cmsload
window.fsAttributes.push([
    'cmsload',
    (listInstances) => {
        console.log('cmsload Successfully loaded!');
        window.fsAttributes.push([
            'cmsfilter',
            (filterInstances) => {
                const searchInput = document.querySelector('.filter_search-field');
                searchInput.dispatchEvent(new Event('input', { bubbles: true }));

                setTimeout(() => {
                    filterInstances.forEach((filterInstance) => {
                        const hideEmptyFilters = () => {
                            const resultsArray = filterInstance.filtersData.flatMap(filterData =>
                                filterData.elements.map(element => ({
                                    filterName: element.value,
                                    filterResults: element.resultsCount,
                                }))
                            );

                            resultsArray.forEach(({ filterName, filterResults }) => {
                                const elements = Array.from(document.querySelectorAll('[fs-cmsfilter-field]')).filter(el =>
                                    el.textContent.trim() === filterName
                                );

                                elements.forEach(element => {
                                    const parentElement = element.parentElement.parentElement;

                                    // check if parent class name contains .w-dyn-item
                                    if (parentElement.className.includes('w-dyn-item')) {
                                        parentElement.style.display = filterResults === 0 ? 'none' : 'block';
                                    }
                                });
                            });
                        };

                        // Initial call to hideEmptyFilters
                        hideEmptyFilters();

                        // Call hideEmptyFilters on rendering items
                        filterInstance.listInstance.on('renderitems', hideEmptyFilters);
                    });
                }, 1000);
            },
        ]);
    },
]);



</script>
1 Like
6

Thank you for sharing your solutions! I really appreciate it!

1 Like