Adresse-autocomplete på Wix med Velo og et custom element

Wix' butiks-checkout er lukket for egen kode. Til Wix Forms kan du først prøve vores script med ét tag: det er bygget til at finde adressefelter via deres labels, men det er ikke testet på et live Wix-site. Den vej, der virker pr. konstruktion, er et custom element: et lille stykke HTML med dit eget input, som widget'en kobles på. Elementet sender den valgte adresse videre til din Velo-sidekode, som kan sætte værdien i Wix-input-elementer.

Hvad kan lade sig gøre#

Custom elements og Velo kræver, at du slår Dev Mode til, og Wix stiller krav til abonnementet. Tjek dem i din Wix-konto, før du går i gang.

1. Opret en browsernøgle#

Custom elementet kører på dit sites domæne. Opret en live-nøgle under Nøgler og lås den til fx minside.dk og www.minside.dk under Tilladte domæner. Får du 403 origin_not_allowed i forhåndsvisningen, står det afviste domæne i fejlbeskeden. Tilføj det kun, hvis det er dit eget, og aldrig som wildcard på et fælles Wix-domæne. Se Browsernøgler og tilladte domæner.

2. Prøv først: ét script-tag#

I Wix-dashboardet går du til Indstillinger → Brugerdefineret kode (Avanceret) → + Tilføj brugerdefineret kode, indsætter tagget med din browsernøgle, vælger Alle sider, placerer det i Body – slut og klikker Anvend. Brugerdefineret kode kræver et premium-abonnement med tilknyttet domæne.

<script src="https://api.danadresse.dk/js/danadresse-auto.min.js"
        data-key="DIN_BROWSER_NØGLE" data-debug defer></script>

data-debug får scriptet til at vise i browserens konsol, hvilke felter det fandt. Åbn den publicerede side med en Wix-formular, hvor felterne fx hedder "Adresse", "Postnr." og "By", skriv en adresse, og vælg et forslag. Bliver postnr. og by udfyldt, og står de i indsendelsen, er du færdig: fjern data-debug. Finder konsollen ingen felter, så brug custom elementet nedenfor.

3. Custom elementet#

Opret filen public/custom-elements/danadresse-felt.js i Velo og indsæt din nøgle:

const API_KEY = "DIN_BROWSER_NØGLE";
const WIDGET = "https://danadresse.dk/static/js/danadresse-autocomplete-1.0.0.js";

function loadWidget() {
  if (window.DanadresseAutocomplete) return Promise.resolve();
  return new Promise((resolve, reject) => {
    const s = document.createElement("script");
    s.src = WIDGET;
    s.onload = resolve;
    s.onerror = reject;
    document.head.appendChild(s);
  });
}

class DanadresseFelt extends HTMLElement {
  connectedCallback() {
    if (this.querySelector("input")) return;
    const input = document.createElement("input");
    input.type = "text";
    input.style.cssText = "width:100%;box-sizing:border-box;padding:10px;font:inherit";
    this.appendChild(input);

    loadWidget().then(() => {
      DanadresseAutocomplete.attach(input, {
        apiKey: API_KEY,
        onSelect: (a) => {
          // Kun simple værdier kan sendes videre til Velo
          this.dispatchEvent(new CustomEvent("adresse-valgt", {
            detail: {
              tekst: a.tekst, id: a.id, vejnavn: a.vejnavn, husnr: a.husnr,
              etage: a.etage, doer: a["dør"], postnr: a.postnr, by: a.postnrnavn,
            },
          }));
        },
      });
    });
  }
}

customElements.define("danadresse-felt", DanadresseFelt);

Elementet bruger ikke shadow DOM, fordi widget'en lægger sit stylesheet i sidens <head>.

4. Sæt elementet på siden#

I editoren: Tilføj → Indlejr kode → Custom element. Vælg Velo-fil, peg på danadresse-felt.js, og skriv tagnavnet danadresse-felt. Giv elementet id'et adresseFelt. Gør det højt nok til forslagslisten, ellers kan Wix skjule den del, der stikker ud under elementet.

5. Modtag adressen i sidekoden#

Læg input-elementer til postnr. og by på siden med id'erne postnr og by, og tilføj i sidens Velo-kode:

$w.onReady(function () {
  $w("#adresseFelt").on("adresse-valgt", (event) => {
    const a = event.detail;
    $w("#postnr").value = a.postnr;
    $w("#by").value = a.by;
  });
});

Gem selve adressen og a.id sammen med resten af formularen i din egen Velo-kode, fx med wix-data. Feltet i custom elementet er ikke en del af en Wix-formular.

Næste skridt#

• Widget-indstillinger
• Squarespace, hvis du sammenligner platforme
• Integrationer