PrestaShop PWA Mobile App – User Manual


1.0 Wprowadzenie

Szybki rozwój branży mCommerce doprowadził do konieczności posiadania aplikacji mobilnej eCommerce. Ale tworzenie aplikacji mobilnych wymaga dużo kodowania i innych aspektów technicznych. Dlaczego zamiast tego nie zamienić swojej witryny internetowej w aplikację internetową? Oferowanie zoptymalizowanej aplikacji PrestaShop PWA, tj. Poprawiłoby użytkownikom mobilne zakupy. Ten moduł aplikacji PrestaShop PWA został zaprojektowany i zbudowany w celu przekształcenia Twojego sklepu w aplikację internetową, którą można zarządzać z przyjaznego panelu zaplecza. Te aplikacje oferują wiele rozszerzonych funkcji niż aplikacje natywne, takie jak tryb offline i niezależność od platformy, co czyni je łatwym i bezproblemowym rozwiązaniem dla użytkowników.

1.1 Zobacz aplikację demonstracyjną:

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

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

2.0 Admin Panel Screens

Aplikację mobilną PrestaShop PWA można w pełni skonfigurować za pomocą tych przydatnych kart i ustawień administracyjnych. Wszystko, co musisz zrobić, to wykonać kilka niezbędnych kliknięć i przełączników przycisków, aby wprowadzić zmiany w Progressive Web App. Omówmy szczegółowo każdy z nich:

Ustawienia ogólne 2.1

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

ustawienia ogólne-1

a) Włącz wtyczkę:?Enable the PrestaShop PWA module to make the app work on mobile devices.
b) Przekieruj na stronę koszyka po dodaniu do koszykaTa funkcja pozwala administratorowi kontrolować przekierowanie przycisku „Dodaj do koszyka”. Użytkownicy mogą zostać przekierowani do koszyka lub przytrzymani na ekranie produktu po dotknięciu „Dodaj do koszyka”.
c) Wyświetl krótki opis:?Enable to display short product description on the product screen of Progressive Web App.
d) Włącz logo: Dodaj logo swojego sklepu w nagłówku aplikacji 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 aplikacji PWA.
f) Nazwa aplikacji PWA: Wybierz nazwę swojej aplikacji PWA zgodnie z własnym wyborem.
g) Wybierz układ:?Choose the desired Home Page Layout for your PrestaShop app. You can create multiple home screen layouts in the backend as per various festivals & themes & use them as per your store requirement.
h) Metody wysyłki osób niepełnosprawnych:?Disable shipping methods from working in PWA app whichever you don’t feel right. On website they will work usually fine.
i) Włączone strony CMS:?Choose desired CMS pages to be displayed on the PrestaShop PWA app.
j) Włącz raportowanie dzienników żądań:?Enable option to share log file on the progressive web apps in order to get details of any sort of abnormal behavior from app.
k) Włącz kodowanie adresów URL linków obrazkowych:?Enable this functionality to support Non-ASCII characters on the Progressive web app.

Ustawienia powiadomień Push 2.2

Powiadomienia wypychane są przydatnym narzędziem do promowania i promowania produktów w sklepie, ofert i ofert sprzedaży. Ustawienia w tej zakładce pozwalają użytkownikom konfigurować i wysyłać nieograniczoną liczbę powiadomień push w aplikacji PrestaShop PWA.

powiadomienia push-1

Różne szczegóły w ramach tych ustawień zostaną uzyskane po założeniu konta Firebase. Oto proces krok po kroku:

2.21 Jak założyć konto Firebase?

Krok 1:?Login Google Firebase

projekt bazy ogniowej
Krok 2: Utwórz nowy projekt Po kliknięciu

create-project
Stworzenie projektu zajmie kilka sekund. Gdy projekt będzie gotowy, kliknij

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

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.

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

web-app-to-firebase

web-app-to-firebase

Krok 7: Uzyskaj inne szczegóły związane z bazą ogniową i wklej to samo w panelu administracyjnym modułu PWA.

szczegóły bazy ogniowej

Krok 8: Pobierz klucz serwera firebase z karty wiadomości w chmurze w Ustawieniach:

klucz firebase

Krok 9: Dodaj swoją domenę do uwierzytelnienia >> zaloguj się.

firebase-server-key

klucze Firebase

A) Powiadomienie push o udanym zamówieniu:

Włącz / wyłącz automatyczne powiadomienie push wysyłane do użytkowników aplikacji w celu pomyślnego utworzenia zamówienia z aplikacji PrestaShop PWA.

powiadomienia push

B) Aktualizacja statusu zamówienia Powiadomienie push:

Włącz / wyłącz automatyczne powiadomienie wypychane wysyłane do użytkowników aplikacji w celu aktualizacji w odniesieniu do poprzedniego stanu dostarczenia zamówienia. Użytkownicy mogą zobaczyć ten status w zakładce „Szczegóły zamówienia” aplikacji PWA

powiadomienia push

C) Powiadomienie o opuszczeniu koszyka:

Włącz / wyłącz automatyczne powiadomienie wypychane 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 interwale czasowym.

powiadomienia push

2.2 Historia powiadomień push

Tutaj administrator sklepu może zobaczyć pełną historię powiadomień push wysłanych do aplikacji PWA. Oprócz tego administrator sklepu może nawet spersonalizować ręczne powiadomienie i wysłać je użytkownikom aplikacji PWA.

historia powiadomień push

A) Wyślij powiadomienie:

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

historia powiadomień push
Układ strony głównej 2.3

Moduł PrestaShop PWA pozwala administratorowi sklepu ominąć ograniczenia związane z ustawieniem interfejsu użytkownika ekranu głównego i zaprojektować taki, który odpowiada ich potrzebom biznesowym. Ta zakładka pozwala administratorowi sklepu tworzyć i zapisywać wiele układów i używać 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-endie dostępne są następujące elementy:

A) Góra

Top

najlepsze kategorie

B) Kwadrat

Kwadratowy baner na ekranie głównym aplikacji PWA oferuje kwadratowy blok banerów, w którym administrator sklepu może użyć żądanego obrazu. W przypadku tych banerów można zastosować odpowiedni link przekierowujący.

transparent kwadratowy
C) Poziomo

Są to prostokątne bloki banerów dostępne w przesuwnym poziomie na ekranie głównym aplikacji PrestaShop PWA. W tym celu obraz i link przekierowujący jest w pełni konfigurowalny.

przesuwne banery

D) Siatka

Są to banery w kształcie kwadratu wymienione na ekranie głównym aplikacji PWA w formie widoku siatki. Administrator sklepu może dodać dowolną liczbę banerów i ustawić link przekierowujący.

siatki-banery
E) Odliczanie

The

odliczanie-zegar-banner
F) Kwadrat

Podobnie jak w przypadku banerów, aplikacje mobilne PrestaShop PWA umożliwiają prezentowanie produktów na liście kwadratowych bloków. Administrator może wybrać produkty dla tego elementu.

produkty kwadratowe
G) Poziome produkty przesuwne:

Możesz dodać produkty w postaci przesuwanego w poziomie. Wybrane produkty mogą należeć do 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 list blokowych widoków siatki. Administrator sklepu może wybrać żądane produkty i ilość do wyświetlenia na ekranie głównym aplikacji PWA PrestaShop.

produkty gridowe
I) Ostatnio dostępne produkty:

Moduł PrestaShop Mobile PWA umożliwia właścicielowi sklepu dodanie ostatniego elementu zakładki na ekranie głównym aplikacji internetowej. Wyświetli wszystkie produkty, które ostatnio przeglądają 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 na temat aplikacji Facebook?

Aplikację Facebook można utworzyć, wykonując następujące czynności: –

Krok 1:?Go to given?URL: https://developers.facebook.com/apps/

Krok 2:?Click on the “Add a New App” button.

dodaj-nową-aplikację

Krok 3 i 4:?Enter your App name and email id, then click on “Create App ID” button.

create-app-id

Krok 5 i 6:?After clicking on Create App ID you will have to?go through a security check as shown:

create-app-id

Krok 7:?Click on “Setting” tab.

ustawienie aplikacji fb

Krok 8-13:?Two option will be available in the?dropdown, Basic and Advanced, click on “Basic”. And then enter your “App Domain”,?”Contact Email”, “Privacy?URL”, “Terms and Conditions?URL”, “Add Logo”, “Select Category” and click on “Save Changes” button.
App Domains:
yourdomain.com is?correct
yourdomain.com/store is?incorrect
www.domain.com is?incorrect

fb-app-id

Krok 14:?Now click on “+Add Platform”.

dodatkowa platforma
Krok 15:
I wybierz Witrynę jako Platformę.

wybierz platformę

Krok 16:?Now Enter your site URL.

enter-website-url
Krok 17 i 18:?Click on “Products+” and select Facebook login.

Nazwa użytkownika Facebook
Krok 19:?Select web as the platform for the app.

wybierz platformę

Krok 20:?Now click on save.

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

URL przekierowania

Krok 23 i 24:?Click on “App review”. And?mark “Make ‘your app name’ Public” to Yes.

przegląd aplikacji
Końcowy etap:?Copy the App ID and App Secret and paste it into the fields provided in the module.

ostatni krok

2.5 Jak uzyskać dane aplikacji Google?

  • Przejdź do Google Developers Console (https://console.developers.google.com/project) lub kliknij link podany w prawym górnym rogu odpowiedniej karty na stronie konfiguracji modułu.
  • Teraz kliknij
  • Wprowadź nazwę swojego projektu i przejdź do następnego kroku.
  • Teraz kliknij interfejsy API i auth-> Poświadczenia w lewym menu, jak pokazano poniżej.

google-app-id

  • Kliknij przycisk Utwórz nowy identyfikator klienta w prawym 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 z poniższymi szczegółami:

Typ aplikacji: Aplikacja internetowa.
Autoryzowane początki JavaScript: Nazwa domeny Twojego sklepu (http://www.yourstore.com).
URI autoryzowanego przekierowania lub URI strony przekierowującej Loginizer:
https://example.com/pwa-app/login

google-app-id

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

3.0 Ekrany aplikacji PWA interfejsu użytkownika:

Ekran główny 3.1home-screen

1. Układ dynamiczny:

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

2. Logo sklepu:

Dodaj logo sklepu w nagłówku aplikacji PWA.

3. Koszyk:

Ikona koszyka na zakupy w prawym górnym rogu ekranu głównego umożliwia użytkownikom włączanie ekranu koszyka.

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

Aplikacje mobilne PrestaShop dla systemu Android i iOS zawierają odpowiednią kategoryzację produktów dostępnych 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:

Pasek nawigacyjny

1. Moje konto:
Opcja Moje konto zawiera wszystkie informacje osobiste użytkownika, koszty wysyłki i zamówienia. Klienci aplikacji PWA mogą przeglądać wszystkie powiązane z nimi dane i mogą je również aktualizować.

2. Kategorie
Kategorie wyświetlane w menu nawigacji po lewej stronie aplikacji PWA są takie same, jak na Twojej stronie internetowej.

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

4. Języki)
Opcja językowa umożliwia użytkownikom aplikacji PWA przeglądanie aplikacji internetowej w wybranym języku. Wszystkie dostępne języki są wyświetlane tylko w ramach tej opcji.

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

6. Zaloguj Wyloguj
Użytkownicy mogą łatwo zalogować się / wylogować z aplikacji PrestaShop PWA za pomocą tej opcji.

Ekran kategorii 3.3:ekran kategorii

1. Wiele widoków:
Kategorie w aplikacji PWA dla PrestaShop można wyświetlać zarówno w widoku listy, jak i widoku siatki.

2. Sortowanie:
Ta opcja pozwala kupującym online wybrać kolejność sortowania, aby zawęzić wyszukiwanie i łatwo uzyskać pożądany produkt.

3. Filtr:
Opcja filtrowania produktów upraszcza wyszukiwanie produktów. Użytkownicy mogą filtrować wszystkie produkty według kategorii przy użyciu różnych atrybutów, takich jak rozmiar, kolor, cena itp.

Ekran produktu 3.4:

Ekran produktu Twojej aplikacji mobilnej PrestaShop 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 opieka
Tutaj zostaną wyświetlone pełne informacje o produkcie dostępne w wykazie.

2. krótki opis
Użytkownicy mogą przeczytać krótki opis produktu, aby szybko zdecydować 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 produktów:
Opcja udostępniania dla produktu pozwala użytkownikom udostępniać produkt na wielu kanałach społecznościowych.

Ekran logowania 3.5

Aplikacja mobilna PrestaShop ekran logowaniaTwórca oferuje różne opcje logowania jednym dotknięciem i usprawnia proces logowania / rejestracji:

1. Zaloguj Się
Użytkownicy aplikacji mogą łatwo uwierzytelniać się i logować w aplikacjach PWA przy użyciu wcześniejszych poświadczeń e-mail.

2. Zapisz się
Wszyscy nowi użytkownicy aplikacji mogą zarejestrować się i założyć konto w sklepie z aplikacji PWA PrestaShop. Formularz rejestracji wymaga podania tylko niezbędnych danych do utworzenia konta.

3. Zaloguj się przez facebook
Użytkownicy mogą zalogować się do aplikacji PWA przy użyciu poświadczeń konta na Facebooku.

4. Zaloguj się za pomocą Google+
Użytkownicy mogą zalogować się do aplikacji PWA przy użyciu poświadczeń konta Google.

Ekran koszyka na zakupy 3.6:

Ekran koszyka aplikacji mobilnej PrestaShop wyświetli wszystkie produkty dodane do koszyka. Użytkownicy aplikacji mogą wyświetlać nazwę produktu, zakupy-ekran-ekranilość, cena całkowita i koszt wysyłki. Ten ekran ma następujące opcje:

1. Zastosuj kupon
Ta opcja umożliwia użytkownikom korzystanie z kuponów internetowych i korzystanie z 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 po prostu wybierając opcję „Usuń”.

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

6. Kontynułuj żeby sprawdzić
Użytkownicy aplikacji PWA mogą przejść do ekranów płatności i płatności, dotykając opcji „Kontynuuj do kasy”.

Ekran kasowania 3.7

Aplikacje mobilne z PrestaShop Mobile App Maker mają uproszczone ekran kasyKasa z pojedynczym ekranem zawierająca tylko istotne informacje. Użytkownicy mogą przeglądać kompletne szczegóły płatności, takie jak szczegóły wysyłki, dane rozliczeniowe, podsumowanie zamówienia, komentarz do zamówienia, płatność

1. Szczegóły wysyłki i fakturowania
Ten ekran zawiera szczegółowe informacje na temat adresów wysyłki i rozliczeń zapisanych przez użytkownika. W razie potrzeby użytkownik może również edytować / zapisać nowy adres wysyłki.

2. podsumowanie zamowienia
Użytkownicy aplikacji mogą zobaczyć 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. Zamów komentarz
Użytkownicy mogą także dodawać komentarze związane z ich zamówieniami, które będą widoczne dla administratora sklepu na stronie zamówienia w backend.

6. Podsumowanie płatności
W tej sekcji znajdują się szczegółowe informacje na temat płatności związanych z zakupem.

7. Przejdź do płatności
Użytkownicy aplikacji PWA zostaną przekierowani na ekran płatności po naciśnięciu przycisku „Przejdź do płatności”.

Ekran płatności 3.8:

Ekran płatności PrestaShop

ekran płatności

Ekran 3.9 Moje konto

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

Ekran szczegółów zamówienia 3.10

Ekran szczegółów zamówienia w progresywnej aplikacji internetowej PrestaShop zawiera pełne informacje na temat konkretnego zamówienia z aplikacji PWA. Użytkownicy mogą łatwo wyświetlić adres wysyłki, podsumowanie produktu, metodę wysyłki i płatności, podsumowanie całkowitych kosztów itp. Istnieje nawet możliwość śledzenia statusu zamówienia i jego dostawy.

Szczegóły 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 *