How can I use basic math to calculate and display the total time for a recipe page in Webflow CMS?
TL;DR
- Set up "Prep Time" and "Cook Time" as number fields in the CMS.
- Add a text element to the recipe page and bind it to show CMS data.
- Configure the element to calculate
Prep Time + Cook Timeusing Webflow's math features. - Publish the site to display and verify the total time calculation.
To calculate and display the total time for a recipe page in Webflow CMS, you need to use basic math with the CMS and Webflow's built-in features.
1. Set Up CMS Collection Fields
- Create two fields in your CMS collection, such as "Prep Time" and "Cook Time".
- Ensure both fields are of the type "Number" so they can hold minutes.
2. Add a Total Time Element
- Go to the recipe page template and add a text element where you want the total time displayed.
- Bind the text element to show data from the CMS Collection.
3. Use Webflow's Built-in Math Features
- Configure the element to perform math by combining the fields.
- Write an expression within the text element's settings combining the two fields, e.g.,
Prep Time + Cook Time.
4. Publish and Test
- Publish your site to see the total time calculation in action on each recipe page.
- Check to ensure the times display and calculate correctly from your CMS data.
Summary
To display the total time for a recipe, set up number fields in your CMS, create a text element to display the sum of preptime and cook time using Webflow's math features, and publish to see the result.