Integrationer · Ditt formulär
Adressautokomplettering i ditt eget formulär, i tre filer.
Ingen plugin, ingen plattform: en JavaScript-fil som kopplas till fälten du redan har, en färdig proxy för din server som håller token säker, tre rader för att koppla dem. Besökaren skriver, gatan kompletteras, postnummer, ort och provins fylls i av sig själva; en handskriven adress kontrolleras när fältet lämnas. Förslag från registren i 26 länder.
Vad kitet innehåller
- ra-suggerisci.js·widgeten: inga beroenden, samma fil som i WooCommerce- och PrestaShop-pluginen; ger förslag medan du skriver och fyller vid val i den verifierade adressen i fälten
- ra-proxy.php·proxyn: håller token på servern, tar bara emot från din egen domän, bromsar per besökare, vidarebefordrar till RadarAddress; om token saknas eller tillgodohavandet är slut svarar den med en tom lista och formuläret fortsätter
- esempio.html·ett komplett formulär — land, adress, postnummer, ort, provins — som fungerar så snart token finns i proxyn: kopiera det och anpassa det
- README·widgetens alternativ, proxyns kontrakt för den som inte använder PHP, vad det förbrukar
Så går det till, i tre steg
Skapa kontot och token
Kontot är gratis, kräver inget kort och innehåller varje månad ett antal bearbetningar: token skapas med ett klick och stegen är förklarade där.
Lägg proxyn på servern
Kopiera ra-proxy.php till samma domän som formuläret och skriv in token på den angivna raden (ännu bättre: i en fil utanför webbmappen, som läses därifrån). Inget annat att konfigurera.
Koppla widgeten till fälten
Inkludera ra-suggerisci.js på sidan och ange selektorerna för dina fält: adress, postnummer, ort, provins och, om det finns, landet. Resten sköter widgeten.
<script src="ra-suggerisci.js"></script>
<script>
RASuggerisci.attacca({
url: '/ra-proxy.php', // proxyn på din server, aldrig API:et
campi: { indirizzo: '#indirizzo', cap: '#cap', localita: '#citta',
provincia: '#provincia', nazione_iso2: '#nazione' }, // landet är valfritt
lingua: 'sv'
});
</script>
campi tar vilken CSS-selektor som helst. De extra alternativen: onSeleziona tar emot den verifierade posten (normaliserad adress, utfall, koordinater när de finns), scriviCampo för React- och Vue-formulär, correggiAlBlur för att avgöra om även handskrivna adresser ska kontrolleras, headers för en CSRF-token mot proxyn. Allt finns i kitets README; API-kontraktet finns i dokumentationen.
Krav: vilken webbsida som helst och, för kitets proxy, PHP 8.0 eller senare med cURL; annars sextio rader i ditt eget språk. Widgeten publiceras under licensen Academic Free License 3.0.
Vad som händer i formuläret
- Medan du skriver·efter två bokstäver föreslår widgeten gator, med fullständigt namn och kommun; fler bokstäver filtrerar det den redan fått, utan att anropa servern vid varje knapptryckning; ifyllda postnummer och ort begränsar sökningen
- Vid val·den verifierade adressen läggs in i fälten i korrekt form — gata utskriven, husnummer, rätt postnummer även i stora zonindelade städer, ort och provins — och en kontaktverifiering räknas; gatans husnummer kompletteras utan att förbruka fler
- Handskrivet·den som ignorerar listan och skriver allt själv kontrolleras när fältet lämnas: om adressen känns igen ordnas fälten till; annars förblir de som de är. Inget blockerar någonsin inskickningen
- Utomlands·med landet angivet kommer förslagen från det landets register och besökaren skriver som man skriver där, även allt i ett enda fält; registrets källhänvisning står längst ner i listan
Vanliga frågor
Varför behövs en proxy? Kan jag inte anropa API:et direkt från sidan?
API-token ger tillgång till ditt tillgodohavande: vem som helst skulle kunna läsa den på sidan. Widgeten pratar bara med en adress på din egen webbplats; där lägger en sextio rader lång fil till token och vidarebefordrar anropet. Kitets PHP-proxy är klar: kopiera den, skriv in token, klart.
Min webbplats är inte i PHP.
Proxyn är referensen, inget krav: den tar emot JSON från webbläsaren, lägger till Authorization-headern med token, vidarebefordrar till /api/v1/suggest och skickar tillbaka svaret. Den kan skrivas om i vilket språk som helst på några minuter; README:n beskriver kontraktet.
Fungerar det med React, Vue, Angular?
Ja: widgeten kopplas till fälten med vilken CSS-selektor som helst. Kontrollerade formulär vill att värdet skrivs med den inbyggda settern: alternativet scriviCampo gör just det, och det är samma som WooCommerce-pluginet använder i blockkassan.
Vad förbrukar det?
Att skriva är gratis. En kontaktverifiering räknas när besökaren väljer en adress från listan (eller när en handskriven adress kontrolleras när fältet lämnas, om du har correggiAlBlur påslaget): en per adress, inte per knapptryckning. Varje månad är de första 50 gratis; därutöver paketen och abonnemangen på prissidan.
Och om tillgodohavandet tar slut, eller om RadarAddress inte svarar?
Widgeten tystnar och formuläret fungerar som vanligt: inget meddelande till besökaren, ingen inskickning blockeras. Proxyn returnerar en tom lista vid 401, 402 och vid alla nätverksfel.
Gäller det utomlands?
För alla länder i drift: det räcker med ett fält med landets ISO-kod (en select med IT, DE, FR… eller ett dolt fält) angivet i nazione_iso2. Besökaren skriver som man skriver i sitt land, även allt i ett enda fält; popupen visar registrets källhänvisning.
Kan jag ändra popupens utseende?
Widgeten har sina egna stilar, utan CSS-fil: variablerna --ra-sugg-bg, --ra-sugg-bordo och --ra-sugg-hover på din sida ändrar färgerna; klassen är .ra-sugg-pop för resten.
Versioner
- 1.0.0 — kitets första version: widget, PHP-proxy med bromsar och ursprungskontroll, exempelformulär, README.
De andra integrationerna: WooCommerce, PrestaShop, AcyMailing, Convert Forms och Community Builder. Listan.