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ą:

home-screen

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):

  • Konfigurowalny interfejs ekranu głównego (edytor DIY)
  • Nieograniczone powiadomienia push (powiadomienia ręczne i automatyczne)
  • Obsługa czatu Zopim i WhatsApp
  • Obsługa wszystkich metod płatności i wysyłki
  • Synchronizacja w czasie rzeczywistym
  • Automatyczna aktualizacja zapasów
  • Lekka aplikacja z szybszym ładowaniem
  • Obsługa wielu języków i RTL
  • Opcje logowania e-mail i społecznościowego (Google i Facebook)
  • Intuicyjny interfejs z nawigacją warstwową
  • Brak zależności od Google Play lub Apple App Store
  • Kompletne rozwiązanie White Label
  • Dostępność w trybie offline
  • Uproszczona jednostronicowa kasa
  • Kontrola stron CMS (stron informacyjnych)
  • Zaprezentuj produkty powiązane
  • Wyświetl opinie użytkowników
  • Wbudowana funkcjonalność listy życzeń
  • Wsparcie kuponów / kuponów
  • Obsługa wielu walut

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

ustawienia-ogólne-1

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.

ustawienia-ogólne-2

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

ustawienia-push-powiadomień

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.

push-powiadomienia-1

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

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

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

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

ustawienia projektu
Krok 4: Przejdź do opcji uwierzytelniania:
opcje uwierzytelniania

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

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

web-aplikacja-do-firebase

web-aplikacja-do-firebase

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

firebase-szczegóły

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

klawisz firebase

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

klucz-serwera-firebase

klawisze firebase

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.

powiadomienia push

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

powiadomienia push

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.

powiadomienia push

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.

historia-push-powiadomień

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.

historia-push-powiadomień
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.

układ-strony-głównej
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.

najlepsze kategorie

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.

kwadrat-baner
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.

przesuwne-banery

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.

siatka-banery
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.

baner odliczający czas
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.

produkty-kwadrat
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.

produkty-przesuwne
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.

produkty-siatki
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ę”.

dodaj-nowa-aplikacja

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

utwórz identyfikator-aplikacji

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

utwórz identyfikator-aplikacji

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

ustawienie aplikacji fb

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

identyfikator-aplikacji fb

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

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

wybierz platformę

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

enter-strony-url
Krok 17 i 18:�Kliknij „Produkty+” i wybierz login Facebook.

Nazwa użytkownika Facebook
Krok 19:�Wybierz sieć jako platformę aplikacji.

wybierz platformę

Krok 20:�Teraz kliknij Zapisz.

facebook app ID
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

przekierowanie-URL

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

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

ostatni krok

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

  • Przejdź do Google Developers Console (https://console.developers.google.com/project) lub kliknij link znajdujący się w prawym górnym rogu odpowiedniej zakładki na stronie konfiguracji modułu.
  • Teraz kliknij Utwórz projekt po lewej stronie.
  • Wpisz nazwę swojego projektu i przejdź do następnego kroku.
  • Teraz kliknij APIs and auth-> Credentials z lewego menu, jak pokazano poniżej.

identyfikator-aplikacji-google

  • Kliknij przycisk Utwórz nowy identyfikator klienta z prawego panelu ekranu.
  • Przed kontynuowaniem może być konieczne wypełnienie formularza na ekranie zgody. Aby to zrobić, musisz kliknąć Ekran zgody w lewym menu, jak pokazano na powyższym obrazku.
  • Wypełnij wyskakujący formularz, podając poniższe dane:

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

identyfikator-aplikacji-google

  • Teraz kliknij przycisk Utwórz identyfikator klienta, aby uzyskać identyfikator klienta i tajny klucz klienta.
  • Teraz możesz użyć klucza klienta i identyfikatora klienta, aby umożliwić klientom logowanie się do Twojego sklepu przy użyciu ich konta Google.

3.0 Ekrany aplikacji Front End PWA:

Ekran główny 3.1home-screen

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:

akordeon-menu-pasek nawigacyjny

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:kategoria-ekran

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 ekran produktustan 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)�ekran logowaniaOferuje 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, ekran-koszyka na zakupyilość, łą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 ekran kasykasa 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.

ekran płatności

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ń.ekran-moje-konto

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.

ekran-szczegółowy-zamówienia

Joe Parker

We boast of the best in the industry plugins for eCommerce systems and has years of experience working with eCommerce websites. We provide best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify . We also provide custom module development and customization services for the website and modules..

Leave a Reply

Your email address will not be published. Required fields are marked *