# Store Item

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


---

# 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://docs.carpose.de/misc-modules/store-item.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.