Adresse-autocomplete i PrestaShop 1.7.8 til 9

Der findes et PrestaShop-modul til Danadresse: danadresse (MIT-licens) til PrestaShop 1.7.8, 8.x og 9.x. Det giver checkout'en, adressebogen og oprettelsen adresse-autocomplete med postnr. og by, virker i temaerne classic og hummingbird, og tjekker adressen på hver ny ordre. Vil du hellere skrive koden selv, viser anden halvdel af guiden et lille modul, du selv bygger.

1. Opret to nøgler#

Under Nøgler:

• en browsernøgle til butikkens sider. Tilføj butikkens domæner under Tilladte domæner, fx minbutik.dk, www.minbutik.dk. En domænelåst nøgle virker kun dér. Se Browsernøgler og tilladte domæner.
• en servernøgle uden domæner til ordretjekket. Den sendes aldrig til browseren.

2. Installér modulet#

Hent modulets ZIP-fil (danadresse-prestashop-<version>.zip) på download-siden — pak den ikke ud. Gå derefter til Moduler → Modul-manager → Upload et modul, vælg filen, og klik Konfigurer. Eller pak den ud i modules/danadresse/, og installér fra kommandolinjen:

php bin/console prestashop:module install danadresse

Installationen opretter én tabel, PREFIX_danadresse_check, med én række pr. tjekket ordre.

3. Opsætning#

Butik: slå Aktivér adresse-autocomplete til (fra som standard), og sæt browsernøglen ind. Tjek indtastede adresser og Udfyld by ud fra postnummer er slået til som standard. Scriptet indlæses på checkout, adressebogen og oprettelsessiden, og det følger med modulet.

Ordrevalidering: slå Valider adresser på nye ordrer til, sæt servernøglen ind, og vælg levering, faktura eller begge. Resultatet tilføjes ordrens private note, som kunden aldrig ser. Ordretjekket kræver PHP's curl-udvidelse.

4. Test#

1. Læg en vare i kurven, og gå til checkout som gæst.
2. Under Adresser skriver du Rentemestervej 8 og vælger forslaget.
3. Postnr. 2400 og by København NV bliver udfyldt.
4. Afgiv ordren. Under Ordrer står der Gyldig i kolonnen Adressetjek, og ordresiden har et Adressetjek-kort.

API refused the request (403) i browserens konsol betyder, at butikkens domæne mangler på browsernøglen. 401 betyder, at browsernøglen mangler eller er tastet forkert. Ikke tjekket (API-fejl) på en ordre betyder, at servernøglen er forkert, at curl mangler, eller at API'et ikke svarede inden for 3 sekunder. Efter en opdatering rydder du cachen under Avancerede parametre → Ydeevne.

One-page-checkout-moduler fra tredjepart beholder som regel PrestaShops feltnavne (address1, postcode, city), som scriptet genkender. Kører checkout'en på sin egen controller, så slå Indlæs på alle sider til. Felter, scriptet skal lade være, markerer du med data-danadresse="off".

Uden vores modul: dit eget modul#

PrestaShop's adresseformular bruger de samme feltnavne i checkout'en og under "Mine adresser": address1, postcode og city. Et lille modul kan derfor indlæse widget'en på de to sider uden at ændre dit theme. Når kunden skifter land, henter checkout'en formularen igen med AJAX, så scriptet skal kunne koble sig på nye felter. Eksempelmodulet hedder også danadresse, så installér enten vores eller dette, ikke begge.

Modulfilen#

Opret mappen modules/danadresse/ og filen danadresse.php:

<?php
if (!defined('_PS_VERSION_')) {
    exit;
}

class Danadresse extends Module
{
    public function __construct()
    {
        $this->name = 'danadresse';
        $this->tab = 'front_office_features';
        $this->version = '1.0.0';
        $this->author = 'Din butik';
        parent::__construct();
        $this->displayName = 'Danadresse autocomplete';
        $this->description = 'Dansk adresse-autocomplete på adresseformularen.';
    }

    public function install()
    {
        return parent::install() && $this->registerHook('actionFrontControllerSetMedia');
    }

    public function hookActionFrontControllerSetMedia()
    {
        // Kun checkout ("order") og adressesiden
        if (!in_array($this->context->controller->php_self, ['order', 'address'], true)) {
            return;
        }
        $this->context->controller->registerJavascript(
            'danadresse-widget',
            'https://danadresse.dk/static/js/danadresse-autocomplete-1.0.0.js',
            ['server' => 'remote', 'position' => 'bottom', 'priority' => 150]
        );
        $this->context->controller->registerJavascript(
            'danadresse-init',
            'modules/' . $this->name . '/views/js/init.js',
            ['position' => 'bottom', 'priority' => 151]
        );
    }
}

Init-scriptet#

Gem filen som modules/danadresse/views/js/init.js og indsæt din browsernøgle:

const API_KEY = "DIN_BROWSER_NØGLE";

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 bind(input) {
  const form = input.form || document;
  DanadresseAutocomplete.attach(input, {
    apiKey: API_KEY,
    onSelect(a) {
      setField(input, streetLine(a), ["change"]);
      setField(form.querySelector('input[name="postcode"]'), a.postnr);
      setField(form.querySelector('input[name="city"]'), a.postnrnavn);
    },
  });
}

function bindAll() {
  document.querySelectorAll('input[name="address1"]').forEach(bind);
}
bindAll();
// Checkout'en udskifter adresseformularen, når kunden skifter land.
new MutationObserver(bindAll).observe(document.body, { childList: true, subtree: true });

Installér og test#

Zip mappen danadresse, upload den under Moduler → Modulhåndtering → Upload et modul, og installér den. Ryd cachen under Avanceret → Ydeevne.

Test som gæst i checkout'en: skriv en adresse, vælg et forslag, og tjek at postnr. og by er udfyldt. Har dit theme andre feltnavne, så højreklik på feltet, vælg Inspicér, og ret selektorerne. Konsollen viser 403 origin_not_allowed, hvis domænet mangler på nøglen.

Tjek adressen på serveren#

Du kan tjekke leveringsadressen med servernøglen fra hooket actionValidateOrder, som kører, når ordren er oprettet. Kald /datavask/adgangsadresser?betegnelse=Rådhuspladsen 1, 4200 med vej, husnr. og postnr. Kategori C betyder, at adressen ikke kunne findes sikkert, så markér ordren til manuel kontrol. Se Datavask i checkout.

Widget'en søger kun danske adresser. Sælger du til udlandet, kan kunden bare ignorere forslagene og skrive videre.

Næste skridt#

• PrestaShop-siden under Integrationer
• Browsernøgler og tilladte domæner
• Datavask i checkout