In this section
Creating the forms-pages
To be able to book a ticket the user must first select an event if the webpage is not determined to be for one specific event. If the page were to be determined for one specific event, you can skip this step and simply hard code it further down the line.
On this page we will make an event selector which allows someone to select any event from a given organizer. We will get the events by an API-Call and adequately display them for the user to select them. This form can take any form and shape, but the important part is that we are able to store “eventId” for further usage.
Since we are using React in our example, we can simply use the Node-Package-Manager and install axios.
Developer PowerShell Code:
C:Path\Developer-Site-Example-Bookingform> npm install axios
In the react code below we are first getting all the events of a hard-coded organizer and afterwards we are displaying the corresponding events and their information. Thanks to the usage of react we can simply update the state, which holds the event-details, and the display part of the code gets automatically updated to the new information.
Now that we have completed the first page, we can insert our next page. On this page we will ask the user to insert the quantity of tickets he wants from each type of available tickets. But before we can create the page itself, we first need to handle the routing-part of the application. These changes will have to be made inside of AppRouter.js. The code changes will be shown again, from this example onwards, we will only display the snipped code that needs to be inserted at the same place.
We will also transport the “eventId” within the URL, therefore we will store that in the designated params sections of the path. The eventId is needed to get the needed ticketType information.
Display TicketType information and add tickets to the basket
Since we also want to inform the user of what types of tickets there are and their prices and other corresponding information. Therefore, we need to first retrieve the information. But to get the detail-information of a specific TicketType we need the ticketTypeId.
To get all the TicketType-Ids of an event, we can simply call an API-Call which holds all the information. But for that said API-call we need the eventId, that is the reason we stored the eventId within the URL. From there we can retrieve the information and insert it into the call and make a successful. With the Array of TicketType we can loop through them and thereafter get the TicketTypeInfos.
In the example we have afterwards added the two types of ticketType objects to one object and inserted them into an array to make the display of the page easier. This also allows the page to be dynamic for the number of tickets.
The ShopBasket will be created when the user presses the button to go the next page and as soon as a succesfull callback has been made the API-Call to add the tickets will be executed and if this one also returns as a 200, the user will be moved to the forms page.
Customer information form
After having added the tickets to the order/ShopBasket we can now add the user information to the order, this we simply do with a form. The two only note worthy action within the form are the API-Call for the updating the Basket/Order with the Address details of the user. As well as the idleTimeHandler, the idleTimeHandler checks if the user has made any interactions with the Order. This is needed since we clear any hanging ShopBasket from our database, if there haven’t been any interactions within for 10min the basket will get deleted and the ticket will be bookable for everyone again, but if the ticket is in a basket, it cannot be booked by anyone else.
For the address information we are also getting any array of all the country in the requested language. Within the array will be country and its corresponding coutnryId will be retrievable and therefore insertable into the “http-body” for the API-Call which adds the information to the basket.
Since the next step for the user would be to make his decision regarding his paymentmethod, deliverymethod as well as in what currency he wants to pay, it is advisable to check the order for the totalPrice attribute. In case that its 0 it means the tickets were free and therefore the user should be re-routed to a different page if he were needed to pay.
AppRouter.js adding the formspage
And last but not least, lets add our CSS to make the page look acceptable to the eye.
Removing a ticket
If a user were to want to remove a ticket he would need to remove them one by one. For the delete API-call the user needs to add the ticketType that he want to remove in the body, besides that you can simply refresh the page-information and give the option to go back to the recap or add another again by going back to the orginial ticketAdd page.
Code for ticket removal
We are also not allowed to forget to define the routing the newly created page.