Hi, I’m new to wix and I can’t seem to find a way to sort/filter a gallery of products.
I’m not selling the products, just viewing them in a list and you can click’em to get a better description of the product. (just information)
Only way I can make it work is by creating a store, which is not what I want due to forcing me to put a price on it + the shopping cart etc.
Just want to be able to browse through maybe 200 titles with easy sort and filtering options.
Is there a way of doing this?
I’m looking for something like this, where I can make my own sorting option (by release, coming soon, age 3+ to 18+, genre etc. and a search bar.
would also be nice to have the option of how many products to view per site (10, 30, 50 products per site)
Hi Walinch,
Are you using repeater?
No, what is that? The image is not from my site, just an example of what i want ish
About product per site, would you mean per page?
If yes, you just need to manage your dataset and set the number you like.
About sort,
The code below may give you some idea
export function NavnDropdown_change() {
$w(“#NavnDropdown”).onCustomValidation((value)=> {
if ( value === “Navn” ){
let stigende00;
stigende00 = [{label: “Stigende00”, value: “Stigende00”}];
$w(“#Stigendedropdown”).options = stigende00;
} else if ( value === “Lanseringsdato” ) {
let stigende01;
stigende01 = [{label: “Stigende01”, value: “Stigende01”}];
$w(“#Stigendedropdown”).options = stigende01;
}
var topCategory = $w("#productTopCatDropdown").value;
$w("#storeProductDataset").onReady( ()=> {
wixData.query("StoreProductData").eq("storeTopCategory", topCategory).find().then((result)=>{
if ( result.items.length > 0 ) {
$w("#storeProductDataRepeater").data = result.items;
}
});
});
});
}
- I guess you may want to have top level & second level sort
For second level sorting just repeat the code above one more time is ok
Is this code associated with repeater that you mentioned earlier?
Or can I use it with a gallery?
Have yet to started using code with my wix yet, got any url for the basics on how to start?
Thanks for the reply btw,
Hi Walinch,
you may get start here,
I’m also a beginner. The site above is useful.
If you want to get start with javascript, ‘w3school’ is a good method to get start
Thank you very much 
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 . Note that the Hebrew words are just used for some extra filtering, nothing related to the logic of the code.
Moreover, as Heson Li suggested, I recommend starting with W3School and MDN documentation .
Good luck!
Tal.
Hi Tal and Heson Li,
I’ve implemented the below line of code as Heson Li mentioned, in order to control what appears/is hidden from a repeater element:
$w("#myGallery").data = result.items;
I’ve also looked through all the different functions of the $w.gallery API as Tal linked to.
Hiding and showing relevant gallery items is something that I want to do, BUT one of my dropdowns is to SORT the items according to a parameter that is in a collection. So let’s say I have a collection with field name “price”, I want a dropdown to “Sort by price” or if selected otherwise to “Sort by date” etc.
I’ve been able to query my collection and to .ascending() the items retrieved, but this only gives me the data outside of the gallery, so I’m wondering how to connect between the collection and the gallery.
Hope it’s clear.
Thanks
Hi Yafim,
You can call .ascending() by slightly modifying the query to get the results pre sorted.
For example to sort by “price” field:
//...
wixData.query("StoreProductData")
.eq("storeTopCategory", topCategory)
.find()
.ascending("price")
.then((result)=>{
if ( result.items.length > 0 ) {
$w("#storeProductDataRepeater").data = result.items;
}
});
});
//...
Thank Ido!
It’s working.
If I run into anything weird i’ll update this post.
Hi Walinch, I also wanted to sort my results after running the query, once the repeater was populated.
I finally accomplished it using JS only. I found these two posts: first and second .
I’m not pretty sure this the best way to go, I guess I will find out soon as I keep working on my project.
All the best!
Martin