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 internetowych 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 dedykowanych 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 internetowy w oparciu o dedykowaną 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 internetowy 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. Dedykowane 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 dedykowanych sklepów internetowych 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 – dedykowany sklep internetowy 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 dedykowanePWA, zarówno od strony frontu, jak i silnika.

Menu i nawigacja

W związku z tym, że zalety dedykowanego sklepu internetowego 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),

Świetną ilustracją możliwości customizacji tych elementów jest wspomniane wdrożenie sklepu internetowegoCumulus, dedykowanego PWA na którym widać całkowicie dedykowany header oraz menu, a także inne elementy.

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 internetowego. 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.

Strona kategorii

Z kolei widok strony kategorii na dedykowanym sklepie internetowym PWA, 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.

Strona produktu

Również strona produktu daje bogate możliwości customizacji np. nawigacji między niezależnymi produktami w ramach tego samego modelu, lub też jego konfiguracji w specjalnym, dedykowanym konfiguratorze.

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. Warto wspomnieć o funkcjonalnościach galerii z powiększeniem oraz pojemnych, rozwijanych accordionach z treściami produktowymi.

Dedykowany sklep internetowy PWA ma do wyboru również formę prezentacji wariantów - jest ona możliwa zarówno pod postacią miniaturek zdjęć, kolorów, jak i w formie tekstowych tabów.

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 dedykowanego sklepu internetowego PWA może znajdować 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 dedykowany sklep internetowy 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) dedykowany sklep internetowy PWA łą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, dedykowany projekt 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 dedykowanego sklepu internetowego PWA 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 elementy PWA - 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 dedykowanym 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 dedykowane 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 dedykowane 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 dedykowanego 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 internetowy zawiera również konfigurowalną wyszukiwarkę, pozwalającą na samodzielne wskazywanie, które atrybuty mają brać udział w algorytmie wyszukiwania.

Kolejnym atutem dedykowanego sklepu internetowego PWA 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 dedykowane 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 dedykowanego sklepu internetowego 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ę.