Knowband Blog | Ecommerce Modules

PrestaShop Progressive Web App (PWA) – Instrukcja obsługi


1.0 Wprowadzenie

Szybki rozwój branży mCommerce doprowadził do pilnej potrzeby posiadania aplikacji mobilnej eCommerce. Ale tworzenie aplikacji mobilnych wymaga dużo kodowania i innych szczegółów technicznych. Dlaczego zamiast tego nie zmienić swojej witryny internetowej w aplikację internetową? Oferowanie zoptymalizowanej aplikacji PrestaShop PWA, tj. zwiększyłoby wygodę zakupów mobilnych dla użytkowników. Ten moduł PrestaShop PWA App został zaprojektowany i zbudowany, aby przekształcić Twój sklep w aplikację internetową, którą można zarządzać z przyjaznego panelu zaplecza. Te aplikacje oferują różne rozszerzone funkcje niż aplikacje natywne, takie jak tryb offline i niezależność od platformy, co czyni je bezproblemowym i bezproblemowym rozwiązaniem zakupowym dla użytkowników.

1.1 Wyświetl aplikację demonstracyjną:

Przed zakupem rozszerzenia zobacz działanie aplikacji demonstracyjnej, otwierając adres URL aplikacji demonstracyjnej PrestaShop PWA w przeglądarce.

Adres URL sklepu demonstracyjnego: https://psm.knowband.com/pwa/admin1
URL aplikacji PWA: https://psm.knowband.com/pwa/pwa-app/

1.2 Główne cechy progresywnej aplikacji internetowej PrestaShop (PWA):

[IMP] Uwagi dla iOS:

–> Urządzenia z systemem iOS nie oferują wbudowanego monitu „Dodaj do ekranu głównego”, więc użytkownicy muszą ręcznie dodać aplikację mobilną PWA do ekranu głównego iPhone’a lub iPada. –> iOS nie obsługuje powiadomień web push, stąd powiadomienia push można wysyłać tylko na urządzenie z systemem Android z panelu administracyjnego PrestaShop PWA Mobile App Builder.

[NOWA AKTUALIZACJA] PrestaShop PWA obsługuje skrypty językowe RTL

Kreator aplikacji mobilnych PrestaShop PWA obsługuje teraz wszystkie języki na całym świecie, w tym języki RTL (od prawej do lewej), takie jak arabski, hebrajski, perski itp. Administrator sklepu może umieścić wszystkie języki swojego sklepu w progresywnej aplikacji internetowej, a nawet dodać dowolne języki RTL zgodnie z wymaganiami. Z drugiej strony klienci mobilni nie będą mieli problemu z dostępem do aplikacji mobilnej PrestaShop PWA w preferowanym przez siebie języku.

Kompatybilny z rynkiem wielu dostawców PrestaShop

Projekt Rynek wielu dostawców PrestaShop moduł jest w pełni kompatybilny z PrestaShop PWA Mobile App. Progresywna aplikacja internetowa wyświetla sekcję sprzedawcy ze wszystkimi sprzedawcami z rynku w tej samej aplikacji. Dane sprzedawcy pozostają zsynchronizowane w czasie rzeczywistym z siecią marketplace i będą automatycznie aktualizowane w aplikacji PrestaShop PWA.

Uwaga: Aplikacja mobilna PWA od wielu dostawców dla PrestaShop jest zorientowana wyłącznie na klienta. Oznacza to, że nie będzie żadnego pulpitu nawigacyjnego sprzedawcy ani zarządzania z poziomu aplikacji. Administrator sklepu może zarządzać sprzedawcami z modułu PrestaShop Marketplace, a to samo zostanie natychmiast zaktualizowane w aplikacji.

2.0 Ekrany panelu administracyjnego

Aplikację mobilną PrestaShop PWA można w pełni skonfigurować za pomocą tych przydatnych kart i ustawień administratora. Wszystko, co musisz zrobić, to wykonać niezbędne kliknięcia i przełączyć przyciski, aby wprowadzić zmiany w progresywnej aplikacji internetowej. Omówmy szczegółowo każdy z nich:

Ustawienia ogólne 2.1

Jak sama nazwa wskazuje, te ogólne ustawienia konfiguracyjne dotyczą wszelkiego rodzaju regularnych zmian w progresywnych aplikacjach internetowych (PWA). Opcje w tej zakładce sprawiają, że aplikacja działa na urządzeniach kupujących online.

a) Włącz wtyczkę:�Włącz moduł PrestaShop PWA, aby aplikacja działała na urządzeniach mobilnych.
b) Przekieruj na stronę koszyka po dodaniu do koszyka:�Ta funkcja pozwala administratorowi kontrolować przekierowanie przycisku „Dodaj do koszyka”. Użytkowników można przekierować do koszyka lub zatrzymać na ekranie produktu, klikając „Dodaj do koszyka”.
c) Krótki opis wyświetlacza:�Włącz wyświetlanie krótkiego opisu produktu na ekranie produktu w Progressive Web App (PWA).
d) Włącz logo: Dodaj logo swojego sklepu w nagłówku Progressive Web App (PWA) i zaprezentuj swoją markę użytkownikom.

e) Kolor tła ekranu powitalnego: Wybierz odpowiednią opcję koloru tła ekranu powitalnego Progressive Web App (PWA).
f) Nazwa aplikacji PWA: Wybierz nazwę swojej aplikacji PWA zgodnie z własnym wyborem.
g) Wybierz układ:Wybierz żądany układ strony głównej dla swojej aplikacji PrestaShop. Możesz tworzyć wiele układów ekranu głównego w zapleczu zgodnie z różnymi festiwalami i motywami i używać ich zgodnie z wymaganiami sklepu.
h) Wyłączone metody wysyłki:�Wyłącz metody wysyłki z pracy w�Progressive Web App (PWA)�w zależności od tego, co Ci się nie podoba. Na stronie będą działać zwykle dobrze.
i) Włączone strony CMS:Wybierz żądane strony CMS, które mają być wyświetlane w aplikacji PrestaShop PWA.
j) Włącz raportowanie dziennika żądań:�Włącz opcję udostępniania pliku dziennika w progresywnych aplikacjach internetowych, aby uzyskać szczegółowe informacje o wszelkich nietypowych zachowaniach aplikacji.
k) Włącz kodowanie adresów URL linków graficznych:Włącz tę funkcję, aby obsługiwać znaki spoza zestawu ASCII w progresywnej aplikacji internetowej (PWA).

2.2 Ustawienia powiadomień push

Powiadomienia push to przydatne narzędzie do wprowadzania na rynek i promowania produktów, ofert i ofert sprzedaży w Twoim sklepie. Ustawienia w tej zakładce pozwalają użytkownikom konfigurować i wysyłać nieograniczoną liczbę powiadomień push w aplikacji PrestaShop PWA.

Różne szczegóły tych ustawień zostaną uzyskane podczas konfigurowania konta Firebase. Oto krok po kroku, jak to zrobić:

2.21 Jak skonfigurować konto Firebase?

Krok 1:�Zaloguj się do Google Firebase


Krok 2: Utwórz nowy projekt Po kliknięciu przycisku Dodaj projekt pojawi się następujące okno dialogowe:


Utworzenie projektu zajmie kilka sekund. Gdy projekt będzie gotowy, kliknij�kontynuuj.


Krok 3: Zarządzaj ustawieniami projektu Po utworzeniu projektu kliknij Ustawienia projektu.


Krok 4: Przejdź do opcji uwierzytelniania:

Krok 5: Znajdź klucze Firebase W ustawieniach projektu kliknij Ustawienia wiadomości w chmurze. Stąd możesz bezpośrednio uzyskać klucz serwera.


Krok 6:
Dodaj swoją aplikację internetową do Firebase

Krok 7: Pobierz inne szczegóły związane z Firebase i wklej je w panelu administracyjnym modułu PWA.

Krok 8: Uzyskaj klucz serwera Firebase z karty wiadomości w chmurze w Ustawieniach:

Krok 9: Dodaj swoją domenę w uwierzytelnianiu>>zaloguj się.

A) Powiadomienie push o pomyślnym zamówieniu:

Włącz/wyłącz automatyczne powiadomienia push wysyłane do użytkowników aplikacji w celu pomyślnego tworzenia zamówień z aplikacji PrestaShop PWA.

B) Powiadomienie push o aktualizacji statusu zamówienia:

Włącz/wyłącz automatyczne powiadomienia push wysyłane do użytkowników aplikacji w przypadku jakichkolwiek aktualizacji dotyczących ich poprzedniego statusu dostawy zamówienia. Użytkownicy mogą zobaczyć ten status w zakładce „Szczegóły zamówienia” aplikacji PWA

C) Powiadomienie push o porzuconym koszyku:

Włącz/wyłącz automatyczne powiadomienia push wysyłane do użytkowników, którzy porzucili koszyk bez udanego zakupu. To powiadomienie push zostanie wysłane do użytkowników automatycznie po wprowadzonym przedziale czasowym.

2.2 Historia powiadomień push

Tutaj administrator sklepu może wyświetlić pełną historię powiadomień push wysyłanych do Progressive Web App (PWA). Oprócz tego administrator sklepu może nawet spersonalizować ręczne powiadomienie i wysłać je do użytkowników Progressive Web App.

A) Wyślij powiadomienie:

Co lepiej projektować i wysyłać powiadomienia push zgodnie z potrzebami? Ta opcja pozwala właścicielom sklepów ręcznie skonfigurować i wysłać niestandardowe powiadomienie do użytkowników aplikacji PrestaShop PWA.


Układ strony głównej 2.3

Moduł PrestaShop PWA pozwala administratorowi sklepu ominąć ograniczenia związane z posiadaniem stałego interfejsu użytkownika na ekranie głównym i zaprojektować taki, który odpowiada ich potrzebom biznesowym. Ta zakładka umożliwia administratorowi sklepu tworzenie i zapisywanie wielu układów oraz używanie ich zgodnie z bieżącymi okazjami i festiwalami.


W celu skonfigurowania układów strony głównej aplikacji PWA w back-endzie dostępne są następujące elementy:

A) Najważniejsze kategorie:

Najważniejsze kategorie są wyświetlane w postaci małych kwadratów na ekranie głównym Progressive WebApp (PWA). Ich obrazy i linki przekierowujące można skonfigurować tutaj. Te kategorie mogą służyć do wyróżniania najlepszych marek na ekranie głównym aplikacji. Moduł PrestaShop PWA dopuszcza maksymalnie 8 kategorii, w których minimum 4 są obowiązkowe.

B) Kwadrat� Baner:

Lista banerów kwadratowych na ekranie głównym aplikacji Progressive Web App (PWA) oferuje blok banerowy w kształcie kwadratu, w którym administrator sklepu może użyć żądanego obrazu. W przypadku tych banerów można użyć odpowiedniego linku przekierowującego.


C) Poziomy, przesuwny, baner:

Są to bloki banerowe w kształcie prostokąta, które można przesuwać poziomo na ekranie głównym aplikacji PrestaShop PWA. Również w tym celu można w pełni konfigurować łącze do obrazu i przekierowania.

D) Siatka Banery:

Są to banery w kształcie kwadratu wymienione na ekranie głównym Progressive Web App (PWA) w formie widoku siatki. Administrator sklepu może dodać dowolną liczbę banerów i ustawić ich link do przekierowania.


E) Odliczanie�Baner czasu:

Moduł PWA PrestaShop pozwala administratorowi sklepu skonfigurować i dodać baner oparty na zegarze na ekranie głównym aplikacji internetowej. Administrator sklepu może dodać obraz banera i ekran docelowy wraz z zegarem, aż baner zostanie wyświetlony na ekranie głównym progresywnej aplikacji internetowej. Po upływie czasu baner zostanie automatycznie usunięty.


F) Kwadratowe produkty:

Od banerów, aplikacje mobilne PrestaShop PWA umożliwiają prezentację produktów w formie kwadratowych bloków. Administrator może wybrać produkty dla tego elementu.


G) Poziome produkty przesuwne:

Produkty można dodawać w formie przesuwnej poziomej. Wybrane produkty mogą być wybrane przez administratora sklepu, takie jak nowości, bestsellery, produkty niestandardowe itp.


H) Produkty sieciowe:

Produkty można również dodawać na ekranie głównym w postaci listy bloków widoku siatki. Administrator sklepu może wybrać żądane produkty i ilość do wyświetlenia na ekranie głównym aplikacji PrestaShop PWA.


I) Ostatnio używane produkty:

Moduł PrestaShop Mobile PWA umożliwia właścicielowi sklepu dodanie ostatniego elementu karty na ekranie głównym aplikacji internetowej. Wyświetli wszystkie produkty, które ostatnio przeglądali użytkownicy.

Uwaga: Administrator sklepu może dodać do 20 elementów podczas projektowania układu w panelu zaplecza.

2.4 Jak uzyskać szczegółowe informacje o aplikacji Facebook?

Aplikację Facebook można utworzyć, wykonując poniższe czynności:-

Krok 1:�Idź do danego�URL: https://developers.facebook.com/apps/

Krok 2:�Kliknij przycisk „Dodaj nową aplikację”.

Krok 3 i 4:Wprowadź nazwę swojej aplikacji i identyfikator e-mail, a następnie kliknij przycisk „Utwórz identyfikator aplikacji”.

Krok 5 i 6:�Po kliknięciu Create App ID będziesz musiał� przejść kontrolę bezpieczeństwa, jak pokazano:

Krok 7:�Kliknij na zakładkę „Ustawienia”.

Krok 8-13:�Dwie opcje będą dostępne na liście rozwijanej, Podstawowe i Zaawansowane, kliknij „Podstawowe”. Następnie wprowadź swoją „Domenę aplikacji”,�„Kontaktowy adres e-mail”, „Prywatność�URL”, „Zasady i warunki�URL”, „Dodaj logo”, „Wybierz kategorię” i kliknij przycisk „Zapisz zmiany”. Domeny aplikacji: twojadomena.com jest�poprawna twojadomena.com/store jest�nieprawidłowa www.domena.com jest�nieprawidłowa

Krok 14:�Teraz kliknij „+Dodaj platformę”.


Krok 15:�
I wybierz Witrynę jako Platformę.

Krok 16:�Teraz wprowadź adres URL swojej witryny.


Krok 17 i 18:�Kliknij „Produkty+” i wybierz login Facebook.


Krok 19:�Wybierz sieć jako platformę aplikacji.

Krok 20:�Teraz kliknij Zapisz.


Krok 21 i 22:�Kliknij Ustawienia i dodaj prawidłowe identyfikatory URI przekierowania OAuth. Prawidłowe identyfikatory URI przekierowania OAuth: https://example.com/pwa-app/login

Krok 23 i 24:�Kliknij „Przegląd aplikacji”. I zaznacz „Ustaw „Nazwę swojej aplikacji” jako publiczną” na Tak.


Ostatni krok:�Skopiuj identyfikator aplikacji i klucz tajny aplikacji i wklej je w pola w module.

2.5 Jak uzyskać szczegółowe informacje o aplikacji Google?

Typ aplikacji: Aplikacja internetowa.
Autoryzowane źródła JavaScript: Nazwa domeny Twojego sklepu (https://www.yourstore.com).
Autoryzowany identyfikator URI przekierowania lub URI strony przekierowania Loginizera:
https://example.com/pwa-app/login

3.0 Ekrany aplikacji Front End PWA:

Ekran główny 3.1

1. Układ dynamiczny:

Korzystając z różnych elementów projektowych, administrator sklepu może stworzyć dynamiczny układ zgodnie z potrzebami.

2. Logo sklepu:

Dodaj logo sklepu w nagłówku „Progressive Web”App (PWA).

3. Koszyk:

Ikona koszyka na zakupy w prawym górnym rogu ekranu głównego pozwala użytkownikom przełączać się na ekranie koszyka.

4. Menu nawigacji:
Przeglądaj kategorie w aplikacjach z lewym menu nawigacyjnym na ekranie głównym.

3.2 Menu Akordeon (Pasek Nawigacyjny)

Aplikacja „Progressive web app” wymyśla odpowiednią kategoryzację produktów zgodnie z dostępnymi na stronie internetowej. Klienci mobilni mogą łatwo przeglądać produkty z wielu kategorii. Wszystkie strony CMS są również dostępne w menu Accordion. Zapewnia następujące opcje:

1. Moje konto:
Opcja Moje konto zawiera wszystkie informacje osobiste, wysyłkowe, dotyczące zamówienia. Kupujący aplikacji PWA mogą przeglądać wszystkie powiązane z nimi przechowywane dane i mogą je również aktualizować.

2. Kategorie
Kategorie wyświetlane w lewym menu nawigacyjnym aplikacji „Progressive Web” (PWA) są takie same jak na Twojej stronie.

3. Strony CMS:
Różne strony CMS, takie jak O nas, Kontakt z nami, Regulamin itp. Można uzyskać dostęp tutaj.

4. Język(i)
Opcja języka umożliwia użytkownikom aplikacji PWA przeglądanie aplikacji internetowej w żądanym języku. Wszystkie dostępne języki są wyświetlane tylko w tej opcji.

5. Waluta(e)
Wszystkie dostępne waluty na Twojej stronie są wyświetlane tutaj w aplikacji PrestaShop PWA.

6. Zaloguj się/Wyloguj
Dzięki tej opcji użytkownicy mogą łatwo zalogować się/wylogować się z aplikacji PrestaShop Progressive Web App.

3.3 Ekran kategorii:

1. Wiele widoków:
Kategorie w Progressive Web App (PWA) dla PrestaShop można przeglądać zarówno w widoku listy, jak i siatki.

2. Sortowanie:
Ta opcja pozwala kupującym online wybrać kolejność sortowania w celu zawężenia wyszukiwania i łatwego uzyskania pożądanego produktu.

3. Filtr:
Opcja filtrowania produktów upraszcza wyszukiwanie produktów. Użytkownicy mogą filtrować wszystkie produkty w kategoriach za pomocą różnych atrybutów, takich jak rozmiar, kolor, cena itp.

3.4 Ekran produktu:

Ekran produktu Twojej Progressive Web App (PWA) jest prosty i intrygujący. Wyświetlanych jest wiele zdjęć tego samego produktu wraz z nazwą i ceną. Dostępność produktu jest również wyświetlana jako „W magazynie” lub „Brak w magazynie” na podstawie stan inwentarza. Zawiera następujące inne opcje:

1. Informacje o produkcie i pielęgnacja
Tutaj zostaną wyświetlone pełne informacje o produkcie dostępne w ekwipunku.

2. Krótki opis
Użytkownicy mogą zapoznać się z krótkim opisem Twojego produktu, aby szybko podjąć decyzję o zakupie.

3. Opcje produktu:
Tutaj wyświetlane są wszystkie opcje związane z produktem, takie jak rozmiar, kolor itp.

5. Dodaj do koszyka:
Ten przycisk pozwala użytkownikom dodać produkt do koszyka. Użytkownicy mogą dalej przetwarzać koszyk do zakupu.

6. Udostępnianie społecznościowe produktu:
Opcja udostępniania produktu umożliwia użytkownikom udostępnianie produktu w wielu kanałach społecznościowych.

Ekran logowania 3.5

Progresywna aplikacja internetowa (PWA)�Oferuje różne opcje logowania jednym dotknięciem i ułatwia proces logowania/rejestracji:

1. Zaloguj Się
Użytkownicy aplikacji mogą łatwo uwierzytelniać się i logować do aplikacji PWA przy użyciu swoich poprzednich danych logowania e-mail.

2. Zapisz się
Wszyscy nowi użytkownicy aplikacji mogą zarejestrować się i utworzyć swoje konto w sklepie z aplikacji PrestaShop PWA. Formularz rejestracyjny prosi o podanie tylko danych niezbędnych do utworzenia konta.

3. Zaloguj się przez facebook
Użytkownicy mogą logować się do aplikacji PWA za pomocą swoich danych logowania do konta na Facebooku.

4. Zaloguj się przez Google+
Użytkownicy mogą logować się do aplikacji Progressive Web (PWA) za pomocą swoich danych logowania do konta Google.

3.6 Ekran koszyka:

Ekran Koszyk Twojej Progresywnej aplikacji internetowej wyświetli wszystkie produkty dodane do koszyka. Użytkownicy aplikacji mogą wyświetlić nazwę produktu, ilość, łączna cena i koszt wysyłki. Na tym ekranie dostępne są następujące opcje:

1. Zastosuj kupon
Ta opcja umożliwia użytkownikom korzystanie z kuponów na stronie i zbieranie ofert rabatowych.

2. Całkowita cena produktu
Użytkownicy mogą zobaczyć pełny koszt swojej torby na zakupy, zanim przejdą dalej. Jest automatycznie aktualizowany zgodnie z każdą aktualizacją o ilość produktu lub nowy dodatek.

3. Zaktualizuj ilość produktu
Użytkownicy aplikacji PWA mogą nawet aktualizować ilość produktu za pomocą opcji „Aktualizuj ilość”.

4. Usuń produkt
Użytkownicy aplikacji mogą po prostu usunąć produkt z koszyka, klikając opcję „Usuń”.

5. Kontynuuj zakupy
Użytkownicy mogą opuścić koszyk, aby przeglądać więcej produktów w Twojej progresywnej aplikacji internetowej.

6. Przejdź do kasy
Użytkownicy aplikacji PWA mogą przejść dalej do ekranów kasy i płatności, klikając opcję „Przejdź do kasy”.

Ekran kasowania 3.7

Progresywne aplikacje internetowe z modułem PrestaShop.Progressive Web App(PWA) mają uproszczony kasa na jednym ekranie z tylko istotnymi informacjami. Użytkownicy mogą przeglądać pełne szczegóły kasy, takie jak szczegóły wysyłki, dane rozliczeniowe, podsumowanie zamówienia, komentarz do zamówienia, podsumowanie płatności.

1. Szczegóły dotyczące wysyłki i rozliczeń
Ten ekran zawiera szczegółowe informacje o adresach wysyłkowych i rozliczeniowych zapisanych przez użytkownika. W razie potrzeby użytkownik może również edytować/zapisywać nowy adres wysyłki.

2. Podsumowanie zamówienia
Użytkownicy progresywnej aplikacji internetowej mogą przeglądać szczegóły produktu przed dokonaniem płatności.

3. Metody wysyłki
Wszystkie dostępne metody wysyłki są wyświetlane tutaj. Użytkownicy mogą wybrać ten, który odpowiada ich potrzebom.

4. Komentarz do zamówienia
Użytkownicy mogą również dodać dowolny komentarz związany z ich zamówieniem, który będzie widoczny dla administratora sklepu na stronie zamówienia w zapleczu.

6. Podsumowanie płatności
Ta sekcja wyświetla pełne szczegóły płatności za awarię związane z zakupem.

7. Przejdź do płatności
Użytkownicy aplikacji Progressive Web App (PWA) zostaną przekierowani do ekranu Płatności po dotknięciu przycisku „Przejdź do płatności”.

3.8 Ekran płatności:

Ekran płatności PrestaShop�PWA App zawiera wszystkie dostępne w sklepie płatności web-view. Kupujący online mogą znaleźć podobne możliwości płatności zarówno w witrynie internetowej, jak i w progresywnych aplikacjach internetowych.

3.9 Ekran Mojego Konta

Ekran mojego konta w PrestaShop Progressive Web App (PWA) pozwala użytkownikom przeglądać pełne dane zapisane w aplikacji, w tym listę poprzednich zamówień.

3.10 Ekran szczegółów zamówienia

Ekran szczegółów zamówienia PrestaShop Progressive Web App zawiera pełne szczegóły konkretnego zamówienia z aplikacji PWA. Użytkownicy mogą łatwo przeglądać adres wysyłki, podsumowanie produktu, metodę wysyłki i płatności, podsumowanie całkowitych kosztów itp. Istnieje nawet opcja śledzenia statusu zamówienia i jego dostawy.