Magento 2 PWA Mobile App – User Manual


1.0 Présentation

Étant dans l'industrie du commerce électronique de détail, vous devez avoir rencontré le mot PWA (Progressive Web App). Si oui, vous devez également être conscient de la capacité qu'ils offrent en tant qu'application d'achat. Dans le cas contraire, vous avez atterri au bon endroit. Avec la croissance constante de l'utilisation des applications d'achat (à la fois natives et PWA), les magasins en ligne se tournent vers le développement d'applications mobiles PWA pour leurs entreprises. Lancer une application Web progressive est une tâche assez simple et abordable de nos jours. KnowBand a lancé Magento 2 PWA Mobile App, un outil complet sans code et automatisé pour lancer une Progressive Web App. En termes simples, chaque fois qu'un utilisateur ouvre l'URL de votre boutique sur le navigateur mobile, il recevra un message "Ajouter à l'écran d'accueil". L'application Web progressive Magento 2 sera ajoutée dans l'appareil de l'utilisateur comme toute autre application et les achats en ligne peuvent être effectués en déplacement.

1.1 Voir l'application de démonstration:

Explorez la démo Progressive Web App pour Magento 2 et jetez un coup d'œil à l'apparence et au fonctionnement de vos applications finales:

URL du magasin de démonstration:https://ma2demo.knowband.com/pwa/manager/
URL de l'application PWA:https://ma2demo.knowband.com/pwa/pwa-app/

2.0 Écrans du panneau d'administration:

Avec le backend convivial du panneau d'administration, l'administrateur du magasin peut configurer et personnaliser l'apparence, la convivialité et le fonctionnement de l'application mobile PWA. C'est juste une question de quelques clics et de bascules de souris pour apporter des modifications dans les applications Web progressives de Magento 2. Prenons un aperçu détaillé des écrans du panneau d'administration:

Paramètres généraux 2.1:

réglages généraux

a) Activer l'extension:?Enable?Magento 2?PWA module to make web app work on the users’ smartphones.

b) Rediriger sur la page du panier lorsque Ajouter au panier:?Enable to re-direct users to shopping cart or disable to keep them on the product screen.

c) Description abrégée de l'affichage:?Enable to add & display a short description on the product screen of Progressive Web App.

d) Activer le rapport du journal des demandes: Activez cet onglet pour activer le fichier journal sur l'application mobile PWA. Ce fichier journal peut être utilisé pour corriger tout comportement anormal de Progressive Web Application.

e) Afficher l'aperçu de l'application: Activez pour ajouter un téléphone de prévisualisation dans le panneau d'administration. Tous les changements de couleur, de police et d'écran d'accueil seront affichés dans un aperçu en temps réel du téléphone.

f) Activer la barre d'onglets: Ajoutez une barre d'onglets inférieure sur l'application mobile Magento 2 PWA.

g) Sélectionner la mise en page pour la page d'accueil:?Choose desired layouts from the added ones and improve look and feel of app.

Paramètres généraux-2

h) Image de l'icône de l'application:?Upload Magento 2 PWA app icon on your own and change the same as well if required.

i) Nom de l'application PWA:?Enter the name of the Magento 2 Progressive Web App.

j) Sélectionnez la police pour l'application PWA:?Choose the font of your PWA app for Magento 2.

k) Couleur du bouton de l'application: Choisissez la couleur du bouton pour votre application mobile PWA.

l) Couleur du texte du bouton d'application: Choisissez la couleur du texte du bouton pour votre Magento 2

m) Couleur du thème de l'application: Choisissez la couleur du thème (en-tête) de votre application Web.

n) ApplicationChoisissez la couleur d'arrière-plan de l'application Web progressive.

o) Couleur d'arrière-plan de l'écran de démarrage: Choisissez la bonne option de couleur pour l'arrière-plan de l'écran de démarrage de l'application PWA.

Paramètres généraux-3

p) Méthodes d'expédition désactivées: Choisissez les méthodes d'expédition pour ne pas travailler dans l'application mobile Magento 2 PWA.

q) Activer et télécharger le logo: Ajoutez l'image du logo de votre boutique à afficher sur l'en-tête de l'application PWA Mobile.

2.2 Paramètres des notifications push:

L'application Web progressive Magento 2 offre des notifications push illimitées sur le marché et fait la promotion des offres et des produits du magasin. L'administrateur du magasin recevra des notifications push à vie sans frais supplémentaires.

notifications push

Les différents champs sous cet onglet de configuration nécessitent la configuration d'un compte Firebase. Voici comment vous pouvez en définir un:

Comment créer un compte Firebase?

Étape 1 : Connectez-vous à Google Firebase

firebase

Étape 2 : Créer un nouveau projet Lorsque vous cliquez sur Ajouter un projet, la boîte de dialogue suivante apparaît:

créer-projet
La création du projet prendra quelques secondes. Une fois le projet prêt, cliquez sur Continuer.

continuer-projet

Étape 3 : Gérer les paramètres du projet Une fois le projet créé, cliquez sur Paramètres du projet.

paramètres du projet

Étape 4 : Accédez aux options d'authentification:

authentification-options
Étape 5 : Rechercher des clés Firebase Dans les paramètres du projet, cliquez sur Paramètres de messagerie cloud. De là, vous pouvez directement obtenir la clé du serveur.

clé de base de feu
Étape 6 : Ajoutez votre application Web à Firebase

application Web vers Firebase

application Web vers Firebase

Étape 7 : Obtenez d'autres détails liés à Firebase et collez-les dans le panneau d'administration du module PWA.

détails de la base de feu

Étape 8 : Obtenez la clé du serveur Firebase à partir de l'onglet de messagerie cloud dans les paramètres:

clé de base de feu

Étape 9 : Ajoutez votre domaine dans l'authentification >> connexion.

clé de serveur firebase

clé de serveur firebase

2.21 Notifications push automatisées:

L'administrateur du magasin peut planifier l'envoi automatique de notifications dans les cas suivants:

notifications-push-2

a) Nouveaux paramètres de commande:?Whenever any new order is placed from the Magento 2 PWA Mobile App.

b) Paramètres de modification de l'état de la commande: Chaque fois que le statut de livraison d'une commande est modifié / mis à jour.

c) Paramètres du panier abandonné: Chaque fois qu'un utilisateur laisse un produit dans le panier et abandonne Progressive Web App.

2.22 Notification push manuelle:

envoyer-notification

Comme indiqué dans l'instantané ci-dessus, l'administrateur du magasin peut personnaliser et envoyer des notifications push manuelles aux utilisateurs de l'application mobile PWA. Le message, l'image, la remise offerte, le lien de redirection peuvent être ajoutés / modifiés pour améliorer l'efficacité de la notification et apporter plus de ventes.

Mise en page de la page d’accueil 2.3:

Le générateur d'applications mobiles Magento 2 PWA offre un panneau d'édition DIY entièrement personnalisable pour personnaliser et configurer l'apparence de l'application Web progressive. Diverses nouvelles mises en page peuvent être ajoutées au panneau d'administration en fonction des festivals et des occasions à venir.

mise en page d'accueil

écran-d'accueil-layout-3

2.31 Principales catégories:

top-catégories

2.32 Bannière carrée:

bannière carrée

2.33 Bannière coulissante:

bannière coulissante

2.34 Grille de bannière:

bannières en grille

2.35 Bannière du compte à rebours

compte à rebours-bannière

2.36 Produits carrés:

produits carrés

2.37 Produits coulissants:

produits coulissants

2.38 Produits de grille:

produits en grille

Comment obtenir les détails de l'application Facebook?

L'application Facebook peut être créée en suivant les étapes ci-dessous: –

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

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

add-new-app

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

create-app-id

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

create-app-id

Étape 7 :?Click on “Setting” tab.

paramètre fb-app

Étape 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

id-app-fb

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

ajouter-plate-forme
Étape 15:
Et sélectionnez Site Web comme plate-forme.

plate-forme de choix

Étape 16 :?Now Enter your site URL.

enter-website-url
Étape 17 & 18:?Click on “Products+” and select Facebook login.

Identifiant Facebook
Étape 19 :?Select web as the platform for the app.

plate-forme de choix

Étape 20 :?Now click on save.

facebook-app-id
Étape 21 & 22:Cliquez sur Paramètres et ajoutez un URI de redirection OAuth valide. URI de redirection OAuth valides: https://example.com/pwa-app/login

URL de redirection

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

examen de l'application
Dernière étape:?Copy the App ID and App Secret and paste it into the fields provided in the module.

dernière étape

Comment obtenir les détails de l'application Google?

  • Accédez à Google Developers Console (https://console.developers.google.com/project) ou cliquez sur le lien en haut à droite de l'onglet respectif dans la page de configuration du module.
  • Cliquez maintenant sur
  • Saisissez un nom pour votre projet et passez à l'étape suivante.
  • Maintenant, cliquez sur APIs et auth-> Credentials dans le menu de gauche comme indiqué ci-dessous.

google-app-id

  • Cliquez sur le bouton Créer un nouvel ID client dans le panneau de droite de l'écran.
  • Vous devrez peut-être remplir le formulaire pour l'écran de consentement avant de continuer. Pour ce faire, vous devez cliquer sur Écran de consentement dans le menu de gauche, comme indiqué dans l'image ci-dessus.
  • Remplissez le formulaire avec les détails ci-dessous:

Type d'application:?Web Application.
Origines JavaScript autorisées:?Your store domain name (http://www.yourstore.com).
URI de redirection autorisée ou URI de la page de redirection de Loginizer:
https://example.com/pwa-app/login

google-app-id

  • Maintenant, cliquez sur le bouton Créer un ID client pour obtenir votre ID client et votre clé secrète client.
  • Vous pouvez désormais utiliser le secret client et l'ID client pour permettre à vos clients de se connecter à votre boutique à l'aide de leur compte Google.

3.0 Écrans de l'application PWA frontale:

Jetez un coup d'œil sur les écrans parfaitement conçus de Progressive Web App pour Magento 2:

Écran d'accueil 3.1:

écran d'accueil

L'écran d'accueil de l'application Web progressive Magento 2 est entièrement personnalisable depuis le panneau d'administration du module. Vous pouvez concevoir la disposition des écrans d'application comme vous le souhaitez. Des mises en page personnalisées peuvent être conçues dans le panneau d'administration en fonction d'événements, de festivals, d'occasions, etc. et utilisées chaque fois que nécessaire.

1. Disposition dynamique:

En utilisant divers éléments de conception (bannières, curseurs, catégories, etc.), l'administrateur du magasin peut créer une mise en page dynamique selon les besoins.

2. Logo du magasin:
Ajoutez le logo du magasin sur l'en-tête de l'application PWA.

3. Panier:
L'icône du panier dans le coin supérieur droit de l'écran d'accueil permet aux utilisateurs d'activer l'écran du panier.

4. Menu de navigation:
Parcourez les catégories dans les applications avec le menu de navigation de gauche sur l'écran d'accueil.

3.2 Menu de navigation de gauche:

Les applications mobiles Magento 2 PWA proposent une catégorisation transparente des produits. Les catégories de l'application mobile PWA seront les mêmes que celles disponibles sur le site Web. Les acheteurs en ligne peuvent facilement parcourir les produits de plusieurs catégories sans aucun problème. Diverses pages CMS peuvent également être ajoutées au menu de navigation de gauche à l'aide du panneau d'administration.

barre de navigation-473x1024

1. Mon compte:
L'option Mon compte contient toutes les informations personnelles, d'expédition et de commande de l'utilisateur. Les acheteurs de l'application PWA peuvent voir toutes les données stockées qui leur sont liées et peuvent également les mettre à jour.

2. Les catégories
Les catégories affichées dans le menu de navigation de gauche de l'application PWA sont les mêmes que celles de votre site Web.

3. Pages CMS:
Diverses pages CMS comme À propos de nous, Contactez-nous, Conditions générales, etc. Vous pouvez y accéder à partir d'ici.

4. Langue (s)
L'option de langue permet aux utilisateurs de l'application PWA de visualiser l'application Web dans la langue de leur choix. Toutes les langues disponibles sont affichées sous cette option uniquement.

5. Monnaie (s)
Toutes les devises disponibles sur votre site Web sont affichées ici sur

6. Connexion / Déconnexion
Les utilisateurs peuvent facilement se connecter / se déconnecter de

Écran de catégorie 3.3:

écran de catégorie

1. Vues multiples:
Les catégories sur l'application PWA pour

2. Tri:
Cette option permet aux acheteurs en ligne de choisir l'ordre de tri afin d'affiner la recherche et d'obtenir facilement le produit souhaité.

3. Filtre:
L'option de filtrage des produits simplifie la recherche de produits. Les utilisateurs peuvent filtrer tous les produits sous des catégories en utilisant divers attributs comme la taille, la couleur, le prix, etc.

Écran de produit 3.4:

L'écran produit de l'application Web progressive Magento 2 contient toutes les informations produit nécessaires, identiques à celles de votre boutique. De plusieurs images de produits à une description courte et longue, cela aide l'utilisateur à décider de l'achat. La disponibilité du produit est signalée comme "En stock" ou "En rupture de stock" en fonction de l'état de l'inventaire.

produit-écran-473x1024

1. Informations sur le produit et entretien
Les informations complètes sur le produit disponibles dans l'inventaire seront affichées ici.

2. brève description
Les utilisateurs peuvent lire la brève description de votre produit pour se faire une opinion rapide sur l'achat.

3. Options du produit:
Toutes les options liées au produit comme la taille, la couleur, etc. sont affichées ici.

5. Ajouter au panier:
Ce bouton permet aux utilisateurs d'ajouter des produits dans le panier. Les utilisateurs peuvent en outre traiter le panier pour l'achat.

6. Partage social de produit:
L'option de partage du produit permet aux utilisateurs de partager des produits sur plusieurs canaux sociaux.

Écran de connexion 3.5

écran-de-connexion-473x1024

L'application Web progressive Magento 2 offre des options de connexion rapides en un clic et simplifie le processus de connexion / d'inscription: – Connexion par e-mail – Connexion Google – Connexion Facebook

1. S'identifier
Les utilisateurs de l'application peuvent facilement s'authentifier et se connecter aux applications PWA en utilisant leurs identifiants de connexion par e-mail précédents.

2. S'inscrire
Tous les nouveaux utilisateurs de l'application peuvent s'inscrire et créer leur compte sur le magasin à partir du

3. Se connecter avec Facebook
Les utilisateurs peuvent se connecter à l'application PWA en utilisant leurs identifiants de compte Facebook.

4. Connexion avec Google+
Les utilisateurs peuvent se connecter à l'application PWA en utilisant leurs identifiants de compte Google.

Écran du panier d'achat 3.6:

Le panier des applications Magento 2 PWA affichera tous les produits ajoutés avec leur quantité et leur prix à payer. Les utilisateurs de l'application peuvent également afficher les détails du produit pour être sûrs avant d'en acheter un.

écran-panier-473x1024

1. Appliquer le bon:
Cette option permet aux utilisateurs d'utiliser des coupons de site Web et de profiter d'offres de réduction.

2. Prix ​​total du produit:
Les utilisateurs peuvent voir le coût total de leur panier avant de continuer. Il est automatiquement mis à jour en fonction de toute mise à jour avec quantité de produit ou nouvel ajout.

3. Mettre à jour la quantité de produit:
Les utilisateurs de l'application PWA peuvent même mettre à jour la quantité de produit avec l'option "Mettre à jour la quantité".

4. Supprimer le produit:
Les utilisateurs de l'application peuvent simplement supprimer le produit du panier en appuyant simplement sur l'option «Supprimer».

5. Continuez vos achats:
Les utilisateurs de l'application peuvent quitter le panier pour parcourir plus de produits sur votre application.

6. Continuez à payer:
Les utilisateurs de l'application PWA peuvent accéder aux écrans de paiement et de paiement en appuyant simplement sur l'option "Continuer pour passer à la caisse".

3.7 Écran de paiement:

Les applications PWA Mobile pour Magento 2 sont livrées avec un seul écran de paiement sans encombrement avec uniquement les champs pertinents et nécessaires requis. Les utilisateurs de l'application obtiennent un aperçu complet de la commande avant d'effectuer le paiement, comme les détails d'expédition, les détails de facturation, le résumé de la commande, le commentaire de la commande, le paiement

écran-de-paiement-473x1024

1. Détails d'expédition et de facturation
Cet écran fournit des détails sur les adresses de livraison et de facturation enregistrées par l'utilisateur. L'utilisateur peut également modifier / enregistrer la nouvelle adresse de livraison si nécessaire.

2. Récapitulatif de la commande
Les utilisateurs de l'application peuvent consulter les détails du produit avant d'effectuer le paiement.

3. méthodes de livraison
Toutes les méthodes d'expédition disponibles sont affichées ici. Les utilisateurs peuvent choisir celui qui convient à leurs besoins.

4. Commentaire de commande
Les utilisateurs peuvent également ajouter tout commentaire lié à leur commande qui sera visible pour stocker l'administrateur sur la page Web de la commande dans le backend.

6. Résumé des paiements
Cette section affiche les détails de paiement détaillés impliqués dans l'achat.

7. Procéder au paiement
Les utilisateurs de l'application PWA seront redirigés vers l'écran de paiement après avoir appuyé sur le bouton "Procéder au paiement".

Écran de paiement 3.8:

L'application Magento 2 PWA apporte tous les paiements par vue Web (site Web) sur l'application. Les utilisateurs de l'application trouveront ici les mêmes options de paiement que celles disponibles sur les applications. L'écran de paiement de Magento 2 Progressive Web App est entièrement optimisé pour l'affichage des applications.

écran-de-paiement-473x1024

3.9 Écran Mon compte:

écran-mon-compte-473x1024

L'écran Mon compte de l'application Magento 2 PWA offre tous les détails des utilisateurs disponibles sur l'application Web Progressive. Les acheteurs en ligne peuvent consulter les détails personnels, l'adresse de livraison, les détails de la commande, etc.

1. Détails personnels
Les utilisateurs peuvent également afficher et mettre à jour les détails de leur profil préenregistré.

2. Adresse de livraison
Les utilisateurs de l'application peuvent voir la liste complète des adresses de livraison pré-enregistrées dans l'application PWA.

3. détails de la commande
Les utilisateurs de l'application peuvent consulter la liste complète des commandes passées précédemment à partir de l'application PWA et leurs détails.

4. Fonction de re-commande
Il y a un bouton de commande directe sur l'écran Mon compte de l'application PWA. Tous les produits précédents sous cette commande seront ajoutés au panier avec un seul bouton.

Écran Détails de la commande 3.10

L'application Web progressive Magento 2 affiche les détails complets des commandes d'applications précédentes. Cet écran contient les détails de la commande, l'historique du statut, les adresses de livraison et de facturation, etc. pour chaque commande passée via l'application Magento 2 PWA. Les utilisateurs de l'application peuvent rapidement afficher le récapitulatif complet de la commande et suivre également l'état de la livraison.

écran-mon-compte-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 *