Address autocomplete in Shoporama

Shoporama lets you add your own code to every page, so the checkout can get address autocomplete without an app. Our one-tag script danadresse-auto knows Shoporama's checkout fields, so you do not need to find any selectors.

1. Create a browser key#

Create a live key under Keys and add the shop's domains under Allowed domains, e.g. myshop.dk and www.myshop.dk. If you test on the shop's temporary Shoporama address, add that address too, written exactly. A domain-locked key only works on those domains, so it is safe in the page source. See Browser keys and allowed domains.

2. Paste the script tag#

Go to Settings (the cog) → Code in body, paste the tag with your browser key, and click Save:

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

The script recognises Shoporama's fields order_address, order_zipcode and order_city, and the alternative delivery address del_address, del_zipcode and del_city. The two addresses are kept apart. When the customer picks a suggestion, street and number (with floor and door), postcode and city are filled. If the customer types the address by hand, it is checked when they leave the field, with a "Did you mean …?" suggestion. The checkout is never blocked, and only Danish addresses are touched.

3. Test#

Put an item in the cart, go to checkout, type an address with a typo, and pick a suggestion. Check that postcode and city are filled, also in the delivery address. 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 your design uses other field names#

A custom design may name the fields differently. Tell the script where they are with data-fields:

<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 your checkout has separate fields for street and house number, map both street and house.

Or: your own init code#

If you want full control over what is filled, attach the address widget yourself. Find the fields with Inspect (an id is used as #id, a name as input[name="…"]), change the three selectors 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 used on the checkout page, or under Code in body:

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

Checking the address on the server after the order is placed needs an integration that reads the orders. See Address cleansing in checkout.

Next steps#

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