Magento 2 PWA Mobile App – User Manual


1.0 Wprowadzenie

Będąc w branży retail eCommerce, z pewnością spotkałeś się z pojęciem PWA (Progressive Web App). Jeśli tak, musisz być również świadomy możliwości, jakie niosą one jako aplikacja do zakupów. Jeśli nie, wylądowałeś we właściwym miejscu. Wraz ze stałym wzrostem wykorzystania aplikacji zakupowych (zarówno natywnych, jak i PWA), sklepy internetowe przechodzą na tworzenie aplikacji mobilnych PWA dla swoich firm. Uruchomienie progresywnej aplikacji internetowej jest obecnie znacznie prostszym i niedrogim zadaniem. KnowBand uruchomił aplikację mobilną Magento 2 PWA, kompletne, pozbawione kodu i zautomatyzowane narzędzie do uruchamiania progresywnej aplikacji internetowej. Mówiąc prościej, za każdym razem, gdy jakikolwiek użytkownik otworzy adres URL Twojego sklepu w przeglądarce mobilnej, zostanie wyświetlony monit „Dodaj do ekranu głównego”. Aplikacja Magento 2 Progressive Web App zostanie dodana do urządzenia użytkownika, tak jak każda inna aplikacja, a zakupy online będą mogły być dokonywane w ruchu.

1.1 Zobacz aplikację demonstracyjną:

Zapoznaj się z wersją demonstracyjną Progressive Web App dla Magento 2 i zobacz, jak będą wyglądać i działać końcowe aplikacje:

Adres URL sklepu demonstracyjnego:https://ma2demo.knowband.com/pwa/manager/
URL aplikacji PWA:https://ma2demo.knowband.com/pwa/pwa-app/

Ekrany panelu administracyjnego 2.0:

Dzięki przyjaznemu zapleczu panelu administracyjnego administrator sklepu może konfigurować i dostosowywać wygląd, styl i działanie aplikacji mobilnej PWA. Wystarczy kilka kliknięć i przełączeń myszy, aby wprowadzić zmiany w progresywnych aplikacjach internetowych Magento 2. Przyjrzyjmy się szczegółowemu przeglądowi ekranów panelu administracyjnego:

Ustawienia ogólne 2.1:

Ogólne-settings

a) Włącz rozszerzenie:?Enable?Magento 2?PWA module to make web app work on the users’ smartphones.

b) Przekieruj na stronę koszyka, gdy Dodaj do koszyka:?Enable to re-direct users to shopping cart or disable to keep them on the product screen.

c) Wyświetl krótki opis:?Enable to add & display a short description on the product screen of Progressive Web App.

d) Włącz raportowanie dziennika żądań: Włącz tę kartę, aby aktywować plik dziennika w aplikacji mobilnej PWA. Ten plik dziennika może służyć do naprawiania wszelkich nieprawidłowych zachowań progresywnej aplikacji internetowej.

e) Pokaż podgląd aplikacji: Włącz, aby dodać telefon podglądowy w panelu administracyjnym. Wszystkie zmiany kolorów, czcionek i ekranu głównego będą wyświetlane w telefonie podglądu w czasie rzeczywistym.

f) Włącz pasek kart: Dodaj dolny pasek zakładek w aplikacji mobilnej Magento 2 PWA.

g) Wybierz układ strony głównej:?Choose desired layouts from the added ones and improve look and feel of app.

Ustawienia-ogólne-2

h) Obraz ikony aplikacji:?Upload Magento 2 PWA app icon on your own and change the same as well if required.

i) Nazwa aplikacji PWA:?Enter the name of the Magento 2 Progressive Web App.

j) Wybierz czcionkę dla aplikacji PWA:?Choose the font of your PWA app for Magento 2.

k) Kolor przycisku aplikacji: Wybierz kolor przycisku dla swojej aplikacji mobilnej PWA.

l) Kolor tekstu przycisku aplikacji: Wybierz kolor tekstu przycisku dla swojego Magento 2

m) Kolor motywu aplikacji: Wybierz kolor motywu (nagłówek) swojej aplikacji internetowej.

n) ZałWybierz kolor tła progresywnej aplikacji internetowej.

o) Kolor tła ekranu powitalnego: Wybierz odpowiednią opcję koloru tła ekranu powitalnego aplikacji PWA.

Ustawienia-ogólne-3

p) Wyłączone metody wysyłki: Wybierz metody wysyłki, które mają być ograniczone do pracy w aplikacji mobilnej Magento 2 PWA.

q) Włącz i prześlij logo: Dodaj obraz logo swojego sklepu, który będzie wyświetlany w nagłówku aplikacji mobilnej PWA.

2.2 Ustawienia powiadomień push:

Magento 2 Progressive Web App oferuje nieograniczoną liczbę powiadomień push na rynek oraz promuje oferty sklepowe i produkty. Administrator sklepu będzie otrzymywać powiadomienia push przez całe życie bez dodatkowych opłat.

powiadomienia push

Różne pola na tej karcie ustawień wymagają skonfigurowania konta Firebase. Oto, jak możesz go ustawić:

Jak skonfigurować konto Firebase?

Krok 1: Zaloguj się do Google Firebase

baza ogniowa

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

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

kontynuuj projekt

Krok 3: Zarządzaj ustawieniami projektu Po utworzeniu projektu kliknij opcję 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.

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

klucz-serwera-firebase

klucz-serwera-firebase

2.21 Automatyczne powiadomienia push:

Administrator sklepu może zaplanować automatyczne wysyłanie powiadomień w następujących przypadkach:

powiadomienia push-2

a) Nowe ustawienia zamówienia:?Whenever any new order is placed from the Magento 2 PWA Mobile App.

b) Ustawienia zmiany statusu zamówienia: Ilekroć status dostawy dowolnego zamówienia zostanie zmieniony / zaktualizowany.

c) Ustawienia opuszczonego koszyka: Zawsze, gdy jakikolwiek użytkownik zostawia produkt w koszyku i porzuca Progressive Web App.

2.22 Ręczne powiadomienie push:

wyślij powiadomienie

Jak pokazano na powyższej migawce, administrator sklepu może personalizować i wysyłać ręczne powiadomienia push do użytkowników aplikacji mobilnej PWA. Wiadomość, zdjęcie, oferowany rabat, link do przekierowania można dodawać / edytować, aby poprawić skuteczność powiadamiania i zwiększyć sprzedaż.

Układ strony głównej 2.3:

Magento 2 PWA Mobile App Builder oferuje w pełni konfigurowalny panel edytora DIY do dostosowywania i konfigurowania wyglądu i działania progresywnej aplikacji internetowej. Do panelu administratora można dodawać różne nowe układy w oparciu o nadchodzące festiwale i okazje.

układ strony głównej

układ-ekranu-głównego-3

2.31 Najważniejsze kategorie:

najlepsze kategorie

2.32 Kwadratowy baner:

transparent kwadratowy

2.33 Przesuwany baner:

przesuwany baner

2.34 Baner w kratkę:

siatki-banery

2.35 Baner odliczania czasu

odliczanie-zegar-banner

2.36 Kwadratowe produkty:

produkty kwadratowe

2.37 Produkty przesuwne:

produkty przesuwne

2.38 Siatka produktów:

produkty gridowe

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

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.

identyfikator-aplikacji-google

  • 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:?Web Application.
Autoryzowane początki JavaScript:?Your store domain name (http://www.yourstore.com).
URI autoryzowanego przekierowania lub URI strony przekierowującej Loginizer:
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ć 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:

Rzuć okiem na płynnie zaprojektowane ekrany Progressive Web App dla Magento 2:

Ekran główny 3.1:

home-screen

Ekran główny aplikacji Magento 2 Progressive Web App jest w pełni konfigurowalny z panelu administratora modułu. Możesz zaprojektować układ ekranów aplikacji tak, jak chcesz. Niestandardowe układy można projektować w panelu administracyjnym na podstawie wydarzeń, festiwali, okazji itp. I używać w dowolnym momencie.

1. Układ dynamiczny:

Korzystając z różnych elementów projektowych (banery, suwaki, kategorie itp.), Administrator sklepu może stworzyć dynamiczny układ zgodnie z potrzebą.

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.

3.2 Menu nawigacyjne po lewej stronie:

Aplikacje mobilne Magento 2 PWA zapewniają płynną kategoryzację produktów. Kategorie w aplikacji mobilnej PWA będą takie same, jak dostępne w serwisie. Kupujący online mogą łatwo przeglądać produkty z wielu kategorii bez żadnych kłopotów. Różne strony CMS można również dodać do lewego menu nawigacyjnego za pomocą panelu administracyjnego.

pasek-nawigacji-473x1024

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 waluty dostępne w Twojej witrynie są wyświetlane tutaj

6. Zaloguj Wyloguj
Użytkownicy mogą łatwo logować się / wylogowywać z

Ekran kategorii 3.3:

ekran kategorii

1. Wiele widoków:
Kategorie w aplikacji PWA dla

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 w Magento 2 Progressive Web App zawiera wszystkie niezbędne informacje o produkcie, takie same jak w Twoim sklepie. Od wielu zdjęć produktów po krótki i długi opis pomaga w podjęciu decyzji o zakupie. Dostępność produktu jest sygnalizowana jako „W magazynie” lub „Brak w magazynie” na podstawie stanu zapasów.

ekran-produktu-473x1024

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 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 umożliwia użytkownikom dodawanie produktów do koszyka. Użytkownicy mogą dalej przetwarzać koszyk w celu zakupu.

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

Ekran logowania 3.5

login-screen-473x1024

Magento 2 Progressive Web App oferuje szybkie opcje logowania jednym dotknięciem i sprawia, że ​​proces logowania / rejestracji jest bardziej płynny: – Logowanie e-mailem – Logowanie Google – Logowanie na Facebooku

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 założyć konto w sklepie z poziomu

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

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

Ekran koszyka na zakupy 3.6:

Torba na zakupy aplikacji Magento 2 PWA wyświetli wszystkie dodane produkty wraz z ich ilością i ceną do zapłaty. Użytkownicy aplikacji mogą również przeglądać szczegóły produktu, aby upewnić się przed zakupem.

ekran-koszyka-473x1024

1. Zastosuj kupon:
Ta opcja umożliwia użytkownikom korzystanie z kuponów internetowych i otrzymywanie zniżek.

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 aplikacji mogą opuścić koszyk, aby przeglądać więcej produktów w Twojej aplikacji.

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

3.7 Ekran kasy:

Aplikacje mobilne PWA dla Magento 2 są dostarczane z jednym ekranem, bez bałaganu, z wymaganymi tylko odpowiednimi i niezbędnymi polami. Użytkownicy aplikacji otrzymują pełny przegląd zamówienia przed dokonaniem płatności, taki jak szczegóły wysyłki, dane rozliczeniowe, podsumowanie zamówienia, komentarz do zamówienia, płatność

ekran-platnosci-473x1024

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
Ta sekcja wyświetla pełne szczegóły 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:

Aplikacja Magento 2 PWA zapewnia wszystkie płatności za przeglądanie stron internetowych w aplikacji. Użytkownicy aplikacji znajdą tutaj takie same opcje płatności, jakie są dostępne w aplikacjach. Ekran płatności w Magento 2 Progressive Web App jest w pełni zoptymalizowany pod kątem przeglądania aplikacji.

ekran-platnosci-473x1024

3.9 Ekran Moje konto:

ekran-mojego-konta-473x1024

Ekran Moje konto w aplikacji Magento 2 PWA zawiera wszystkie dane użytkowników dostępne w Progressive Web App. Kupujący online mogą przeglądać dane osobowe, adres wysyłki, szczegóły zamówienia itp.

1. Dane osobowe
Użytkownicy mogą również przeglądać i aktualizować swoje wstępnie zapisane dane profilowe.

2. Adresy wysyłki
Użytkownicy aplikacji mogą zobaczyć pełną listę wstępnie zapisanych adresów wysyłki w aplikacji PWA.

3. Szczegóły zamówienia
Użytkownicy aplikacji mogą zobaczyć pełną listę wcześniej złożonych zamówień z poziomu aplikacji PWA oraz ich szczegóły.

4. Zmień kolejność funkcji
Na ekranie Moje konto w aplikacji PWA znajduje się przycisk bezpośredniego ponownego zamówienia. Wszystkie poprzednie produkty w ramach tego zamówienia zostaną dodane do koszyka za pomocą jednego przycisku.

Ekran szczegółów zamówienia 3.10

Aplikacja Magento 2 Progressive Web App wyświetla pełne szczegóły dotyczące poprzednich zamówień aplikacji. Ten ekran zawiera szczegóły zamówienia, historię stanu, adresy wysyłki i rozliczenia itp. Dla każdego zamówienia złożonego za pośrednictwem aplikacji Magento 2 PWA. Użytkownicy aplikacji mogą szybko przeglądać całe podsumowanie zamówienia, a także śledzić status dostawy.

ekran-mojego-konta-473x1024

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 *