How to refresh html to finalize my shopping cart?

Hello everyone!

I am trying to create a shopping cart using LocalStorage (LS). I couldn’t find any threads related to it. I thought it should be more efficient than creating extra datasets. Everything was going fine: when I click on the button, some fields in LS are created, and then I retrieve them in the header (a reusable element) to list the products. I created a private plugin that returns the product quantity in each row of a Repeating group, which helped me to change the quantity in the shopping cart

image

GIF 18.10.2023 11-36-57

But the problem arises when I try to delete a product from the shopping cart. You can take a look at the example below: the remaining element inherits the quantity of the deleted element.

GIF 18.10.2023 11-46-32

I understand the reason: after deleting, the element remains in the HTML but its style.display is set to none , and the product quantity value obtained from my plugin is still present.

Clearing the Repeating group and resetting the parent group can’t help. I see that the only solution is to ‘refresh’ the HTML or remove this row from the HTML. However, everything I’ve tried so far hasn’t been successful. Does anyone have any ideas on how to resolve this? It’s frustrating to realize that this approach to creating a shopping cart isn’t working :sob:

Additional datasets aren’t necessarily inefficient and seem to be much easier than creating a plugin.

It seems the quantity which you’re tracking via a custom plugin is the issue so would be hard to help but when deleting a item why are you setting the display to hide?

Why aren’t you changing the quantity to 0? (assuming that it can’t be deleted altogether for some reason)

1 Like

Thanks for your reply!
Yep, I agree, and I’ve already decided to change the logic in the following way: to save an item but change its styles:

In terms of efficiency, I understand that this approach might seem unnecessarily complex and could make it harder for others to maintain. I’m also unsure about how it might affect WU. Nevertheless, what should we do with a lot records of users who didn’t finish their orders. Should we set up a loop to remove old records (every week/month)? How consuming will it be?

Up to you how often you want to clear out such records but it can easily be done with a recurring event that won’t be high consumption.

Side point: It would be most efficient if the modified date of the record could determine whether to delete the cart or not (as opposed to the user’s last login) but regardless it’s not a high consumption task.

Let’s imagine you have a small e-shop with 50 orders per day. According to Baymard (49 Cart Abandonment Rate Statistics 2023 – Cart & Checkout – Baymard Institute), the cart abandonment rate is about 70%. This means you’ll have 35 abandoned carts a day, resulting in approximately 1,000 abandoned carts in a month. This already seems like it could use a much more WU. Perhaps you have both a dataset of carts and a dataset of pre-ordered products. In that case, you may end up with, let’s say, 4,000 to 5,000 waste records every month. How many WU would you spend to delete such a large number of records? It could definitely become a scaling issue for your app…