Using multiple dropdowns as db filters

[tiaan]

Hi Guys

I have three dropdown filters for a property project that I’m working on that filters bedrooms, bathrooms and parking. I’ve created three different dynamic pages, one if someone selects only the first value, one if someone selects the first and second value and one if someone selects all 3.

Navigation seems to work, however it works with very random results. For instance, if I choose 1 bedroom & 1 bathroom, I will get to the page for 1 bedroom and 2 bathrooms. I can redo the exact same search and then get to a completely different result.

Values are stored in the dropdown ‘field value’.

Can anybody tell me what I’m doing wrong?

import wixLocation from ‘wix-location’;

export function button1_click(event) {

if ($w('#selection1').value === '1') { 
	wixLocation.to('/Property/rooms/1'); 
} 
if ($w('#selection1').value === '2') { 
	wixLocation.to('/Property/rooms/2'); 
} 
if ($w('#selection1').value === '3') { 
	wixLocation.to('/Property/rooms/3'); 
} 



if (($w('#selection1').value === '1')+($w('#selection2').value === '1')) { 
	wixLocation.to('/Property/rooms/1/bathrooms/1'); 
} 
if (($w('#selection1').value === '2')+($w('#selection2').value === '1')) { 
	wixLocation.to('/Property/rooms/2/bathrooms/1'); 
} 
if (($w('#selection1').value === '3')+($w('#selection2').value === '1')) { 
	wixLocation.to('/Property/rooms/3/bathrooms/1'); 
} 
if (($w('#selection1').value === '1')+($w('#selection2').value === '2')) { 
	wixLocation.to('/Property/rooms/1/bathrooms/2'); 
} 
if (($w('#selection1').value === '2')+($w('#selection2').value === '2')) { 
	wixLocation.to('/Property/rooms/2/bathrooms/2'); 
} 
if (($w('#selection1').value === '3')+($w('#selection2').value === '2')) { 
	wixLocation.to('/Property/rooms/3/bathrooms/2'); 
} 



if (($w('#selection1').value == '1')+($w('#selection2').value == '1')+($w('#selection3').value == '1')) { 
	wixLocation.to('/Property/rooms/1/bathrooms/1/parking/1'); 
} 
if (($w('#selection1').value == '2')+($w('#selection2').value == '1')+($w('#selection3').value == '1')) { 
	wixLocation.to('/Property/rooms/2/bathrooms/1/parking/1'); 
} 
if (($w('#selection1').value == '3')+($w('#selection2').value == '1')+($w('#selection3').value == '1')) { 
	wixLocation.to('/Property/rooms/3/bathrooms/1/parking/1'); 
} 
if (($w('#selection1').value == '1')+($w('#selection2').value == '2')+($w('#selection3').value == '1')) { 
	wixLocation.to('/Property/rooms/1/bathrooms/2/parking/1'); 
} 
if (($w('#selection1').value == '2')+($w('#selection2').value == '2')+($w('#selection3').value == '1')) { 
	wixLocation.to('/Property/rooms/2/bathrooms/2/parking/1'); 
} 
if (($w('#selection1').value == '3')+($w('#selection2').value == '2')+($w('#selection3').value == '1')) { 
	wixLocation.to('/Property/rooms/3/bathrooms/2/parking/1'); 
} 
if (($w('#selection1').value == '1')+($w('#selection2').value == '1')+($w('#selection3').value == '2')) { 
	wixLocation.to('/Property/rooms/1/bathrooms/1/parking/2'); 
} 
if (($w('#selection1').value == '2')+($w('#selection2').value == '1')+($w('#selection3').value == '2')) { 
	wixLocation.to('/Property/rooms/2/bathrooms/1/parking/2'); 
} 
if (($w('#selection1').value == '3')+($w('#selection2').value == '1')+($w('#selection3').value == '2')) { 
	wixLocation.to('/Property/rooms/3/bathrooms/1/parking/2'); 
} 
if (($w('#selection1').value == '1')+($w('#selection2').value == '2')+($w('#selection3').value == '2')) { 
	wixLocation.to('/Property/rooms/1/bathrooms/2/parking/2'); 
} 
if (($w('#selection1').value == '2')+($w('#selection2').value == '2')+($w('#selection3').value == '2')) { 
	wixLocation.to('/Property/rooms/2/bathrooms/2/parking/2'); 
} 
if (($w('#selection1').value == '3')+($w('#selection2').value == '2')+($w('#selection3').value == '2')) { 
	wixLocation.to('/Property/rooms/3/bathrooms/2/parking/2'); 
} 

}

Thank you

[yisrael-wix]

Hey tiaan,

Glad to see you’re keeping yourself busy.

Logic operators…

The first problem is that if statements with multiple conditions should use logic operators.

Change this:

if (($w('#selection1').value === '1') + ($w('#selection2').value === '1')) {

…to this:

if (($w('#selection1').value === '1') && ($w('#selection2').value === '1')) {

A logic condition of true && true is equal to true.
However, if you state true + true, that would be equal to 2 (since true is the same as 1).

You can find more information on this here.

Logic order…

Another problem that you have is the order that you are checking. Look at the following from your code:

// 1) checks only selection1
if ($w('#selection1').value === '1') {
	wixLocation.to('/Property/rooms/1');
}

... skip forward ...

// 2) checks selection1 and selection2
if (($w('#selection1').value === '1')+($w('#selection2').value === '1')) {
	wixLocation.to('/Property/rooms/1/bathrooms/1');
}

// 3) checks selection1, selection2, and selection3

So ask yourself the question, “What happens in the code if selection1=1 and selection2=1?”.
Here’s what happens:

Let’s say: $w(‘#selection1’).value = 1
The code sees this: if ($w(‘#selection1’).value === ‘1’) {
The condition is true since: $w(‘#selection1’).value = 1
The code then runs: wixLocation.to(‘/Property/rooms/1’);
Section 2) never gets executed since the code already found a true condition.

You can fix this logic problem by just reversing logic section. Put section 3), followed by section 2), with section 1) last.

Another approach altogether…

I hope you don’t mind me suggesting another drastically different approach. Build your url piece by piece. The result is shorter code, easier to read and maintain.

let url = "/Property" + roomsStr + bathroomsStret url

let rooms = Number($w('#selection1').value);
if (rooms > 0) {
	url = url + "/rooms/" + rooms;
}

let bathrooms = Number($w('#selection2').value);
if (bathrooms > 0) {
	url = url +  "/bathrooms/" + bathrooms;
}

let parking = Number($w('#selection3').value);
if (parking > 0) {
	url = url + "/parking/" + parking;
}

Disclaimer: I sort of checked this code. I just checked little pieces and then put it all together. If you sell a 45 room mansion with 12 baths and 14 parking spaces for $10,000, don’t blame me.

I hope this helps. Keep on WixCoding!

All the best,

Yisrael

[tiaan]

Hi Yisrael

Thank you once again for the detailed explenations, and for the suggestion! It should save me a lot of lines of code!

Cheers!
Tiaan

[tiaan]

Yisrael,

Probably a stupid question, but I can’t figure out what you meant here:

let url = “/Property” + rooms Str + bathrooms Stret url

[yisrael-wix]

Hey tiaan,

There are no stupid questions. Well, OK, some of mine are, but whatever…

Ummm, looks like that line of code got messed up. I’ll fix it in the example above, and include it here as well:

let url = "/Property"; // initialize to the base location 

The idea is to create a variable for our url, and initialize it to the base location. Then different parts are concatenated to the base as determined by the logic.

Sorry for the confusion.

[tiaan]

Champ!

That did exactly what I needed. My thanks Yisrael!!

Cheers
Tiaan

[deepankarmohanty15]

[deepankarmohanty15]

Hello, this is my home page , when i will select the laundry & dry clean option from the drop-down , i want to copiid my all selected data (service,date,time) in the Laundry Page aumaticaly Is there any one who will help me

[tiaan]

@Deepankar

Take a look at session storage - https://www.wix.com/corvid/reference/wix-storage.html#session

Good luck!
Tiaan