Locator & Pages in einer Single-Page-Application (SPA) implementieren

German

+ More

Einführung

Der Store-Locator funktioniert automatisch auf Server-seitig gerenderten Seiten. Für Seiten, die nur einmal beim Start gerendert werden und sich beim Klick auf eine andere Seite nicht neu laden, sind einige manuelle Konfigurationen notwendig, damit der Store-Locator funktioniert. Das ist oft bei Websites der Fall, die populäre Frameworks wie React, Vue.js oder Angular verwenden.

Schritte zum Vorgehen

Schritt 1

Füge das initiale Store-Locator-Skript zu deinem HTML hinzu:

<script src="https://uberall.com/assets/storeFinderWidget-v2.js" type="text/javascript"></script>

Schritt 2

Füge das Container-Div zu deiner Komponente innerhalb der SPA hinzu:

<div
id="store-finder-widget"
data-key="KEY">
// any other customization options
</div>

Der Store-Locator startet nicht automatisch bei einer SPA, da das initiale Skript das Div mit der ID „store-finder-widget" nicht finden kann, weil dieses erst bei der Ausführung von JavaScript gerendert wird.

Delete

Info

Siehe auch diesen Artikel zur Implementierung des Locator & Pages Widgets für weitere Details zur allgemeinen Einrichtung.

Schritt 3

Wenn du den Store-Locator zum ersten Mal startest und das Store-Locator-Div in der aktuellen HTML-Struktur vorhanden ist, musst du

window.UberallStorefinderStart();

aufrufen. Dies triggert das initiale Skript und lädt das Bundle. Der Store-Locator sollte nun angezeigt werden und ordnungsgemäß funktionieren.

Schritt 4

Wenn du zu einer anderen Route innerhalb der SPA wechselst, musst du

window.UberallStorefinderUnmount();

beim Unmount der Store-Locator-Komponente aufrufen. Dies stellt sicher, dass alle Komponenten ordnungsgemäß entfernt werden und beim Zurückkehren zur Ansicht korrekt neu gestartet werden können.

Schritt 5

Wenn du zur Route zurückkehrst, wo die Store-Locator-Komponente angezeigt wird, musst du

window.UberallStorefinderRestart();

aufrufen, um das bereits geladene Store-Locator-Bundle zu triggern.

Delete

Warnung

Du musst etwas Logik hinzufügen, um sicherzustellen, dass du diese Komponente beim ersten Mal mit window.UberallStorefinderStart() startest und danach nur noch window.UberallStorefinderRestart() aufrufst.

Beispiel

Hier ist ein Beispiel-Repository mit einer React-Implementierung mit dieser Store-Locator-Komponente, die die meiste der in den obigen Schritten erwähnten Logik enthält.