Store
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:
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
Behavior
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.
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.
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-urlis set.
Last updated