> ## Documentation Index
> Fetch the complete documentation index at: https://docs.framerfy.ae/llms.txt
> Use this file to discover all available pages before exploring further.

# Cart Item Counter

![Cart Counter preview](https://raw.githubusercontent.com/thedesignmvp/framerfy-assets/refs/heads/main/docs/Cart%20Item%20Counter.png)

A lightweight component for Framer that displays the number of items currently in the cart by reading from `localStorage` and updating in real time when the cart changes.

***

## What It Does

The **Cart Item Counter** renders a single number — the count of items in the cart — as a styled text element. It is designed to be placed in a navbar or cart icon area to give users a live count of how many items they have added.

Key behaviors at a glance:

* \*\*Reads cart from \*\*`localStorage` — on mount, reads the `cart` key from `localStorage` and counts the number of items in the array.
* **Updates in real time** — listens for a custom `cartUpdated` event on `window`. Whenever another component (e.g. an Add to Cart button) dispatches this event, the counter re-reads `localStorage` and updates the displayed number instantly without a page reload.
* **Renders nothing until loaded** — the count is `null` on the first render before `localStorage` is read, so no placeholder number flickers on screen during load.

## Property Controls

| Property  | Type  | Default   | Description                                                   |
| :-------- | :---- | :-------- | :------------------------------------------------------------ |
| **Font**  | Font  | `12px`    | Typography for the counter text (family, size, weight, etc.). |
| **Color** | Color | `#181A2C` | Text color of the counter number.                             |

## Notes

* The counter shows the number of **line items** in the cart array, not the total quantity. If the same product is added twice as separate entries, the count will show `2`.
* The cart must be stored in `localStorage` under the key `cart` as a JSON array. Any component that modifies the cart must dispatch a `cartUpdated` event on `window` after writing to `localStorage` for the counter to update — otherwise it will only reflect the state from the initial page load.
* The component renders no fallback or zero state — if `localStorage` has no `cart` key, the counter displays nothing.