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 wixEvents from 'wix-events';
2import wixData from 'wix-data';
3import wixPay from 'wix-pay';
4
5let eventId;
6let reservationId;
7let orderNumber;
8let tickets;
9
10$w.onReady(function () {
11 // Retrieve data and set up page
12 await getData();
13 $w("#ticketRepeater").onItemReady(displayTickets);
14 $w("#ticketRepeater").data = tickets;
15
16 // Define button click actions
17 $w("reservationButton").onClick(reserveTickets);
18 $w("checkoutButton").onClick(checkoutTickets);
19 $w("updateButton").onClick(updateTickets);
20
21 // Verify coupon code when it is entered
22 $w("#couponCode").onCustomValidation(verifyCouponCode);
23});
24
25async function getData() {
26 // Run a query that will return only one event. Add
27 // additional filtering to the query if necessary.
28 const eventResults = await wixData.query("Events/Events")
29 .eq("title", "My Event")
30 .find();
31
32 if (eventResults.items.length > 0) {
33 eventId = eventResults.items[0]._id;
34
35 // Get tickets for the event
36 const ticketResults = await wixData.query("Events/Tickets")
37 .eq("event", eventId)
38 .find();
39
40 if (ticketResults.items.length > 0) {
41 tickets = ticketResults.items;
42 }
43 else {
44 $w("#ticketRepeater").hide();
45 console.log("Could not find tickets");
46 }
47 }
48 else {
49 console.log("Could not find event");
50 }
51}
52
53function displayTickets($item, itemData, index) {
54 $item("#ticketName").text = itemData.name;
55 $item("#ticketPrice").text = itemData.price.toString();
56 $item("#ticketQuantity").value = 0;
57}
58
59function reserveTickets() {
60 const selectedTickets = getSelectedTickets();
61
62 wixEvents.tickets.reserve(eventId, selectedTickets)
63 .then( (reservation) => {
64 reservationId = reservation.id;
65 } )
66 .catch( (error) => {
67 console.log("Error", error.message)
68 } );
69}
70
71function getSelectedTickets() {
72 let selectedTickets = [];
73
74 $w("#ticketRepeater").forEachItem( ($item, itemData, index) => {
75 if($item("#ticketQuantity").value > 0) {
76 selectedTickets.push( {
77 "ticketId": itemData._id,
78 "quantity": $item("#ticketQuantity").value
79 } );
80 }
81 } );
82
83 return selectedTickets;
84}
85
86function checkoutTickets() {
87 wixEvents.tickets.checkout(eventId, reservationId, {
88 "formValues": getFormValues(),
89 "coupon": $w("#couponCode").value
90 })
91 .then( ({order}) => {
92 orderNumber = order.orderNumber
93 wixPay.startPayment(order.paymentId);
94 // Note that PDF tickets are available before payment is complete
95 $w("ticketsPdfLink").value = order.ticketsPdf;
96 })
97 .catch( (error) => {
98 console.log("Error", error.message)
99 } );
100}
101
102function updateTickets() {
103 wixEvents.tickets.updateOrder(eventId, orderNumber, {
104 "formValues": getFormValues()
105 })
106 .catch( (error) => {
107 console.log("Error", error.message)
108 } );
109}
110
111function verifyCouponCode(value, reject) {
112 const coupon = $w("#couponCode").value;
113 wixEvents.tickets.verifyCoupon(eventId, reservationId, coupon)
114 .then( (result) => {
115 if (result.discountErrors) {
116 // handle verification failure
117 $w("#couponCode").updateValidityIndication();
118 $w("#couponErrorMsg").show();
119 $w("#couponSuccessMsg").hide();
120 reject("Coupon is invalid");
121 }
122 else {
123 // handle coupon verified
124 $w("#couponErrorMsg").hide()
125 $w("#couponSuccessMsg").show()
126 }
127 } );
128}
129
130function getFormValues() {
131 return [
132 {"name": "firstName", "value": $w("#firstName").value},
133 {"name": "lastName", "value": $w("#lastName").value},
134 {"name": "email", "value": $w("#email").value},
135 {"name": "custom", "value": $w("#foodAllergies").value},
136
137 // When a form contains an address, the way you format the
138 // address information for submission depends on what type
139 // of input elements you use to gather that information.
140
141 // Wix address input element.
142 {"name": "address", "value": $w("#address").value},
143
144 // Single element which is not an address
145 // input element, such as a text input.
146 {"name": "address", "value": [$w("#address").value]},
147
148 // Multiple elements for the
149 // various parts of an address.
150 {
151 "name": "address",
152 "value": [
153 $w("#street").value,
154 $w("#city").value,
155 $w("#state").value,
156 $w("#country").value,
157 $w("#postalCode").value
158 ]
159 },
160
161 // When a form contains an input for adding more guests to an
162 // RSVP, format the guest names for submission in an array
163 // where each element is the full name of a guest.
164 {"name": "additionalGuests", "value": $w("#additionalGuests").value},
165 {
166 "name": "guestNames",
167 "value": [
168 `${$w("#guest1FirstName").value} ${$w("#guest1LastName").value}`,
169 `${$w("#guest2FirstName").value} ${$w("#guest2LastName").value}`,
170 ]
171 }
172 ];
173}