Store Item

Overview

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

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

Usage

To use the Store component in a standard HTML page:

<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

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

• 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

<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

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.