Widget-Einbindung auf Ihrer Website

Neu

Die Widget-Einbindung wurde überarbeitet und lädt jetzt zentral vom Mein-Fahrzeugshop-CDN. Bestehende Einbindungen werden im Rahmen der Umstellung aktualisiert.

Neben dem vollständigen Shop können Sie einzelne Widgets auf beliebigen Seiten Ihrer Website einbinden — z. B. ein Fahrzeug-Karussell auf der Startseite oder eine Suchleiste im Header.

Verfügbare Widgets

Widget	Beschreibung
Fahrzeug-Karussell	Zeigt eine Auswahl Ihrer Fahrzeuge als Karussell
Schnellsuche	Kompakter Such-Filter für den schnellen Einstieg
Volltextsuche	Freitext-Suchfeld über den gesamten Fahrzeugbestand

Einbindung

Schritt 1 — Widget-Bibliothek einbinden

Fügen Sie die Widget-Bibliothek einmal pro Seite ein, auf der Widgets erscheinen sollen — vorzugsweise vor dem schließenden </body>-Tag:

<script src="https://cdn.meinfahrzeugshop.com/v1/widgets/wrapper.js" async></script>

Schritt 2 — Widget platzieren

Fügen Sie an der gewünschten Stelle das Widget-Element ein. Den fertigen Code mit Ihren individuellen Werten finden Sie im Admin-Bereich unter Integration Shop — kopieren Sie ihn von dort.

Das Widget ist ein eigenständiges HTML-Element, das sich seine Daten (Theme, Logo, Fahrzeuge) automatisch aus der zentralen Datenbank holt:

<custom-elements-wrapper
  tenant-admin-id="IHRE-MANDANTEN-UUID"
  widget-type="1"
></custom-elements-wrapper>

Der widget-type bestimmt, welches Widget gerendert wird:

widget-type	Widget
1	Fahrzeug-Karussell
2	Schnellsuche
3	Volltextsuche

Sie können mehrere Widgets auf derselben Seite platzieren — die Bibliothek aus Schritt 1 muss nur einmal eingebunden werden.

Alle Attribute (Referenz)

Das Widget wird über Attribute am <custom-elements-wrapper>-Element konfiguriert. Den fertigen Code mit Ihren Werten erhalten Sie aus dem Admin-Bereich — diese Tabelle dient zum Nachschlagen.

Zwei Ebenen

Branding & Inhalte (Farben, Schriftarten, Logo, Fahrzeuge) holt sich das Widget automatisch aus der zentralen Datenbank. Über die Attribute werden nur die Einbindungs-Optionen gesetzt.

Pflicht

Attribut	Beschreibung
tenant-admin-id	Ihre Mandanten-UUID.
widget-type	1 Karussell · 2 Schnellsuche · 3 Volltextsuche.
cdn-url	CDN-Basis-URL des Widget-Bundles: https://cdn.meinfahrzeugshop.com/v1/widgets/.
api-base-url	Backend-Endpoint: https://production.meinfahrzeug.shop/api.

Optional

Attribut	Standard	Beschreibung
client-base-url	—	Basis-URL Ihrer Seite für „Details ansehen"-Links (Pfad zu Ihrer Shop-Seite, z. B. /fahrzeugbestand).
is-car-carousel-autoplay	false	Nur Karussell: automatisches Weiterblättern.
padding-x	0px	Horizontaler Innenabstand.
padding-top	0px	Oberer Innenabstand.
padding-bottom	0px	Unterer Innenabstand.
pages-search-filter-enforced-manufacturer	—	Erzwingt einen Hersteller.
search-filter-enforced-vehicle-types	—	Erzwingt bestimmte Fahrzeugtypen.
enforced-vehicle-request-parameters	—	Fest erzwungene Such-/Filterparameter.
initial-vehicle-request-parameters	—	Initiale Such-/Filterparameter (vom Nutzer änderbar).

client-base-url muss auf Ihre Shop-Seite zeigen

Wenn ein Besucher im Widget auf ein Fahrzeug klickt, wird er zum vollständigen Fahrzeugshop weitergeleitet. Damit das funktioniert, muss client-base-url auf die Seite zeigen, auf der Ihr Shop eingebunden ist — sonst führen die „Details ansehen"-Links ins Leere.

• Läuft Ihr Shop z. B. unter https://ihre-seite.de/fahrzeugbestand/, setzen Sie client-base-url="/fahrzeugbestand".
• Der Wert muss zum Pfad und Routing-Modus Ihres Shops passen (Hash- vs. History-Modus, siehe Shop-Einbindung). Am einfachsten: denselben Pfad verwenden wie im Shop-Einbindungscode desselben Mandanten (data-base-path).

Faustregel: client-base-url = die URL, unter der Ihr Shop erreichbar ist.

Wie es funktioniert

wrapper.js registriert das <custom-elements-wrapper>-Element. Sobald es im Sichtbereich erscheint, lädt es Ihre kundenspezifischen Einstellungen (Farben, Schriftarten, Logo) und die passenden Fahrzeugdaten aus dem Backend. Sie müssen nichts konfigurieren — Änderungen im Admin-Bereich sind nach einem Reload sofort sichtbar.

Troubleshooting

Symptom	Mögliche Ursache	Lösung
Widget bleibt leer	wrapper.js fehlt oder wurde nach dem Widget-Element geladen	Bibliothek aus Schritt 1 einbinden
Falsche Fahrzeuge / falsches Theme	Falsche Mandanten-UUID im Widget-Element	Code erneut aus dem Admin-Bereich kopieren

Bei weiteren Fragen wenden Sie sich an den Support.

Wichtig

Verwenden Sie ausschließlich die Code-Snippets aus Ihrem eigenen Admin-Dashboard unter Integration Shop. Beispielcode aus dieser Dokumentation darf nicht auf Live-Seiten verwendet werden — er enthält Platzhalter-Werte.