Shop-Einbindung auf Ihrer Website

Neu

Die Shop-Einbindung wurde überarbeitet: Statt mehrerer Script-Tags genügt jetzt ein einziges Loader-Snippet. Bestehende Einbindungen werden im Rahmen der Umstellung aktualisiert.

Der Mein Fahrzeugshop wird mit einem einzigen Script-Snippet in Ihre bestehende Website eingebunden. Es lädt automatisch alle benötigten Ressourcen vom Mein-Fahrzeugshop-CDN und zieht Ihre individuellen Einstellungen (Farben, Logo, Firmenname, Zahlungsoptionen, Inhalte) zur Laufzeit aus dem Backend.

Vorbereitung

1. Mandanten-ID (UUID) — Sie finden sie im Admin-Bereich unter Integration.
2. Eine eigene Seite auf Ihrer Website (z. B. /fahrzeugshop).
3. Eine Information darüber, welcher Routing-Modus für Ihren Shop vorgesehen ist — Hash (Standard) oder History (sprechende URLs). Bei Unklarheit: Hash nutzen oder den Support fragen.

Einbindung im Hash-Modus (Standard)

Fügen Sie den folgenden Code an der Stelle ein, an der der Shop erscheinen soll — vorzugsweise im Inhaltsbereich Ihrer Shop-Seite:

<div id="webshop-widget">
  <div id="nuxt-loading" aria-live="polite" role="status">
    <div>Lädt...</div>
  </div>
</div>
<script
  src="https://cdn.meinfahrzeugshop.com/v1/shop-hash/loader.js"
  data-tenant="IHRE-MANDANTEN-UUID"
  async
></script>

Ersetzen Sie IHRE-MANDANTEN-UUID durch Ihre individuelle UUID.

Einbindung im History-Modus (sprechende URLs)

Wenn Sie sprechende URLs wünschen (z. B. /fahrzeugshop/cars/bmw-3er-...), nutzen Sie den History-Modus:

<div id="webshop-widget">
  <div id="nuxt-loading" aria-live="polite" role="status">
    <div>Lädt...</div>
  </div>
</div>
<script
  src="https://cdn.meinfahrzeugshop.com/v1/shop-history/loader.js"
  data-tenant="IHRE-MANDANTEN-UUID"
  async
></script>

SPA-Fallback nötig

Beim History-Modus muss Ihr Webserver alle Unterpfade Ihrer Shop-Seite (z. B. /fahrzeugshop/*) auf die Shop-Hauptseite umleiten. Andernfalls funktionieren Direktlinks (z. B. aus Suchmaschinen oder Bookmarks) und Seiten-Reloads nicht.

• Apache / .htaccess — Rewrite-Regel auf /fahrzeugshop/index.html (oder Ihre Shop-Seite)
• Nginx — try_files-Direktive
• WordPress — passendes Redirection-Plugin oder Anpassung in .htaccess

Bei Unsicherheit nutzen Sie den Hash-Modus — der funktioniert ohne Server-Konfiguration.

Wie der Loader funktioniert

Der Loader-Script lädt eigenständig alle weiteren Bundle-Teile (Vendor-, Runtime- und App-Code). Sie müssen keine zusätzlichen <script>-Tags einbinden.

Es gibt zwei Konfigurationsebenen:

• Branding & Inhalte (Theme-Farben, Logo, Firmenname, Schriftarten, Zahlungsoptionen, Cross-Selling, Textinhalte) werden zur Laufzeit aus der zentralen Datenbank geladen — Änderungen im Admin-Bereich sind nach einem Reload sofort sichtbar.
• Einbindungs-Optionen (siehe unten) werden direkt über data-Attribute am Script-Tag gesetzt. Diese Werte liegen nicht in der Datenbank, sondern ausschließlich im Snippet.

Alle data-Attribute (Referenz)

Konfiguration erfolgt über data-Attribute am <script>-Tag. Pflicht ist nur data-tenant — alle anderen sind optional und haben einen Standardwert.

Pflicht

Attribut	Beschreibung
data-tenant	Ihre Mandanten-UUID. Ohne dieses Attribut startet der Shop nicht.

Layout / Abstände

Attribut	Standard	Beschreibung
data-base-path	/ (Hash) bzw. /fahrzeugshop/ (History)	Basis-Pfad des Routers. Für History-Kunden mit eigenem Pfad (z. B. /fahrzeugbestand/).
data-padding-x	32px	Horizontaler Innenabstand (Desktop).
data-padding-top	0px	Oberer Innenabstand (Desktop).
data-padding-bottom	32px	Unterer Innenabstand (Desktop).
data-padding-x-mobile	16px	Horizontaler Innenabstand (Mobil).
data-padding-top-mobile	0px	Oberer Innenabstand (Mobil).
data-padding-bottom-mobile	16px	Unterer Innenabstand (Mobil).

Verbindung / Links

Attribut	Standard	Beschreibung
data-api-base-url	https://production.meinfahrzeug.shop/api	Backend-Endpoint. Nur in Sonderfällen (z. B. Staging) überschreiben.
data-client-base-url	—	Basis-URL Ihrer Seite für Teilen-/Detail-Links (z. B. WhatsApp-Button).

Darstellungs-Optionen

Attribut	Typ	Standard	Beschreibung
data-header-visible	true/false	false	Header (Bild-Slider) anzeigen.
data-header-autoplay-delay	Zahl (Sekunden)	7	Autoplay-Intervall des Header-Sliders.
data-footer-visible	true/false	false	Footer anzeigen.
data-container-view	true/false	false	Container-Ansicht (zentrierter, begrenzter Inhalt).
data-hide-car-type-badge	true/false	false	Fahrzeugtyp-Badge auf den Karten ausblenden.

Vorfilter / Vorbelegung

Attribut	Standard	Beschreibung
data-enforced-vehicle-types	—	Erzwingt bestimmte Fahrzeugtypen (Nutzer kann sie nicht abwählen).
data-enforced-manufacturer	—	Erzwingt einen Hersteller.
data-enforced-request-params	""	Fest erzwungene Such-/Filterparameter (immer aktiv).
data-initial-request-params	""	Initiale Such-/Filterparameter (vom Nutzer änderbar).

Standardverhalten

Ob der Checkout aktiv ist und welche Elemente Ihrer Seite im Vollbild-Modus ausgeblendet werden, stellen Sie im Admin-Bereich ein — nicht über das Snippet. Diese Werte sind daher bewusst keine data-Attribute.

Troubleshooting

Symptom	Mögliche Ursache	Lösung
Der „Lädt..."-Hinweis verschwindet nicht	Falsche oder fehlende Mandanten-UUID im Snippet	Snippet erneut aus dem Admin-Bereich kopieren
Sprechende URLs (History-Modus) liefern beim Reload 404	SPA-Fallback auf dem Webserver fehlt	Rewrite-Regel ergänzen (siehe oben)

Bei weiteren Fragen wenden Sie sich an den Support.

Wichtig

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