Filtering and sorting

Ask the community
,
1

Hey, I’m really trying to find a code for Wix that does sort and filter as you can see in the attached link
https://lab.sanoee.com/portfolio/

Does anyone know the code or know how it can be found? Really needs your help.
Thank you !!

2

You can try using this sample as a start.

920×450 67.4 KB

THE ELEMENTS

The Page
Repeater: #repeater1​​
​
Button Elements
Bike Button: #BikeButton
Board Button: #BoardButton
All Button: #AllButton
The Database
Create a database: Products (dataset1)
​
Recommended fields:
Product Name Field: product
Product Description Field: description
Price Field: price
Product Type Field: producttype (for filtering)
​
Then link fields to your repeater.

THE CODE

Page Code
import wixData from 'wix-data';
​
export function BikeButton_click(event, $w) {
    console.log("filtering bike");
    $w("#dataset1").setFilter(wixData.filter().contains('producttype','Bike'));
    $w("#BikeButton").style.backgroundColor = "Green";
    $w("#BoardButton").style.backgroundColor = "Grey";  
    $w("#all").style.backgroundColor = "Grey";
}
​
export function BoardButton_click(event, $w) {
    console.log("filtering board");
    $w("#dataset1").setFilter(wixData.filter().contains('producttype','Board'));
    $w("#BikeButton").style.backgroundColor = "Grey";
    $w("#BoardButton").style.backgroundColor = "Green";  
    $w("#AllButton").style.backgroundColor = "Grey";
}
​
export function AllButton_click(event, $w) {
    console.log("reset filters");
    $w("#dataset1").setFilter(wixData.filter().contains('producttype',''));
    $w("#BikeButton").style.backgroundColor = "Grey";
    $w("#BoardButton").style.backgroundColor = "Grey";  
    $w("#AllButton").style.backgroundColor = "Green";
}
3

Otherwise, two example videos for using dropdowns instead of buttons.
https://www.youtube.com/watch?v=QhMKnm1f6EU
https://www.youtube.com/watch?v=r0DLqkRDJ34

4

There are a number of examples available that demonstrate how this is done.

5

Plus, also note that the creator of the website that you linked to in your original post, they didn’t create any code either as they have simply used a plugin on their Wordpress website and had to pay for it too.

jquery.themepunch.revolution.js - jQuery Plugin for Revolution Slider

https://revolution.themepunch.com/jquery/
https://revolution.themepunch.com/ - Wordpress prices

So, if you make it up yourself through your own code, then first you will have had the knowledge of how to do it yourself and you will also be able to get to the root of the problem if something goes wrong with it, instead of having to wait for somebody else to update a plugin so that it will now work.

See here for info about using it with Wix.
Discussion on Slider Revolution Responsive jQuery Plugin (Page 18)
They used to do an app for Wix, but no more.
App di terze parti: Revolution Slider | Centro di Apprendimento | Wix.com

Your only option now is to see if you can use it through Wix package manager and see if they have a nodeJS that you can use for it.
Velo: Working with npm Packages | Help Center | Wix.com

Or use their own API and use Wix Fetch.
API Methods and Events – ThemePunch
Velo: Accessing 3rd-Party Services with the Fetch API | Help Center | Wix.com
Velo Web Modules: Calling Backend Code from the Frontend | Help Center | Wix.com
wix-fetch - Velo API Reference - Wix.com

Or us HTTP functions with it.
wix-http-functions - Velo API Reference - Wix.com

Or see if you can combine it all into the one html script and add it via a html iframe.
Wix Editor: Embedding a Site or a Widget | Help Center | Wix.com
Embedding Custom Code on Your Site | Help Center | Wix.com
https://support.wix.com/en/article/guidelines-and-limitations-of-the-html-code-and-embed-a-site-elements
javascript - How to run jquery on Wix website? - Stack Overflow

Finally, you might want to vote for this request too.
Wix Editor Request: Using jQuery With Wix | Help Center | Wix.com

6 
Thanks for the response! I'll try to see if there's a way I'll understand how to do it
7 
Thanks for the response! I'll try to see if there's a way I'll understand how to do it
 


I hope it will not be too complicated for me to try to do it on my own, even though it seems like the best option - I simply could not understand from the Tutorials if I can do it like in the example I linked. thank you so much!!