Vorbly <Code>
CODING MADE EASY WITH VORBLY
WIX CODE REPEATER SORTING BUTTON
Need to set sorting values for Wix Repeaters? This tutorial will show you how to set sorting values for your Wix Repeaters using Wix Code. Your visitors will be able to sort data displayed in your repeaters. We will provide you with the webpage elements and sample codes required to implement this feature.
THE DEMO
THE ELEMENTS
The Page
Text Elements
-
Page Title ID: #title
Wix Repeater: #repeater1
-
Event Name ID: #name
-
Event Description ID: #desc
-
Event Address ID: #address
-
Date: #date
-
Time: #time
-
Price: #price
-
"View Details" Button: #details
Button Elements
-
Sort By Date: #SortDate
-
Sort By Price: #SortPrice
The Database
Create a database Events (database1).
Recommended fields:
-
Event Name Field: eventname
-
Event Description Field: eventdesc
-
Event Date Field: date
-
Event Timing Field: time
-
Ticket Price Field: price
-
Event Location Field: location
-
Event Image: image
Then link fields to your repeater.
THE CODE
Page Code
import wixData from "wix-data";
export function SortPrice_click(event, $w) {
$w("#dataset1").setSort( wixData.sort()
.ascending("date")
);
}
export function SortDate_click(event, $w) {
$w("#dataset1").setSort( wixData.sort()
.ascending("price")
);
}
COMMENTS
I'm a paragraph. Click here to add your own text and edit me. It's easy.