Adresse-autocomplete i WooCommerce

// Er butikken på blok-checkout eller klassisk checkout?
// Blokken efterlader en wrapper med denne klasse; den klassiske gør ikke.
//
// WooCommerce betragter selv klassenavne inde i blokke som private og
// forbeholder sig at ændre dem. Til en engangsafgørelse som denne er det
// i praksis den nemmeste vej — men lad være med at bygge styling oven på
// blokkens interne klasser, og tjek den her linje, hvis feltet en dag
// holder op med at binde efter en WooCommerce-opdatering.
const erBlok = !!document.querySelector('.wp-block-woocommerce-checkout');

<?php
// functions.php (eller et lille must-use plugin).
// Læg nøglen i wp-config.php: define('GRUNDFAST_KEY', 'gf_live_...');

add_action('rest_api_init', function () {
  register_rest_route('grundfast/v1', '/adresse', [
    'methods'             => 'GET',
    'permission_callback' => '__return_true', // offentligt checkout-felt
    'callback'            => function (WP_REST_Request $req) {
      $q = trim((string) $req->get_param('q'));
      if (mb_strlen($q) < 2) {
        return ['results' => []];
      }

      $res = wp_remote_get(
        'https://api.grundfast.dk/v1/adresse/search?per_side=8&q=' . rawurlencode($q),
        [
          'headers' => ['Authorization' => 'Bearer ' . GRUNDFAST_KEY],
          'timeout' => 5,
        ]
      );
      if (is_wp_error($res) || wp_remote_retrieve_response_code($res) !== 200) {
        return ['results' => []]; // fejl må aldrig blokere et checkout
      }

      return json_decode(wp_remote_retrieve_body($res), true);
    },
  ]);
});

// Indlæs feltet kun på checkout-siden.
add_action('wp_enqueue_scripts', function () {
  if (!function_exists('is_checkout') || !is_checkout()) {
    return;
  }
  wp_enqueue_script(
    'grundfast-adresse',
    get_stylesheet_directory_uri() . '/js/grundfast-adresse.js',
    [],
    '1.0.0',
    true
  );
  wp_localize_script('grundfast-adresse', 'GrundfastCfg', [
    'endpoint' => rest_url('grundfast/v1/adresse'),
  ]);
});

// Klassisk checkout: felterne er almindelig HTML, så du kan skrive
// direkte i dem. Feltet du skriver i er #billing_address_1.
const input = document.querySelector('#billing_address_1');
let timer, inflight;

input?.addEventListener('input', () => {
  clearTimeout(timer);
  timer = setTimeout(async () => {
    const q = input.value.trim();
    if (q.length < 2) return;

    inflight?.abort();
    inflight = new AbortController();
    const res = await fetch(
      GrundfastCfg.endpoint + '?q=' + encodeURIComponent(q),
      { signal: inflight.signal }
    );
    const { results } = await res.json();

    // Tegn din egen forslagsliste her; ved valg af 'r':
    const vaelg = (r) => {
      input.value = [r.vejnavn, r.husnr].filter(Boolean).join(' ');
      document.querySelector('#billing_postcode').value = r.postnr ?? '';
      document.querySelector('#billing_city').value = r.postnrnavn ?? '';
      // Lad WooCommerce genberegne fragt for det nye postnummer.
      jQuery(document.body).trigger('update_checkout');
    };
    void vaelg;
  }, 150);
});

// Checkout-blokken: felterne er React-styrede. At sætte .value
// direkte bliver IKKE opfanget — React overskriver det ved næste render,
// og WooCommerce sender stadig den gamle værdi med ordren.
// Skriv i stedet til datalageret, så bliver felterne opdateret for dig.
const { dispatch } = window.wp.data;

function vaelgAdresse(r) {
  const adresse = {
    address_1: [r.vejnavn, r.husnr].filter(Boolean).join(' '),
    postcode: r.postnr ?? '',
    city: r.postnrnavn ?? '',
    country: 'DK',
  };

  // Bemærk: set*Address sætter adressen LOKALT i browserens datalager.
  // Det er det, du vil have her — kunden er i gang med at udfylde, og
  // værdierne følger med, når blokken selv sender kurven af sted.
  // Skal den skrives til serveren med det samme (fx en "gem adresse"-
  // knap uden for checkout), er updateCustomerData den, der gør det.
  dispatch('wc/store/cart').setShippingAddress(adresse);
  // Kun hvis kunden ikke har slået separat faktureringsadresse til:
  dispatch('wc/store/cart').setBillingAddress(adresse);
}