"Simple" solution for booking "slots" [How to]

[dripple (Heiko / paperclip studios)]

This week I had to implement a quick solution to accept bookings / reservations, show available slots and disable the booking form once all slots are booked.

I thought I should share my implementation, in case someone has a similar need. It is by far not a complete solution, but might be sufficient for some use cases.

For this solution, you need:

• A form plugin or stack that stores data in a Google Spreadsheet, like FormLoom by @yabdab or Super Forms 2 by @1LittleDesigner. Any form plugin or stack that allows to store data in a google spreadsheet does the job.
• The Live Data stack from @1LittleDesigner
• My free Live Data Condition stack (Download here)

In short:

• Create a form and store data in a google spreadsheet
• Read this data
• Show/Hide form/stacks based on this data

How I did it:

• Setup a page with a form and store the data in a Google spreadsheet (instructions vary on the plugin / stack you use)
• In the Google spreadsheet store the number of available slots, in my example cell F1.
• Setup one cell and count number of rows used, the formula is counta(C2:C101) In my case, I used cell H1 and count the number of emails in column C, row 2 up to row 101. Set the range large enough to cover all rows / bookings you expect. In doubt, make it way bigger
• Setup a cell (in my example, column J1) with a formula F1 - H1, this are our free slots.
  
  
• In RapidWeaver, use the Live Data Stack by @1LittleDesigner to retrieve the data from cell J1, e.g. [slots-J1]
  
  
• Now the tricky part: we need a little bit JavaScript and HTML to check the Live Data output and hide / disable content on the page. To make this more comfortable, I’ve created a small stack, Live Data Condition, wich you can download for free here: Heiko codes: stacks
• After installing the stack, you can drop it on the page, place the stacks you want to conditionally display (the previous created form, for example) and set the condition, e.g. check if the value of the shortcode slots-J1 is 0 and then hide or show the stacks:
  
• Publish:
  
  
• As the number of entries in the spreadsheets increases, the number of free slots drops and finally the form will be hidden and new sign ups are no longer possible until you change the available slots or delete entries in the spreadsheet

The Live Data Condition stack comes with a Live Data Container stack which allows to store data without displaying it on the page (a limitation of the Live Data stack). With this both stacks you can actually control the content of the page by simply changing a cell value on Google.

There’s a sample page in my kitchen sink.

Cheers,
Heiko