# Count & Sum Items ❺

{% hint style="warning" %}
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. 
{% endhint %}

## 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 🧪

{% hint style="success" %}
See [Use Cases](/sa5-calc/article-1/calc-use-cases.md) for an understanding of common setup possibilities. 
{% endhint %}

## Getting Started  <a href="#getting-started-nocode" id="getting-started-nocode"></a>

### STEP 1 - Add the Library <a href="#step-1---add-the-library" id="step-1---add-the-library"></a>

First, **add the library** as detailed in [Quick Start](/sa5-calc/quick-start-or-sa5-calc.md).&#x20;

### STEP 2 - Add the Attributes&#x20;

Add the attributes you want, for the calculation you want to display.&#x20;

This library generally involves two elements; &#x20;

* 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.&#x20;
* One or more **source element(s)**, which the calculation is performed with. These are also generally simple Webflow text elements, but&#x20;

## Usage Notes   <a href="#getting-started-nocode" id="getting-started-nocode"></a>

### `wfu-calc` = ( *method* )&#x20;

**Required.** Defines the type of calculation that will be performed.&#x20;

*Method* is one of;&#x20;

* `sum` - sum of values. &#x20;
* `count` - count of items.&#x20;
* `avg` - average of items ( mean ). &#x20;

{% hint style="info" %}
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.&#x20;
{% endhint %}

### `wfu-calc-source-type` = ( *source type* )&#x20;

**Optional.** Defaults to `field` when not specified.&#x20;

*Source Type* is one of;&#x20;

* `field` - ( default ) the name of a field tagged with `wfu-calc-field`&#x20;
* ~~`selector` - a CSS selector~~&#x20;
* ~~`sitemap` - 🧪 indicates the sitemap as the source~~ &#x20;

Learn more about [Source Types](/sa5-calc/article-1/source-types.md).&#x20;

{% hint style="info" %}
Place this on the **display element** with the `wfu-calc` attribute. &#x20;
{% endhint %}

### `wfu-calc-source` = ( source )&#x20;

**Required.** The value specified here depends on the Source Type you've chosen.&#x20;

This table shows the different settings you can use, depending on the Source Type;&#x20;

| 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. | <p>e.g. <code>\[my-type=foo]</code> <br></p>                               |
| ~~`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](/sa5-calc/article-1/source-types.md).&#x20;

{% hint style="info" %}
Place this on the **display element** with the `wfu-calc` attribute. &#x20;
{% endhint %}

### `wfu-calc-field` = ( field name )&#x20;

**Required** when the Source Type is `field`.&#x20;

Indicates the attribute to retrieve the data item from. &#x20;

{% hint style="info" %}
Place this on the **source elements** directly which you are counting or using in your calculated result.
{% endhint %}

See [Use Cases](/sa5-calc/article-1/calc-use-cases.md) for an understanding of common setup possibilities.&#x20;

### ~~`wfu-preload` = ( preload method )~~

**Optional.** See [preloaders](/overview/preloaders.md).&#x20;

{% hint style="info" %}
Place this on the display element with the `wfu-calc` attribute. &#x20;
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://attr.sygnal.com/sa5-calc/article-1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.