Wix Events - Remaining Tickets Ribbon / Repeater Text

Ask the community
, ,
1

I am trying to show a ribbon called “NEARLY FULL” in Wix Events when the number of tickets gets to a certain number or below.

I also have a repeater on a separate page that is already coded to Wix Events to show each event in the repeater plus a text box to say “BOOKINGS OPEN” / "BOOKINGS CLOSED AND “FULL” . So in addition to the Wix Events page, I need to code the repeater too.

This is the code currently used on the repeater page.

import wixData from 'wix-data';

$w.onReady(function () {
    wixData.query("Events/Events")
        .ascending("start")
        .eq("scheduled")
        .limit(6)
        .find()
        .then((results) => {
            if (results.totalCount > 0) {
                $w("#upcomingrepeater").data = results.items;
            }
        })
        .catch((error) => {
            console.log("Error:", error.message);
        });

    wixData.query("Events/Tickets")
        .find()
        .then((results) => {
            // handle the results
        });

    //here you are applying the returned data from above to the repeater elements
    $w("#upcomingrepeater").onItemReady(($item, itemData, index) => {

        //use a switch statement to manage your cases and adj the text
        switch (itemData.registrationStatus) {
        case 'OPEN_TICKETS':
            itemData.registrationStatus = 'BOOKINGS OPEN'
            break;
        case 'CLOSED_MANUALLY':
            itemData.registrationStatus = 'BOOKINGS CLOSED'
            break;
        case 'CLOSED':
            itemData.registrationStatus = 'RALLY FULL'
            break;
        case 'OPEN_EXTERNAL':
            itemData.registrationStatus = 'BOOK EXTERNALLY'
            break;
            ``
        default:
            itemData.registrationStatus = 'default status'

        }

        if (itemData.registrationStatus === 'BOOKINGS OPEN') {
            let value = $item("#bookingstatustext").text;
            $item("#bookingstatustext").html = "<p style='color: #09ad19; font-size: 13px; font-family: helvetica-w01-bold; text-align: right;'>" + value + "</p>";

        }

        if (itemData.registrationStatus === 'RALLY FULL') {
            let value = $item("#bookingstatustext").text;
            $item("#bookingstatustext").html = "<p style='color: #FF0000; font-size: 13px; font-family: helvetica-w01-bold; text-align: right;'>" + value + "</p>";

        }

        if (itemData.registrationStatus === 'BOOKINGS CLOSED') {
            let value = $item("#bookingstatustext").text;
            $item("#bookingstatustext").html = "<p style='color: #FF0000; font-size: 13px; font-family: helvetica-w01-bold; text-align: right;'>" + value + "</p>";

        }
        //here you are manually pointing the repeater elements to each value you want
        $item("#bookingstatustext").text = itemData.registrationStatus;

    });

});

I would be so grateful if anyone can point me in the right direction for querying the number of tickets remaining for each event, and converting that to the (“#bookingstatustext”) in the repeater and also a way to code the ribbon on the main Wix events page to change the text to “Nearly Full” when the remaining tickets are 5 or below.

Thanks