Adresseforslag i Magento-checkout

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. Har butikken flere store views på hvert sit domæne, så skriv dem alle.

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.

Felterne i checkouten

Leveringsadressen står i formularen #co-shipping-form. Felterne har ikke faste id’er (Magento nummererer dem ved hver indlæsning), men deres name ligger fast:

Faktureringsadressen på betalingstrinnet bruger de samme navne i sin egen formular. Feltet slår postnummer og by op i den formular, kunden skriver i, så én selektor dækker begge adresser.

Indsæt scriptet i HTML Head

1. 1

   Åbn designkonfigurationen

   I admin: Content → Design → Configuration. Vælg dit store view og klik Edit.

2. 2

   Find HTML Head

   Under Other Settings folder du HTML Head ud og indsætter tagget nederst i Scripts and Style Sheets. Gem.

   htmlKopiér

   <script
     src="https://grundfast.dk/widget/v1/grundfast-adresse.js"
     defer
     data-key="gf_pub_live_..."
     data-felt='input[name="street[0]"]'
     data-postnr='input[name="postcode"]'
     data-by='input[name="city"]'
   ></script>

3. 3

   Tøm cachen

   Under System → Cache Management tømmer du sidecachen, så ændringen kommer ud på butikken.

Checkoutens felter findes ikke, når siden er indlæst — Knockout tegner dem bagefter. Feltet holder øje med siden og hægter sig på, så snart adressefeltet dukker op, også når kunden skifter fra levering til betaling. Magento læser felternes værdi, når de skifter (change), og det er præcis den hændelse, feltet sender, når det udfylder postnummer og by. Fragtberegningen følger derfor med.

Tillad scriptet i Content Security Policy

Fra Magento 2.4.7 kører betalingssiderne — også checkouten — med CSP i restrict mode. Uden en undtagelse bliver scriptet blokeret netop dér, mens det virker på resten af butikken. Læg en csp_whitelist.xml i etc/ i et af dine egne moduler (eller temaets modul) med de to værter:

<?xml version="1.0"?>
<csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp:etc/csp_whitelist.xsd">
    <policies>
        <policy id="script-src">
            <values>
                <value id="grundfast-widget" type="host">https://grundfast.dk</value>
            </values>
        </policy>
        <policy id="connect-src">
            <values>
                <value id="grundfast-api" type="host">https://api.grundfast.dk</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

Kør bin/magento cache:flush bagefter. script-src tillader filen; connect-src tillader opslagene. Feltet lægger også et lille <style>-element i siden. Blokerer din politik inline-styles, så sæt data-css="false" på tagget og style .gf-adr-liste og .gf-adr-valg i temaets egen CSS.

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 — en CSP-blokering står der også). 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.