Vorbly Code | WIX CODE REPEATER SORTING BUTTON

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

1/3

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.

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP