Elastyczny sklep PWA dla Magento 2 i nie tylko? Poznaj rozwiązanie od e-com.house
Rosnący udział m-commerce w handlu elektronicznym sprawia, że coraz więcej sklepów chce sprostać potrzebom e-kupujących mobilnie. Klasyczne rozwiązania i silniki e-commerce okazują się niewystarczające, stąd wiele firm zwraca się w kierunku aplikacji mobilnych oraz aplikacji PWA.
O ile na stworzenie aplikacji natywnych (nawet w formie hybrydowej jako jedna aplikacja na Android i iOS) nie każdy biznes może sobie pozwolić, o tyle sklep w oparciu o technologię PWA jest o wiele bardziej przystępny.
O tym, czym dokładnie jest aplikacja PWA (skrót od angielskiego zwrotu Progressive Web App) i jakie ma zastosowanie w e-commerce, pisaliśmy w osobnym artykule. W skrócie - sklep PWA łączy zalety serwisu webowego i aplikacji mobilnych - działa w oparciu o przeglądarkę i jest widoczny w wyszukiwarkach, ale zapewnia dużo szybsze i bardziej płynne doświadczenie zakupowe. PWA umożliwia działanie sklepu w trybie offline (bez dostępu do internetu), pobranie aplikacji na pulpit czy wykorzystanie natywnych funkcji smartfona jak np. powiadomienia push.
Dlatego też ku tej technologii zwraca się coraz więcej sklepów internetowych - od gigantów, po mniejsze marki. Zwiększa się też liczba dostępnych na rynku rozwiązań. Podobnie jak w przypadku klasycznych e-sklepów, możemy skorzystać zarówno z rozwiązań gotowych, w tym open-source, jak i dedykowanych. Warto jednak uważać - czasem dany software ma niewiele wspólnego z prawdziwym PWA, a czasem jest na tyle rozbudowany, że koszt wdrożenia może wielokrotnie przekroczyć zakładany budżet.
W e-com.house analizowaliśmy wiele z nich i finalnie, bazując na tej wiedzy oraz doświadczeniu z wdrożeń, stworzyliśmy własne rozwiązanie, stanowiące dobry i elastyczny core do tworzenia sklepów PWA z backendem Magento 2 (i nie tylko). Szczegóły opisujemy i pokazujemy niżej, a już niedługo opublikujemy wyczerpujące case study wdrożenia dla marki KUBOTA. Dobrej lektury!
Sklep PWA - funkcjonalności
W rozwiązaniu e-com.house dominuje prostota i nieskomplikowane rozwiązania - tworzymy i rozwijamy funkcjonalności, które są charakterystyczne dla większości e-commerce’ów, niezależnie od ich skali czy branży. Zalety takiego podejścia to:
szybsze działanie i niższy koszt utrzymania - sklep nie jest dociążony niepotrzebnymi funkcjami, skryptami czy modułami,
duża elastyczność, zarówno mechaniki działania, jak i layoutu - zaczynamy od prostej bazy i mamy dużą swobodę w dodawaniu elementów dopasowanych do potrzeb danego klienta,
świetne dopasowanie do specyfiki Magento 2 - zarówno warstwa frontu, jak i autorskie serwisy backendowe, wspierają i rozwijają popularną platformę, a jednocześnie są na tyle niezależne, że pozwalają na synchronizację z innymi technologiami lub samodzielne działanie,
złoty środek pomiędzy zarządzalnością a performance’m strony - jedną z opcji jest dodanie skrojonego na miarę CMS, który daje możliwość samodzielnego tworzenia stron i bogatego contentu, ale bez nawarstwiania niepotrzebnego kodu.
Brzmi interesująco? Krok po kroku zobacz jak wygląda nasze PWA, zarówno od strony frontu, jak i silnika.
Menu i nawigacja
W związku z tym, że zalety PWA widać przede wszystkim na urządzeniach mobilnych, to zarówno projekt, jak i funkcjonalności powstały w zgodzie z podejściem mobile-first.
W kontekście menu i nawigacji warto wspomnieć o tym, że:
wielopoziomowe megamenu pomieści dowolną liczbę kategorii i podkategorii, nie wywołując jednocześnie wrażenia przeładowania; ponadto jest ono wygodne do klikania na każdym urządzeniu,
główna belka daje duże możliwości customizacji - może być bardzo minimalistyczna albo uzupełniona o dodatkowe funkcje, linki czy ikony; z kolei rzadziej używane elementy można schować pod ikoną “Dodatkowe opcje” (ikona trzech kropek w prawym górnym rogu ekranu),
wyłączana belka z komunikatem znajduje się pod headerem, by uniknąć efektu “skakania” strony.
Świetną ilustracją możliwości customizacji tych elementów jest wspomniane wdrożenie sklepu KUBOTA Store, na którym widać całkowicie dedykowany header oraz menu. Tymczasem podstawowe rozwiązanie prezentuje się następująco - tu menu w wersji mobile:
A tutaj wersja desktop:
Strona główna
Co prawda strona główna coraz rzadziej stanowi istotny element ścieżki e-kupujących, jednak dla wielu marek nadal pozostaje ważnym widokiem sklepu. Dlatego bazowy homepage w naszym PWA:
łączy wizerunkowe slajdery na całą szerokość strony z elastycznymi sekcjami, umieszczonymi w kontenerze (co zapewnia dobrą kontrolę nad wyglądem i jakością grafik niezależnie od rozdzielczości),
zapewnia czytelność tekstów i CTA (call-to-action) na bannerach,
daje możliwość zarządzania układem oraz contentem bannerów i sekcji z poziomu intuicyjnego, dedykowanego CMS,
ma możliwość wgrywania dedykowanych plików dla mobile, by content wyglądał świetnie na wszystkich urządzeniach.
Poniżej przykładowe wizualizacje strony głównej:
Strona kategorii
Z kolei widok strony kategorii, zwanej listingiem, zawiera:
duże, dobrze eksponujące produkt kafelki,
w wersji podstawowej - wygodne filtry ukryte pod pływającym buttonem (możliwe są również inne rozwiązania),
możliwość umieszczenia rozbudowanego contentu, boxów z podkategoriami, zdjęć czy karuzeli produktowych na dole strony kategorii - ich edycja również jest możliwa z poziomu CMS.
Tutaj podgląd listingu:
A tutaj wizualizacja filtrowania na mobile:
Oraz desktop:
Strona produktu
Również strona produktu daje bogate możliwości customizacji np. nawigacji między niezależnymi produktami w ramach tego samego modelu. Istnieje też możliwość komunikowania promocji dla konkretnych rozmiarów czy atrybutów.
Z kolei treści produktowe mogą składać się z różnych typów contentu (tekst, zdjęcia, video czy ikony), łatwo zarządzalnych dzięki builderowi w CMS.
Tak przykładowa strona produktu prezentuje się na smartfonach:
A tak na urządzeniach desktop (tu warto wspomnieć o funkcjonalnościach sticky gallery oraz pojemnych, rozwijanych accordionach z treściami produktowymi):
Do wyboru jest również forma prezentacji wariantów - jest ona możliwa zarówno pod postacią miniaturek zdjęć, kolorów, jak i w formie tekstowych tabów. Dodatkową alternatywą jest wybór wariantu, rozmiaru czy liczby sztuk z poziomu wysuwanej szuflady (wizualizacje poniżej na niebieskim tle), co jest bardzo minimalistyczną, a zarazem elastyczną opcją:
Tak rozwiązanie wygląda na desktopie:
Koszyk
Projekt koszyka został tak przemyślany, aby zawierał wszystkie potrzebne elementy, ale przy tym nie był przeładowany i minimalizował ryzyko przypadkowych kliknięć, szczególnie na urządzeniach mobilnych. Z ciekawych rozwiązań dostępnych w standardzie znajduje się tu pasek z automatycznym wyliczaniem kwoty brakującej do darmowej dostawy:
Formularz zamówienia
Checkout został stworzony z myślą, by zapewniać jak najbardziej płynną i sprawną finalizację transakcji. Nie zawiera więc zbędnych elementów, ma zminimalizowany nagłówek oraz stopkę, a opisy pól są cały czas widoczne. Kluczowe było dla nas zadbanie również o walidacje pól, a także intuicyjne zakupy na firmę:
Moje konto
Na tym widoku bardzo dobrze widać jak mocno sklep PWA może odwzorowywać wygląd i działanie aplikacji mobilnej. Wszystkie opcje mojego konta zostały umieszczone jako wygodne zakładki:
Sklep PWA - projekt UX/UI
W warstwie funkcjonalnej (UX) sklep łączy dobre praktyki projektowania dla e-commerce z możliwościami Magento 2, niwelując przy tym jego wady i ograniczenia. Sklep zaprojektowany jest zgodnie z podejściem mobile-first, oddając wrażenie aplikacji natywnej kiedy to tylko możliwe, do czego przyczyniają się również gesty i subtelne animacje. W związku z tym, że każda branża ma swoją specyfikę np. dotyczącą wyszukiwania czy typów produktów, projekt funkcjonalny jest łatwy do przystosowania do konkretnych wymagań np. w zakresie filtrów czy wariantów produktowych.
Z kolei w warstwie graficznej (UI/GUI) podstawowy projekt jest nowoczesny i minimalistyczny, przez co za sprawą customizacji może oddać styl i charakter wielu branż - od fashion & beauty, przez elektronikę, po księgarnie czy suplementy diety.
Bazowy layout jest czysty i wypracowany na bazie przemyślanego, oszczędnego styleguide’a, co zmniejsza koszty projektowania i ułatwia zachowanie spójności wraz z rozwojem serwisu. Customizacji mogą podlegać różne jego elementy - fonty, kolorystyka, układ elementów czy ikonografia, nadając sklepowi unikalny charakter. Z kolei treści reklamowe, produktowe i statyczne można w łatwy sposób dodawać i modyfikować w intuicyjnym CMS - bez potrzeby każdorazowego developmentu.
Sklep PWA - backend
Dostępne na rynku rozwiązania PWA z reguły potrzebują osobnego backendowego silnika dla e-commerce, by stać się funkcjonalnym i pełnowartościowym sklepem internetowym. Nasze rozwiązanie zostało pomyślane tak, by wspierać zarówno platformę Magento 2, jak i stanowić jeden z klocków bardziej rozbudowanej, dedykowanej infrastruktury.
W pierwszym, najbardziej podstawowym, scenariuszu sklep składa się z:
warstwy PWA - opisanej wyżej,
niezależnego backendu dedykowanego PWA - który jest pośrednikiem między frontem a Magento - takie rozwiązanie odciąża wydajnościowo Magento, ale umożliwia korzystanie z jego rozbudowanych funkcjonalności,
platformy Magento 2.
W tym scenariuszu możemy postawić warstwę PWA na już istniejącym sklepie Magento, co znacznie ogranicza czas i koszty wdrożenia w porównaniu do wdrożenia aplikacji PWA lub natywnej od zera. Jest to więc idealne rozwiązanie dla firm, które chcą podchodzić do rozwoju serwisu ewolucyjnie, a nie rewolucyjnie. Stanowi on ponadto zalążek zaawansowanych i nowoczesnych rozwiązań z kategorii headless / composable commerce.
W przypadku stawiania tego wariantu od podstaw plusem jest również fakt, że możemy wdrożyć je całościowo (all-in-one), bez angażowania dodatkowych podmiotów, co zmniejsza koszty i ryzyka związane z integracjami. Może to być również ścieżka awaryjna dla firm, które mają niepoprawnie wdrożone Magento, a co z tym idzie - posiadają narastający dług technologiczny.
W drugim, pośrednim, scenariuszu sklep może składać się z:
warstwy PWA,
niezależnego backendu w architekturze mikroserwisowej, w której dzięki standardowi API Rest, możemy łączyć ze sobą wiele naszych oraz zewnętrznych klocków, jak np. wspomniany dedykowany CMS oraz PIM, Checkout, QMS czy integrator zamówień,
platformy Magento 2.
Jest to bardziej rozbudowane rozwiązanie, umożliwiające zaawansowane i wydajne synchronizacje, zarządzanie wielokanałowością czy stanami magazynowymi, a także eksport/import zamówień czy statusów z innych systemów. Przykładowo CMS daje możliwość zarządzania rich contentem dla kategorii czy produktów, a także tworzenie niezależnych stron statycznych, na bazie np. poniższych komponentów:
W trzecim, najbardziej zaawansowanym, scenariuszu sklep może składać się z warstwy PWA wraz z zaawansowanym mikroserwisowym backendem, bez silnika Magento 2. Jest to oczywiście wariant dla większych firm, z dużym zrozumieniem technologii. Umożliwia on właściwie nieograniczone skalowanie, customizacje i zwiększanie wydajności platformy e-commerce.
Sklep PWA - inne aspekty
W kontekście naszego rozwiązania PWA, warto wspomnieć o kilku dodatkowych, kluczowych aspektach.
Już w bazowym pakiecie zapewniamy integrację z Google Analytics w standardzie GA4 oraz tzw. datalayers, które pozwolą łatwo podpinać zewnętrzne aplikacje przez Google Tag Managera i wychwytywać istotne dane. Sklep zawiera również konfigurowalną wyszukiwarkę, pozwalającą na samodzielne wskazywanie, które atrybuty mają brać udział w algorytmie wyszukiwania.
Kolejnym atutem jest wsparcie działań SEO przez rozbudowanie znaczników schema.org dla stron produktów i kategorii. Wreszcie zastosowaliśmy wiele usprawnień na poziomie kodu, by zoptymalizować szybkość działania strony. Wśród nich warto wymienić m.in.: brak stosowania bibliotek typu jQuery, preload i konwertowanie zdjęć do różnych rozdzielczości, lekkie animacje, brak efektu “skakania” contentu czy lazy hydration.
Czy Twój sklep jest gotowy na PWA?
Zaprezentowane PWA oraz podejście do architektury wdrożeń to efekt naszego wieloletniego doświadczenia w tworzeniu sklepów internetowych, aplikacji mobilnych oraz mikroserwisów i integracji, dla różnych gałęzi e-commerce.
Jeśli szukasz partnera, który potrafi dobrać rozwiązanie adekwatne do potrzeb, wykorzystać możliwości PWA, zna się na Magento (ale nie ogranicza się do tej technologii!), rozumie procesy e-commerce oraz zapewnia DevOps na wysokim poziomie - zapraszamy do kontaktu. Chętnie zaprezentujemy rozwiązania, odpowiemy na pytania oraz przygotujemy dedykowaną ofertę.
