Delay on button to solve refresh data delay

I’m working on a shop app where users can buy food products. I have a problem with the cart update time due to a delay in updating the data.
The problem is that if I add a new product and click on the checkout button it creates my order without the last product added (delay 2/3 sec).
I was thinking of adding a delay for the visibility of the checkout button to allow the app to update the entire cart and display a gif whit “processing” text.
If someone is interested to work on my app i can share the link.
Thanks

Are you using Glide’s native checkout flow or are you building your own flow?

I can’t use native glidecart. I’m working whit my cart.

How would you process the logic of “something is being synced” though? I assume you’re adding a new product to the cart by a form, and only use the Sheets for this case (not Glide Tables) because you have to use the buy button?

Now the logic works whit 3 sheets.
Sheet 1 “add to cart” one product whit quantity product added whit form. All product added create a new row whit specific USER ID product name and quantity.
After in sheet 2 i do search to find all products added by specific USER ID (all users are marked whit Number of order and user email, this allow to have a unique identifier)
The last sheet “order” take information from user column where i have all cart information. Id, name, shipping adress, Total amount to pay and all product added.

The problem is when i add or remove one product from cart and i have a delay on cart updating. If user do a fast checkout the cart doesn’t have time to refresh and this make some error.

Are you using any formulas in any of those sheets for the check-out process? If yes, replace those with template/math columns in the Data Editor.

If no formulas are used in your sheet, you could collect time stamps to display loader image and hide cart until a specified # of seconds has elapsed.

1 Like

A similar effect can be acheived.
But it can only debar user from further actions!

If you are looking for some ideas for handling a shopping cart, this is how I would approach it. All tracking of selected products stays within the products table. The cart is a single row shared among all users, and only the orders table has a row added once an order is completed. There is no delay a everything is contained in glide tables and uses glide logic. Items can be added, removed, and quantities update in the cart. There probably a couple of things I could update in my app, but this is generally how I would do it.

3 Likes

Hi Jeff, your template looks great! I’m working on it and i think can be the solution.
The big limit is related to the payments but is a secondary question for me.
Thanks a lot Jeff!

I assume that you have a delay because of glide syncing with Google sheets… you are writing some value that is calculated in gs and you don’t see results right away… my solution for this is to copy that column in Google sheets and in glide check these two columns if they are the same. that means glide sync it… now you can set visibility for your components… like wait for text or image…
For delay action you can simply add timestamp and calculate duration … if the duration is greater than desired time then set true … else false

Since you are doing a shopping cart, I would recommend creating a semaphore mechanism to prevent double-booking your items while the customer is entering credit card info, and take out the lock when a transaction fails or expired

Yeah, I never went as far as payments since there are several different ways to handle payments depending on what you want. I didn’t really have a vested interest in taking it that far…at least not yet.

I created the shopping app because it seemed like a good way to demonstrate my methods for creating a single row shopping cart that handled several items, quantites, totals, and could be dynamically changed by allowing users to update quantities or remove items from the cart…while still allowing multiple users to work with that same single cart row at the same time…and I didn’t have to deal with any google sheet logic.

The only thing I’m not overly happy with is how I update the inventory once an order is completed, however I do prevent users from completing there order if an item becomes unavailable while it’s sitting in their cart. At that point they would have to reduce the quantity of that item or remove it from the cart altogether.

3 Likes

Yes Jeff, this shopping cart is already awesome. Payment is a plus. Now that I think about it I have opened a new topic, do you think this mechanism can be adapted to the development of a calendar for booking time slots?
Like a sport center booking system?

It possibly could. I’m not envisioning how that possibly would work though.

I’m looking this app https://earthy-vacation-7247.glideapp.io/ powered by stephen grier. I’m trying to understand how it works because unfortunately stephen doesn’t answer but I can’t understand how the booking mechanism is managed to avoid double bookings. Do you have any idea?

What I did in some of my apps is basically this:

  • Use a custom form to add bookings, mostly for the ability to check for duplicated bookings.
  • Use an event picker component for users to add new bookings, so they can see what has been booked, thus reduce the chance that they will add a duplicated one.

  • Use two single value columns to cast the desired starting and ending times to the table where I store existing bookings.

  • The logic starts from here, I usually create 4 columns to get the relative position of the desired starting and ending times, against existing starting and ending times. What I wanna check is if the desired time is before the existing time.

  • Let’s start with “Desired Starting vs Existing Starting”, if desired starting is before existing starting then true, else false. We do the same for the other 3 cases: “Desired Starting vs Existing Ending”, “Desired Ending vs Existing Starting” and “Desired Ending vs Existing Ending”.

  • Then, I create two template columns to get the combined boolean for:

“Starting Check”: Desired Starting vs Existing Starting combined with Desired Ending vs Existing Starting

“Ending Check”: Desired Starting vs Existing Ending combined with Desired Ending vs Existing Ending

  • If my thought is right, there are only 2 cases that a new booking can not be duplicated, they’re the two black ranges below.

  • Hence, final if then else column, if Starting Check is true - true then not duplicated, if Ending Check is true - true then not duplicated, else duplicated.
2 Likes

This looks great,
do you have an app where you have done this that you can share and understand how it works?

Unfortunately those belong to my clients and can’t be copied. I have explained the logic above, you can try it and let me know where you get stuck.

It’s not easy to understand how to do all step in english. Easy to understand the workflow but not how to do it only whit written explanation.
Everything is easier by visually seeing a mechanism

My idea is to create a calendar where each user can only book a fixed time slot (1 hour or 2 hours) and if this hour has been booked it will no longer be available for other users unless the reservation is canceled. . On GS this would be easier with some scripts, but I would like to be able to detach myself from GS and start working directly on Glide tables. This concept, however, blocks the development of the app and I can not go further.
If anyone has a demonstration app of this workflow that they can share I would be very grateful.