Trying to create a More Filters Lightbox with checkbox filters that allow me to select the options I want, click an "Apply" button, then closes the lightbox and applies filters to webpage dataset in repeater. What is wrong with my code?

Ask the community
, , ,
1

I will be honest and state that I have no experience with coding and I used ChatGPT to create this code, but I have repeatedly tweaked and refined it, and it still does do what I need it to do. For context, I am trying to create a free therapist directory for a non-profit. I have dropdown filters on the main page that work find, but all the checkbox filters make the page cluttered, so I want to move them to a lightbox that is activated by a “More Filters” button. I want the checkbox choices to apply to the webpage dataset in the repeater. What am I doing wrong?

Webpage Code:

import wixWindow from 'wix-window';
import wixData from 'wix-data';

$w.onReady(function () {
            $w('#filterButton').onClick(() => {
                    wixWindow.openLightbox('FilterLightbox').then((filters) => {
                            if (!filters) { // Reset filter if user closes lightbox without applying $w('#therapistDataset').setFilter(wixData.filter()); return; }

                                let filter = wixData.filter();

                                if (filters.specialties.length > 0) {
                                    filter = filter.hasSome('specialties', filters.specialties);
                                }

                                if (filters.insurance.length > 0) {
                                    filter = filter.hasSome('insurance', filters.insurance);
                                }

                                if (filters.typesOfTherapy.length > 0) {
                                    filter = filter.hasSome('typesOfTherapy', filters.typesOfTherapy);
                                }

                                $w('#therapistDataset').setFilter(filter);
                            });
                    });
            });

Lightbox Code:

import wixWindow from 'wix-window';

$w.onReady(function () {
    $w('#applyButton').onClick(() => {
        const selectedFilters = { specialties: $w('#specialtiesCheckbox').value || [], insurance: $w('#insuranceCheckbox').value || [], typesOfTherapy: $w('#typesOfTherapyCheckbox').value || [] };

        wixWindow.lightbox.close(selectedFilters);
    });
});
2

I understand the issue. I have built a few directory sites that end up with lots of filters. Usually I just have a few main filters shown, then add all the others to a collapsed section, with a toggle to open and close the section.
But to use a light box you need adjust the code slightly.
Try this

Page Code:

import wixWindow from 'wix-window';
import wixData from 'wix-data';

$w.onReady(function () {
    $w('#filterButton').onClick(() => {
        wixWindow.openLightbox('FilterLightbox')
        .then((filters) => {
            // If filters is undefined (lightbox closed without applying), reset filter
            if (!filters) {
                $w('#therapistDataset').setFilter(wixData.filter());
                return;
            }

            // Create a new filter object
            let filter = wixData.filter();

            // Apply filters conditionally
            if (filters.specialties && filters.specialties.length > 0) {
                filter = filter.hasSome('specialties', filters.specialties);
            }

            if (filters.insurance && filters.insurance.length > 0) {
                filter = filter.hasSome('insurance', filters.insurance);
            }

            if (filters.typesOfTherapy && filters.typesOfTherapy.length > 0) {
                filter = filter.hasSome('typesOfTherapy', filters.typesOfTherapy);
            }

            // Apply the filter to the dataset
            $w('#therapistDataset').setFilter(filter);
        });
    });
});

Lightbox Code:

import wixWindow from 'wix-window';

$w.onReady(function () {
    $w('#applyButton').onClick(() => {
        const selectedFilters = {
            specialties: $w('#specialtiesCheckbox').value || [],
            insurance: $w('#insuranceCheckbox').value || [],
            typesOfTherapy: $w('#typesOfTherapyCheckbox').value || []
        };

        wixWindow.lightbox.close(selectedFilters);
    });
});

I have not had time to test, but should get you closer.
In your original code, the bracket opened for the if (!filters) line appears malformed which is likely breaking logic flow.
I moved the reset logic into a clear and properly scoped if (!filters) block with an early return;.