# Adresse-autocomplete i Shoporama

> Indsæt ét script-tag i Shoporamas kode i body, så checkout'en får adresse-autocomplete med postnr. og by, eller kobl widget'en på dine egne selektorer.
>
> https://danadresse.dk/guides/shoporama · verified 2026-11-02
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](/dashboard/keys), 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](/guides/browser-noegler-domaener).

## 2. Indsæt script-tagget

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

```html id=auto-tag run=no
<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`:

```html id=auto-fields run=no
<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:

```js id=init-js run=syntax
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**:

```html id=template-html run=no
<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](/guides/datavask-i-checkout).

## Næste skridt

- [Shoporama-siden](/integrationer/shoporama) under Integrationer
- [Browsernøgler og tilladte domæner](/guides/browser-noegler-domaener)
- [DanDomain](/guides/dandomain)