Adresseforslag i kassen: kunden vælger adressen, og postnummer og by udfylder sig selv

En stavefejl i vejnavnet, to tal byttet om i postnummeret, en glemt etage. Små fejl i adressen ender som pakker, der kommer retur, fragt der skal betales to gange, og kunder der venter. Nu kan kassen hjælpe kunden med at skrive adressen rigtigt første gang: kunden skriver de første bogstaver, vælger sin adresse på listen, og adresse, postnummer, og by er udfyldt.

Sådan virker det for kunden

Forslagene følger adressen trin for trin. Skriver kunden "Rådhuspladsen 1", vises Rådhuspladsen 1 i alle de byer, der har en. Vælger kunden "Rådhuspladsen 1, 1550 København V", udfyldes postnummer og by med det samme. Har huset flere etager eller lejligheder, vises de bagefter, så kunden kan vælge sin. Har kunden allerede skrevet etage og dør, fx "4 tv", vælges lejligheden direkte, når kunden vælger huset, hvis den findes.

• Forslagene kommer fra Danmarks Adresseregister, den officielle liste over alle danske adresser, via Klimadatastyrelsens adresseservice.
• Adressen skrives, som den står i registret, med etage og dør som fx "st. tv" eller "1. 101".
• Kunden kan stadig skrive adressen selv, fx med c/o eller et firmanavn. Forslagene er en hjælp, ikke et krav.
• Det virker med tastaturet (piletaster og Enter), med musen, og på mobilen.
• Forslagene kommer kun, når landet er Danmark. For andre lande er adressefeltet helt som før.
• Browserens egen autofyld virker som før.
• Er adresseservicen nede, skriver kunden bare adressen som normalt.

Hvorfor det er værd at slå til

Hver forkert adresse koster noget, enten som en pakke der kommer retur, eller som tid du bruger på at rette ordren, før den sendes. Adresseforslag forebygger de mest almindelige fejl: stavefejl i vejnavnet, et forkert postnummer, og en glemt etage. På mobilen sparer kunden samtidig tastetryk, fordi tre felter udfyldes på én gang.

Sådan slår du det til

1. Gå til Design → Temaindstillinger.
2. Find gruppen Checkout: Adresse (i det engelske Delaware: Checkout: Address). I Montana og MontanaB2B klikker du på gruppen for at folde den ud.
3. Sæt flueben i Aktivér adresseforslag (Danmark), og klik på Gem.

Det virker i de indbyggede temaer Montana, MontanaB2B, Delaware, DelawareDK, California, og Alaska2. I DelawareDK hedder feltet Aktiver adresseforslag (Danmark), og i det engelske Delaware hedder det Enable Address Suggestions (Denmark). Indstillingen er slået fra, til du selv slår den til.

Kan du ikke finde feltet, kører butikken et tema uden adresseforslag: et af de ældre temaer, sit eget tema, eller en kopi af et af temaerne. En kopi får ikke nye funktioner af sig selv, så adresseforslagene skal bygges ind i temaet. Afsnittet til udviklere nedenfor viser hvordan, og er du i tvivl, så skriv til support@shoporama.dk.

Afløseren for DAWA

Indtil 1. oktober 2026 slog mange webshops adresser og postnumre op i DAWA, Danmarks Adressers Web API. DAWA er lukket, og Klimadatastyrelsen har lavet Adressevælger som afløser. Adresseforslagene i kassen bygger på Adressevælger. Samtidig har vi rettet de steder i temaerne, hvor byen blev udfyldt ud fra postnummeret med DAWA. De slår nu op i en liste hos Shoporama og virker igen.

Til udviklere: tilføj adresseforslag i dit eget tema

Dette afsnit er til dig, der bygger eller vedligeholder et tema. Kører butikken et af de seks temaer ovenfor og ikke en kopi af det, skal du ikke gøre noget af det her.

De indbyggede temaer bruger en fælles komponent, som Shoporama lægger på alle butikkers domæner: /javascript/dk-address.js. Den viser listen, slår op i Adressevælger, og udfylder felterne. Du kan bruge den i dit eget tema på tre trin.

1. Tilføj indstillingen i theme_settings.json

Læg feltet i gruppen checkout_address, så det hedder det samme som i de indbyggede temaer. Uden default er det slået fra, til butiksejeren slår det til. Har dit tema allerede gruppen checkout_address, fx fordi det er en kopi af Montana eller Delaware, så tilføj kun feltet under fields.

{
    "path": "checkout_address",
    "name": "Checkout: Adresse",
    "description": "Adresseformularen i checkout.",
    "fields": [
        {
            "path": "enable_address_autocomplete",
            "name": "Aktivér adresseforslag (Danmark)",
            "description": "Foreslår adresser fra Danmarks Adresseregister, mens kunden skriver sin adresse.",
            "type": "bool"
        }
    ]
}

2. Giv landefelterne en landekode

Forslagene vises kun, når landet er Danmark. Komponenten læser landet fra data-countrycode på den valgte option i landefeltet, så tilføj det til både faktura- og leveringslandets options i address.html:

<{* Fakturaland (order_country_id) *}>
...

<{* Leveringsland (del_country_id) *}>
...

Behold dine egne betingelser for selected. Det er kun attributten, der er ny.

3. Indlæs komponenten i address.html

Læg blokken nederst i address.html. Løkken finder butikkens standardland, som bruges, når der ikke er noget landefelt, typisk i en butik med ét land.

<{if $settings.checkout_address.enable_address_autocomplete}>
    <{assign var="default_country_code" value=""}>
    <{section name="i" loop=$countries}>
        <{if !$default_country_code || $countries[i]->getIsDefault()}>
            <{assign var="default_country_code" value=$countries[i]->getCode()}>
        <{/if}>
    <{/section}>
    
    
<{/if}>

attachCheckout() finder selv felterne order_address, order_zipcode, order_city, og order_country_id og de tilsvarende felter med del_ til leveringsadressen. Den finder dem på id eller name, så de samme navne, som Shoporama modtager i formularen, er nok. Leveringsadressen bruger fakturalandet, når der ikke er valgt et leveringsland.

Andre feltnavne

Har dine felter andre navne, eller vil du bruge forslagene et andet sted, så kald attach() for hvert adressefelt:

ShoporamaDkAddress.attach({
    input: 'billing_street',          // id eller element: adressefeltet
    zip: 'billing_zip',               // postnummerfeltet
    city: 'billing_city',             // byfeltet
    countries: ['billing_country'],   // landefelter (select) i prioriteret rækkefølge
    countryCode: 'DK',                // landet, når intet landefelt har en værdi
    label: 'Adresseforslag'           // læses op af skærmlæsere
});

Tilpas udseendet

Listen har sin egen enkle stil, så den ser pæn ud uden ekstra CSS. Vil du have den til at ligne resten af dit tema, så sæt CSS-variablerne, fx i dit stylesheet:

.dk-address-list {
    --dk-address-bg: #ffffff;          /* baggrund */
    --dk-address-text: #1f2937;        /* tekst */
    --dk-address-border: #e5e7eb;      /* kant */
    --dk-address-active-bg: #eff6ff;   /* markeret forslag */
    --dk-address-radius: 0;            /* hjørner */
}

Godt at vide

• Når komponenten udfylder felterne, sender den events af typen input og change. Alpine.js (x-model) og dine egne scripts bliver derfor opdateret, som hvis kunden selv havde skrevet.
• Adressefeltet får role="combobox" og listen role="listbox", så forslagene også virker med skærmlæsere.
• Kald ikke Adressevælger direkte fra dit tema. Klimadatastyrelsen indfører en adgangsnøgle omkring årsskiftet, og så skifter Shoporama nøglen i komponenten. Brug adressen med ?v=4 som i eksemplet. Browseren gemmer filen længe, så skriver dokumentationen til temaudviklere et nyt versionsnummer, skal du også skifte det i dit tema.
• Du finder også eksemplet i dokumentationen til temaudviklere.

Kom i gang

Slå Aktivér adresseforslag (Danmark) til under Design → Temaindstillinger, og prøv det selv i din egen kasse med din egen adresse. Du kan læse mere i supportartiklen Adresseforslag i kassen. Har du spørgsmål, så skriv til support@shoporama.dk.