Adresse-autocomplete i Shoporama

Shoporama lader dig lægge egen kode på alle sider, så checkout'en kan få adresse-autocomplete uden en app. Vores script danadresse-auto med ét tag kender Shoporamas checkout-felter, så du behøver ikke finde selektorer.

1. Opret en browsernøgle#

Opret en live-nøgle under Nøgler, og tilføj butikkens domæner under Tilladte domæner, fx minbutik.dk og www.minbutik.dk. Tester du på butikkens midlertidige Shoporama-adresse, så tilføj også den, skrevet præcist. En domænelåst nøgle virker kun på de domæner, så den kan trygt stå i sidens kildekode. Se Browsernøgler og tilladte domæner.

2. Indsæt script-tagget#

Gå til Indstillinger (tandhjulet) → Kode i body, indsæt tagget med din browsernøgle, og klik Gem:

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

Scriptet genkender Shoporamas felter order_address, order_zipcode og order_city og den alternative leveringsadresse del_address, del_zipcode og del_city. De to adresser holdes adskilt. Når kunden vælger et forslag, udfyldes vej og husnr. (med etage og dør), postnr. og by. Skriver kunden adressen i hånden, tjekkes den, når kunden forlader feltet, med et "Mente du …?"-forslag. Checkout'en blokeres aldrig, og kun danske adresser røres.

3. Test#

Læg en vare i kurven, gå til checkout, skriv en adresse med en stavefejl, og vælg et forslag. Tjek, at postnr. og by bliver udfyldt, også i leveringsadressen. Å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 dit design bruger andre feltnavne#

Et tilpasset design kan kalde felterne noget andet. Fortæl scriptet, hvor de er, med data-fields:

<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. Har din checkout separate felter til vej og husnummer, så map både street og house.

Eller: din egen init-kode#

Vil du have fuld kontrol over, hvad der udfyldes, så kobl adresse-widget'en på selv. Find felterne med Inspicér (et id bruges som #id, et navn som input[name="…"]), ret de tre selektorer, 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, eller under Kode i body:

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

Vil du tjekke adressen på serveren, efter ordren er afgivet, kræver det en integration, der læser ordrerne. Se Datavask i checkout.

Næste skridt#

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