Integrationer · Din formular
Autocomplete af adresser i din egen formular, i tre filer.
Intet plugin, ingen platform: én JavaScript-fil, der kobles til de felter, du allerede har, en færdig proxy til din server, der holder token'et sikkert, tre linjer for at forbinde dem. Den besøgende skriver, vejen fuldføres, postnummer, by og provins udfyldes af sig selv; en håndindtastet adresse verificeres, når feltet forlades. Forslag fra registrene i 26 lande.
Hvad er der i kittet
- ra-suggerisci.js·widgetten: ingen afhængigheder, samme fil som WooCommerce- og PrestaShop-plugin'ene; den foreslår, mens du skriver, og fordeler ved valget den verificerede adresse i felterne
- ra-proxy.php·proxyen: holder token'et på serveren, accepterer kun dit domæne, sætter en grænse per besøgende (rate limit), videresender til RadarAddress; mangler token'et, eller er kreditten opbrugt, svarer den med en tom liste, og formularen fortsætter
- esempio.html·en komplet formular — land, adresse, postnummer, by, provins — der virker, så snart token'et er i proxyen: du kopierer den og tilpasser den
- README·widgettens indstillinger, proxyens kontrakt for dem, der ikke bruger PHP, hvad den bruger
Sådan gør du, i tre trin
Opret kontoen og token'et
Kontoen er gratis, kræver ikke et betalingskort og indeholder hver måned en kvote behandlinger: tokenet oprettes med ét klik, og trinene er forklaret der.
Sæt proxyen på serveren
Kopiér ra-proxy.php til samme domæne som formularen, og skriv token'et i den angivne linje (endnu bedre: i en fil uden for webmappen, læst derfra). Intet andet at konfigurere.
Kobl widgetten til felterne
Inkludér ra-suggerisci.js på siden, og angiv selectorerne for dine felter: adresse, postnummer, by, provins og, hvis det findes, land. Resten klarer widgetten.
<script src="ra-suggerisci.js"></script>
<script>
RASuggerisci.attacca({
url: '/ra-proxy.php', // proxyen på din server, aldrig API'et
campi: { indirizzo: '#indirizzo', cap: '#cap', localita: '#citta',
provincia: '#provincia', nazione_iso2: '#nazione' }, // landet er valgfrit
lingua: 'da'
});
</script>
campi accepterer en hvilken som helst CSS-selector. De ekstra indstillinger: onSeleziona modtager den verificerede post (normaliseret adresse, resultat, koordinater når de findes), scriviCampo til React- og Vue-formularer, correggiAlBlur for at bestemme, om håndindtastede adresser også skal verificeres, headers til et CSRF-token mod proxyen. Alt sammen i kittets README; API-kontrakten står i dokumentationen.
Krav: en hvilken som helst webside og, for kittets proxy, PHP 8.0 eller nyere med cURL; ellers tres linjer i dit eget sprog. Widgetten er udgivet under licensen Academic Free License 3.0.
Hvad der sker i formularen
- Mens du skriver·efter to bogstaver foreslår widgetten vejene, med det fulde navn og kommunen; flere bogstaver filtrerer det, den allerede har modtaget, uden at kalde serveren ved hvert tastetryk; postnummer og by, der allerede er udfyldt, indsnævrer søgningen
- Ved valget·den verificerede adresse går ind i felterne i den korrekte form — vejen udskrevet, husnummer, det rigtige postnummer også i de store byer med flere postnumre, by og provins — og der tælles én kontaktverificering; vejens husnumre fuldføres uden yderligere gebyr
- Håndskrevet·den, der ignorerer listen og skriver det hele selv, bliver verificeret, når feltet forlades: genkendes adressen, ordnes felterne; ellers forbliver den, som den er. Intet blokerer nogensinde afsendelsen
- I udlandet·med landet angivet kommer forslagene fra det pågældende lands register, og den besøgende skriver, som man skriver dér, også alt i ét felt; registrets kildeangivelse står nederst på listen
Ofte stillede spørgsmål
Hvorfor er der brug for en proxy? Kan jeg ikke kalde API'et direkte fra siden?
API-token'et giver adgang til din kredit: på siden kunne hvem som helst læse det. Widgetten taler kun med en adresse på dit eget site; dér tilføjer en fil på tres linjer token'et og videresender. Kittets PHP-proxy er klar: du kopierer den, skriver token'et, færdig.
Mit site er ikke i PHP.
Proxyen er referencen, ikke et krav: den modtager JSON'en fra browseren, tilføjer Authorization-headeren med token'et, videresender til /api/v1/suggest og returnerer svaret. Den kan omskrives i et hvilket som helst sprog på få minutter; README'en beskriver kontrakten.
Virker det med React, Vue, Angular?
Ja: widgetten kobles til felterne med en hvilken som helst CSS-selector. Kontrollerede formularer kræver, at værdien skrives med den native setter: det er det, indstillingen scriviCampo gør, og det er den, WooCommerce-plugin'et bruger på blok-checkouten.
Hvad bruger det?
Det er gratis at skrive. Der tælles én kontaktverificering, når den besøgende vælger en adresse fra listen (eller når en håndindtastet adresse verificeres, idet feltet forlades, hvis du lader correggiAlBlur være slået til): én pr. adresse, ikke pr. tastetryk. Hver måned er de første 50 gratis; derudover pakkerne og abonnementerne på prissiden.
Og hvis kreditten løber tør, eller RadarAddress ikke svarer?
Widgetten tier, og formularen fungerer som altid: ingen besked til den besøgende, ingen blokeret afsendelse. Proxyen returnerer en tom liste ved 401, 402 og ved enhver netværksfejl.
Gælder det også i udlandet?
For alle lande i drift: det er nok med et felt med landets ISO-kode (en select med IT, DE, FR… eller et skjult felt) angivet i nazione_iso2. Den besøgende skriver, som man skriver i sit land, også alt i ét felt; popup'en viser registrets kildeangivelse.
Kan jeg ændre popup'ens udseende?
Widgetten har sine egne stilarter med sig, uden CSS-fil: variablerne --ra-sugg-bg, --ra-sugg-bordo og --ra-sugg-hover på din side ændrer farverne; klassen er .ra-sugg-pop for resten.
Versioner
- 1.0.0 — første version af kittet: widget, PHP-proxy med grænser per besøgende og kontrol af oprindelsen, eksempelformular, README.
De andre integrationer: WooCommerce, PrestaShop, AcyMailing, Convert Forms og Community Builder. Listen.