Gets an object containing ticketing functionality.
Use the Tickets
object to reserve and checkout tickets for an event.
Note: To work with the Wix Events API, you need to publish your site.
import wixEventsFrontend from "wix-events-frontend";
import wixData from "wix-data";
import wixPayFrontend from "wix-pay-frontend";
let eventId;
let reservationId;
let orderNumber;
let tickets;
$w.onReady(function () {
// Retrieve data and set up page
await getData();
$w("#ticketRepeater").onItemReady(displayTickets);
$w("#ticketRepeater").data = tickets;
// Define button click actions
$w("#reservationButton").onClick(reserveTickets);
$w("#checkoutButton").onClick(checkoutTickets);
$w("#updateButton").onClick(updateTickets);
// Verify coupon code when it is entered
$w("#couponCode").onCustomValidation(verifyCouponCode);
});
async function getData() {
// Run a query that returns only one event. Add
// additional filtering to the query if necessary.
const eventResults = await wixData
.query("Events/Events")
.eq("title", "My Event")
.find();
if (eventResults.items.length > 0) {
eventId = eventResults.items[0]._id;
// Get tickets for the event
const ticketResults = await wixData
.query("Events/Tickets")
.eq("event", eventId)
.find();
if (ticketResults.items.length > 0) {
tickets = ticketResults.items;
} else {
$w("#ticketRepeater").hide();
console.log("Could not find tickets");
}
} else {
console.log("Could not find event");
}
}
function displayTickets($item, itemData, index) {
$item("#ticketName").text = itemData.name;
$item("#ticketPrice").text = itemData.price.toString();
$item("#ticketQuantity").value = 0;
}
function reserveTickets() {
const selectedTickets = getSelectedTickets();
wixEventsFrontend.tickets
.reserve(eventId, selectedTickets)
.then((reservation) => {
reservationId = reservation.id;
})
.catch((error) => {
console.log("Error", error.message);
});
}
function getSelectedTickets() {
let selectedTickets = [];
$w("#ticketRepeater").forEachItem(($item, itemData, index) => {
if ($item("#ticketQuantity").value > 0) {
selectedTickets.push({
ticketId: itemData._id,
quantity: $item("#ticketQuantity").value,
});
}
});
return selectedTickets;
}
function checkoutTickets() {
wixEventsFrontend.tickets
.checkout(eventId, reservationId, {
formValues: getFormValues(),
coupon: $w("#couponCode").value,
})
.then(({ order }) => {
orderNumber = order.orderNumber;
wixPayFrontend.startPayment(order.paymentId);
// Note that PDF tickets are available before payment is complete
$w("#ticketsPdfLink").value = order.ticketsPdf;
})
.catch((error) => {
console.log("Error", error.message);
});
}
function updateTickets() {
wixEventsFrontend.tickets
.updateOrder(eventId, orderNumber, {
formValues: getFormValues(),
})
.catch((error) => {
console.log("Error", error.message);
});
}
function verifyCouponCode(value, reject) {
const coupon = $w("#couponCode").value;
wixEventsFrontend.tickets
.verifyCoupon(eventId, reservationId, coupon)
.then((result) => {
if (result.discountErrors) {
// handle verification failure
$w("#couponCode").updateValidityIndication();
$w("#couponErrorMsg").show();
$w("#couponSuccessMsg").hide();
reject("Coupon is invalid");
} else {
// handle coupon verified
$w("#couponErrorMsg").hide();
$w("#couponSuccessMsg").show();
}
});
}
function getFormValues() {
return [
{ name: "firstName", value: $w("#firstName").value },
{ name: "lastName", value: $w("#lastName").value },
{ name: "email", value: $w("#email").value },
{ name: "custom", value: $w("#foodAllergies").value },
// When a form contains an address, the way you format the
// address information for submission depends on what type
// of input elements you use to gather that information.
// Wix address input element.
{ name: "address", value: $w("#address").value },
// Single element which is not an address
// input element, such as a text input.
{ name: "address", value: [$w("#address").value] },
// Multiple elements for the
// various parts of an address.
{
name: "address",
value: [
$w("#street").value,
$w("#city").value,
$w("#state").value,
$w("#country").value,
$w("#postalCode").value,
],
},
// When a form contains an input for adding more guests to an
// RSVP, format the guest names for submission in an array
// where each element is the full name of a guest.
{ name: "additionalGuests", value: $w("#additionalGuests").value },
{
name: "guestNames",
value: [
`${$w("#guest1FirstName").value} ${$w("#guest1LastName").value}`,
`${$w("#guest2FirstName").value} ${$w("#guest2LastName").value}`,
],
},
];
}