Count & Sum Items ❺
Count and sum items in your collection lists.
While the base functionality for SA5 Calc is fully implmented, there are a number of advanced features indicated with a strikethrough that are not yet available.
Use Cases
Count the number of items with a specific CMS field
Also works with option fields and single-ref fields
Sum a specific CMS field, such as price, or quantity
Average a specific CMS field, such as price, or quantity
Count the total number of items in a collection 🧪
See Use Cases for an understanding of common setup possibilities.
Getting Started
STEP 1 - Add the Library
First, add the library as detailed in Quick Start.
STEP 2 - Add the Attributes
Add the attributes you want, for the calculation you want to display.
This library generally involves two elements;
A display element, where the calculation such as the count of items is shown on the page. This is generally a simple Webflow text element.
One or more source element(s), which the calculation is performed with. These are also generally simple Webflow text elements, but
Usage Notes
wfu-calc
= ( method )
wfu-calc
= ( method ) Required. Defines the type of calculation that will be performed.
Method is one of;
sum
- sum of values.count
- count of items.avg
- average of items ( mean ).
wfu-calc-source-type
= ( source type )
wfu-calc-source-type
= ( source type ) Optional. Defaults to field
when not specified.
Source Type is one of;
field
- ( default ) the name of a field tagged withwfu-calc-field
selector- a CSS selectorsitemap- 🧪 indicates the sitemap as the source
Learn more about Source Types.
wfu-calc-source
= ( source )
wfu-calc-source
= ( source ) Required. The value specified here depends on the Source Type you've chosen.
This table shows the different settings you can use, depending on the Source Type;
field
The name of the field to use, as tagged with wfu-calc-field
e.g. blog
would match all items which have wfu-calc-field
= blog
selector
Any valid CSS selector for identifying the unique elements we want.
e.g. [my-type=foo]
sitemap 🧪
The path prefix to match, e.g. /blog/
e.g. /blog/
would count all items with the path beginning with /blog/
.
Learn more about Source Types.
wfu-calc-field
= ( field name )
wfu-calc-field
= ( field name ) Required when the Source Type is field
.
Indicates the attribute to retrieve the data item from.
See Use Cases for an understanding of common setup possibilities.
wfu-preload
= ( preload method )
wfu-preload
Optional. See preloaders.
Last updated
Was this helpful?