How to handle repetitive actions on bubble?

razvan.podariu · 2024-10-17T18:59:16.238Z

Hey Bubblers,

I am building an app that should allow people to buy tickets online for spectacles.

The issue I am having now is that the spectacle room has 220 seats and I should allow users to book any seat they want.

I created the seats and they look like this (a little different for mobile version)

Each seat has two custom states: one as text for the row and the number of the seat and the second custom state is the price for that seat.

Each seat which is already booked will show red color and not available for clicking while the seats you are booking will display a green color.

My problem is that it became quite annoying to manually set 2 custom states and 2 conditionals for each seat, for more than 220 seats for desktop version and again another 220 seats for mobile version.

There must be a smarter way to do this.
Any suggestions?

GH5T · 2024-10-17T19:08:57.610Z

Yes. There is 100% a way to make this more dynamic.

yut017DB4b

I made this quick as an example. This is not built with Bubble but I could turn it into a custom component. Reason why we are using a custom component, is because Bubble itself cannot handle dynamic components like this in-house (or atleast is much harder to implement).

razvan.podariu · 2024-10-18T18:17:31.235Z

Hey,

where were you 2 months ago? I’ve done more than 50% of the work. Dropping everything now and start from scratch with Ooval…not sure is a great idea at this point.

But now that I know you exist, I will keep you in mind for the next similar project.

Thanks anyway

msgiblin · 2024-10-18T18:25:14.808Z

razvan.podariu:

My problem is that it became quite annoying to manually set 2 custom states and 2 conditionals for each seat, for more than 220 seats for desktop version and again another 220 seats for mobile version.

I’m curious why you’re manually creating a custom state for each seat; if you build this around a reusable element seat in a repeating group, that RE could have just the 2 states. This is how I handle the ‘heart’ indicator of something having been added to favorites in my recipe app (similar to AirBNB’s hearts). Would that be a simpler approach?

razvan.podariu · 2024-10-19T09:04:34.972Z

Good question,

I am not sure I can use a RG for this project because the seats are not following the same pattern. For example notice how the seats are placed from row 10 to 17:

image1349×414 104 KB

In a RG the seats would be placed from 1 to 23 with no spaces between them…where needed.

My second problem is that I have 4 conditionals for each seat depending on different actions of the user: spectacle chosen, if the seat is only reserved but not paid yet, if the seat is paid, if the seat is booked by current user or another user.

For example one conditional is Do a search for Carts with 2 constraints:

Seat = current seat
Spectacle = Dropdown Spectacle name

well…I do not have the droppdown in the RE to apply this conditional.

Moreover, each seat can be booked multiple times by same or different user…based on the spectacle.
For example if this weekend, we have 2 different spectacles running: Seat 5 on Row 5 can be booked once for 5$ for spectacle 1 and again for 10$ for spectacle 2.

Maybe I am missing something in doing it as a RE but believe me I tried and it does not work.

msgiblin · 2024-10-19T09:13:27.868Z

razvan.podariu:

For example notice how the seats are placed from row 10 to 17:

image1349×414 104 KB

In a RG the seats would be placed from 1 to 23 with no spaces between them…where needed

In an RG you could still create a grid of equal rows / columns, but populate only the seats being fed by a particular datatype. For exame, if the seat’s row number and seat number appear in a list of saets for this particular room.