Autouzupełnianie adresów (Google Maps)

Dzięki autouzupełnianiu adresów Sami B2B Onboarding pokazuje podpowiedzi adresów od Google, gdy tylko kupujący zacznie wpisywać ulicę. Wybranie podpowiedzi uzupełnia resztę tego adresu. Kupujący szybciej wypełniają formularz, a lokalizacja firmy tworzona przez aplikację w Shopify ma poprawny adres.

Dodajesz jeden klucz Google Maps dla sklepu. Każdy formularz włącza lub wyłącza autouzupełnianie osobno.

Notatka

Zanim zaczniesz, potrzebujesz konta Google Cloud z ustawionymi płatnościami. Google wymaga tego, zanim będzie można używać jego interfejsów API Maps.

Utwórz klucz przeglądarki w Google Cloud

1. Wybierz projekt

   Otwórz konsolę Google Cloud i utwórz projekt albo wybierz ten, którego chcesz użyć.

2. Włącz interfejsy API

   W APIs & Services › Library wyszukaj i włącz Maps JavaScript API, a następnie Places API. Pierwszy ładuje podpowiedzi w Twoim sklepie. Drugi wyszukuje adresy.

3. Utwórz klucz

   W APIs & Services › Credentials kliknij Create credentials › API key. Skopiuj klucz. Zaczyna się od AIza.

4. Ogranicz klucz do swojego sklepu

   Otwórz ustawienia klucza:

   1. W sekcji Application restrictions wybierz Websites i dodaj każdą domenę, pod którą działa Twój sklep, na przykład https://example.com/* i https://your-store.myshopify.com/*.
   2. W sekcji API restrictions wybierz Restrict key i zaznacz Maps JavaScript API oraz Places API.
   3. Kliknij Save.

Uwaga

Klucz jest zapisany na stronie Twojego sklepu, więc każdy może go tam odczytać. Ograniczenie do witryn sprawia, że nikt inny nie może go użyć i naliczać kosztów na Twoim rachunku w Google. Panel aplikacji przypomina o tym: This key is printed into the storefront page, so restrict it to your store’s domain in the Google console.

Dodaj klucz i włącz autouzupełnianie

1. Otwórz panel Address autocomplete

   Przejdź do Forms i kliknij Edit przy formularzu. Na liście po lewej kliknij Integrations. W sekcji Connected apps kliknij Set up w wierszu Address autocomplete.

   Otworzy się panel Address autocomplete z dwiema sekcjami: Account i This form.

   

   Kliknij Set up, aby dodać klucz. Panel wyjaśnia, które pole dostaje podpowiedzi, i przypomina o ograniczeniu klucza.

2. Wklej klucz

   W sekcji Account kliknij Set up. W oknie Address autocomplete wklej klucz w polu Maps API key i kliknij Save. Zobaczysz Keys saved, a wiersz Account pokaże klucz.

3. Włącz autouzupełnianie

   Na dole panelu kliknij Enable. Przycisk zmieni się na Disable, a wiersz Address autocomplete w Connected apps pokaże Active. Jeśli klucz nie jest jeszcze zapisany, baner informuje: Add your Maps API key first.

4. Zapisz formularz

   Kliknij Save na pasku zapisu. Zobaczysz Form saved.

Które pola są uzupełniane

Podpowiedzi pojawiają się w każdym polu przypisanym do Address line 1 w panelu Shopify formularza. Jak mówi panel: 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.

Gdy kupujący wybierze podpowiedź, aplikacja uzupełnia pola tego samego adresu, które są przypisane do:

Przypisane do	Uzupełniane wartością
Address line 1	Numer i nazwa ulicy
City	Miasto lub miejscowość
State / province	Stan lub prowincja
ZIP / postal code	Kod pocztowy
Country	Kraj

• Address line 2, Recipient i Phone kupujący wypełnia sam.
• Adresy wysyłki i rozliczeniowy są oddzielone. Wybranie adresu wysyłki nigdy nie zmienia pól adresu rozliczeniowego.
• Kupujący nadal może zmienić każde uzupełnione pole.
• Podpowiedzi są w języku strony sklepu.

Formularz Wholesale application tworzony przez aplikację ma już przypisane te pola dla obu adresów. Jeśli tworzysz własne pytania o adres, przypisz je w sekcji Company location. Zobacz Przypisywanie odpowiedzi do Shopify.

Sprawdź w swoim sklepie

1. Otwórz formularz

   Przejdź do Forms i kliknij Copy link przy formularzu. Otwórz link w oknie prywatnym przeglądarki.

2. Wpisz adres

   W sekcji Shipping address zacznij pisać w polu Address line 1, na przykład 123 Main Street. Pod polem otworzy się lista podpowiedzi Google.

3. Wybierz podpowiedź

   Kliknij adres na liście. Pola City, ZIP or postal code, Country i State or province zostaną uzupełnione dla tego adresu.

Jeśli podpowiedzi się nie pojawiają:

Sprawdź	Co zrobić
Wiersz Address autocomplete pokazuje Active, a formularz jest zapisany.	Kliknij Enable w panelu, a potem Save.
Ograniczenie witryn klucza obejmuje domenę, na której testujesz.	Twój sklep odpowiada pod własną domeną i pod domeną myshopify.com. Dodaj obie w Google Cloud.
Maps JavaScript API i Places API są włączone, a w projekcie ustawiono płatności.	Włącz je w APIs & Services › Library.
Pole jest przypisane do Address line 1.	Przypisz je w panelu Shopify, w sekcji Company location.

Wyłączanie

• W jednym formularzu: otwórz jego panel Address autocomplete, kliknij Disable, a potem Save.
• We wszystkich formularzach: w sekcji Account kliknij Change, a potem Remove keys. Okno ostrzega: Every form in this store stops using Address autocomplete until you add keys again. Kliknij Remove keys, aby potwierdzić.

Następne kroki

• Przypisywanie odpowiedzi do Shopify — przypisz pytania o adres tak, aby uzupełniały lokalizację firmy.
• Tworzenie formularza — dodaj pola adresu do formularza.
• Captcha (reCAPTCHA, hCaptcha) — chroń ten sam formularz przed botami.