Dear coding experts,
Context
The theatre I volunteer for organises 6 identical shows, each on a different date. I want to create a registration form on the theatre’s website through which our audience can reserve 1 or multiple seats for 1 of the 6 shows. Our maximum capacity per show is 86.
- Note 1: reserving seats for multiple shows at once needs to be disabled.
- Note 2: we don’t accept online payments, only offline at location.
I can collect the name (for identification at location), email address (for confirmation email) and potential comments of spectators through user input boxes and link that to a database. Under each of the 6 show dates, there are user input boxes where the number of desired seats for the respective show can be filled in.
So far so good.
Problem
I’d need the following things:
- Next to each of the 6 show dates displayed on the webpage (static), I need a number displayed that shows the current number of available seats for every show (dynamic).
Example: When visitor 1 reserved 2 seats for show 1, the displayed number of available seats for show 1 has to drop from 86 to 84 when the page refreshes (84 is now the new total for show 1, which will drop again after the next reservation, and so on and on). Additionally, when a show is sold out, making reservations for that show should automatically be disabled.
- I have to collect all gathered information in a database, in which I can filter per show date, so I can download it accordingly and send it to my colleagues at the cash register of the venue.
Help
I am not familiar with any coding, though I tried several things to resolve these issues, yet unsuccessfully. May I kindly ask someone on this forum to provide me with a coding solution / suggestion / example? Apologies for asking this much, but I’d be most grateful if someone could help me out. Don’t hesitate to contact me for more clarification if needed.
Thanks in advance!
Best,
Michiel
Hello Michiel, do you have already a form and even some code?
How looks the structure of your Database?
Like this?..
Show | Reservations | Total-Avaliable-Seats
show1 | 3x | 83
show1 | 2x | 81
show1 | 5x | 78
show3 | 3x | 97
show1 | 3x | 75
import wixData from 'wix-data';
var show1TotalCapability = 86 //setting the CAPACITY of seats for show-1
var show2TotalCapability = 100 //setting the CAPACITY of seats for show-2
var show2TotalCapability = 1000 //setting the CAPACITY of seats for show-3
var show2TotalCapability = 200 //setting the CAPACITY of seats for show-4
var show2TotalCapability = 500 //setting the CAPACITY of seats for show-5
var show
var reservations
$w.onReady(function () {
$w('BTNreservation').onClick(()=>{ //This will start the serching-process
show = $w('#DropdownShow').value // ---> Chose your show (DropDown) (possible-values = show1 - show5) -for example
reservations = $w('#DropdownReservations').value // ---> Chose your show amount of Reservations (possible values = 1-10) -for example
RESERVATION()
})
})
async function RESERVATION() {//gettind DATA of your DATABASE
wixData.query("HereTheNameOfYourCollection")
//here setting a filter for example ...
//eq.("YourColumnHere", "YourSearchingValueHere")
eq.("reservations", show)
.find()
.then( (results) => {
if(results.items.length > 0) {
let firstItem = results.items[0];
let itemID = firstItem._id
let reservations = firstItem.reservations
//here your CODING-PROCESS (Substraction of a value)
if (show === 1) {show1TotalCapability = await (show1TotalCapability - reservations), $w('#OutputField').value = show1TotalCapability}
if (show === 2) {show2TotalCapability = await (show2TotalCapability - reservations), $w('#OutputField').value = show2TotalCapability}
if (show === 3) {show3TotalCapability = await (show3TotalCapability - reservations), $w('#OutputField').value = show3TotalCapability}
if (show === 4) {show4TotalCapability = await (show4TotalCapability - reservations), $w('#OutputField').value = show4TotalCapability}
if (show === 5) {show5TotalCapability = await (show5TotalCapability - reservations), $w('#OutputField').value = show5TotalCapability}
// then you can also save the results in the DB
let toUpdate = {
"_id": itemID,
"reservations": reservations,
};
wixData.update("HereTheNameOfYourCollection", toUpdate)
.then( (results) => {
let item = results; //see item below
console.log(results)
} )
} else {
// handle case where no matching items found
}
} )
.catch( (err) => {
let errorMsg = err;
} );
}
Something in this way…(it’s just the first idea and has to be expanded, modified and optimized! )
@russian-dima
Hi there! Thanks a lot for looking into this!
Below you can see the basic form I included to try things out. Via user input boxes, the spectators can select the show date, fill in the number of tickets they need and submit their reservation.
The 6 show dates and their total number of available tickets is shown next to it (just text form that I added), but the available tickets need to go down every time someone booked tickets for a specific date, e.g. when the page refreshes.
I don’t have any coding yet, as I don’t really know how to do that. I thought I could just work with the drag and drop in Wix, but since our reservation system needs a bit more than that, it’d be great if you could help me coding this.
I don’t have a database yet, but what I would need in there is the name and email address of the people who make the reservation (also collected via user input boxes - still need to add those), the show date they make the reservation for as well as the number of tickets they need.
Ideally, I can filter in the database per show date, so I can download the list and send it to my colleagues at the venue for every show date.
I hope this makes sense? Let me know if you need more info!
Many thanks again for looking into this!
Michiel
Ok, before you start any coding. You should do the following!
- Do some brainstorming. Think about how you imagine the flow of all processes in your project. It is not wrong to write every step down on paper!
- After you approximatively know how the processes will work…
- …you create a database for all inputs. All data which has to be saved.
(dates/times/total-count-of-tickes and so on.
After you have some plan, how to realize, we can start with coding.
Also, try to understand what will be needed in coding-language?
For example:
- How to SET data into DATABASE?
-How to GET data from DATABASE?
-How to connect my DATABASE and my INPUTS?
-Should i better use a dataset, or working directly with queries?
-And so on…
This were just a part of what you should think of.
Think about all this.
Everything you will also find in the API-REFERENCE here…
https://www.wix.com/corvid/reference/api-overview/introduction
Perhaps you even can make your first steps without any help.
But if you get stuck, you will come back here, to this post.
Hi again, @russian-dima, thanks for your reply! I am currently working on a sketch on paper, as you suggested, to try and visualise what I would need to happen.
I’ll come back here when I’m stuck. Thanks for the help so far!
@michieldw
No problem, do your best!