How can I use basic math to calculate and display the total time for a recipe page in Webflow CMS?
TL;DR
- Create number fields in CMS Collections for "Prep Time" and "Cook Time".
- Use custom JavaScript to add these fields and display the total time on the recipe page.
To display the total time for a recipe page in Webflow CMS using basic math, you'll need to use the CMS Collection fields and a bit of Webflow's native features.
1. Set Up CMS Collection Fields
- Go to CMS Collections and create fields to store individual time components, such as "Prep Time" and "Cook Time".
- Make sure these fields are of the Number type to allow for mathematical operations.
2. Add Fields to the Designer
- Drag the text element onto your recipe page where you want to display the total time.
- Bind the text element to CMS fields such as "Prep Time" and "Cook Time" to display them on the page.
3. Use Custom Code or Integrations for Calculation
- Since Webflow doesn't natively support formula fields, you'll need to use custom code.
- Insert a custom script in the page settings or before the
</body>tag that calculates the total by adding the "Prep Time" and "Cook Time" fields. - Use JavaScript to grab these values and perform the addition:
```javascript
var prepTime = parseInt(document.querySelector('[data-preptime]').innerText);
var cookTime = parseInt(document.querySelector('[data-cooktime]').innerText);
var totalTime = prepTime + cookTime;
document.querySelector('[data-totaltime]').innerText = totalTime + ' mins';
```
4. Style the Display
- Style the text elements in the Designer to match your page design.
- Ensure text elements are clearly labeled, so visitors can understand what each time represents.
Summary
To calculate and display the total time for a recipe in Webflow, use CMS fields to store prep and cook times, and apply custom JavaScript to perform the addition and display the total.
