Doing math on a CMS page?

Hello,

I want to create a “math” interaction in a website I am creating, I came up with this formula:

0.77*(3000n) + 1000n*m
n= Modifier imputed in the CMS by me. (I assume I input it as an integer?)
m= Modifier picked by a visitor of the website by a dropdown on the specific CMS page.

using CMS because it is a collection and each item in the collection has a different n.

I need to be able to show the correct item on each CMS page, what is the smoothest way to achieve that in webflow?


Here is my public share link: LINK
(how to access public share link)

Or even something as simple as just converting hours into days:
n/24

n=number of hours

I don’t know what you’re trying to achieve exactly, but soetimes you can use CSS Calc along with CMS or fixed variables.

Something like: `width:calc(100vh-60px)``

Hey @vincent , thank you for the reply. Will try to explain better

I want a number to appear inside a DIV (inside a CMS page) - the number is the final price that the client sees after the calculation is being done in the backend

This is an example formula: 0.77*(3000n) + 1000n*m
n= Is a value that is unique to each of the CMS pages and imported when a CMS page is created. (Integer)
m= Is a value the client inputs inside an input box when they are on a spesific page

After the client entered the desired value a result will pop up that will be the result of the calculation. - I am a designer natively so it is hard for me to figure out how to put in this functionality

@Artur_Butvilovsky, what would be the reason for just the client to do this? Why would these values need to be placed on a website?

I am missing something at the direction of your intended results?

Can you please provide a share link of your project so we may see what your desired outcome is supposed to be?

TIA and Happy Designing,
Brandon

@QA_Brandon
When saying client - I ment website visitors - The websites goal is to sell offline courses.
n= base price of each course (which is inputed in the CMS - each course has it’s own CMS page)
m= the number of participants a visitor would like to check the price for (default 1 participant)

and then the visitor of the website can see the price after inputing the desired m.

The website is still in beginning phases, just trying to figure out how to do this first

@Artur_Butvilovsky have you though about using Memberstack.io for this such function. You are able to create secure backends, etc.

Reach out to @DuncanHamra for any additional help!

1 Like

Maybe I have missunderstood, but from quick view at that website - it looks like a membership integration - which the website doesn’t require.
All I need is to make a custom math functionality that takes inputs from the CMS page and visitor input - any website visitor should be able to do it.

@Artur_Butvilovsky I would then refer to the post that @vincent posted above.

This requires custom code. You can use the values of CMS fields in calculations and then display the results via custom code on your CMS page.

1 Like

Thank you for the reply - I was hoping someone could explain to me or show an example of how to do this if it exists somewhere - I am natively a designer who slowly learns code while using webflow, so I have no idea how to start working around this :slight_smile:

Hello @Artur_Butvilovsky,

You can use the embed block to add a calculator from calconic. All you have to do is add an embed block on your site and copy and paste the code you get from calconic.com. Here is a youtube link on how to do it How to Create a Custom Interactive Calculator for Your Website (2019) - YouTube I hope this puts you on the right track.

1 Like

This is nice for calculators, but i think it’s just another 3rd party (paid) license thing, which should not be needed.

I also have many situations in where i need to calculate some things.
For example:

  • i want to show a total number of collection items in a collection list and just count + show this number live on the website (f.e. "we have xx news items ")
  • i want to add up all the numbers in a specific field, from all collection items, and show the sum of this as a real number on the website. (f.e. " we delivered xxxx kWh power in all our solar-projects combined")
  • i would also like some more advanced calculations like log/exp/sqrt stuff, but haven’t needed this much until now.

Hello Martijn,
did you manage to find a solution to your problems without involving the use of a 3rd party? I have also found myself in the same situation and I am stuck.
Cheers
Valter

As a matter of fact yes!
I’ve found a script - not super easy, though it is doable!

Example:

Put the script below in the the <head> of your page:
This example gets 2 variables (values + panels) and also sums up the total number of items.

<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:

image

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.
You can style them with your class, which you need to define somewhere (else) on your page.

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:

image

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.

I think this is all possible, but the math part you want, is also outside of my comfort-zone.
I have found this “sum” script online and with asking others here.
Maybe you can find someone with proper JS abilities to do the math for you.

Regarding: <p><span id="target" class="your-class-for-all-values"></span></p>
These codes you place in your website inside a “HTML Embed” - they will then show up there as actual numbers (or text).