Address autocomplete in DanDomain Webshop

DanDomain Webshop lets you add your own JavaScript to the design, so address fields can get autocomplete without a module. Our one-tag script danadresse-auto looks for the address fields itself. The same steps work for the webshops DanDomain runs under other names: SmartWeb, Wannafind, Scannet and Curanet.

1. Create a browser key#

Create a live key under Keys and add the shop's domains under Allowed domains. Open the checkout page and look at the address bar: if checkout runs on a different domain from the rest of the shop, that domain must be on the list too. See Browser keys and allowed domains.

2. Paste the script tag#

In DanDomain Webshop go to Webshop → Design → Ret design on the active design, choose Indsæt Javascript, paste the tag under Sidens indhold (bunden), and click Gem. In DanDomain Webshop Classic, paste it at the bottom of your design template, before </body>.

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

The script recognises the platform's own field names (m-usercreate-address, -zipcode, -city and address, zipcode, city) and, in Classic, the common names Address, ZipCode, City and DeliveryAddress, DeliveryZipCode, DeliveryCity. It also matches Danish labels such as "Adresse", "Postnr." and "By". When the customer picks a suggestion, street and number (with floor and door), postcode and city are filled, and a delivery address is kept apart from the billing address.

We have checked the markup of DanDomain Webshop's account form on a live page. The checkout names follow the same pattern but have not been checked on a live shop, and we have not seen a live Classic shop. Test your own checkout before you rely on it.

3. Test#

Test in a private window with a sloppy entry such as "rodovre parkvej 150". The suggestion should be Rødovre Parkvej with the correct postcode, and postcode and city should be filled. Open the browser console if nothing happens:

• API refused the request (403): … locked to … means the domain is missing from the key's Allowed domains.
• If no field is found, add data-debug to the tag, reload, and read what the console lists.

If the fields are not found#

Find the field's selector: right-click the address field, choose Inspect, and use an id that stays the same after a reload (id="address" → #address) or the name (name="address" → input[name="address"]). Do the same for postcode and city, and give the selectors to the script:

<script src="https://api.danadresse.dk/js/danadresse-auto.min.js"
        data-key="YOUR_BROWSER_KEY"
        data-fields='[{"street":"#your-address-field","zip":"#your-postcode-field","city":"#your-city-field"}]' defer></script>

You can map street, house, floor, door, line2, zip, city and country. If the house number is a separate field in your checkout, map it as house.

Or: your own init code#

If you want full control over what is filled, attach the address widget yourself. Change the three selectors in FIELDS and insert your key:

const API_KEY = "YOUR_BROWSER_KEY";

// Change to your fields (see step 2)
const FIELDS = {
  adresse: "#your-address-field",
  postnr: "#your-postcode-field",
  by: "#your-city-field",
};

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) => {
    DanadresseAutocomplete.attach(input, {
      apiKey: API_KEY,
      onSelect(a) {
        setField(input, streetLine(a), ["change"]);
        setField(document.querySelector(FIELDS.postnr), a.postnr);
        setField(document.querySelector(FIELDS.by), a.postnrnavn);
      },
    });
  });
}

function start() {
  bindAll();
  new MutationObserver(bindAll).observe(document.body, { childList: true, subtree: true });
}

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

Paste it just before </body> in the template the checkout page uses:

<script src="https://danadresse.dk/static/js/danadresse-autocomplete-1.0.0.js"></script>
<script>
  /* paste the init code from above here */
</script>

The payment provider's payment window cannot get the widget. It does not need to, because the address is saved before that. Server-side validation needs access to the order, e.g. through an export or integration. See Address cleansing in checkout.

Next steps#

• The DanDomain page on Integrations
• Browser keys and allowed domains
• Shoporama