Hello Martijn
thank you very much for your reply.
Actually, I am not a coder therefore most part of that script is Sanskrit for me.
Let’s say I have a collection (“TOURS”) with PRICE1, PRICE2, PRICE3 fields and another collection (“AGENT”) with DISCOUNT field.
I want to display on my page (3 text fields) the 3 final result of the following math operation:
PRICE - ((PRICE/100)*DISCOUNT)
where PRICE is taken from the fields PRICE1, 2, 3
and DISCOUNT is taken from the field DISCOUNT.
Eg.:
In Collection TOURS I have a record named “Beach Tour”. In Collection AGENT I have a record named “ABC Tours Ltd.”.
Beach Tour has fields
PRICE1 = 1000
PRICE2 = 1500
PRICE3 = 2000
ABC Tours Ltd. has field
DISCOUNT = 10 (where 10 is the percentage assigned by me)
Outcome is the final result of:
PRICE1 - (PRICE1/100)*DISCOUNT)
PRICE2 - (PRICE2/100)*DISCOUNT)
PRICE3 - (PRICE3100)*DISCOUNT)
Do you think your code would work in this scenario?
Also, where would you be placing this HTML?
<p><span id="target" class="your-class-for-all-values"></span></p>
<p><span id="target2" class="your-class-for-all-panels"></span></p>
<p><span id="target3" class="your-class-for-all-items"></span></p>
Cheers
Valter
| icexuick Martijn Hoppenbrouwer
November 16 |
As a matter of fact yes!
I’ve found a script - not super easy, though it is doable!
PS. i know for sure that panels + values works, i’m not using the total amount of items, so not sure if this works!
Example:
Put the script below in the the <head>
of your page:
This example gets 2 variables (values + panels) and also adds total values.
<script>
// Array to store all items on page. Do not remove!
var items = [];
document.addEventListener("DOMContentLoaded", () => {
//set the amount of variables you need for your calculations
const log = console.log,
values = [],
panels = [];
//set which values you want to store from your collection-items
Array.from(items).forEach((item) => {
values.push(item.value);
panels.push(item.panel);
});
function numberWithCommas(sum) {
return sum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
//add all numbers to the "values" variable
const target = document.getElementById("target"),
sum = values.reduce((a, b) => Number(a) + Number(b), 0);
target.textContent = numberWithCommas(sum);
//add all numbers to the "panels" variable
const target2 = document.getElementById("target2"),
sum2 = panels.reduce((a, b) => Number(a) + Number(b), 0);
target2.textContent = numberWithCommas(sum2);
//get total number of items
const target3 = document.getElementById("target3"),
sum3 = items.length;
target3.textContent = sum3;
log(values);
});
</script>
This stores all items and the 3 targets are calculated here.
target = sum of all values
target2 = sum of all panels
target3 = total number of items
To make it read the items, you need to have one (or more) collection lists on the page, where it can read from. In the collection item you need to have a HTML embed with a script that pushes the values into the above storing script:
This should contain:
<script>
items.push({
'value' : '{link this to your Webflow value variable} ',
'panel' : '{link this to your Webflow panel variable}',
});
</script>
If done right, you can now use a special for text to display the calculated values.
For the above example it could be something like this:
<p><span id="target" class="your-class-for-all-values"></span></p>
<p><span id="target2" class="your-class-for-all-panels"></span></p>
<p><span id="target3" class="your-class-for-all-items"></span></p>
The calculated sums of the 3 targets will be displayed here.