How to remove RG item with state?

[fazekas.devon]

Please help. How can I maintain my Cart item’s quantities without using the database?

Objective:

I have a data type of Products, and 2 RGs on a page. The first RG acts as a catalogue showing all products by fetching from the database, and has a state called SelectedProducts (list of Products). The second RG acts as a cart, fetching from a state SelectedProducts.

To minimize Workload Units, I’m avoiding creating a Cart datatype and instead relying on state. Each cart item has a quantity counter, but quantity isn’t part of the Product’s data type, so I need to track it client-side until they proceed to checkout.

All I want is to create a client-side cart with individual quantities. Users can add and remove products from the cart, and modify their quantities.

My Problem:

Initially, I had a Quantity (number) state on the cell within the Cart RG, but this leads to a bug when deleting items from the Cart because it seems Bubble persists the Quantity state and tracks it by cell index (not object).

For instance, if I have three items in the cart, with quantities 1, 2, and 3, respectively, and I delete the second item (with quantity 2), then the third item (with quantity 3) has its index changed and inherits the now-deleted item’s quantity (quantity 2).
Moreover, adding a new third item to the cart will inherit the quantity from the position it’s added to (in this case, quantity 3).

What I’ve Tried:

I’ve tried so many workarounds including adding a Quantities (number list) state to the Catalogue RG (with the intent of relating it to the SelectedProducts state by index), but apparently states don’t allow for duplicate values (which is ridiculous because it should be a list, not a set).

Another approach I was about to try was to change the Quantities state to a single comma-delimited string. But this would lead to so much complexity when tracking and deleting quantities (still a viable option though).

[GH5T]

What if you had a cart state somewhere in your header? Of course assuming your header is a reusable element, and your RG somehow has access to that headers state whether it’s through properties, or on the same page itself.

This would allow you to access those states through custom workflows, data types, or actions.

This example is a state data source being pulled from the component itself from within a RG.

The benefit of this is that you can literally access the cart state anywhere from within your application (as long as it’s using your header).

[ihsanzainal84]

Each text should be unique while dynamic so that you can easily find and remove items from a state. Something like unixTime||cartItemUID||quantity. Extract the cart item and quantity by splitting this text with || and selecting item #2 and #3 in the expression composer. You can use any delimiter, I like using |.

Set your RG to text type and set your elements accordingly. For the cart item just grab the list from whichever state or RG that holds it and use a :filtered expression to filter by ID.

Changing the list or editing something in the list is a matter of remove item list → add text to list

[animisha45]

The solution by @ihsanzainal84 is perfect in this case.

However, the amount of WU that will be used for doing it through bubble is not that high, if built properly. So you can still go the original route.

Any reason you feel it is draining your WUs too much?