How to calculate the sum of two field type values
How Do I?
I have a channel with a field type used for numbers (called “price”) I want to show on one page all the entries for this channel, and at the end I want to calculate the amount of all values in that field, from all entries and the amount to be updated dynamically with each entry added. It’s that possible? Thanks
There’s no native way to do this with EE. You might be able to do this with Stash ( https://github.com/croxton/Stash ) and variables. However, I’d probably just do this with Javascript.
For a basic example, my template would look something like this:
{exp:channel:entries}
...
<span class="price">{price}</span>
...
{/exp:channel:entries}
Total Sum of Price: <span class="price-total"></span>And then using jQuery, my Javascript would look like:
var i = 0;
$(".price").each(function () {
i = parseFloat(i) + parseFloat($(this).data("price"));
});
$(".price-total").html(i);hope this helps.
Thanks Andy, I think I missed something because the calculated amount is not shown in page. The .price-total is a class?
ah . apparently, the code formatting isn’t working correctly. That should be
Total Sum of Price: <span class="price-total"></span>
Still not showing Require some external JavaScript?
To not assume anything. If you’re using my example exactly as is,
- you need to include jQuery ( https://www.w3schools.com/jquery/jquery_get_started.asp )
- jquery needs to be called before you use it in the template.
- the javascript I included needs to be called after the DOM is loaded.
$( window ).load(function() { ... }
Still not working
This is the template <!DOCTYPE html> <html><head> <title> </title>
<!– jQuery –>
[removed][removed]
</head>
<body>
<div margin:0 auto; width:800px”> <div class=”uk-container uk-container-center”>
{exp:channel:entries channel="test" } {price} {/exp:channel:entries}
Total Sum of Price:
[removed] var i = 0;
$(“.price”).each(function () { i = parseFloat(i) + parseFloat($(this).data(“price”)); });
$(“.price-total”).html(i);[removed] </div> </div> </body></html>
and this is the result:
https://bazesportive.sibiu.ro/site/test
I don’t know why this keeps removing my markup, but the price is missing the data-attribute…
data-price="{price}"
I guess I should use gists instead: https://gist.github.com/ops-andy/ff81898f92b3bd23a9a583d56712366d
Thank you from the bottom of my heart Andy, my appreciation
Happy to help!