Filtering Gallery from user input dropdowns

Ask the community
,
1

Hello,
Sorry in advance - I am not familiar with code but am so happy this is now available on wix - thanks! :slight_smile:

I have created a gallery which is linked to a dataset. There are dropdowns at the top of my page which each have a manually input dropdown list. The options in the dropdown list are equal to the data input in the relevant field. (eg Menswear/Womenswear dropdown only has two options; menswear or womenswear. In the dataset, the column with field key “menswearwomenswear” will have one of only two inputs; menswear or womenswear)

I want the user to be able to select options from the dropdowns which will then filter my gallery. Will they be able to select any drop down in any order and the filters still apply?
I also have a clear filters button at the top which will need to reset all the dropdowns.

I have spent a while trying to figure it out but ran out of trial and error options! Thank you!!

Helen

Site: https://www.fitunahealth.com/clothing

1202×828 152 KB

2

Hi,
You can check the explanation here to filter the relevant information using multiple user inputs and set the information to the gallery instead of the table as explained here .

Thanks,
Tal.

3

Hi Tal,

I have tried to convert the table code to gallery but am doing a lot of guessing and receiving many errors. Please could you re-write the code for a gallery and user input dropdown buttons?

Thanks for your help,

Helen

4

Hi Tal,

Please can you help me with the above?

Thanks,

Helen

5

HI Helen,

It is very hard for us to just write code without knowing what you’re doing.
Please try to specify the question, and add the piece of code that you think is problematic (not a lot of code, as it is hard to debug it).

Liran.

6

Hi Liran,

Here is the code Tal linked me to but I need to change the coding to work on a gallery instead of a table. I’m really sorry I don’t know much about code so have tried to change the highlighted parts to my references but it does not work (I assume because the code relates to rows and tables instead of a gallery and dropdowns). There is also a few words which seem to be in Hebrew from using Google translate?

Tal’s Instructions:
1. Get the original rows data from the dataset:

let originalRows = [];
$w.onReady(function () {
$w(‘#positionsManagementDataset’).onReady(() => {
originalRows = $w(‘#tableJobs’).rows; }); });

2. Filter the table using the Array filter method :

function filterTable() {
let newRows = originalRows;
const field = $w(‘#selectionField’).value;
const location = $w(‘#selectionLocation’).value;
if (field && field !== ‘כל המשרות’) {
newRows = newRows.filter(item => item.Field === field);
}
if (location && location !== ‘כל הארץ’) {
newRows = newRows.filter(item => item.positionLocation === location);
}
$w(‘#tableJobs’).rows = newRows;
}

3. For each dropdown, create an onChange event and call the ‘filterTable’ function:

export function selectionLocation_change(event) {
filterTable();
}

Is there another language I can use which may be easier to achieve filtering my gallery from user input dropdowns?

Thanks,

Helen

7

Hi Helen,
The hebrew words are just used for some extra filtering, nothing related to the logic of the code.

As Tal mentioned, this code will not work for gallery as table and gallery have a different APIs (see gallery API here ).
I understand the difficulties of getting into code when you’re not familiar with it, but this has to be the first step before making something to work.
We will be happy to help with any specific question regarding Wix Code, but we are unable to write the whole code for you.
I suggest you read the APIs a bit and give it a go. We’re here to help if you’re stuck.

Liran.

8

I would like to show a button base on the selection of 3 separate dropdowns. Can you give me an example of this. I am able to do it with one dropdown but not all 3 results being = to certain values

9

Hi guys I’m having a small problem. I’ve tried troubleshooting myself but with no luck. I have implemented the above code with above corrections.

Everything seems to be working however I am finding that once I choose an option from my drop down menu it clears the entire table of all data… I have spell checked everything multiple times so no mistakes there. I have even changed my data set to contain just single words in one field (other fields are left blank, again for testing purposes).

I was unsure exactly what the fields and locations were referring to exactly and I imagine that is where my problems lie! I commented out some code that I thought might be unnecessary for my purposes. I currently have one drop down menu but will expand this too three or four as the initial post above illustrates. Below i have attached my code to show you what sections i have commented out. I have tried commenting out the location constant and if statement however this achieves the same result.

Thank you for your time and i would really appreciate your help.

function filterTable() {
let newRows = originalRows;
//const field = $w(‘#dropdown1’).value;
const location = $w(‘#dropdown1’).value;

//if (field && field !== 'כל המשרות') { 
//	newRows = newRows.filter(item => item.Field === field); 
//} 

if (location && location !== 'המשרות') { 
	newRows = newRows.filter(item => item.positionLocation === location); 
} 

$w('#table1').rows = newRows;

}

export function dropdown1_change(event, $w) {
filterTable();
}