Mit Hilfe von jQuery und Geonames können wir es dem Besucher ermöglichen, dass das Ort Eingabefeld innerhalb Shopware anhand der Postleitzahl automatisch befüllt wird. In euer Theme.php legt Ihr folgende Klasseneigenschaft innerhalb der Theme Class an.

protected $javascript = array(
'src/js/autocity.js'
);

jQuery function

Das folgende Skript nutzt den Dienst von Geonames.org, welches allerdings leider nicht unter SSL (sprich: https) funktioniert.
Zunächst müssen wir unsere Javascript Datei erstellen. Dazu legen wir in frontend/_public/src/js/ die Datei autocity.js an mit folgendem Inhalt:

$('#zipcode').bind('keyup change', function(e) {
if ($(this).val().length > 4) {
var ort = $('#city');
$.getJSON('http://www.geonames.org/postalCodeLookupJSON?&country=DE&callback=?', {postalcode: this.value }, function(response) {
if (response && response.postalcodes.length && response.postalcodes[0].placeName) {
ort.val(response.postalcodes[0].placeName);
}
})
} else {
$('#city').val('');
}
});

Speichert das ganze und leert euren Shopware Cache.
Wenn Ihr nun bei der Registrierung eure Postleitzahl eingibt, wird der Ort automatisch angelegt.

Erklärung

jQuery sucht nach der id #zipcode, um es mit einer Funktion in Verbindung zu bringen, die ausgeführt wird, sobald eine Tasteneingabe (keyup) im input stattfindet oder eine Autovervollständigung über den Browser (change). Dabei wartet es ab, bis mehr als 4 Zeichen eingegeben sind. Ist das der Fall, nimmt es den Wert und schaut bei geonames.org nach dem passenden Ort nach, um ihn dann als Wert dem Element #city zu übergeben. Ansonten (else): Wird die Eingabe der Postleitzahl wieder gelöscht, wird der Wert des Ortes auch wieder zurückgenommen.

Shopware Onlinekurs Jetzt kostenlos anmelden.