Velo by Wix Tutorial | How to Filter Items on Repeater Using a Dropdown and Boolean Values

nice how are you and welcome to this new week’s Co tutorial today I’m going to show you how to filter elements on a repeater based on a boolean value so for those who don’t know a boolean value is just a checkbox that is either set to true or false so this function is really helpful when for example you have element on the database that is that belongs to more categories so in this way by following this tutorial you will have clean repeater
clean code and your items will not be repeated twice or three four five multiple times so stay with me I’m gonna show you right now what I’m talking about so he he’s the website I created just for you so this website it’s about smartphones so in this website I created a headline which they find the best a smartphones online and to dock down so one search by print and the other one is search by online store and here is a repeater that has an image
has a label and texted so this is what I’m talking about just stay with me okay if I click on preview if you see I have various brands like Xiaomi Apple Samsung Nokia and Huawei so for example let’s say as the user is looking for a specific phone on a specific store so for example let’s say that I want to check on Amazon which smartphones are being sold so if I click on Amazon it will give me the list of the phones that are available on Amazon in
this case have read me Phi plus show me what way Samsung iPhone accepts marks iPhone XS way to 20 and samsung galaxy s mind so the same goes for eBay as you can see anybody have only three when we nova 3 show me me 8 samsung galaxy s 9 anything goes for wal-mart of this for one samsung one at all and two one show me one nokia and then also for Aliexpress I have five smartphones and then here you have such by print you can search any brand like
Nokia and it will show you all the models and the singles for a way to show you all the modest nova te between etc so why this function is really helpful i’m gonna show you now on the database let’s kick back to editor so before going to the database i want to show you how I beat my page so you can do exactly the same so you hit a headline and you see here there are two drop downs so on the first one I’m search by brand I added manually a 5
brands I have my database so the first one is a name and the second one is the value so it has to be the same it must be the same so I pull Apollo away way Nakia Nakia excetera second one is the same you just put the spores you want so here put Aliexpress Amazon eBay and Walmart and here I choose a repeater and I connected to this database to smartphones and I linked any every element to the right field the sample this is an image and I connected
to the image field as you can see here the same goes for the button here and I connect the label to the trend field and this one is attack text in this one it’s connected to the model so everything is connected now let’s have a look last thing this is the data set which will help you to receive the information from the database to the repeater so let’s have a look at this at the database so I mean called this database smart phone as you can see
here I have several fields first is brand which is text field type this is web very important guys so if you’re not really not familiar with this just go to the width tutorial there are several to level that explain the difference between text image boolean etc so this is text field this is the same text brand a model our text field then use image this is image field tracer here and then for Amazon eBay Walmart and Aliexpress I choose boolean
field if I click on manage properties you can see here it’s field type boolean so as you can see when you select boolean you can either choose to set them to true like this or to force like that it’s very simple in this way you can have the same item like let’s say you can have Apple iPhone XS wherever you want you can have only one time on Amazon or you can have in all the shots all the stores or you can I have have only on Aliexpress only on
eBay only on Amazon and Walmart this is up to you so this is just to show you that you can create anything now I just use this example of smart phones to give you an idea but you can do this for hotels for restaurants for almost anything so let’s try an example for for instance if I want i phone XS to be only on Amazon and the second one I phone it’s s marks I want to be on eBay see what happens now when I go back to the page when I click on
Amazon I should have only this iPhone which is the XS and when I go to ebay I should have only this iPhone X as mass and of course also the other phones will appear like in eBay also will it snow vertically will appear and also this Nokia and this samsung not sorry this yes this samsung here and it says show me here ok let’s try now as you can see I have iPhone XS on Amazon set to 2 and iPhone a excess market on eBay if I go to the home page I
click preview and I go to the search by last door if you click on Amazon you see I have iPhone Express only because we set it to 2 and now if I go to ebay I should have the iPhone X as max let’s let’s see here it is – X as max so you see guys this is really amazing you can create anything and it’s really simple now I will guide you to the code step by step so you not only copy/paste but you will also learn a lot and modify the code by yourself
and create almost anything but just before going back to the code editor I want to show you that I go securit another drop-down that you can also filter by Brent it’s a perfectly calm Nokia I will have all the Nokia phones SME goes for huawei Apple and some soon and show me okay so let’s go back to the editor I will show you now exactly what the code looks like okay so we are in the main page is the code okay I’m gonna show you I’m gonna explain
you step by step what you need to write the code in this way okay first of all you have to import with data from weeks data because in this way you’re telling the site to take the information from this database smartphone and to send to this page so this is really crucial guys because without this code nothing will work so every time you work with database and with Peters you are linking elements from database to one page you will need this data
set and this data set will work only by using this code here by the way now it has an amazing function that it recognizes strings so if I delete this and you just start typing and whips me with all the options all the available options I can choose from so in this way you see I just type the letter I and I have all the options so in this case I will choose import with data from set and address then enter key button that’s it so this code goes
always at the top before the already function so remember just this one at the top always then on already function I don’t need anything just leave it as it is this is for different options that we will not see here today maybe in another video so then let’s start our code as you can see here I have an export function brand top down change so for example this one it’s created by clicking here as you can see this drop-down has a name here has an
ID and the idea is brain drop down as you can see here how do you change this ID we just click on view properties and here you will have the properties of that element and here you see her ID and here you can just change the ID name it’s always helpful to change to change IDs so it will be much easier for you to work in our clean and faster way so here I’ll just name it brand drop-down and then as you can see here you have several options on
viewport on view port enter mouse in focus on change or click etc so for this reason for this purpose I select the option on change and you can see here when you click here you will have something like that it’s gonna be empty okay so wait just okay wait yeah because ever over here okay so when you just add this event you will have something on your code which is the same as this one and inside this code you have to write so inside this event you
have to write this code so one you have to write this code I’m gonna explain your why so now we are coding this dog down here search by brand so I will start with typing let search friend equal to dollar W brand the known value why because in this way I am simplifying the code so I’m saying that this search brand instead of writing this code I will just write such man and this search brand is the same as fighting this dollar W brackets brand dog
down dog value so after this you have to to write this code dollar W data set one dot set filter which data filter contains brand search brand so why you need is because this is the data set one which is this one there is you can see four click on the data set here on the ID you have data set one so you just type dollar W data set one dot set filter weeks data filter contains brand search friend okay Y contains brand in lower case because if you
go on your database you will see the brand here it’s uppercase but what we want is the field K which is brand it’s lowercase so always when you are typing this code remember these rules it’s very important always you have to retrieve this element lowercase if you write with uppercase it won’t work always remember is this one so we are telling the code that it has to filter the field the brand field and then the value of the duck down and the
value of the doc down we just name it search print we can even write here like this is the same but to make it simple to make it more simple I like to write search print okay okay so the second one now let’s go explain the store dock now which is the boolean boolean type so as you can see here you have same values which are text values Aliexpress Amazon eBay in Walmart okay so on the code to make it work let’s do the same as you did before you
see in here hazard I created something very similar I wrote here let filter store because I want to filter the story equal to store top down value okay then here you have to write this do W data set one dot already brackets and then you have to put condition if if conditions if you’re not familiar with the if-else condition just go to the wicks tutorial and the there are many videos about it and they really explain it in amazing way so in this
way what we are doing we are telling the code that if filter store which means if the value of the store top-down it’s equal equal Amazon it means if this value here it’s equal to Amazon this one so we filter the data set which is equal EQ stand for equal Amazon to okay now in this case I didn’t use filter store here because I have a boolean field in the database so always when you work with the boolean fields in the database you have to put
either true or false like in the database field so in this case I want the data set to a tree for me the elements that are under Amazon that are set to true so remember here this is lower case Amazon the same goes for eBay Walmart and Aliexpress because here is the same as before for brent see here are all upper case but if you click on manage properties hits lower case Amazon the same for eBay okay so go back and you have to do the same for all
the elements you have so if filter start equal to Amazon data set one filter equal to Amazon to the bay Walmart Aliexpress so that’s it it’s really simple guys and with this code you can create anything as I said before just let me know in the comments if you are stuck or forget any issue I will be very happy to help you and please don’t forget to subscribe to my channel also I will post on the comments my email and as well I will introduce you
to our another service I will also add my personal whatsapp number so you can add me anytime and I will try to answer your questions in a very fast way so you can just type me with your issue and as soon as I see the message I will reply back and I will try to help you as soon as I can okay guys so please then last last thing and please subscribe to my channel and like this video if you think it helped you a lot okay guys I’ll see you soon to the
next video thank you bye bye