Adresse-autocomplete i Squarespace-formularer

Squarespace lader dig indsætte egen kode via Code Injection. Det virker på dine almindelige sider, fx en formular til tilbud eller booking. Squarespace's checkout kører ikke din injicerede kode, så leveringsadressen i en Squarespace Commerce-ordre kan ikke få autocomplete.

Code Injection findes ikke på det billigste abonnement. Tjek dit abonnement, før du går i gang.

1. Opret en browsernøgle#

Opret en live-nøgle under Nøgler og lås den til dit domæne under Tilladte domæner, fx minside.dk og www.minside.dk. Bruger du også den indbyggede squarespace.com-adresse, så skriv den præcist, aldrig som wildcard. Se Browsernøgler og tilladte domæner.

2. Indsæt script-tagget#

Åbn Code Injection (under Indstillinger → Avanceret eller Indstillinger → Udviklerværktøjer, afhængigt af din Squarespace-version), indsæt tagget med din browsernøgle i feltet Footer, og gem:

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

Scriptet er bygget til at finde delfelterne i en formularbloks Address-felt via deres labels og autocomplete-attributter og udfylde vej, postnr. og by. Vi har ikke testet det på et live Squarespace-site, så test en indsendelse, før du stoler på det. Vil du kun have scriptet på én side, kan du i stedet bruge sidens egen Code Injection under sidens indstillinger.

3. Test en indsendelse#

Indsend formularen med en adresse fra et forslag, og se indsendelsen i Squarespace (fx i den mail, formularen sender, eller i det lager, formularen gemmer til). Kontrollér, at postnr. og by er kommet med. API refused the request (403): … locked to … i konsollen betyder, at domænet mangler på nøglen. Tilføj data-debug til tagget for at se i konsollen, hvilke felter scriptet fandt.

Hvis felterne ikke bliver fundet#

Squarespace genererer selv formularfelternes id, og de kan skifte, når du redigerer formularen. Åbn den publicerede side, højreklik på adressefeltet, vælg Inspicér, og find en egenskab, der er stabil: name, autocomplete eller aria-label. Selektoren bliver fx input[name="…"]. Tjek i konsollen, at document.querySelectorAll("…").length giver 1. Gør det samme for postnummer og by, og giv selektorerne til scriptet:

<script src="https://api.danadresse.dk/js/danadresse-auto.min.js"
        data-key="DIN_BROWSER_NØGLE"
        data-fields='[{"street":"input[name=\"dit-adressefelt\"]","zip":"input[name=\"dit-postnummerfelt\"]","city":"input[name=\"dit-byfelt\"]"}]' defer></script>

Ændrer du formularen, kan feltnavnene ændre sig. Tjek selektorerne igen efter hver redigering.

Eller: din egen init-kode#

Vil du have fuld kontrol over, hvad der udfyldes, så kobl adresse-widget'en på selv. Ret de tre selektorer i FIELDS, og indsæt din nøgle:

const API_KEY = "DIN_BROWSER_NØGLE";

// Ret til dine felter (se trin 2)
const FIELDS = {
  adresse: 'input[name="dit-adressefelt"]',
  postnr: 'input[name="dit-postnrfelt"]',
  by: 'input[name="dit-byfelt"]',
};

function setField(el, value, events) {
  if (!el || value == null) return;
  const setter = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(el), "value").set;
  setter.call(el, value);
  for (const type of events || ["input", "change"]) {
    el.dispatchEvent(new Event(type, { bubbles: true }));
  }
}

function streetLine(a) {
  let line = a.vejnavn + " " + a.husnr;
  if (a.etage) line += ", " + a.etage + ".";
  if (a["dør"]) line += " " + a["dør"];
  return line;
}

function bindAll() {
  document.querySelectorAll(FIELDS.adresse).forEach((input) => {
    const form = input.form || document;
    DanadresseAutocomplete.attach(input, {
      apiKey: API_KEY,
      onSelect(a) {
        setField(input, streetLine(a), ["change"]);
        setField(form.querySelector(FIELDS.postnr), a.postnr);
        setField(form.querySelector(FIELDS.by), a.postnrnavn);
      },
    });
  });
}

function start() {
  bindAll();
  // Formularblokke tegnes efter sidens indlæsning
  new MutationObserver(bindAll).observe(document.body, { childList: true, subtree: true });
}

if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", start);
else start();

setField sender input- og change-events, fordi Squarespace's formularer holder værdierne i JavaScript. Uden events kan formularen sende den gamle tekst. Indsæt koden i feltet Footer i stedet for script-tagget fra trin 2:

<script src="https://danadresse.dk/static/js/danadresse-autocomplete-1.0.0.js"></script>
<script>
  /* indsæt init-koden ovenfor her */
</script>

Vil du tjekke adresser på serveren, skal formularens data videre til et system, der kan kalde API'et. Se Datavask i checkout.

Næste skridt#

• Webflow, hvor du selv styrer feltets id
• Widget-indstillinger
• Integrationer