Od checkoutu do krawężnika: akcelerator click & collect dla headless commerce.
Click & Collect Accelerator to gotowe do produkcji rozszerzenie zbudowane na Vue Storefront i Storefront UI, które dodaje pełną funkcjonalność buy-online-collect-in-store do headless storefrontów eCommerce. Zaprojektowany i zbudowany przez zespół produktowy Divante, kompresuje to, co zwykle jest niestandardową budową rozłożoną na wiele sprintów, w gotowy do wdrożenia, brandowalny moduł.
Tło
Click & collect — czyli BOPIS (buy online, pick up in-store) — stał się w 2020 roku jedną z najszybciej rosnących preferencji realizacji zamówień, gdy klienci szukali szybkości i wygody zamawiania online połączonej z odbiorem w tym samym dniu w sklepie. Sprzedawcy z fizycznymi lokalizacjami nagle potrzebowali funkcjonalności BOPIS na już, a większość z nich stała przed dużym wysiłkiem wdrożeniowym, aby dodać ją do istniejących implementacji Vue Storefront.
Zespół produktowy Divante uznał to za wzorzec warty rozwiązania raz i dobrze dla szerszego ekosystemu Storefront UI — zamiast budować go od nowa przy każdym projekcie klienckim.
Co stworzyliśmy
Click & Collect Accelerator rozszerza Vue Storefront o kompletny przepływ zakupowy BOPIS: wyszukiwanie i wybór sklepu na stronie produktu, sprawdzanie dostępności dla każdej lokalizacji, wybór odbioru w sklepie podczas checkoutu oraz potwierdzenie i instrukcje odbioru po zakupie. UX zaprojektowano w podejściu mobile-first, ze szczególnym naciskiem na proces checkoutu, gdzie tarcie najczęściej powoduje rezygnację z zakupu.
System projektowy opiera się na podstawowych komponentach Storefront UI, rozszerzonych o dedykowane komponenty mapy i wyboru sklepu. Cały przepływ można brandować za pomocą systemu motywów Storefront UI, bez potrzeby dodatkowej pracy projektowej przy dostosowywaniu do tożsamości wizualnej konkretnego sprzedawcy. Akcelerator został opublikowany jako wkład open source dla społeczności Vue Storefront.
Najważniejsze funkcje
- Wyszukiwarka sklepów z integracją mapy i wyszukiwaniem po kodzie pocztowym lub mieście
- Dostępność towaru w czasie rzeczywistym dla każdego sklepu na stronie szczegółów produktu
- Opcja odbioru w sklepie podczas checkoutu z szacowanym czasem odbioru
- Instrukcje odbioru i dane kontaktowe sklepu po zakupie
- Interfejs mobile-first, w pełni dostępny, zbudowany na komponentach Storefront UI
- Możliwość dostosowania do każdej identyfikacji marki za pomocą CSS custom properties