Adresseforslag i en Shoporama-shop

Opret en offentlig nøgle

Feltet kalder Grundfast direkte fra kundens browser, så det bruger en offentlig nøgle (gf_pub_live_). Den må gerne stå i sidens kildekode, fordi den kun virker fra de domæner, du skriver på den, og kun til adresseopslag. Opret den under Nøgler i dashboardet: vælg Offentlig og skriv dine domæner, fx butik.dk og www.butik.dk.

Byg og test med en offentlig testnøgle (gf_pub_test_), som aldrig faktureres, og skift til live-nøglen, når feltet virker. Reglerne for domæner — www, underdomæner med *. og porte — står i dokumentationen for adressefeltet.

Find felterne på adressesiden

Adressesiden i checkouten er en del af dit tema, og temaet bestemmer felternes id og navn. Læs dem af din egen shop:

1. 1

   Gå til adressesiden

   Læg en vare i kurven og gå videre til siden, hvor kunden skriver sin adresse.

2. 2

   Undersøg felterne

   Højreklik i adressefeltet og vælg Undersøg. Notér id (eller name). Gør det samme for postnummer og by.

3. 3

   Skriv dem som selektorer

   Et id skrives med # foran (#zipcode), et navn som input[name="zipcode"]. Har temaet både en betalings- og en leveringsadresse, kan du skrive begge adressefelter i data-felt, adskilt med komma.

Retter du selv i temaet, kan du i stedet sætte data-grundfast-adresse direkte på adressefeltet i skabelonen og pege på postnummer og by med data-gf-postnr og data-gf-by. Så skal script-tagget ikke kende selektorerne.

Opret HTML-feltet

1. 1

   Åbn HTML-felter

   Gå til Webshop → HTML-felter og klik Tilføj nyt HTML-felt. Giv det et navn uden mellemrum, fx grundfast_adresse.

2. 2

   Indsæt koden

   Indsæt tagget med dine egne selektorer:

   htmlKopiér

   <script
     src="https://grundfast.dk/widget/v1/grundfast-adresse.js"
     defer
     data-key="gf_pub_live_..."
     data-felt="#ADRESSEFELTETS-ID"
     data-postnr="#POSTNUMMERFELTETS-ID"
     data-by="#BYFELTETS-ID"
   ></script>

3. 3

   Vælg placering og gem

   Vælg Indsæt sidst i <body> — scriptet skal ikke bremse sidens første visning — og klik Gem.

Feltet indsættes nu på alle sider. På sider uden adressefelt gør scriptet ingenting; det er cirka 4 KB og hentes én gang.

Tjek en ordre til ende

Læg en testordre igennem, og se adressen på den færdige ordre i administrationen — ikke kun i feltet. Feltet skriver værdierne, som om kunden havde tastet dem, så temaets egen validering og fragtvalg reagerer som normalt; men en ordre, der er gået hele vejen, er det eneste sikre bevis.

Tjek nøglen fra en terminal

Før du leder i platformens indstillinger, kan du se, om nøglen og domænet passer sammen. Kaldet nedenfor er det samme, feltet laver. Origin er dit domæne, præcis som browseren skriver det:

curl -G "https://api.grundfast.dk/v1/adresse/search" \
  --data-urlencode "q=Vestergade 10" \
  --data-urlencode "token=$GRUNDFAST_PUBLIC_KEY" \
  -H "Origin: https://www.butik.dk"

Svarer det med adresser, er nøglen i orden. Et 403 med origin … is not allowed betyder, at domænet ikke står på nøglen — ret listen i dashboardet; det slår igennem inden for et halvt minut.

Hvis der ikke kommer forslag

• Åbn browserens konsol (F12, fanen Console). Feltet skriver én linje, der begynder med [grundfast-adresse], med årsagen fra API’et.
• no public key — scriptet blev indlæst uden data-key.
• Ingen linje og ingen liste — feltet blev ikke fundet. Tjek at selektoren i data-felt rammer feltet: skriv document.querySelectorAll('…') med den samme selektor i konsollen.
• Listen vises, men felterne udfyldes ikke — selektorerne i data-postnr og data-by rammer ikke noget. De slås op i samme formular som adressefeltet først, derefter på hele siden.

Feltet stopper aldrig formularen: fejler et kald, lukker listen, og kunden kan skrive adressen i hånden som før.