Please help! How to calculate sum of text elements in a repeating group?

Hello everyone,

I am having trouble trying to calculate the sum of text fields that are a result of calculations run in a repeating group.

I have a repeating group that is running a calculation to show the total line item price for items in a users shopping cart, and at the top of that order summary I want to displaythe total price for all of the items in their order. So each row in a repeating group is a product, and within that row is a text field that dynamically calculates the cost for that item in your order (product price x quantity desired). This all works fine.

The problem, is that I cannot figure out how to show right above the repeating group the total price of all of the products they want at the quantities they want them at. This would be easy if I could just summarize the number values of dynamic fields in the repeating group but I have not found any way to do this.

Please help me! Does anyone have any ideas on how to calculate this value?

As people add and remove items from their cart it should be updating a custom state that is a total price. Then just give that text element the value of the custom state.

Thank you for the feedback, William. I’m not super familiar with custom states, unfortunately. They might be able to help me though, let me try to explain my problem a little further…

So people are able to add a “generic product” to a “generic shopping list” (meaning the products in the shopping list are not tied to a store yet) which has fields like “name” and “quantity.” The reason they aren’t yet tied to a store is because after the user finishes creating their “generic shopping list” they go to a page that allows them to compare pricing for items across stores near them. At this point, I have a repeating group that is searching for stores near the user, and within those repeating groups is another repeating group of “specific products” that now have a store (parent group’s store) and price field, and the repeating group is only searching for “specific products” that share a name with the “generic products”. I’m able to calculate the total price of each product (specific product’s price * generic product (with same name)'s qty) so that it nicely shows how much it will cost per item per store (calling this the line item total). The next step that I need is to sum all of those calculated line item totals in my repeating group to get the order total for that repeating group’s store.

If there are major overhauls in my database structure that needs to be done I’m open to this idea as well, but based on what I’ve said how would you approach that problem?

Any element in Bubble can have a custom state added and assigned any type that is in your database or things like tex, number, etc. Whenever you run a workflow action of adding items, you need to also edit a custom state to get that total either by adding or subtracting from its original value to keep a running total. This way you will have that number when you need it. You cannot total text element values in a repeating group. The only way is to keep track by setting states.

Based on your reply it seems I would have to have multiple running totals specific to each store? To allow for totals to be calculated based on the same products but for their prices that are unique to each store

It seems so. Or you could use Javascript to do it. There is a free plugin called Toolbox that has an action called Run Javascript. If you gave the text element in the repeating group a class name, which can be done at the bottom of the element in the field called Element ID, for this example you could add: {addClass: "addMe"}. Then give the text element that you want to display the total in and ID of “displayTotal”, in this case you simply add “displayTotal” to the element ID field. Then when the Page is Loaded or a Button is clicked or whenever would be a good time to display the total you can add the Action from the plugin Run Javascript and paste in the following code:
let elements = document.getElementsByClassName("addMe");
let total = 0;
elements.forEach(element => {
total += parseFloat(element.innerHTML)
})
document.getElementById("displayTotal").innerHTML = total