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

# Price Sort Controller

![Price Sorter preview](https://raw.githubusercontent.com/thedesignmvp/framerfy-assets/refs/heads/main/docs/Price%20Sort%20Controller.png)

# Price Sort Controller

A price sorting dropdown component for Framer that stores the active sort order in `sessionStorage` and broadcasts a storage event for a product listing component to reactively re-sort its results.

***

## What It Does

The **Price Sort Controller** renders a styled native dropdown (`<select>`) with three fixed sort options: Recommended, Price Low → High, and Price High → Low. When the user changes the selection, the component saves the value to `sessionStorage` and fires a `storage` event — allowing a product grid on the same page to reactively re-sort without a page reload.

Key behaviors at a glance:

* **Three sort options** — Recommended (default CMS order), Price: Low → High, and Price: High → Low. These are fixed and not configurable.
* \*\*Persists selection in \*\*`sessionStorage` — the active sort value is stored under the key `priceSort` and restored on page load within the same browser session.
* **Broadcasts storage events** — fires a `storage` event on `window` when the sort changes, so a product listing component can listen and re-sort reactively.
* **Custom chevron icon** — the native dropdown arrow is hidden and replaced with a custom SVG chevron whose color and size are configurable.
* **Optional label** — a text label can be shown above the dropdown with full typography and color control.

***

## Property Controls

All controls are accessible in Framer's right panel when the component is selected. They are grouped into six sections: **Initial**, **Label**, **Container**, **Border**, **Text**, and **Icon**.

### Initial

| Property | Type | Default | Description |
| :- | :- | :- | :- |
| **Initial** | Enum | `Recommended` | The sort order selected by default on first load. Options: `Recommended` (default CMS order), `Low → High`, `High → Low`. If a value is already stored in `sessionStorage`, that takes precedence over this setting. |

### Label

Controls the text label displayed above the dropdown.

| Property | Type | Default | Description |
| :- | :- | :- | :- |
| **Text** | String | `Sort` | The label text shown above the dropdown. |
| **Show** | Boolean | `true` | Toggle the label on or off. |
| **Font** | Font | `16px` | Typography for the label text. |
| **Color** | Color | `#181A2C` | Text color of the label. |
| **Gap** | Number | `4` | Spacing between the label and the dropdown. |

### Container

Controls the dropdown's outer box.

| Property | Type | Default | Description |
| :- | :- | :- | :- |
| **Padding** | Number | `8` | Inner spacing inside the dropdown. Also controls the right-side padding used to reserve space for the chevron icon. |
| **Radius** | Number | `8` | Rounds the corners of the dropdown. |
| **Background** | Color | `white` | Background color of the dropdown. |

### Border

Controls the border around the dropdown.

| Property | Type | Default | Description |
| :- | :- | :- | :- |
| **Width** | Number | `1` | Border thickness in pixels. Set to `0` to remove the border. |
| **Style** | Enum | `Solid` | Border style. Options: `Solid`, `Dashed`, `Dotted`, `None`. |
| **Color** | Color | `rgba(0,0,0,0.12)` | Border color. |

### Text

Controls the typography of the dropdown options.

| Property | Type | Default | Description |
| :- | :- | :- | :- |
| **Font** | Font | System font, `14px` | Typography for the text inside the dropdown options. |
| **Color** | Color | `#000000` | Text color of the dropdown options. |

### Icon

Controls the custom chevron icon on the right side of the dropdown.

| Property | Type | Default | Description |
| :- | :- | :- | :- |
| **Color** | Color | `#000000` | Fill color of the chevron icon. |
| **Size** | Number | `20` | Width and height of the chevron icon in pixels. Range: 12–32. |

## Notes

* The sort value is stored in `sessionStorage` under the key `priceSort`. It persists for the duration of the browser session but is cleared when the tab is closed.
* The component fires a `storage` event on `window` when the sort changes. A product listing component should listen for this event and read `sessionStorage.getItem("priceSort")` to apply the new order.
* The three sort options (Recommended, Low → High, High → Low) are hardcoded and cannot be changed from the Framer panel.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.