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
Design an events page by adding a repeater, text elements and buttons. Then create an Events database to store event information such as event name, description, date, time, location and pricing. Next, link repeater elements to dataset. Include sorting buttons and Wix Code.
When visitors click on the "Sort By Date" button, the repeater is refreshed, showing events in order of their dates (in ascending order) with the earlier events first.
When visitors click on the "Sort By Price" button, the repeater is refreshed, showing events in order of their prices (in ascending order) from the lowest to highest priced events.
Design an events page by adding a repeater, text elements and buttons. Then create an Events database to store event information such as event name, description, date, time, location and pricing. Next, link repeater elements to dataset. Include sorting buttons and Wix Code.
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.