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 )

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 ).

Place this on the display element where you wish the calculation result to appear. Typically this is a Webflow text element, but it can also be an INPUT element.

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 with wfu-calc-field

• selector - a CSS selector

• sitemap - 🧪 indicates the sitemap as the source

Learn more about Source Types.

Place this on the display element with the wfu-calc attribute.

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;

Source Type	Value	Notes
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.

Place this on the display element with the wfu-calc attribute.

wfu-calc-field = ( field name )

Required when the Source Type is field.

Indicates the attribute to retrieve the data item from.

Place this on the source elements directly which you are counting or using in your calculated result.

See Use Cases for an understanding of common setup possibilities.

wfu-preload = ( preload method )

Optional. See preloaders.

Place this on the display element with the wfu-calc attribute.