Create code to open product page based on user's selection in dropdown

Ask the community
, ,
1

Now on day 3 of trying to figure this out -

Question:
I have 2 drop-down boxes on my main page populated from a database query (Drop down #1 is State & Drop down #2 is Lake). the 2nd drop-down is based on what the user selects in the first drop-down box. These 2 drop-downs are working great.

I’ve added a button at the bottom called “Shop Now” which i want to direct the user to based on the specific lake the user selects in the 2nd drop-down. Sounds like it should be an easy thing to do??

Product:
Not sure what product this is - just logging into the Wix editor to edit my website

What are you trying to achieve:
[Explain the details of what you are trying to achieve. The more details you provide, the easier it is to understand what you need.]

What have you already tried:
I’ve tried everything I could find on the web regarding trying to get this to work.

Here is my current code that runs my drop-downs and enables the button:

import wixLocation from 'wix-location';
import wixData from 'wix-data';
let filter;
let location;

$w.onReady(function () {
    initPage();
});

async function initPage() {
    const StateLakes = {};

    wixData.query('StateDB')
        .ascending('title')
        .find()
        .then(results => {
            const stateOptions = results.items.map(state => ({ label: state.title, value: state._id }));
            $w('#dropdownstate').options = stateOptions;
        });

    $w('#dropdownstate').onChange(async() => {
        let hasLakes = false;
        const selectedState = $w('#dropdownstate').value;

        if (StateLakes[selectedState]) {
            hasLakes = true;
            $w('#dropdownlake').options = StateLakes[selectedState];
        } else {
            const results = await wixData.query('LakeDB1')
                .eq('state', selectedState)
                .ascending('title')
                .find()
                
			if (results.length > 0) {
				hasLakes = true;
				const lakeOptions = results.items.map(lake => ({ label: lake.title, value: lake._id }));
				$w('#dropdownlake').options = lakeOptions;
				StateLakes[selectedState] = lakeOptions;
			}    
        }

        if (hasLakes) {
            $w('#dropdownlake').selectedIndex = undefined;
            $w('#dropdownlake').expand();
            $w('#button43').disable();
        } else {
			$w('#dropdownlake').collapse();
            $w('#button43').enable();
        }

    });

    $w('#dropdownlake').onChange(() => {
        $w('#button43').enable();

    });
2

Sounds like an interesting project!

Hopefully we can get you over this hurdle :muscle:

Is this the full code?

At the moment, besides enabling/disabling the button, I’m not seeing a way to redirect users to the specified page when the button is cliecked.

You’ll likely need to add an onClick event for the button along with wix-location-frontend and a little extra code to decide where the button should take users.

$w('#button43').onClick(() => {
	//Code to decide what page to navigate to.

	wixLocationFrontend.to("/pageUrl")
})
1 Like