Aplikacja Shopify do interaktywnej prezentacji produktów
Sprzedawca korzystający z Shopify może udostępnić klientom interaktywną prezentację produktu bez przenoszenia ich do osobnego sklepu. Aplikacja obejmuje zarówno przygotowanie produktów w panelu sprzedawcy, jak i doświadczenie na stronie produktu.
Zakres prac prowadził od poznania procesu sprzedaży i wymagań integracji, przez projekt interfejsu i API, po etapowe wdrażanie oraz utrzymanie. Szczególną uwagę poświęcono temu, aby sprzedawca wiedział, które produkty są gotowe, a które wymagają kolejnego działania.
- Dla kogo
- Sprzedawcy prowadzący sklepy Shopify oraz klienci oglądający produkty w tych sklepach.
Przygotowanie produktów
Gotowość produktu
Stany ilustrują pracę sprzedawcy od wyboru produktu do jego udostępnienia w sklepie.
- Wybrany
- Produkt został wskazany w katalogu.
- Oczekuje na miejsce
- Przygotowanie może ruszyć po zwolnieniu miejsca w planie.
- Wymaga uwagi
- Sprzedawca może sprawdzić stan i ponowić zadanie.
- Widoczny w sklepie
- Gotowy produkt może zostać udostępniony kupującym.
Sprzedawca instaluje aplikację w sklepie, wybiera produkty i uruchamia ich przygotowanie. Może zaznaczyć kilka pozycji naraz, sprawdzić postęp, ponowić nieudane zadania i zdecydować, które gotowe produkty mają być widoczne w sklepie.
Najpierw ustalono drogę produktu od wyboru w katalogu do udostępnienia kupującym. Panel pokazuje osobno postęp przygotowania, widoczność w sklepie i stan publikacji w Shopify. Sprzedawca wie dzięki temu, które działanie jest jeszcze potrzebne do udostępnienia prezentacji.
Prace prowadzono etapami, obejmując instalację, panel, integrację motywu i obsługę sytuacji wymagających ponowienia. Widoki stanu i wyniki działań zbiorczych pomagają sprzedawcy ustalić, co zostało uruchomione, co czeka i co wymaga sprawdzenia.
Zakres odpowiedzialności
Atomic Concept odpowiada za rozpoznanie potrzeb, projekt zasad produktu, interfejsu i integracji oraz rozwój, wdrożenie i utrzymanie aplikacji.
- Konfiguracja sklepu
- Panel prowadzi sprzedawcę przez ustawienia aplikacji i włączenie elementów w motywie Shopify.
- Praca z katalogiem
- Statusy i działania zbiorcze pomagają przygotować produkty oraz rozpoznać pozycje oczekujące lub wymagające uwagi.
- Plan i pojemność
- Sprzedawca widzi wykorzystane miejsca w planie. Produkty mogą czekać na wolne miejsce, a po jego zwolnieniu rozpocząć przygotowanie.
Na stronie produktu i telefonie
Kupujący korzysta z prezentacji na stronie produktu. Gdy potrzebuje telefonu, może zeskanować kod QR wyświetlony na komputerze i kontynuować na urządzeniu mobilnym. Wybrane produkty mogą też trafić do koszyka w sklepie.
- Zakupy
- Prezentacja korzysta z kontekstu strony produktu i łączy się z koszykiem sklepu.
Kontynuacja zakupów
Schemat pokazuje związek strony produktu, przejścia na telefon i koszyka sklepu.
- Strona produktu
- Kupujący otwiera interaktywną prezentację.
- Kod QR
- Pozwala kontynuować prezentację na telefonie.
- Koszyk sklepu
- Wybrane produkty mogą trafić do koszyka.
Integracja i zadania w tle
React Router i TypeScript obsługują aplikację panelową, a Shopify GraphQL API oraz App Bridge łączą ją z administracją sklepu. Polaris wspiera interfejs, natomiast rozszerzenia motywu w Liquid umieszczają elementy prezentacji na stronach produktów.
Przygotowanie produktów trwa poza pojedynczym żądaniem. Rezerwacje miejsc i klucze idempotencji pomagają kontrolować limity oraz ograniczać skutki powtórnych zgłoszeń. Mechanizmy synchronizacji i ponawiania obsługują zadania, które nie zakończyły się od razu.
- Granice modułów
- Reguły produktu są oddzielone od adapterów usług, a kontrole granic modułów pomagają utrzymać ten podział przy dalszym rozwoju.
- Komunikacja w sklepie
- postMessage przekazuje potrzebny kontekst między osadzonym widokiem a stroną sklepu i wspiera przepływ do koszyka.
- Dane i zadania
- PostgreSQL i Prisma przechowują dane aplikacji, stan przygotowania i rezerwacje miejsc w planie.
- Diagnoza
- Ustrukturyzowane logi JSON oraz opcjonalne e-maile operacyjne pomagają analizować przebieg integracji i błędy.
Technologie i zastosowanie
- React Router, React i TypeScript
- Aplikacja i panel sprzedawcy.
- Shopify GraphQL, App Bridge i Polaris
- Integracja z administracją sklepu i interfejs panelu.
- Liquid
- Rozszerzenia motywu na stronach sklepu.
- PostgreSQL i Prisma
- Dane produktów, planów i przetwarzania.