Seit der Version 1.10.3 kannst du nun mit eigenen Eventhandlern auf die Lieferlandauswahl deiner Shopbesucher reagieren.
Dadurch kannst du Inhalte dynamisch anpassen, spezielle Hinweise einblenden oder individuelle Prozesse anstoßen, um die Benutzererfahrung noch gezielter und flexibler zu gestalten
Anleitung
Um auf unsere definierten Events
- "ws5_oss_countryChanged"
- "ws5_oss_userCountryInitial"
- "ws5_oss_userCountry"
zuzugreifen, kannst du an beliebigen Stellen deines Templates eigenen Javascript-Quellcode hinzufügen.
Wie das genau geht kannst du auch hier nachlesen: https://jtl-devguide.readthedocs.io/projects/jtl-shop/de/latest/shop_templates/eigenes_template.html unter "Eigene Skripte nachladen" und "Änderungen an Template Dateien".
Nach Auswahl des Landes durch den Kunden: ws5_oss_countryChanged
Das Event wird immer dann geworfen, wenn der Shopbesucher ein Lieferland ausgewählt hat. Durch einen Event-Listener kannst du auf das Event hören und mittels "event.detail.country" kannst du auf den ISO-Code des von dem Benutzer ausgewählten Lieferlandes zugreifen.
Im Event-Listener selber kannst du dann beliebigen Javascript-Code ausführen. Dieser wird jeweils dann ausgeführt, wenn der Benutzer ein Land ausgewählt hat (und akzeptiert hat, falls die Bestätigung durch den Button aktiviert ist).
Hier ist ein Beispiel dazu:
document.addEventListener(
"ws5_oss_countryChanged",
(event) => {
console.log("Country changed to " + event.detail.country);
// TODO: eigener Code (event.detail.country enhält das aktuelle Land)
// Beispiel: Umleitung auf Website anhand des Landes
if (event.detail.country === "DE") {
window.location.replace("https://DEUSTCHE-SHOP-SEITE.de");
}
},
false,
)Hier ein erweitertes Beispiel mit Bestätigung bevor der Kunde weitergeleitet wird:
document.addEventListener(
"ws5_oss_countryChanged",
(event) => {
console.log("Country changed to " + event.detail.country);
// Umleitung auf deutschen Shop
if (event.detail.country === "DE") {
const userConfirmed = confirm(
"Wollen Sie auf die deutsche Variante des Shops weitergeleitet werden?",
);
if (userConfirmed) {
window.location.replace("https://DEUSTCHE-SHOP-SEITE.de");
}
}
},
false,
);Beim ersten Seitenladen: ws5_oss_userCountryInitial
Das Event wird beim aller ersten Laden des Shops geworfen und danach dann nicht mehr. Mittels "event.detail.country" kannst du dann auf den ISO-Code des für den Benutzer vorausgewählten Lieferlandes (z.B. ermittelt durch den Geoservice) zugreifen.
Im Event-Listener selber kannst du dann erneut beliebigen Javascript-Code ausführen.
Hier ist ein Beispiel dazu:
document.addEventListener(
"ws5_oss_userCountryInitial",
(event) => {
console.log("Preselected country " + event.detail.country);
// TODO: eigener Code (event.detail.country enhält das aktuelle Land)
// Beispiel: Umleitung auf Website anhand des Landes
if (event.detail.country === "DE") {
window.location.replace("https://DEUSTCHE-SHOP-SEITE.de");
}
},
false,
)Bei jedem anderen Seitenladen: ws5_oss_userCountry
Das Event wird bei allen anderen Seitenaufrufen geworfen (aber nicht beim aller ersten Seitenladen) und mittels "event.detail.country" kannst dann auf den ISO-Code des aktuellen Lieferlandes zugreifen.
Im Event-Listener selber kannst du dann, wie bei den vorherigen Events, beliebigen Javascript-Code ausführen.
Hier ist ein Beispiel dazu:
document.addEventListener(
"ws5_oss_userCountry",
(event) => {
console.log("Current country " + event.detail.country);
// TODO: eigener Code (event.detail.country enhält das aktuelle Land)
// Beispiel: Umleitung auf Website anhand des Landes
if (event.detail.country === "DE") {
window.location.replace("https://DEUSTCHE-SHOP-SEITE.de");
}
},
false,
)Tags: