Adresse-autocomplete i Shopware 6

Shopware 6 bruger den samme adresseformular ved registrering, i checkout og under "Mine adresser". Felterne hedder <prefix>[street], <prefix>[zipcode] og <prefix>[city], hvor præfikset fx er billingAddress, shippingAddress eller address. Vores script danadresse-auto med ét tag kender de navne og udfylder postnr. og by med samme præfiks, så leverings- og fakturaadressen ikke blandes sammen.

1. Opret en browsernøgle#

Opret en live-nøgle under Nøgler og lås den til butikkens domæner under Tilladte domæner, også dit staging-domæne. Har du flere saleschannels med hvert sit domæne, skal de alle på listen. Se Browsernøgler og tilladte domæner.

2. Indlæs scriptet i storefront'en#

Udvid base.html.twig i dit theme, fx src/Resources/views/storefront/base.html.twig, og indsæt din browsernøgle:

{% sw_extends '@Storefront/storefront/base.html.twig' %}

{% block base_body_script %}
    {{ parent() }}
    <script src="https://api.danadresse.dk/js/danadresse-auto.min.js"
            data-key="DIN_BROWSER_NØGLE" defer></script>
{% endblock %}

Ryd cachen med bin/console cache:clear. En udvidelse, der tilføjer header- eller footer-scripts, virker også.

Scriptet genkender billingAddress[street], shippingAddress[street] og address[street] med tilhørende [zipcode] og [city]. Navnene er tjekket mod Shopwares egne storefront-skabeloner. Det fanger også formularer, der dukker op senere, fx adresse-editoren, som checkout'en henter ind i et modalvindue. Når kunden vælger et forslag, udfyldes vej og husnr. (med etage og dør), postnr. og by. En indtastet adresse tjekkes, når kunden forlader feltet, med et "Mente du …?"-forslag.

3. Test#

Test tre steder: registrering som ny kunde, adressevalget i checkout'en, og Konto → Adresser. Skriv en adresse, vælg et forslag, og tjek at postnr. og by havner i samme formular. API refused the request (403): … locked to … i konsollen betyder, at domænet mangler på nøglen. Sender din server en Content-Security-Policy-header, skal https://api.danadresse.dk stå i både script-src og connect-src.

Bruger dit theme andre feltnavne, eller har du et checkout-plugin, så tilføj data-debug til tagget, og læs i konsollen, hvilke felter der blev fundet. Peg scriptet på felterne med data-fields, fx data-fields='[{"street":"#min-vej","zip":"#mit-postnr","city":"#min-by"}]'.

Eller: dit eget init-script#

Vil du have fuld kontrol over, hvad der udfyldes, så kobl adresse-widget'en på selv. Læg filen i dit theme- eller plugin-bundle som src/Resources/public/danadresse-init.js:

const API_KEY = "DIN_BROWSER_NØGLE";

function setField(el, value, events) {
  if (!el || value == null) return;
  const setter = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(el), "value").set;
  setter.call(el, value);
  for (const type of events || ["input", "change"]) {
    el.dispatchEvent(new Event(type, { bubbles: true }));
  }
}

function streetLine(a) {
  let line = a.vejnavn + " " + a.husnr;
  if (a.etage) line += ", " + a.etage + ".";
  if (a["dør"]) line += " " + a["dør"];
  return line;
}

// billingAddress[street] → billingAddress[zipcode] / billingAddress[city]
function sibling(input, field) {
  const name = input.name.replace("[street]", "[" + field + "]");
  return (input.form || document).querySelector('[name="' + name + '"]');
}

function bindAll() {
  document.querySelectorAll('input[name$="[street]"]').forEach((input) => {
    DanadresseAutocomplete.attach(input, {
      apiKey: API_KEY,
      onSelect(a) {
        setField(input, streetLine(a), ["change"]);
        setField(sibling(input, "zipcode"), a.postnr);
        setField(sibling(input, "city"), a.postnrnavn);
      },
    });
  });
}

function start() {
  bindAll();
  // Adresse-editoren i checkout'en hentes med AJAX i et modalvindue
  new MutationObserver(bindAll).observe(document.body, { childList: true, subtree: true });
}

if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", start);
else start();

Indlæs den fra base.html.twig i stedet for script-tagget fra trin 2:

{% sw_extends '@Storefront/storefront/base.html.twig' %}

{% block base_body_script %}
    {{ parent() }}
    <script src="https://danadresse.dk/static/js/danadresse-autocomplete-1.0.0.js" defer></script>
    <script src="{{ asset('bundles/danadressetheme/danadresse-init.js') }}" defer></script>
{% endblock %}

bin/console assets:install kopierer src/Resources/public/ til public/bundles/<bundlenavn med små bogstaver>/. Ret stien i asset(), så den passer til dit bundles navn. Ryd derefter cachen. Med denne vej skal https://danadresse.dk også stå i script-src.

Valgfrit: tjek adressen på serveren#

En subscriber på CheckoutOrderPlacedEvent kan sende vej, husnr. og postnr. til /datavask/adgangsadresser?betegnelse=… med en server-nøgle uden domænelås og markere ordren, hvis svaret er kategori C. Se Datavask i checkout for kategorierne.

Næste skridt#

• Magento 2, hvis du sammenligner med en anden PHP-platform
• Browsernøgler og tilladte domæner
• Integrationer