Eigenen Javascript Code ausführen nach Auswahl des Landes durch den Kunden

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 unser definiertes Event "ws5_oss_countryChanged" 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".

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 "e.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,
)

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,
);

Wird ein Lieferland im Dropdown-Menü oder in der optischen Auswahl gewählt, so bekommt dieser Event-Listener das mit. Es wird dann "event triggered" in der Konsole ausgegeben und falls der Benutzer das Land "Deutschland" ausgewählt hat, wird dieser zu der Webseite "https://webstollen.de" weiter geleitet.

Tags:

#js #javascript #event #Code #oss