Redirect from a conditional dropdown

Ask the community
,
1

Hi everyone, thanks to the help of the Code Queen, I created two drop downs with conditional results. I have a tour company and want to have customers write reviews based on the tour they took. First dropdown is the Country and the second dropdown is the specific tour they took.

How can I redirect to another page based on what selection is shown. For instance, if someone clicks “Costa Rica” for country and then selects “Zipline tour” I want them to be redirected to the respective review page for Zipline tours.

This is the code I already have for the conditional drop downs:

import wixData from ‘wix-data’;

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

function uniqueDropDown1 (){
wixData.query(“tourreviews”)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#Country”).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.country);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}

export function Country_change(event, $w) {
uniqueDropDown2();
$w(“#Tour”).enable();
}
function uniqueDropDown2 (){
wixData.query(“tourreviews”)
.contains(“country”, $w(“#Country”).value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#Tour”).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.tour);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}

Thank you for your help :slight_smile:

2

A quick and easy way is to just add a submit button called reviews or something similar that is connected to the second dropdown value in the code.

Then the user can still choose the options they want from the two dropdowns and then click the button to go to the appropriate page.

Just change the code sample below to match the elements on your own page.

THE ELEMENTS

The Page
User Input: #dropdown1​​
​
Button Element: #BookNow
Wix Pages: 
Online Payment Page: /payment
Order Form Page: /reservation

THE CODE

Page Code
import wixLocation from "wix-location";

export function BookNow_click(event, $w) {
        let option = $w("#dropdown1").value;
        if ( option === "Pay Now" ) {
             wixLocation.to("/payment");
        } else {
             wixLocation.to("/reservation");
    }
}

Or you can use a code example from Yisrael (Wix Admin) and do it straight from the dropdown choice, which if you have not done so already, you will need to have another field in your dropdown dataset that is the URL of the page that the dropdown value is supposed to go to.

You could do something like this:

import wixLocation from 'wix-location';

//Your code//

$w("#dropdown1").onChange( (event, $w) => {
   let page = event.target.value; // new page name selected
   let path = "/" + page; // create path to local page
   wixLocation.to(path);
});

Each value in the dropdown should have its value set to a local page.
Then the onChange() function is used to get the new selection.
Finally, use wix-location.to() to redirect to the “selected” page.

Or you can use a code example from Roi (Wix Mod) that will show you how to do it the dropdown value link in your code for more that the two options in the first sample code.

Try this code:

import wixData from 'wix-data'; 
import wixLocation from 'wix-location'; 
 
$w.onReady(() => {
	$w('#dynamicDataset').onReady(() => {
		$w("#classesDropdown").onChange((event, $w) => {
			let newValue = event.classDropdown.value;
			if ($w("#classesDropdown").value === 1) {
				wixLocation.to(`Module-01/Module-N03`);
				console.log("Going to Class #01");
			}
			if ($w("#classesDropdown").value === 2) {
				wixLocation.to(`/Module-01/Teste-seus-Conhecimentos`);
				console.log("Going to Class #02");
			}
			if ($w("#classesDropdown").value === 3) {
				wixLocation.to(`/Module-01/Use-seu-website-para-atingir-suas-Metas---Dura%C3%A7%C3%A3o%3A-05%3A22`);
				console.log("Going to Class #03");
			}
		});
	});
});
3

Hi Givemeawhiskey, I wanna give you a case of whiskeys. I have spent two days trying to figure it out and you finally gave me a solution. Thank you so much. I implemented the submit button option, which works great. However, is it possible to add several “if” statements, as I have over twenty tours in my dropdown. i.e. if option equals “aaa”, then www.aaa.com, if option equals “bbb” then www.bb.com etc?

4

I figured it out. You can use several else if statements. See my code below with two different else if statements. Thanks again for the great answer :slight_smile:

import wixData from ‘wix-data’;
import wixLocation from “wix-location”;

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

function uniqueDropDown1 (){
wixData.query(“tourreviews”)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#Country”).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.country);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}

export function Country_change(event, $w) {
uniqueDropDown2();
$w(“#Tour”).enable();
}
function uniqueDropDown2 (){
wixData.query(“tourreviews”)
.contains(“country”, $w(“#Country”).value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#Tour”).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.tour);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function button1_click(event, $w) {
let option = $w(“#Tour”).value;
if ( option === “San Blas Day Tour” ) {
wixLocation.to(“/san-blas-day-tour”);
} else if (option === “San Blas Cabins” ) {
wixLocation.to(“/san-blas-cabins-and-camping”);
} else {
wixLocation.to(“/home”);
}
}

5

@michaelbrusch

Nope, all the thanks goes to you for figuring it out and having the knowledge that you did it all yourself. All we did in this forum is to hopefully guide you along the way.

Also, thanks for posting your code, it will help others if they have the same issue in the future and do use the search function in this forum, instead of just asking the same question again!