Widżet koszyka

Daj klientom możliwość wyboru punktu odbioru bezpośrednio w koszyku — zanim przejdą do kasy. Widżet koszyka Globe dodaje selektor dostawy do strony koszyka lub szuflady koszyka, dzięki czemu klienci mogą wybrać między dostawą do domu a punktem odbioru bez opuszczania koszyka.

Jak to działa

Widżet dodaje do koszyka dwie opcje w formie kart:

Dostawa do domu — klient chce standardowej dostawy na swój adres. Wybranie tej opcji usuwa wcześniej zapisany punkt odbioru.
Punkty odbioru — klient chce odebrać przesyłkę w punkcie odbioru. Kliknięcie tej karty otwiera interaktywną mapę i listę, zasilane przez Leaflet i OpenStreetMap (nie jest wymagany klucz API Google Maps).

Na mapie klienci mogą wyszukiwać według adresu, używać swojej lokalizacji i przeglądać znaczniki wszystkich pobliskich punktów odbioru. Po wyborze punktu karta aktualizuje się, aby wyświetlić nazwę i adres wybranego punktu wraz z przyciskiem Zmień.

Wybór jest zapisywany w koszyku i automatycznie trafia do zamówienia.

Klienci wybierają między dostawą do domu a punktami odbioru bezpośrednio w koszyku.

Konfiguracja

Upewnij się, że w Globe skonfigurowany jest co najmniej jeden przewoźnik. Zobacz Dodawanie przewoźników punktów odbioru, jeśli jeszcze tego nie zrobiłeś.
Włącz widżet w swoim motywie Shopify:
- W panelu administracyjnym Shopify przejdź do Online Store → Motywy → Dostosuj.
- Otwórz Osadzenia aplikacji w lewym panelu.
- Znajdź Cart pickup points i włącz.
- Kliknij Zapisz.
Możesz też otworzyć edytor motywu bezpośrednio z Globe — przejdź do Ustawienia → Widżet koszyka i kliknij Otwórz edytor motywu.

Włącz osadzenie aplikacji Cart pickup points w swoim motywie.
W aplikacji Globe przejdź do Ustawienia → Widżet koszyka i skonfiguruj umiejscowienie (patrz poniżej).

Umiejscowienie

Widżet wstawia się do koszyka w selektorze CSS, który podajesz. Różne motywy używają różnych struktur HTML, dlatego musisz wskazać widżetowi właściwy element w swoim motywie.

Popularne selektory:

Typ motywu	Selektor do wypróbowania
Pełna strona koszyka	`.cart__footer`
Szuflada koszyka	`.cart-drawer__summary`
Ogólny	`#cart-totals`

Nie jesteś pewny, którego selektora używa Twój motyw? Kliknij Pomoc obok pola selektora CSS w Globe — poprowadzi Cię przez znalezienie właściwego selektora za pomocą DevTools przeglądarki. Możesz też skontaktować się z pomocą techniczną, a my zidentyfikujemy go dla Ciebie.

Możesz dodać wiele celów umiejscowienia, jeśli Twój motyw ma zarówno pełną stronę koszyka, jak i szufladę koszyka — widżet pojawi się w obu.

Skonfiguruj selektor CSS i układ dla każdego celu umiejscowienia.

Dostosowanie

Tłumaczenia

Dostosuj cztery etykiety, które widzą klienci: nagłówek, „Dostawa do domu”, „Punkty odbioru” i przycisk „Zmień”. Tłumaczenia można ustawić dla każdego języka — widżet automatycznie wykrywa język przeglądarki klienta i wyświetla odpowiedni tekst. Aplikacja pokazuje tylko języki opublikowane w Twoim sklepie Shopify.

Kolory

Osiem ustawień kolorów pozwala dopasować widżet do projektu Twojego sklepu: kolor nagłówka, kolor tekstu, tło karty, obramowanie karty (normalne), obramowanie karty (wybrane), kolor ikony, tło przycisku i kolor tekstu przycisku.

Układ

Wybierz między poziomym (dwie karty obok siebie) lub pionowym (karty ułożone jedna nad drugą). Układ poziomy sprawdza się dobrze przy szerokich układach koszyka; pionowy lepiej pasuje do wąskich szuflad koszyka.

Automatyczne wypełnianie adresu przy kasie

Gdy klient wybierze punkt odbioru w koszyku, Globe może automatycznie wypełnić formularz adresu wysyłki przy kasie adresem tego punktu odbioru. Oszczędza to klientowi ponownego wpisywania adresu.

Włącz to w Ustawienia → Widżet koszyka → Automatyczne wypełnianie adresu przy kasie.

Jeśli Twój motyw używa niestandardowego przycisku kasy, wpisz selektor CSS przycisku w polu Niestandardowy selektor przycisku kasy (obsługuje wiele selektorów oddzielonych przecinkami, np. .cart__checkout-button, #checkout).

Wymagania

Zainstalowana aplikacja Globe z aktywną subskrypcją
Co najmniej jeden przewoźnik punktów odbioru skonfigurowany w Globe
Osadzenie aplikacji Cart pickup points włączone w edytorze motywu