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. Le lancement d’une application Web progressive est une tâche assez simple et abordable de nos jours. KnowBand a lancé l’application mobile Magento 2 PWA, un outil complet sans code et automatisé pour lancer une application Web progressive. En termes simples, chaque fois qu’un utilisateur ouvre l’URL de votre boutique sur le navigateur mobile, il reçoit un message d’invite “Ajouter à l’écran d’accueil”. L’application Web progressive Magento 2 sera ajoutée dans l’appareil de l’utilisateur comme n’importe quelle 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 de la boutique de démonstration :�https://ma2demo.knowband.com/pwa/manager/
URL de l’application PWA :�https://ma2demo.knowband.com/pwa/pwa-app/
[IMP] Remarques pour Magento 2 iOS PWA :
�> Les appareils iOS n’offrent aucune invite “Ajouter à l’écran d’accueil” intégrée. Les utilisateurs doivent ajouter manuellement l’application mobile Magento 2 PWA à l’écran d’accueil de l’iPhone ou de l’iPad. �> iOS ne prend pas en charge les notifications push Web. Les notifications push ne peuvent être envoyées à l’appareil Android qu’à partir du panneau d’administration de Magento 2 PWA Mobile App Builder.
[NOUVELLE MISE À JOUR] Magento 2�PWA prend en charge les langages RTL :
Le créateur d’applications mobiles Magento 2 PWA prend désormais en charge toutes les langues du monde, y compris RTL (Right To Left). L’application mobile PWA pour Magento 2 peut avoir des langues comme l’arabe, l’hébreu, le persan, etc. Le propriétaire du magasin peut proposer toutes les langues du site Web sur l’application Web progressive et peut même en ajouter de nouvelles.
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:
a) Activer l’extension:�Activer�le module Magento 2�PWA pour faire fonctionner l’application Web sur les smartphones des utilisateurs.
b) Rediriger sur la page du panier lorsque Ajouter au panier:�Activez pour rediriger les utilisateurs vers le panier ou désactivez-les pour les garder sur l’écran du produit.
c) Description abrégée de l’affichage:�Activer pour ajouter et afficher une courte description sur l’écran du produit de 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:�Choisissez les mises en page souhaitées parmi celles ajoutées et améliorez l’apparence de l’application.
h) Image de l’icône de l’application:�Téléchargez vous-même l’icône de l’application Magento 2 PWA et modifiez-la également si nécessaire.
i) Nom de l’application PWA:�Entrez le nom de l’application Web progressive Magento 2.
j) Sélectionnez la police pour l’application PWA:�Choisissez la police de votre application PWA pour 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 application Web progressive Magento 2.
m) Couleur du thème de l’application: Choisissez la couleur du thème (en-tête) de votre application Web.
n) Couleur d’arrière-plan de l’application :Choisissez 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.
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.
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
Étape 2 : Créer un nouveau projet Lorsque vous cliquez sur Ajouter un projet, la boîte de dialogue suivante apparaît :
La création du projet prendra quelques secondes. Une fois le projet prêt, cliquez sur Continuer.
Étape 3 : Gérer les paramètres du projet Une fois le projet créé, cliquez sur Paramètres du projet.
Étape 4 : Accédez aux options d’authentification:
É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.
Étape 6 : Ajoutez votre application Web à Firebase
Étape 7 : Obtenez d’autres détails liés à Firebase et collez-les dans le panneau d’administration du module PWA.
Étape 8 : Obtenez la clé du serveur Firebase à partir de l’onglet de messagerie cloud dans les paramètres:
Étape 9 : Ajoutez votre domaine dans authentification >> connexion.
2.21 Notifications push automatisées:
L’administrateur du magasin peut planifier l’envoi automatique de notifications dans les cas suivants:
a) Nouveaux paramètres de commande:Chaque fois qu’une nouvelle commande est passée à partir de l’application mobile Magento 2 PWA.
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:
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.
2.31 Principales catégories:
2.32 Bannière carrée:
2.33 Bannière coulissante:
2.34 Grille de bannière:
2.35 Bannière du compte à rebours
2.36 Produits carrés:
2.37 Produits coulissants:
2.38 Produits de 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 :Aller à l’URL donnée: https://developers.facebook.com/apps/
Étape 2 :Cliquez sur le bouton “Ajouter une nouvelle application”.
Étape 3 et 4:Entrez le nom de votre application et votre adresse e-mail, puis cliquez sur le bouton “Créer un identifiant d’application”.
Étape 5 et 6:Après avoir cliqué sur Créer un identifiant d’application, vous devrez effectuer un contrôle de sécurité comme indiqué:
Étape 7 :Cliquez sur l’onglet “Paramètres”.
Étape 8-13:Deux options seront disponibles dans le menu déroulant, Basique et Avancé, cliquez sur “Basique”. Ensuite, entrez votre «Domaine d’application», «Email de contact», «URL de confidentialité», «Termes et conditions» URL »,« Ajouter un logo »,« Sélectionner une catégorie »et cliquez sur le bouton« Enregistrer les modifications ». Domaines d’application: yourdomain.com est correct yourdomain.com/store is incorrect www.domain.com is incorrect
Étape 14 :Maintenant, cliquez sur “+ Ajouter une plate-forme”.
Étape 15: Et sélectionnez Site Web comme plate-forme.
Étape 16 :Maintenant, entrez l’URL de votre site.
Étape 17 et 18:Cliquez sur “Produits +” et sélectionnez Connexion Facebook.
Étape 19 :Sélectionnez Web comme plate-forme pour l’application.
Étape 20 :“ Maintenant, cliquez sur Enregistrer.
Étape 21 et 22: Cliquez sur Paramètres et ajoutez un URI de redirection OAuth valide. URI de redirection OAuth valides: https://example.com/pwa-app/login
Étape 23 et 24:Cliquez sur “Revue de l’application”. Et marquez «Rendre le nom de votre application public» sur Oui.
Dernière étape:Copiez l’ID de l’application et le secret de l’application et collez-les dans les champs fournis dans le module.
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 correspondant dans la page de configuration du module.
- Cliquez maintenant sur Créer un projet à gauche de la page.
- Saisissez un nom pour votre projet et passez à l’étape suivante.
- Cliquez maintenant sur API et auth-> Credentials dans le menu de gauche comme indiqué ci-dessous.
- 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: Application Web.
Origines JavaScript autorisées: Le nom de domaine de votre boutique (https://www.yourstore.com).
URI de redirection autorisée ou URI de la page de redirection de Loginizer:
https://example.com/pwa-app/login
- 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:
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.
1. Mon compte:
L’option Mon compte contient toutes les informations personnelles, d’expédition et de commande de l’utilisateur. Les acheteurs d’applications PWA peuvent voir toutes les données stockées qui leur sont associé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 telles que À propos de nous, Contactez-nous, Termes et conditions, etc. Accessible à 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 l’application Magento 2 PWA.
6. Connexion / Déconnexion
Les utilisateurs peuvent facilement se connecter/se déconnecter de l’application Magento 2 PWA via cette option.
Écran de catégorie 3.3:
1. Vues multiples:
Les catégories sur l’application PWA pour Magento 2 peuvent être consultées à la fois en mode liste et en mode grille.
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.
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
L’application Web progressive Magento 2 offre des options de connexion rapides en un clic et rend le processus de connexion/inscription plus transparent : – 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 la boutique à partir de l’application�Magento 2 PWA. Le formulaire d’inscription ne demande que les détails nécessaires pour créer un compte.
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.
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 continuer vers les écrans de paiement et de paiement en appuyant simplement sur l’option “Continuer à payer”.
3.7 Écran de paiement:
Les applications PWA Mobile pour Magento 2 sont livrées avec un paiement sur un seul écran 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écapitulatif de la commande, le commentaire de la commande, le récapitulatif du paiement.
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.
3.9 Écran Mon compte:
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 d’expédition et de facturation, etc. pour chaque commande passée via l’application Magento 2 PWA. Les utilisateurs de l’application peuvent afficher rapidement l’intégralité du récapitulatif de la commande et suivre également l’état de la livraison.
