Completamento automatico degli indirizzi (Google Maps)

Con il completamento automatico degli indirizzi, Sami B2B Onboarding mostra i suggerimenti di Google non appena la persona inizia a scrivere la via. Scegliendo un suggerimento, il resto dell’indirizzo si compila da solo. Il modulo si completa più in fretta e la sede dell’azienda creata dall’app in Shopify riceve un indirizzo corretto.

Aggiungi una sola chiave Google Maps per il negozio. Ogni modulo attiva o disattiva il completamento automatico.

Nota

Prima di iniziare, ti serve un account Google Cloud con la fatturazione configurata. Google la richiede per poter usare le sue API Maps.

Crea una chiave per il browser in Google Cloud

1. Scegli un progetto

   Apri la console di Google Cloud e crea un progetto, oppure scegli quello che vuoi usare.

2. Attiva le API

   In APIs & Services › Library, cerca e abilita Maps JavaScript API, poi Places API. La prima carica i suggerimenti nella tua vetrina. La seconda trova gli indirizzi.

3. Crea la chiave

   In APIs & Services › Credentials, fai clic su Create credentials › API key. Copia la chiave. Inizia con AIza.

4. Limita la chiave al tuo negozio

   Apri le impostazioni della chiave:

   1. In Application restrictions, scegli Websites e aggiungi ogni dominio su cui è raggiungibile il tuo negozio, ad esempio https://example.com/* e https://your-store.myshopify.com/*.
   2. In API restrictions, scegli Restrict key e seleziona Maps JavaScript API e Places API.
   3. Fai clic su Save.

Attenzione

La chiave è scritta nella pagina della tua vetrina, quindi chiunque può leggerla. La restrizione per sito web impedisce ad altri di usarla e di far crescere il tuo conto Google. Lo ricorda anche il pannello dell’app: This key is printed into the storefront page, so restrict it to your store’s domain in the Google console.

Aggiungi la chiave e attivala

1. Apri il pannello Address autocomplete

   Vai su Forms e fai clic su Edit accanto al modulo. Nella barra a sinistra, fai clic su Integrations. In Connected apps, fai clic su Set up nella riga Address autocomplete.

   Si apre il pannello Address autocomplete con due sezioni: Account e This form.

   

   Fai clic su Set up per aggiungere la chiave; il pannello spiega quale campo riceve i suggerimenti e ti ricorda di limitare la chiave.

2. Incolla la chiave

   In Account, fai clic su Set up. Nella finestra Address autocomplete, incolla la chiave in Maps API key e fai clic su Save. Vedi Keys saved e la riga Account mostra la chiave.

3. Attivalo

   In fondo al pannello, fai clic su Enable. Il pulsante diventa Disable e la riga Address autocomplete in Connected apps mostra Active. Se non è ancora stata salvata nessuna chiave, un banner riporta Add your Maps API key first.

4. Salva il modulo

   Fai clic su Save nella barra di salvataggio. Vedi Form saved.

Quali campi compila

I suggerimenti compaiono in ogni campo associato a Address line 1 nel pannello Shopify del modulo. Come dice il pannello: When a buyer starts typing in a field mapped to Address line 1, Google suggests addresses. Picking one fills that block’s city, state, postal code and country.

Quando la persona sceglie un suggerimento, l’app compila i campi dello stesso indirizzo associati a:

Associato a	Compilato con
Address line 1	Numero civico e nome della via
City	Città o paese
State / province	Stato o provincia
ZIP / postal code	CAP
Country	Paese

• Address line 2, Recipient e Phone vengono lasciati da compilare alla persona.
• Gli indirizzi di spedizione e di fatturazione sono tenuti separati. Scegliere un indirizzo di spedizione non modifica mai i campi di fatturazione.
• La persona può comunque modificare qualsiasi campo compilato.
• I suggerimenti sono nella lingua della pagina del negozio.

Il modulo Wholesale application creato dall’app associa già questi campi per entrambi gli indirizzi. Se crei domande sull’indirizzo personalizzate, associale in Company location. Vedi Associa le risposte a Shopify.

Verifica nella tua vetrina

1. Apri il modulo

   Vai su Forms e fai clic su Copy link accanto al modulo. Apri il link in una finestra privata del browser.

2. Digita un indirizzo

   In Shipping address, inizia a scrivere in Address line 1, ad esempio 123 Main Street. Sotto il campo si apre l’elenco dei suggerimenti di Google.

3. Scegli un suggerimento

   Fai clic su un indirizzo dell’elenco. City, ZIP or postal code, Country e State or province si compilano per quell’indirizzo.

Se non compare alcun suggerimento:

Verifica	Cosa fare
La riga Address autocomplete mostra Active e il modulo è salvato.	Fai clic su Enable nel pannello, poi su Save.
La restrizione per sito web della chiave include il dominio su cui stai facendo la prova.	Il tuo negozio risponde sul tuo dominio e sul dominio myshopify.com. Aggiungili entrambi in Google Cloud.
Maps JavaScript API e Places API sono abilitate e la fatturazione è configurata nel progetto.	Attivale in APIs & Services › Library.
Il campo è associato a Address line 1.	Associalo nel pannello Shopify, in Company location.

Disattivalo

• Su un solo modulo: apri il suo pannello Address autocomplete, fai clic su Disable, poi su Save.
• Su tutti i moduli: in Account, fai clic su Change, poi su Remove keys. La finestra avvisa Every form in this store stops using Address autocomplete until you add keys again. Fai clic su Remove keys per confermare.

Passaggi successivi

• Associa le risposte a Shopify: associa le domande sull’indirizzo in modo che compilino la sede dell’azienda.
• Crea il tuo modulo: aggiungi campi indirizzo a un modulo.
• Captcha (reCAPTCHA, hCaptcha): tieni lontani i bot dallo stesso modulo.