Streaming live at 10am (PST)

Math using CMS fields

Hello there,

I am creating a “Recipe” page using the CMS. I would like to do some very basic math and display the result as a value on the CMS item page.

My collection items have:

  • Prep time
  • Cook time

I would like to then add those two variables and display a “Total time” field.
I know I can just use a custom embed and add the two fields within it.
I guess my issue is that I don’t know the proper syntax to calculate the two and display the information on the page.

Any help is appreciated!

@peej,

simply use custom fields pulled from your CMS inside your custom code embed. Have a look at this article (how to use dynamic embeds ony our webflow site).

Hope that helps.

Hey Anthony, I guess my question was more about the actual syntax. I wouldn’t know where to begin.

Would it be in JS, CSS or HTML?
Maybe stack overflow is a better place for this kind of question

Well I guess you could use a simple vanilla Javascript snipet like so:

Javascript

// 🥑 on DOM loaded
document.addEventListener("DOMContentLoaded", event => {
  const element = document.getElementById("element");
  // getting the values of prep and cook time
  let prep = Number(document.getElementById("prep").value),
    cook = Number(document.getElementById("cook").value);

  const sum = (a, b) => a + b,
    result = sum(prep, cook);

  element.innerHTML = `${result} minutes`;
}); // end DOM listener

Webflow HTML embed:

<!--need to replace the values by whatever {{your cms field name}} are-->
<input type="hidden" id="prep" value="20">
<input type="hidden" id="cook" value="10">
<span id="element"><span>

Where instead of the actual integer values I used for example, you’d use the CMS field from Webflow I talked to you earlier.

Here is a quick codepen for you.

2 Likes

Thanks for this! I’ve since started a JS course and this is extremely helpful.
I love the addition of the little food emojis in the code btw :joy:

1 Like