Search...
tickets
Gets an object containing ticketing functionality.
Description
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.
Type:
TicketsRead Only
Was this helpful?
Reserve, checkout, and update tickets
Copy Code
1import wixEventsFrontend from 'wix-events-frontend';2import wixData from 'wix-data';3import wixPayFrontend from 'wix-pay-frontend';45let eventId;6let reservationId;7let orderNumber;8let tickets;910$w.onReady(function () {11 // Retrieve data and set up page12 await getData();13 $w("#ticketRepeater").onItemReady(displayTickets);14 $w("#ticketRepeater").data = tickets;1516 // Define button click actions17 $w("#reservationButton").onClick(reserveTickets);18 $w("#checkoutButton").onClick(checkoutTickets);19 $w("#updateButton").onClick(updateTickets);2021 // Verify coupon code when it is entered22 $w("#couponCode").onCustomValidation(verifyCouponCode);23});2425async function getData() {26 // Run a query that returns only one event. Add27 // additional filtering to the query if necessary.28 const eventResults = await wixData.query("Events/Events")29 .eq("title", "My Event")30 .find();3132 if (eventResults.items.length > 0) {33 eventId = eventResults.items[0]._id;3435 // Get tickets for the event36 const ticketResults = await wixData.query("Events/Tickets")37 .eq("event", eventId)38 .find();3940 if (ticketResults.items.length > 0) {41 tickets = ticketResults.items;42 } else {43 $w("#ticketRepeater").hide();44 console.log("Could not find tickets");45 }46 } else {47 console.log("Could not find event");48 }49}5051function displayTickets($item, itemData, index) {52 $item("#ticketName").text = itemData.name;53 $item("#ticketPrice").text = itemData.price.toString();54 $item("#ticketQuantity").value = 0;55}5657function reserveTickets() {58 const selectedTickets = getSelectedTickets();5960 wixEventsFrontend.tickets.reserve(eventId, selectedTickets)61 .then((reservation) => {62 reservationId = reservation.id;63 })64 .catch((error) => {65 console.log("Error", error.message)66 });67}6869function getSelectedTickets() {70 let selectedTickets = [];7172 $w("#ticketRepeater").forEachItem(($item, itemData, index) => {73 if ($item("#ticketQuantity").value > 0) {74 selectedTickets.push( {75 "ticketId": itemData._id,76 "quantity": $item("#ticketQuantity").value77 });78 }79 });8081 return selectedTickets;82}8384function checkoutTickets() {85 wixEventsFrontend.tickets.checkout(eventId, reservationId, {86 "formValues": getFormValues(),87 "coupon": $w("#couponCode").value88 })89 .then(({order}) => {90 orderNumber = order.orderNumber91 wixPayFrontend.startPayment(order.paymentId);92 // Note that PDF tickets are available before payment is complete93 $w("#ticketsPdfLink").value = order.ticketsPdf;94 })95 .catch((error) => {96 console.log("Error", error.message)97 });98}99100function updateTickets() {101 wixEventsFrontend.tickets.updateOrder(eventId, orderNumber, {102 "formValues": getFormValues()103 })104 .catch((error) => {105 console.log("Error", error.message)106 });107}108109function verifyCouponCode(value, reject) {110 const coupon = $w("#couponCode").value;111 wixEventsFrontend.tickets.verifyCoupon(eventId, reservationId, coupon)112 .then((result) => {113 if (result.discountErrors) {114 // handle verification failure115 $w("#couponCode").updateValidityIndication();116 $w("#couponErrorMsg").show();117 $w("#couponSuccessMsg").hide();118 reject("Coupon is invalid");119 } else {120 // handle coupon verified121 $w("#couponErrorMsg").hide()122 $w("#couponSuccessMsg").show()123 }124 });125}126127function getFormValues() {128 return [129 {"name": "firstName", "value": $w("#firstName").value},130 {"name": "lastName", "value": $w("#lastName").value},131 {"name": "email", "value": $w("#email").value},132 {"name": "custom", "value": $w("#foodAllergies").value},133134 // When a form contains an address, the way you format the135 // address information for submission depends on what type136 // of input elements you use to gather that information.137138 // Wix address input element.139 {"name": "address", "value": $w("#address").value},140141 // Single element which is not an address142 // input element, such as a text input.143 {"name": "address", "value": [$w("#address").value]},144145 // Multiple elements for the146 // various parts of an address.147 {148 "name": "address",149 "value": [150 $w("#street").value,151 $w("#city").value,152 $w("#state").value,153 $w("#country").value,154 $w("#postalCode").value155 ]156 },157158 // When a form contains an input for adding more guests to an159 // RSVP, format the guest names for submission in an array160 // where each element is the full name of a guest.161 {"name": "additionalGuests", "value": $w("#additionalGuests").value},162 {163 "name": "guestNames",164 "value": [165 `${$w("#guest1FirstName").value} ${$w("#guest1LastName").value}`,166 `${$w("#guest2FirstName").value} ${$w("#guest2LastName").value}`,167 ]168 }169 ];170}