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