Adresse-autocomplete i WooCommerce

1. Opret en offentlig nøgle

Under Nøgler i dashboardet vælger du Offentlig og skriver butikkens domæner, fx butik.dk og www.butik.dk. Nøglen begynder med gf_pub_live_ og må gerne stå i sidens kode: den virker kun fra de domæner, kun til adresseopslag, og med en grænse pr. besøgende. Byg og test med en gf_pub_test_-nøgle, som aldrig faktureres. Reglerne for domæner står i dokumentationen for adressefeltet.

2a. Uden kode: pluginnetanbefalet

1. Hent grundfast-adresse-wordpress.zip.
2. I WordPress: Plugins → Tilføj nyt → Upload plugin, vælg filen og aktivér.
3. Under Indstillinger → Grundfast adressefelt indsætter du den offentlige nøgle og gemmer.

Pluginnet indlæser feltet på checkout-siden og sætter det på både fakturerings- og leveringsadressen, i den klassiske checkout og i checkout-blokken.

2b. Med kode: ét script i functions.php

Har du et child-tema eller et plugin til kodestumper, er det de linjer, pluginnet ellers gør for dig. Scriptet indlæses kun på checkout-siden og hægter sig på de felter, der findes — også når checkout-blokken tegner dem, efter siden er indlæst.

<?php
// functions.php i dit child-tema (eller et plugin til kodestumper).
add_action('wp_enqueue_scripts', function () {
    if (!function_exists('is_checkout') || !is_checkout()) {
        return;
    }
    wp_enqueue_script(
        'grundfast-adresse',
        'https://grundfast.dk/widget/v1/grundfast-adresse.js',
        [],
        null, // ingen ?ver= — versionen står i URL'en
        ['in_footer' => true]
    );
    wp_add_inline_script('grundfast-adresse', <<<'JS'
(function () {
  var KEY = 'gf_pub_live_...';
  // Klassisk checkout bruger understregning, checkout-blokken bindestreg.
  var FELTER = [
    ['billing_address_1', 'billing_postcode', 'billing_city'],
    ['shipping_address_1', 'shipping_postcode', 'shipping_city'],
    ['billing-address_1', 'billing-postcode', 'billing-city'],
    ['shipping-address_1', 'shipping-postcode', 'shipping-city'],
  ];
  function bind() {
    FELTER.forEach(function (f) {
      var input = document.getElementById(f[0]);
      // attach gør ingenting, hvis feltet allerede har forslag.
      if (input) GrundfastAdresse.attach(input, { key: KEY, postnr: '#' + f[1], by: '#' + f[2] });
    });
  }
  bind();
  // Checkout-blokken tegner felterne efter siden er indlæst, og igen
  // når kunden fx vælger en anden faktureringsadresse.
  new MutationObserver(bind).observe(document.body, { childList: true, subtree: true });

  // Klassisk checkout: genberegn fragt for det nye postnummer.
  document.addEventListener('grundfast:adresse', function () {
    if (window.jQuery) jQuery(document.body).trigger('update_checkout');
  });
})();
JS, 'after');
});

De to checkouts navngiver felterne forskelligt, så koden kigger efter begge:

Checkout-blokken.value er ikke nok

Blokkens felter er React-styrede. Sætter et script input.value direkte, ser du teksten et øjeblik, men React overskriver den ved næste render — og WooCommerce sender den gamle værdi med ordren. Adressefeltet skriver derfor værdierne, som om kunden havde tastet dem, og blokken opdaterer kurven og fragten selv. Læg alligevel en testordre igennem til ende på din egen WooCommerce-version, og kontrollér at adressen på den færdige ordre er den, du valgte.

Hvis der ikke kommer forslag

Åbn browserens konsol (F12). Feltet skriver én linje, der begynder med [grundfast-adresse], med årsagen. Den mest almindelige er, at domænet ikke står på nøglen. Du kan prøve nøglen og domænet fra en terminal med det samme kald, feltet laver:

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

Fejler et kald, lukker listen, og kunden skriver adressen i hånden som før — feltet blokerer aldrig checkouten. Flere fejlbeskeder står under fejlfinding.