Javascript – Need to refresh Wix-Stores gallery based on drop-down selections that are separate from Wix-Stores products

I currently have the following code that works on a repeater (see laketoads.com). Currently, the user selects drop-down values and clicks ‘Shop Now’ to be directed to our lake-apparel-showcase page. The user can change the state and/or lake here as well.

I want to move this same strategy to my ‘Shop All’ page instead but can’t figure out how to refresh the gallery (instead of repeater). The Wix-Stores Product Collection does not have a field called state or lake and I’m unable to add it so I created a separate database called ‘Import791’ that contains all the states, lakes and product names. Is there a way we can "link" the Product Name in the Wix-Stores Product Collection to my database (Import791) by Product Name then write the code to say (If the selected state equals this and the lake equals that, display associated products within the Wix-Stores Product Collection after linking the product name across the 2 sources?

Code I’m using that’s working on my lake-apparel-showcase page: AND… I truely appreciate anyone’s help as it’s soooo close!!

import wixData from 'wix-data';
import {session} from 'wix-storage';

$w.onReady(async function () {
    $w('#stateDropdown').options = [];
    $w('#lakeDropdown').options = [];

    const savedState = session.getItem("selectedState");
    const savedLake = session.getItem("selectedLake");

    try {
        await populateStateData();
        
        if (savedState) {
            $w('#stateDropdown').value = savedState;
            await populateLakeData(savedState);
            
            if (savedLake) {
                $w('#lakeDropdown').value = savedLake;
            }
        }
        
        await refreshRepeater();
    } catch (error) {
        console.error("Error in initialization:", error);
    }

    $w('#stateDropdown').onChange(async (event) => {
        await populateLakeData(event.target.value);
        await refreshRepeater();
    });

    $w('#lakeDropdown').onChange(() => {
        refreshRepeater();
    });
});

async function populateStateData() {
    try {
        const results = await wixData.query("Import791")
            .ascending("state")
            .limit(1000)
            .find();
        const uniqueTitles = getUniqueItems(results.items, "state");
        $w("#stateDropdown").options = buildOptions(uniqueTitles);
    } catch (error) {
        console.error("Error populating states:", error);
        throw error;
    }
}

async function populateLakeData(state) {
    try {
        const results = await wixData.query("Import791")
            .ascending("lakeName")
            .limit(1000)
            .eq("state", state)
            .find();
        const uniqueTitles = getUniqueItems(results.items, "lakeName");
        $w("#lakeDropdown").options = buildOptions(uniqueTitles);
    } catch (error) {
        console.error("Error populating lakes:", error);
        throw error;
    }
}

function getUniqueItems(items, property) {
    const uniques = items.map(item => item[property]);
    return [...new Set(uniques)];
}

function buildOptions(uniqueList) {
    return uniqueList.map(curr => {
        return { label: curr, value: curr };
    });
}

async function refreshRepeater() {
    const selectedState = $w('#stateDropdown').value;
    const selectedLake = $w('#lakeDropdown').value;
    
    let query = wixData.query("Import791");
    
    if (selectedState) {
        query = query.eq("state", selectedState);
    }
    
    if (selectedLake) {
        query = query.eq("lakeName", selectedLake);
    }
    
    try {
        const results = await query.find();
        $w("#listRepeater").data = results.items;
    } catch (error) {
        console.error("Error refreshing repeater:", error);
    }
}

I’ve been working with Claude AI to try to figure this out; however, the program keeps adding code that doesn’t work with my version and I’m already up to 50 questions with Claude:(