Customized Ticket Picker for Events

[Fro_Bur]

Question:
Hi everyone! I’m new here and sorry if I’ll ask some funny questions. **I’m trying to create a customized Ticket Picker for Events using code. I need help in fetching the data by EventID and also in passing to the check-out page (ticket-form).

Product:
Wix Editor, Wix Events

What are you trying to achieve:
As a final result, I need to create a page similar to Event Details & Registration, representing one unique event, which contains only Ticket Picker with minimal information (Event Title, Date & Time, Types of tickets, Price, Dropdown for choosing a quantity), without all other details. After choosing ticket quantity and pressing the “Buy” button, a visitor should be redirected to the checkout page (ticket-form) for purchase completion. I need the Ticket Picker to fetch the data from Events/Tickets and Events/Events collections by passing parameters exactly how it works in the current Event Details & Registration page.
My first question is How do I pass the EventID to this page, or maybe I should pass another parameter.
Second - How do I fetch data from two collections Events/Events and Events/Ticket.
Third - How do I fetch the Slug of the Event in order to pass to the next page.
Any help will be very appreciated.

What have you already tried:
I tried to create a customized Ticket Picker for Events by using this example. The code works except of a few problems. I have many different tickets for different events which, at the current stage, are all represented in one big list. Here is my page.
Another problem is that when I select the quantity of a specific ticket and press the “Buy” button, nothing happens. By using console.log I saw that it gets the correct Tickets quantity and the ticketID of chosen ticket, but the eventID is always the same - the eventID of “Concert” from March 25, and also, it cannot redirect to the ticket-form page, because it doesn’t receive the correct Slug. The link in the example contains the event’s name, but it isn’t the actual slug that has to appear there.
To resolve these problems, I tried to run the getEvent() function, as it suggested in the explanation, but I got stuck there and I can’t find what my mistake is.
I also tried to implement explanations from this post: wix-events tickets - #3 by davidva, but there is also lack of information about how to fetch the EventID.

Additional information:
[Include any other pertinent details or information that might be helpful for people to know when trying to answer your question.]

[CODE-NINJA]

I would suggest you to find a partner-programmer, who will lead you and support you generating your website.

[Fro_Bur]

Hello Russian-dima! Thank you for your quick response. I already have one. We are both stuck.
Here are the things that we already tried in the file reserveTickets.js (in the commented rows you can see other ways to retrieve eventID and the Slug). I’ll be very grateful If you would take a look and give us some hints about where we have gone wrong.

This is the test page: https://fbntla.wixsite.com/nz-design-2/ticket-picker-2
The ticketID in the code belongs to Ticket type: Concert Regular Mar 24.

Tickets.js:

import wixEventsFrontend from ‘wix-events-frontend’;
import wixLocation from ‘wix-location’;
import wixData from ‘wix-data’;
// import { Permissions, webMethod } from ‘wix-web-module’;
// import { wixEvents } from “wix-events-backend”;
// import { elevate } from ‘wix-auth’;

//const Slug_Name = “concert-2024-03-24-19-00-1”

async function getEventSlug() {
const ticketId = “438572ef-824f-405d-9423-9bc29159b70c”;
console.log(“Does this work? Event Slug”);
const eventResults = await wixData.query(“Events/Tickets”).eq(“_id”, ticketId).find();
const eventSlug = await wixData.query(“Events/Events”).eq(“_id”, eventResults.items[0].event).find();
return eventSlug.items[0].slug;
}

async function getEventId() {
const ticketId = “438572ef-824f-405d-9423-9bc29159b70c”;
const eventResults = await wixData.query(“Events/Tickets”).eq(“_id”, ticketId).find();
// const eventResults = await wixData.query(“Events/Events”)
// .eq(“slug”, Slug_Name)
// .find();

if (eventResults.items.length > 0) {
    const eventId = eventResults.items[0]._id;
    console.log('getEventId: ' + eventId);
    return eventId;
    
} else {
    console.error("Could not find event");
}

}

function getSelectedTickets() {
const selectedTickets = ;
$w(“#ticketsRepeater”).forEachItem(($item, ticket) => {
const ticketQty = Number($item(“#ticketQty”).value);
console.log('ticketQty: ’ + ticketQty);
if (ticketQty > 0) {
console.log('ticket ID: ’ + ticket._id);
selectedTickets.push({
“ticketId”: ticket._id,
“quantity”: ticketQty
});
}
});
console.log(selectedTickets);
return selectedTickets;
}

// const getEventDetails = webMethod(Permissions.Anyone, async (eventId) => {
// try {
// const elevatedGetEvent = elevate(wixEvents.getEvent);
// const getEvent = await elevatedGetEvent(eventId);
// console.log(‘Success! Event:’, getEvent);
// return getEvent;
// } catch (error) {
// console.error(“Could not find event”);
// // Handle the error
// }
// });

export async function reserveTickets() {
const eventId = await getEventId();
const eventSlug = getEventSlug();
// TODO: figure out what happens if user selects tickets of different types
let selectedTickets = getSelectedTickets();
wixEventsFrontend.tickets.reserve(eventId, selectedTickets)
.then((reservation) => {
console.log('reserveTickets eventID: ’ + eventId);
console.log('reserveTickets eventSlug: ’ + eventSlug);
console.log('reserveTickets selectedTickets: ’ + selectedTickets);
console.log('reserveTickets reservation: ’ + reservation);
console.log('reserveTickets reservationId: ’ + reservation.id);
// console.log('Event Details: ’ + getEventDetails(eventId));
// wixLocation.to(/event-details/${eventSlug}/ticket-form?reservationId=${reservation.id});
wixLocation.to(/event-details/${eventSlug});
})
.catch((error) => {
console.log(“Error”, error.message)
});
}

And here is the log:
getEventId: 438572ef-824f-405d-9423-9bc29159b70c
reserveTickets.js
Line 27
Does this work? Event Slug
reserveTickets.js
Line 12
ticketQty: 0
reserveTickets.js
Line 40
ticketQty: 3
reserveTickets.js
Line 40
ticket ID: 438572ef-824f-405d-9423-9bc29159b70c
reserveTickets.js
Line 42
ticketQty: 0
reserveTickets.js
Line 40
ticketQty: 0
reserveTickets.js
Line 40
ticketQty: 0
reserveTickets.js
Line 40
ticketQty: 0
reserveTickets.js
Line 40
ticketQty: 0
reserveTickets.js
Line 40
ticketQty: 0
reserveTickets.js
Line 40
ticketQty: 0
reserveTickets.js
Line 40
ticketQty: 0
reserveTickets.js
Line 40
ticketQty: 0
reserveTickets.js
Line 40
ticketQty: 0
reserveTickets.js
Line 40
ticketQty: 0
reserveTickets.js
Line 40
ticketQty: 0
reserveTickets.js
Line 40
ticketQty: 0
reserveTickets.js
Line 40
ticketQty: 0
reserveTickets.js
Line 40
ticketQty: 0
reserveTickets.js
Line 40
ticketQty: 0
reserveTickets.js
Line 40
[…]
reserveTickets.js
Line 49
Error Ambassador client request failed:
HTTP STATUS: 404
RESPONSE: {“message”:“EventNotFound instanceId=[597a3a17-bbb0-4688-9d82-ef322171b072] eventId=[438572ef-824f-405d-9423-9bc29159b70c]”,“details”:{“applicationError”:{“code”:“EVENT_NOT_FOUND”,“description”:“EventNotFound instanceId=[597a3a17-bbb0-4688-9d82-ef322171b072] eventId=[438572ef-824f-405d-9423-9bc29159b70c]”}}}
See the httpStatus and response fields for more information.

Thank you in advance if you’ll be willing to look at it.

[CODE-NINJA]

Well, till here…

…everything works.

.

But the ERROR you get tells you, that the event is either not available (not created yet, or maybe due to permissions not accessible).

This are my comments, regarding quickly your code-snipet (without diving to deep into it).
To help you out, this would turn into a debugging-job, because this would take time and also i would need to take a closer look directly inside of your setup.

Your last working LOG should be —> console.log(selectedTickets);
My suggestion to you would be to use much more logs, and also modify the logs better.

instead of —> console.log(selectedTickets);
do --------------> console.log('TICKETS: ', selectedTickets);

You got your filtered ticket ARRAY, holding one or several OBJECTS in it…

This seems to be your last working step…

function getSelectedTickets() {
    const selectedTickets = []; // Initialize an empty array to store selected tickets

    // Loop through each item in the '#ticketsRepeater'
    $w("#ticketsRepeater").forEachItem(($item, ticket) => {
        // Extract the ticket quantity from the corresponding input field in the repeater item
        const ticketQty = Number($item("#ticketQty").value);
        console.log('ticketQty: ' + ticketQty); // Log the ticket quantity

        // Check if the ticket quantity is greater than 0
        if (ticketQty > 0) {
            console.log('ticket ID: ' + ticket._id); // Log the ticket ID

            // Push an object representing the selected ticket (with ticket ID and quantity) into the 'selectedTickets' array
            selectedTickets.push({
                "ticketId": ticket._id,
                "quantity": ticketQty
            });
        }
    });

    console.log(selectedTickets); // Log the selected tickets array
    return selectedTickets; // Return the array of selected tickets
}

The ERROR occurs inside of this function…

export async function reserveTickets() {
const eventId = await getEventId();
const eventSlug = getEventSlug();
// TODO: figure out what happens if user selects tickets of different types
let selectedTickets = getSelectedTickets();
wixEventsFrontend.tickets.reserve(eventId, selectedTickets)
.then((reservation) => {
console.log('reserveTickets eventID: ’ + eventId);
console.log('reserveTickets eventSlug: ’ + eventSlug);
console.log('reserveTickets selectedTickets: ’ + selectedTickets);
console.log('reserveTickets reservation: ’ + reservation);
console.log('reserveTickets reservationId: ’ + reservation.id);
// console.log('Event Details: ’ + getEventDetails(eventId));
// wixLocation.to(/event-details/${eventSlug}/ticket-form?reservationId=${reservation.id});
wixLocation.to(/event-details/${eventSlug});
})
.catch((error) => {
console.log(“Error”, error.message)
});
}

Why you do not check inside console----> const eventId = await getEventId();

AND SHOULDN’T YOU FIRST WAIT FOR —>

function getSelectedTickets()  ........
let selectedTickets = getSelectedTickets();

async function getSelectedTickets()  ........
let selectedTickets = await getSelectedTickets();

EDIT:
TO HELP YOURSELF MORE —> ADD MORE CONSOLE-LOGS ON EVERY STEP YOU DO NOT UNDERSTAND!

[Fro_Bur]

Thanks for the guidance.