Automatische Länderauswahl

VonThomas Paul

Wenn du einfach anhand der Postleitzahl Eingabe die Landesauswahl vorgeben möchtest, reicht eine einfache JavaScript-Funktion um dies zu erledigen.

In folgender Datei hab ich eine einfache Funktion hinzugefügt.

{% sw_extends '@Storefront/storefront/page/checkout/address/index.html.twig' %}

Anbei auch noch die JavaScript-Funktion

<script>
        document.addEventListener('DOMContentLoaded', () => {
            const postalCodeInput = document.querySelector('#billingAddressAddressZipcode'); // Postleitzahl-Feld
            const countrySelect = document.querySelector('#billingAddressAddressCountry'); // Länder-Dropdown

            if (postalCodeInput && countrySelect) {
                postalCodeInput.addEventListener('blur', () => {
                    const postalCode = postalCodeInput.value.trim();

                    if (/^\d{4}$/.test(postalCode)) {
                        // Österreich (4-stellige Postleitzahlen)
                        setCountry(countrySelect, '018e6598a9f0720ca0bc0994b78a2103'); // Value für Österreich
                    } else if (/^\d{5}$/.test(postalCode)) {
                        // Deutschland (5-stellige Postleitzahlen)
                        setCountry(countrySelect, '018e6598a45073938bca677753c3f8f8'); // Value für Deutschland
                    }
                });
            }

            function setCountry(selectElement, countryValue) {
                const options = Array.from(selectElement.options);
                const countryOption = options.find(option => option.value === countryValue);

                if (countryOption) {
                    selectElement.value = countryOption.value; // Setzt den Wert des Dropdowns
                    selectElement.dispatchEvent(new Event('change')); // Löst ein 'change'-Event aus
                }
            }
        });
    </script>

Je nachdem, in welchem Block es erweitert wird, darf natürlich die Vererbung nicht fehlen.

{{ parent() }}

Gesamt könnte das wie folgt aussehen:

{% sw_extends '@Storefront/storefront/page/checkout/address/index.html.twig' %}

{% block page_checkout_main_content %}

    {{ parent() }}

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const postalCodeInput = document.querySelector('#billingAddressAddressZipcode'); // Postleitzahl-Feld
            const countrySelect = document.querySelector('#billingAddressAddressCountry'); // Länder-Dropdown

            if (postalCodeInput && countrySelect) {
                postalCodeInput.addEventListener('blur', () => {
                    const postalCode = postalCodeInput.value.trim();

                    if (/^\d{4}$/.test(postalCode)) {
                        // Österreich (4-stellige Postleitzahlen)
                        setCountry(countrySelect, '018e6598a9f0720ca0bc0994b78a2103'); // Value für Österreich
                    } else if (/^\d{5}$/.test(postalCode)) {
                        // Deutschland (5-stellige Postleitzahlen)
                        setCountry(countrySelect, '018e6598a45073938bca677753c3f8f8'); // Value für Deutschland
                    }
                });
            }

            function setCountry(selectElement, countryValue) {
                const options = Array.from(selectElement.options);
                const countryOption = options.find(option => option.value === countryValue);

                if (countryOption) {
                    selectElement.value = countryOption.value; // Setzt den Wert des Dropdowns
                    selectElement.dispatchEvent(new Event('change')); // Löst ein 'change'-Event aus
                }
            }
        });
    </script>

{% endblock %}

Ähnliche Beiträge