Adresse-autocomplete i DanDomain Webshop

DanDomain Webshop lader dig lægge egen JavaScript i designet, så adressefelterne kan få autocomplete uden et modul. Vores script danadresse-auto med ét tag finder selv adressefelterne. Samme trin virker for de webshops, DanDomain driver under andre navne: SmartWeb, Wannafind, Scannet og Curanet.

1. Opret en browsernøgle#

Opret en live-nøgle under Nøgler, og tilføj butikkens domæner under Tilladte domæner. Åbn checkout-siden, og kig i adresselinjen: kører checkout'en på et andet domæne end resten af butikken, skal det domæne også på listen. Se Browsernøgler og tilladte domæner.

2. Indsæt script-tagget#

I DanDomain Webshop går du til Webshop → Design → Ret design på det aktive design, vælger Indsæt Javascript, indsætter tagget under Sidens indhold (bunden) og klikker Gem. I DanDomain Webshop Classic indsætter du det i bunden af designskabelonen, før </body>.

<script src="https://api.danadresse.dk/js/danadresse-auto.min.js"
        data-key="DIN_BROWSER_NØGLE" defer></script>

Scriptet genkender platformens egne feltnavne (m-usercreate-address, -zipcode, -city og address, zipcode, city) og i Classic de almindelige navne Address, ZipCode, City og DeliveryAddress, DeliveryZipCode, DeliveryCity. Det matcher også danske labels som "Adresse", "Postnr." og "By". Når kunden vælger et forslag, udfyldes vej og husnr. (med etage og dør), postnr. og by, og en leveringsadresse holdes adskilt fra fakturaadressen.

Vi har tjekket opbygningen af DanDomain Webshops kontoformular på en live side. Checkout-navnene følger samme mønster, men er ikke tjekket i en live butik, og vi har ikke set en live Classic-butik. Test din egen checkout, før du stoler på den.

3. Test#

Test i et privat vindue med en skæv indtastning som "rodovre parkvej 150". Forslaget skal være Rødovre Parkvej med det rigtige postnummer, og postnr. og by skal blive udfyldt. Åbn browserens konsol, hvis intet sker:

• API refused the request (403): … locked to … betyder, at domænet mangler under nøglens Tilladte domæner.
• Findes intet felt, så tilføj data-debug til tagget, genindlæs, og læs hvad konsollen viser.

Hvis felterne ikke bliver fundet#

Find feltets selektor: højreklik på adressefeltet, vælg Inspicér, og brug et id, der er det samme efter en genindlæsning (id="address" → #address), eller name (name="address" → input[name="address"]). Gør det samme for postnr. og by, og giv selektorerne til scriptet:

<script src="https://api.danadresse.dk/js/danadresse-auto.min.js"
        data-key="DIN_BROWSER_NØGLE"
        data-fields='[{"street":"#dit-adressefelt","zip":"#dit-postnummerfelt","city":"#dit-byfelt"}]' defer></script>

Du kan mappe street, house, floor, door, line2, zip, city og country. Er husnummeret et separat felt i din checkout, så map det som house.

Eller: din egen init-kode#

Vil du have fuld kontrol over, hvad der udfyldes, så kobl adresse-widget'en på selv. Ret de tre selektorer i FIELDS, og indsæt din nøgle:

const API_KEY = "DIN_BROWSER_NØGLE";

// Ret til dine felter (se trin 2)
const FIELDS = {
  adresse: "#dit-adressefelt",
  postnr: "#dit-postnrfelt",
  by: "#dit-byfelt",
};

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;
}

function bindAll() {
  document.querySelectorAll(FIELDS.adresse).forEach((input) => {
    DanadresseAutocomplete.attach(input, {
      apiKey: API_KEY,
      onSelect(a) {
        setField(input, streetLine(a), ["change"]);
        setField(document.querySelector(FIELDS.postnr), a.postnr);
        setField(document.querySelector(FIELDS.by), a.postnrnavn);
      },
    });
  });
}

function start() {
  bindAll();
  new MutationObserver(bindAll).observe(document.body, { childList: true, subtree: true });
}

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

Indsæt den lige før </body> i den skabelon, checkout-siden bruger:

<script src="https://danadresse.dk/static/js/danadresse-autocomplete-1.0.0.js"></script>
<script>
  /* indsæt init-koden ovenfor her */
</script>

Betalingsudbyderens betalingsvindue kan ikke få widget'en. Det behøver det heller ikke, for adressen er gemt inden da. Server-side validering kræver adgang til ordren, fx via en eksport eller integration. Se Datavask i checkout.

Næste skridt#

• DanDomain-siden under Integrationer
• Browsernøgler og tilladte domæner
• Shoporama