Adresse-autocomplete i Shopify — hvor det virker, og hvor det ikke gør

Shopify lader dig køre egen JavaScript i dit theme, men ikke i selve checkout'en. Denne guide viser, hvor adresse-widget'en kan køre i dag, hvordan du kobler den på adressefelterne, og hvad du ikke kan nå uden Shopify Plus.

Hvor widget'en kan køre#

Til checkout har Shopify extension targets til adresse-autocomplete (purchase.address-autocomplete.suggest). De kræver en app med adgang til beskyttede kundedata, og checkout UI extensions er kun for Shopify Plus. Vores Shopify-app (autocomplete i checkout på Plus og et adressetjek af hver ny ordre, der tagger ordren og foreslår en rettelse) er bygget, men kan ikke installeres endnu. Indtil den står under Integrationer, bruger du theme-vejen nedenfor. Checkout'en har desuden Shopifys egen adresse-autocomplete for en række lande.

Bygger du headless med Hydrogen, styrer du selv formularen. Se Shopify-siden og React-guiden.

1. Opret en browsernøgle#

Nøglen står i sidens kildekode, så alle kan læse den. Lås den til dine domæner: opret en live-nøgle under Nøgler og skriv domænerne under Tilladte domæner, fx minbutik.dk, www.minbutik.dk og minbutik.myshopify.com.

Skriv myshopify.com-domænet præcist. Et wildcard som *.myshopify.com dækker alle Shopify-butikker. Læs mere i Browsernøgler og tilladte domæner.

Den hurtigste vej: ét script-tag#

Åbn layout/theme.liquid under Netbutik → Temaer → … → Rediger kode, og indsæt dette lige før </body>:

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

Scriptet finder selv adresseformularerne i de klassiske kundekonti (address[address1], address[zip], address[city]) og udfylder vej, postnr. og by. Til felter med andre navne, fx en kontaktformular, tilføjer du data-fields, fx data-fields='[{"street":"#ContactForm-address","zip":"#ContactForm-zip","city":"#ContactForm-city"}]'. Tilføj data-debug for at se i browserens konsol, hvad det fandt. Vil du hellere styre koden selv, så brug trin 2 og 3 i stedet.

2. Eller: læg din egen init-fil i theme'et#

Gå til Netbutik → Temaer → … → Rediger kode. Opret filen assets/danadresse-init.js med koden nedenfor og indsæt din nøgle.

// assets/danadresse-init.js
const API_KEY = "DIN_BROWSER_NØGLE"; // låst til dine domæner

// Sætter værdien, så også theme-scripts og frameworks opdager ændringen.
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 }));
  }
}

// "Rådhuspladsen 1, st. th" — vej, husnr., etage og dør på én linje.
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 bind(input) {
  const form = input.form || document;
  DanadresseAutocomplete.attach(input, {
    apiKey: API_KEY,
    onSelect(a) {
      setField(input, streetLine(a), ["change"]);
      setField(form.querySelector('[name="address[zip]"]'), a.postnr);
      setField(form.querySelector('[name="address[city]"]'), a.postnrnavn);
    },
  });
}

document.querySelectorAll('input[name="address[address1]"]').forEach(bind);

Adressebogen har én formular til en ny adresse og én pr. eksisterende adresse. Derfor kobler koden på alle felter med navnet address[address1] og udfylder postnr. og by i den samme formular.

3. Indlæs scripts i theme.liquid#

Åbn layout/theme.liquid og indsæt de to linjer lige før </body>. Begge har defer, så de kører i rækkefølge, når siden er indlæst.

<script src="https://danadresse.dk/static/js/danadresse-autocomplete-1.0.0.js" defer></script>
<script src="{{ 'danadresse-init.js' | asset_url }}" defer></script>

Brug ikke script_tag-filteret her. Det skriver et script uden defer, som så kører før widget'en er indlæst.

4. Andre felter og test#

Navnene ovenfor er dem, Shopifys customer_address-formular bruger i standard-themes. Dit theme kan afvige: højreklik på feltet, vælg Inspicér, og læs name eller id. Til en kontaktformular hedder felterne contact[…], fx contact[Adresse].

Test i et privat vindue: skriv "rådhuspladsen 1 slagelse", vælg et forslag, og se at postnr. og by bliver udfyldt. Får du 403 origin_not_allowed i konsollen, mangler domænet på nøglen.

Shopify sender ikke ordrer gennem dit theme, så server-side validering skal ske i en app eller et workflow, der læser ordren. Se Datavask i checkout.

Næste skridt#

• Browsernøgler og tilladte domæner
• Alle widget-indstillinger
• Integrationer