> For the complete documentation index, see [llms.txt](https://docs.carpose.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.carpose.de/misc-modules/03_store-item.md).

# Store

### Overview <a href="#overview" id="overview"></a>

The `Store` component displays the detail view of a single store/location from the Carpose backend. It shows the store image with manufacturer logos, address, contact details, an optional excerpt, and action links for the route planner and an optional forward URL.

### Installation <a href="#installation" id="installation"></a>

The component is part of the Carpose application and requires no separate installation.

### Usage <a href="#usage" id="usage"></a>

To use the Store component in a standard HTML page:

```html
<div
  data-carpose-component="store"
  data-api-key="your-api-key"
  data-id="your-store-id"
  data-forward-url="/your-store-page"
></div>
```

### Configuration Attributes <a href="#configuration-attributes" id="configuration-attributes"></a>

The component reads configuration from data attributes on the provided element:

| Attribute                | Type   | Default | Description                                                                                  |
| ------------------------ | ------ | ------- | -------------------------------------------------------------------------------------------- |
| `data-carpose-component` | string | -       | Identifies the component type, must be set to "store"                                        |
| `data-api-key`           | string | -       | API key for authentication with the Carpose backend services. Required for data fetching.    |
| `data-id`                | string | -       | ID of the specific store to display. Required.                                               |
| `data-forward-url`       | string | -       | Optional URL used by the "zum Standort" action link. When omitted, the link is not rendered. |

### Features <a href="#features" id="features"></a>

* Displays the store image with overlaid manufacturer logos
* Shows company name, address, phone, and e-mail with click-to-call and click-to-mail links
* Optional rich-text excerpt rendered from HTML
* Route planner link generated from the store address (opens Google Maps in a new tab)
* Optional forward link to a dedicated store page

### Example <a href="#example" id="example"></a>

```html
<div
  data-carpose-component="store"
  data-api-key="your-api-key"
  data-id="2368b317-00ee-11f0-8de6-960000658564"
  data-forward-url="/standorte/musterstadt"
></div>
```

### Behavior <a href="#behavior" id="behavior"></a>

1. **Data Loading**:
   * On initialization, the component fetches the store data from the API using the provided store ID and API key.
   * Nothing is rendered until the store data has loaded.
2. **Manufacturer Bar**:
   * When the store has associated manufacturers, their logos are rendered as an overlay on the store image.
   * When there are no manufacturers, the bar is hidden.
3. **Action Links**:
   * The route planner link is rendered when the store has a street, zip, and town, and opens Google Maps in a new tab.
   * The "zum Standort" link is rendered only when `data-forward-url` is set.