Od Angular do React: udoskonalanie dodatku PWA PrestaShop w celu zwiększenia wydajności!

W dynamicznym świecie handlu elektronicznego technologia stale ewoluuje, zmuszając firmy do dostosowywania się i wprowadzania innowacji, aby pozostać na czele. W Knowband rozumiemy, jak ważne jest bycie na bieżąco z najnowszymi trendami technologicznymi, aby zapewnić naszym klientom najlepsze narzędzia do osiągnięcia sukcesu. Dlatego dokonaliśmy znaczącego ruchu w przypadku naszego dodatku PWA do PrestaShop: przejście z Angular na React. Ta zmiana ma na celu zwiększenie wydajności witryn eCommerce PrestaShop, zapewniając, że będą szybsze, bardziej responsywne i lepiej dostosowane do potrzeb biznesowych.

Co więcej, obiecujemy bardziej stabilne i ulepszone doświadczenie użytkownika dla Twoich klientów w nadchodzącym React PWA dla Prestashop.

Dlaczego reagować?

Popularność i wydajność React jako biblioteki frontendowej wynika z wirtualnego DOM (Document Object Model), który pozwala na lepszą wydajność i szybsze renderowanie interfejsu użytkownika w porównaniu do Angular. Co więcej, to przejście oznacza, że wszelkie działania podejmowane przez klientów w Twojej witrynie PrestaShop, niezależnie od tego, czy przeglądają produkty, czy finalizują zakupy, będą teraz płynniejsze i wydajniejsze.

Poprawiona wydajność i doświadczenie użytkownika:

Jedną z głównych zalet korzystania z dodatku PWA React for Knowband jest znaczna poprawa czasu ładowania i responsywności aplikacji. Dzieje się tak dlatego, że React pozwala na bardziej płynną interakcję na urządzeniach mobilnych, odwzorowując działanie aplikacji natywnej skuteczniej niż kiedykolwiek wcześniej. Dlatego w przypadku każdej firmy zajmującej się handlem elektronicznym szybkość i płynność, z jaką użytkownicy mogą poruszać się po Twojej witrynie, może znacząco wpłynąć na sprzedaż i zadowolenie klientów.

Usprawniony proces rozwoju:

W Knowband oferujemy progresywne rozwiązania aplikacji internetowych dla platform eCommerce Prestashop, WooCommerce, Magento 2 i Opencart. Co więcej, niesamowitym faktem jest to, że dostawcy nie potrzebują żadnej wiedzy technicznej, aby tworzyć aplikacje internetowe na Androida i iOS za pomocą naszego dodatku PWA.

Co więcej, administrator sklepu może błyskawicznie utworzyć aplikacje PWA, po prostu instalując dodatek PWA w sklepie i dodając konfiguracje Firebase.

Nadchodzące funkcje w następnej kompilacji modułu:

Patrząc w przyszłość, Knowband z radością wprowadza nowe funkcje w nadchodzącej wersji naszego oprogramowania opartego na React Dodatek PWA PrestaShop, co wniesie jeszcze więcej możliwości do Twojego sklepu internetowego:

Automatyczne suwaki banerów:

Administrator ma teraz możliwość dodawania automatycznych suwaków banerów na stronie głównej aplikacji PWA. Dlatego poniższa funkcja pomoże w zaangażowaniu klientów dzięki wysokiej jakości, dynamicznym banerom, które są łatwe w zarządzaniu i automatyzacji. Ta funkcja poprawia atrakcyjność wizualną Twojej witryny i może być używana do wyróżniania promocji, nowości lub popularnych przedmiotów.

Widok listy/siatki na stronach z listami produktów:

Możesz zapewnić użytkownikom aplikacji PWA elastyczność przeglądania produktów w formacie odpowiadającym ich preferencjom. Przełączanie między widokami listy i siatki na stronach z listami produktów ułatwi klientom przeglądanie produktów, porównywanie ich i podejmowanie decyzji zakupowych w oparciu o ich osobiste nawyki zakupowe.

Funkcja powiadamiania:

Utrzymywanie informacji i zaangażowania klientów dzięki powiadomieniom w czasie rzeczywistym o nowych produktach, ofertach specjalnych i statusach zamówień będzie łatwiejsze dzięki funkcji powiadamiania o wprowadzeniu w aplikacji PWA. Co więcej, ta funkcja gwarantuje, że Twoi klienci poczują się połączeni i cenieni, co może pomóc w zwiększeniu lojalności klientów i powtarzaniu transakcji.

Wniosek!

Przechodząc z Angular do React, Knowband’s PrestaShop Kreator aplikacji mobilnych PWA Addon ma oferować jeszcze bardziej niezawodne funkcje i lepszą wydajność. Co więcej, te ulepszenia mają na celu pomóc Twojej witrynie eCommerce nie tylko nadążać za trendami rynkowymi, ale także wyprzedzać je, oferując klientom szybsze i bardziej wciągające zakupy online.
Bądź na bieżąco z nadchodzącą kompilacją modułów, która obiecuje wynieść Twoją witrynę eCommerce na nowy poziom.

W Knowband dokładamy wszelkich starań, aby zapewnić naszym klientom najnowocześniejsze rozwiązania, które napędzają sukces i innowacje w przestrzeni eCommerce. Poznaj zalety nowego dodatku PWA opartego na React i przygotuj się do przeniesienia swojego sklepu PrestaShop na wyższy poziom.

Zalety kreatora aplikacji mobilnych Prestashop PWA, które powinieneś wiedzieć

Zawsze szukaliśmy alternatywy dla publikacji w Google Play i Apple Store. PWA (Progressive Web Apps) wydaje się być najlepszą opcją dla tego samego. Ten trend staje się coraz bardziej popularny ze względu na łatwość oddychania. Oczywiście wielu wykwalifikowanych specjalistów i guru komputerowego przewiduje PWA jako przyszłość. Cóż, jeśli masz sklep Prestashop, możesz łatwo zainwestować w Prestashop PWA Mobile App Builder firmy Knowband.

Aplikacja mobilna Prestashop PWA pomaga replikować specyficzną, natywną relację z aplikacjami programu. Główną zaletą jest to, że właściciel sklepu nie musi zajmować się publikacjami App Store czy Play Store. Zamiast tego progresywną aplikację internetową Prestashop można udostępnić, po prostu otwierając adres URL witryny w aplikacji mobilnej. Gdy klienci otwierają adres URL sklepu na urządzeniu mobilnym, mają możliwość dodania eCommerce PWA do swojego ekranu głównego.

Jeśli posiadasz sklep Prestashop, ten artykuł wyjaśni korzyści płynące z posiadania Prestashop Aplikacja mobilna PWA. Czy chcesz dowiedzieć się o nich więcej? Możesz wyjść i sam je sprawdzić, aby lepiej zrozumieć.

Zalecane przeczytanie: Najlepsze przykłady solidnych progresywnych aplikacji internetowych (PWA) opracowanych przez KnowBand

Podstawowe zalety kreatora aplikacji mobilnych Prestashop Pwa

  • Zwiększony współczynnik konwersji i zarobki

Prestashop PWA Mobile App Maker może pomóc firmom eCommerce zwiększyć konwersje mobilne. Co więcej, zapewnienie rozdrobnionego cyklu w celu dostarczenia aplikacji bezpośrednio ze strony mobilnej kieruje konsumentów do Progressive Web App. Aplikacje, z ich warstwową nawigacją i jednostronicową kasą, mogą być ważnym punktem zainteresowania dla organizacji eCommerce.

  • Mniejszy wysiłek i wydatki na rozwój

W przypadku natywnych aplikacji zakupowych sprzedawcy eCommerce muszą ponosić znaczne wydatki i wysiłek w celu tworzenia i dystrybucji aplikacji na Androida i iOS. Cykl publikacji w Google Play i Apple App Store jest fascynujący. Jednak czasami staje się to problemem dla właścicieli firm, którzy nie rozumieją subtelności. W obecnej sytuacji z pomocą przychodzi Prestashop PWA Mobile App Creator. Aplikację mobilną Prestashop PWA można łatwo rozwiązać, uzyskując dostęp do adresu URL sklepu w aplikacji mobilnej i dodając logo do ekranu głównego telefonu komórkowego. Twój formularz mobilny zostanie przekonwertowany na aplikację PWA, podczas gdy przejście na komputery pozostanie aktywne.

Zalecane przeczytanie: Przyszłość aplikacji PWA dla e-commerce i rynku internetowego

  • Kierowanie do większej grupy odbiorców mobilnych

Prestashop PWA Mobile App Builder to doskonała alternatywa dla firm eCommerce, ponieważ działa bezbłędnie zarówno z systemem Android, jak i iOS. Możesz użyć aplikacji Prestashop eCommerce PWA, aby kierować reklamy na cały świat lub określone regiony. Im więcej użytkowników odwiedzi serwis, tym więcej będzie podstaw Progressive Web App. Ponadto aplikacje zostaną umieszczone w szafce z aplikacjami z innymi aplikacjami. Funkcjonalność będzie całkowicie natywna, a użytkownicy będą musieli po prostu uruchomić aplikację, aby wyszukać przedmioty i inne dane sklepu.

  • Zatwierdzona decyzja biznesowa

Jeśli uważasz, że model pomoże Ci zrozumieć PWA eCommerce, powinieneś rozważyć Twittera, Alibaba i wiele innych. Oto kilka różnych firm, które korzystają z trendu Progressive Web App w celu zwiększenia konwersji i płatności. Aplikacje mobilne PWA mogą być wykorzystywane zarówno przez małe, jak i duże firmy Prestashop eCommerce do natychmiastowego zwiększenia sprzedaży od klientów mobilnych.

  • Działa szybko w każdej sytuacji — nawet w trybie offline

PWA eCommerce są wyjątkowo lekkie i rzadko ulegają awarii lub zatrzymują się na urządzeniach mobilnych. Rozwój aplikacji Prestashop eCommerce PWA jest wyrafinowany, dzięki czemu elementy ładują się i działają szybciej w porównaniu z aplikacjami natywnymi. Szybsze ładowanie i bezproblemowa obsługa mogą przez cały czas poprawiać wygodę zakupów mobilnych konsumentów. Kolejną ważną cechą jest to, że PWA dla Prestashop może działać w trybie offline – ze słabym lub nieistniejącym połączeniem internetowym.

Zalecana lektura: W jaki sposób progresywne aplikacje internetowe (PWA) mogą poprawić mobilne konwersje sklepu eCommerce?

  • Uproszczone monitorowanie panelu administracyjnego w aplikacji mobilnej Prestashop Pwa

Progresywna aplikacja internetowa eCommerce tworzy prosty panel administracyjny (backend) do zarządzania i dostosowywania progresywnej aplikacji internetowej na żywo. Nie ma żadnego ważnego powodu, aby kontaktować się z obsługą klienta lub zastanawiać się, jak kodować. Administrator sklepu musi jedynie wprowadzić niezbędne zmiany. Co więcej, aktywne PWA eCommerce zostanie automatycznie zaktualizowane. Opcja projektowania strony docelowej umożliwia administratorowi sklepu modyfikację wyglądu i stylu live Knowband Progresywna aplikacja internetowa dla Prestashop w dowolnym momencie bez zmiany kodu.

  • Powiadomienia push to doskonały sposób na reklamę

Przez długi czas powiadomienia push były ważną częścią marketingu każdej witryny eCommerce. Wszyscy otrzymalibyśmy alerty push na nasze telefony komórkowe dla zainstalowanych natywnych aplikacji zakupowych. Jest to również możliwe w Twoich aplikacjach PWA dzięki Progressive Web App dla Prestashop. Właściciel sklepu będzie mógł planować i dostarczać dostosowane i predefiniowane alerty push na urządzenia mobilne.

  • Stepper ilości na stronie produktu

Stepper kwotowy to kolejne rozszerzenie, które pozwala klientom Prestashop Kreator aplikacji mobilnych PWA podnosić lub zmniejszać liczbę poszczególnych produktów przed umieszczeniem ich w kontenerze. Przycisk +/ – na ekranie przedmiotu dodatku Prestashop to wszystko, co niezbędne dla kupujących.

  • Przycisk Dodaj do koszyka Strona główna i strona kategorii ułatwia pracę

Klienci mogą łatwo dodawać produkty do koszyka ze strony Strona główna i Kategoria. Korzystając z modułu, klienci nie muszą ponownie zastanawiać się nad dodaniem produktów, ponieważ na ekranie głównym i stronach klas jest obecnie dostępny przycisk Dodaj do koszyka.

  • Powiązane produkty Dostępność pomaga w sprzedaży krzyżowej

Dzięki podobieństwu do dodatku Prestashop Automatic Related Products, aplikacja Prestashop Progressive Web App pozwala administratorowi sprzedawać rzeczy. Poza tym może pokazywać powiązane produkty na stronie, aby klienci mogli wybierać i kupować więcej. W dalszej kolejności oczekiwana sprzedaż i dochody.

Zalecane przeczytanie: Progresywna aplikacja internetowa Prestashop to nowy szum � Dowiedz się więcej!

Skończmy!

Jeśli chcesz wyprzedzić rynek eCommerce, skorzystaj z Prestashop PWA Mobile App Builder, który pomoże Ci się tam dostać. Biorąc pod uwagę dużą liczbę PWA, teraz jest doskonały czas na przekształcenie sklepu Prestashop w aplikację mobilną. Zapewnij kłopotliwe zakupy dzięki ulepszonym funkcjom, takim jak szybkość, działanie w trybie offline, alerty push, SEO i wiele innych.

Zapewnienie użytkownikom dostępu do zoptymalizowanej aplikacji PrestaShop PWA poprawiłoby ich doświadczenie zakupów mobilnych. Za pomocą tego modułu PrestaShop PWA App możesz zmienić swój sklep internetowy w przyjazną dla użytkownika aplikację internetową, którą można obsługiwać z poziomu zaplecza. Aplikacje te oferują szereg dodatkowych funkcji, których nie można znaleźć w aplikacjach natywnych, w tym tryb offline i niezależność od platformy, dzięki czemu są bezproblemową i bezproblemową opcją zakupów dla klientów. Możesz nawet skontaktować się z zespołem pomocy technicznej w sprawie wszystkich zapytań pod adresem support@knowband.com.

Zbuduj lekką aplikację PWA dla swojego sklepu PrestaShop | Korzyści i porady?

Lekkie aplikacje są potrzebne prawie każdej branży, zwłaszcza e-commerce; bez względu na to, czy są one uznaną organizacją czy startupem. Bez względu na dane demograficzne konsumentów / odbiorców, których są celem, lekkie aplikacje są boomem. W tym artykule skupiono się głównie na tworzeniu aplikacji mobilnej PrestaShop PWA, a także na zapoznaniu się z większymi zaletami progresywnych aplikacji internetowych. Musisz zdawać sobie sprawę z podstawowej natury lekkiej aplikacji, która zużywa mniej miejsca na urządzeniach użytkowników aplikacji bez uszczerbku dla jakości i funkcjonalności aplikacji. Ponadto lekkie aplikacje ładują zawartość szybciej i generalnie wykonują wszystkie zadania szybciej, w porównaniu z aplikacjami natywnymi. Te dwa czynniki pomagają lekkim aplikacjom rozwijać się nawet w obszarach, które nie mają bardzo szybkiego połączenia z Internetem. Progresywne aplikacje internetowe lub PWA są doskonałym rozwiązaniem. PWA są nie tylko szybsze i zajmują mniej miejsca, ale także oferują szerszy zakres korzyści zarówno właścicielom sklepów, jak i użytkownikom aplikacji. Posiadanie PrestaShop PWA (aplikacja internetowa) może zdziałać cuda dla firmy. A zbudowanie jednego dla Twojej firmy jest teraz tak proste, jak ciasto przy użyciu gotowego rozszerzenia, tj. Modułu PrestaShop PWA Builder. Zanim się w to zanurzysz, musisz przejrzeć korzyści płynące z PWA (aplikacji internetowej) dla swojego sklepu PrestaShop.

Budowanie lekkiej aplikacji za pomocą PrestaShop PWA Builder:

Krok 1: Zakup PrestaShop PWA Mobile App Builder z KnowBand. Zainstaluj ten moduł na swojej stronie PrestaShop.

Krok 2: Wypełnij wstępnie wymagany formularz dostarczony przez KnowBand.

Krok 3: Przejrzyj swoją opracowaną aplikację internetową PrestaShop i potwierdź, aby ją uruchomić. Ta aplikacja mobilna PWA dla PrestaShop z łatwością buduje progresywną aplikację internetową pochodzącą z własnej witryny internetowej PrestaShop eCommerce.

Funkcje aplikacji mobilnej PrestaShop PWA:

Ze względu na bogate funkcje i możliwości dostosowywania, aplikacje progresywne zyskują coraz większą popularność wśród firm każdego roku. PWA i jego wersje hybrydowe zostały w rzeczywistości oznaczone jako przyszłość aplikacji i eCommerce.

Inne zalety aplikacji PWA PrestaShop:

  • Progresywne aplikacje internetowe (PWA) zajmują mniej miejsca i są szybsze niż tradycyjne aplikacje mobilne (aplikacje natywne). PWA są szybsze, nawet w przypadku witryn eCommerce, takich jak PrestaShop, ponieważ zawartość strony pobiera się stopniowo, gdy użytkownik kontynuuje przeglądanie. Należy również pamiętać, że PWA to aplikacje internetowe zakodowane w HTML, CSS i javascript, stąd nazwa „Progressive Web App”.
  • Pojedyncza aplikacja PrestaShop PWA może działać na każdym systemie operacyjnym, tj. Na Androidzie, iOS, Windows itp. Jest tak, ponieważ PWA działają w przeglądarkach internetowych. To samo nie jest możliwe w przypadku aplikacji natywnych, ponieważ trzeba by zbudować 2 aplikacje natywne – jedną dla Androida i drugą dla iOS, oba w różnych językach programowania.
  • PWA wyglądają dokładnie jak natywna aplikacja mobilna, gdy odwiedzający Twoją stronę PrestaShop dodają PWA do ekranu głównego.
  • Ponieważ PWA to aplikacje internetowe, nie musisz publikować swojego PrestaShop PWA w sklepie Play lub App Store, aby udostępnić go odbiorcom. Dlatego nie ma zależności od sklepów z aplikacjami mobilnymi z PWA.
  • Progresywne aplikacje internetowe mogą być łatwo udostępniane użytkownikom witryny / aplikacji za pomocą tylko adresu URL. Nowi użytkownicy nie muszą pobierać i instalować aplikacji przed jej użyciem. Mogą bezpośrednio uzyskiwać dostęp do aplikacji internetowej PrestaShop ze swoich przeglądarek, a następnie bezpośrednio dodawać ją do ekranu głównego. I wtedy zacznie działać jak natywna aplikacja z ikoną aplikacji na ekranie głównym urządzenia i w menu.
  • Progresywne aplikacje internetowe mogą również korzystać z większości funkcji urządzenia (smartfonów / tabletów), takich jak aparaty fotograficzne, mikrofony itp. Chociaż korzystanie z geofencing i NFC w PWA jest jeszcze w najbliższej przyszłości.
  • PWA umożliwia również wysyłanie powiadomień push do użytkowników aplikacji, tak jak zrobiłaby to aplikacja natywna.
  • PWA używają bezpiecznych adresów URL (https: //), dlatego nie musisz się martwić obawami o bezpieczeństwo.
  • Progresywne aplikacje internetowe są łatwiejsze do aktualizacji i utrzymania. Użytkownicy aplikacji internetowej PrestaShop nie będą musieli ręcznie aktualizować swoich PWA. To zadanie dotyczy natywnych aplikacji, a nie PWA.

Wnioski:

Ponieważ posiadanie aplikacji PWA dla Twojego sklepu PrestaShop stało się łatwiejsze i niedrogie, to świetny czas, aby wybrać te aplikacje internetowe. Korzystanie z modułu PrestaShop PWA Builder to inteligentny sposób na zbudowanie aplikacji internetowej. My, w KnowBand, oferujemy również aplikacje natywne (Android i iOS) dla PrestaShop. Sprawdź je od dołu:

PrestaShop Mobile App Builder

PrestaShop Advanced Marketplace Z aplikacją mobilną

Jeśli masz jakieś pytania dotyczące tego modułu tworzenia aplikacji, napisz do nas na adres support@knowband.com. Bardzo chcielibyśmy usłyszeć wasze cenne komentarze !!


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

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

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?

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

  • 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

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