1.0 Présentation
Ce plugin prêt à l’emploi est conçu et développé par KnowBand pour convertir votre boutique WooCommerce en cours d’exécution en une application Web progressive riche en fonctionnalités. Une fois la boutique de commerce électronique transformée en application PWA, chaque fois qu’un utilisateur ouvre l’URL de la boutique dans le navigateur mobile, la personne concernée sera invitée à “Ajouter PWA à l’écran d’accueil”. Une fois l’application mobile WooCommerce PWA ajoutée à l’écran d’accueil de l’appareil mobile, l’utilisateur peut parcourir le magasin sur l’application comme n’importe quelle autre application. L’application mobile WooCommerce PWA est une application Web qui ne repose pas sur la publication d’applications sur Google Play et Apple App Store. Les utilisateurs peuvent simplement ajouter l’application Web progressive à l’appareil mobile et l’utiliser comme n’importe quelle autre application.
1.1 Fonctionnalités convaincantes pour choisir WooCommerce PWA :
– Chargement plus rapide et performances rapides – Écran d’accueil entièrement personnalisable avec l’éditeur de bricolage – Prise en charge de toutes les méthodes d’expédition et de paiement du site Web – Interface conviviale engageante – Aucune dépendance aux magasins d’applications – Entièrement personnalisé pour votre magasin – Connexion par e-mail et réseaux sociaux (Google et Facebook ) – Prise en charge multilingue et RTL – Fonctionnement en mode hors ligne – Synchronisation en direct du site Web et de l’application – Compatible Android et iOS – Paiement d’une page – Application légère – Gestion des pages CMS
1.2 Voir la démo WooCommerce PWA
Explorez les fonctionnalités du module et de l’application PWA à partir des liens de démonstration ci-dessous:
Panneau d’administration du module : https://wcdemo1.knowband.com/pwa/wp-login.php
Application de démonstration PWA: ,warhttps://wcdemo1.knowband.com/pwa/pwa-app/
Remarque-�Copiez-collez l’URL dans le navigateur mobile et “Ajouter à l’écran d’accueil”.
[IMP] Remarques pour iOS :
�> Les appareils iOS n’offrent aucune invite “Ajouter à l’écran d’accueil” intégrée, les utilisateurs doivent donc ajouter manuellement l’application mobile PWA à l’écran d’accueil de l’iPhone ou de l’iPad. �> iOS ne prend pas en charge les notifications push Web. Par conséquent, les notifications push ne seront pas reçues sur la PWA installée sur l’iPhone ou l’iPad.
[NOUVELLE MISE À JOUR]�WooCommerce�PWA prend en charge les scripts de langage RTL :
Le créateur de l’application Web progressive WooCommerce prend désormais en charge toutes les langues du monde, y compris celles RTL (de droite à gauche) telles que l’arabe, l’hébreu, le persan, etc. L’administrateur du magasin peut désormais même ajouter des langues RTL sur l’application mobile WooCommerce PWA.
2.0 Écrans du panneau d’administration:
Explorez tous les paramètres sous le panneau d’administration de l’application mobile WooCommerce PWA et vérifiez leur fonctionnement à l’aide des captures d’écran détaillées ci-dessous :
Paramètres généraux 2.1:
a) Afficher / masquer l’aperçu: Appuyez sur le bouton œil pour afficher / masquer l’aperçu du téléphone dans le panneau d’administration.
b) Activer/Désactiver : Activez le module pour que PWA fonctionne sur les appareils mobiles.
c) Activer le rapport du journal des demandes: Activez le journal des erreurs sur mobile.
d) Rediriger sur la page du panier lors de l’ajout au panier : Contrôlez la redirection du bouton Ajouter au panier chaque fois qu’un utilisateur appuie sur le bouton Ajouter au panier.
e) Afficher une courte description : Activez et affichez une courte description du produit (si ajouté sur la page produit du site Web).
f) Afficher la fenêtre contextuelle Ajouter à l’écran d’accueil : Offrez un message contextuel “Ajouter à l’écran d’accueil” et autorisez les utilisateurs à ajouter l’application PWA sur les appareils mobiles.
g) Activer le logo : Ajoutez le logo de votre marque sur l’en-tête de l’application mobile WooCommerce PWA.
h) Couleur d’arrière-plan de l’écran de démarrage : Choisissez et définissez la couleur de l’écran de démarrage de l’application Web progressive WooCommerce.
i) Nom de l’application PWA : Entrez le nom souhaité pour l’application WooCommerce PWA. Il sera affiché une fois que l’utilisateur aura ajouté l’application sur les appareils mobiles.
j) Image pour l’icône de l’application : Ajouter une image d’icône d’application dans le panneau d’administration.
k) Sélectionnez la police de l’application : Choisissez la police de votre application mobile WooCommerce PWA.
l) Sélectionnez Disposition pour la page d’accueil : Choisissez parmi la disposition d’écran d’accueil pré-ajoutée pour l’application WooCommerce PWA.
m) Couleur du bouton de l’application : Choisissez la couleur du bouton pour l’application mobile PWA.
n) Couleur du thème de l’application : Choisissez la couleur du thème pour l’application PWA.
o) Couleur d’arrière-plan de l’application : Choisissez la couleur d’arrière-plan de l’application PWA.
p) Activer la barre d’onglet : Activez la barre d’onglets en bas de l’application PWA pour une navigation rapide et facile.
q) CSS personnalisé : Entrez le code CSS pour améliorer l’apparence des pages Web de l’application PWA, telles que le paiement Web, les pages CMS, etc.
Paramètres de notifications push 2.2
Les notifications push sont le meilleur outil marketing pour l’application PWA pour WooCommerce. L’administrateur du magasin peut simplement promouvoir les produits et les offres du magasin auprès des utilisateurs de l’application et générer plus de ventes et de revenus. Saisissez tous les détails dans les paramètres de notification push en créant un projet Firebase :
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îtra:
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 :Aller aux options d’authentification:
Étape 5 : Trouver les 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 relatifs à 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 Paramètres:
Étape 9 :Ajoutez votre domaine dans l’authentification >> connectez-vous.
A) Notification push de commande réussie:
Activez / désactivez la notification push automatisée à envoyer aux utilisateurs de l’application chaque fois qu’ils passent une commande réussie à partir de l’application WooCommerce PWA.
B) Notification push de mise à jour de l’état de la commande:
Activer / désactiver la notification push automatisée envoyée chaque fois que l’état de la commande de l’application est mis à jour. Les utilisateurs de l’application mobile WooCommerce PWA peuvent garder un œil sur les détails des commandes précédentes.
C) Notification push de panier abandonné:
Activer / désactiver la notification push automatique envoyée aux utilisateurs abandonnant des produits dans le panier sans achat réussi. Cette notification push sera envoyée aux utilisateurs automatiquement après l’intervalle de temps entré.
2.3 Historique des notifications push
L’historique complet des notifications push des notifications push envoyées avec succès s’affiche ici. L’administrateur du magasin peut garder une trace des notifications push précédemment envoyées à partir d’ici.
A) Envoyer une notification:
Personnalisez et envoyez manuellement une notification push aux utilisateurs de l’application PWA selon les besoins. L’administrateur du magasin peut configurer lui-même ces notifications et les envoyer aux utilisateurs de l’application WooCommerce PWA.
Mise en page de la page d’accueil 2.4:
L’application mobile WooCommerce PWA offre un écran d’accueil personnalisable dont la disposition peut être conçue à partir du panneau d’administration en quelques clics de souris et glisser-déposer. La mise en page attrayante selon le festival en cours, la vente, l’occasion, etc. peut certainement aider à améliorer les ventes via les applications mobiles WooCommerce PWA.
Ajoutez une nouvelle mise en page à partir de cet onglet ou modifiez celles ajoutées précédemment. Les paramètres de configuration de la page d’accueil proposent les éléments suivants :
a) Principales catégories :�
b) Bannière carrée :�
c) Bannière coulissante horizontale :�
d) Bannières de grille :�
e) Bannière du compte à rebours :�
f) Produits Carrés :�
g) Produits coulissants :�
h) Produits de réseau :�
Pages d’informations 2.5:
Ajoutez des pages CMS sur l’application et offrez un contenu informatif aux utilisateurs de l’application mobile WooCommerce PWA.
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.
Écrans PWA frontaux 3.0 :
Écran d’accueil 3.1:
L’écran d’accueil de l’application mobile WooCommerce PWA est entièrement personnalisable avec l’éditeur DIY, comme expliqué ci-dessus dans les écrans du panneau d’administration. Changez l’apparence de l’écran d’accueil de l’application à tout moment et offrez une apparence plus conviviale et axée sur les ventes.
1. Disposition personnalisée:
À l’aide de divers bannières, curseurs et éléments de produit, l’administrateur du magasin peut créer une mise en page dynamique selon les besoins.
2. Logo de la marque:
Utilisez le logo de votre boutique dans l’en-tête supérieur de l’application WooCommerce PWA.
3. Sac de panier:
L’icône du panier dans le coin supérieur droit de l’écran d’accueil permet aux utilisateurs d’accéder à l’écran du panier et de vérifier les produits ajoutés.
4. Menu de navigation de gauche:
Parcourez les catégories affichées dans l’application PWA avec la navigation dans le menu de navigation à gauche.
3.2 Menu accordéon (barre de navigation) :
Les applications mobiles WooCommerce PWA sont livrées avec une catégorisation transparente et appropriée disponible. Les utilisateurs peuvent trouver les catégories pertinentes dans le menu de navigation de gauche et parcourir les produits. Diverses pages CMS peuvent également être ajoutées dans le menu offrant un contenu pertinent sur l’application.
1. Mon compte
L’option Mon compte contient toutes les informations personnelles des utilisateurs, y compris l’expédition et la commande. Les acheteurs de l’application Web progressive WooCommerce peuvent afficher et mettre à jour les informations enregistrées.
2. Les catégories
Les catégories affichées dans le menu de navigation de gauche de l’application Web progressive WooCommerce sont les mêmes que celles disponibles sur la boutique de commerce électronique.
3. Pages CMS
Diverses pages CMS telles que À propos de nous, Contactez-nous, Conditions générales, etc. sont accessibles à partir d’ici. Ces pages d’informations peuvent être ajoutées à partir du panneau d’administration de l’extension.
4. Langue (s)
L’option de langue permet aux utilisateurs de l’application PWA d’afficher l’application Web dans la langue de leur choix.
5. Monnaie (s)
Toutes les devises disponibles sur votre site Web sont affichées ici sur l’application WooCommerce PWA.
6. Connexion / Déconnexion
Les utilisateurs peuvent facilement se connecter/se déconnecter de l’application WooCommerce PWA via cette option.
Écran de catégorie 3.3:
Des écrans de catégorie sans encombrement avec la liste et la vue en grille permettent aux utilisateurs de choisir ce qui leur convient le mieux dans une catégorie spécifique. L’ensemble de l’inventaire du magasin restera synchronisé avec l’application mobile WooCommerce PWA et les nouveaux ajouts et modifications seront même mis à jour en temps réel.
1. Vue Liste et Grille:
Les catégories de l’application PWA pour WooCommerce peuvent être parcourues à la fois en mode liste et en mode grille.
2. Tri des produits:
L’option de tri permet aux acheteurs en ligne d’affiner les produits dans l’ordre de tri souhaité et de trouver le bon.
3. Filtre de produit:
L’application mobile WooCommerce PWA offre la possibilité de filtrer les produits en simplifiant la recherche de produits. Les acheteurs en ligne peuvent trouver les produits souhaités dans des catégories en utilisant des filtres pour divers attributs tels que la taille, la couleur, le prix, etc.
Écran de produit 3.4:
L’écran du produit de l’application Web progressive WooCommerce est aussi simple et intrigant que possible. Avec toutes les options et informations nécessaires sur le produit, il suffit de quelques minutes pour que les utilisateurs soient sûrs du produit
qu’il est sur le point d’acheter. Plusieurs images sont disponibles pour le produit avec les options En stock et En rupture de stock.
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 mobile WooCommerce PWA offre des options de connexion sociale en un clic et rend le processus de connexion/inscription plus transparent. L’application Web progressive WooCommerce offre une connexion Google et 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. Inscrivez-vous:
Tous les nouveaux utilisateurs de l’application peuvent s’inscrire et créer leur compte sur la boutique à partir de l’application WooCommerce PWA. Le formulaire d’inscription ne demande que les détails nécessaires pour créer un compte.
3. Connectez-vous avec Facebook:
Les utilisateurs peuvent se connecter à l’application PWA en utilisant leurs identifiants de compte Facebook.
4. Connectez-vous avec Google:
Les utilisateurs peuvent se connecter à l’application PWA en utilisant leurs identifiants de compte Google.
Écran du panier d’achat 3.6:
L’écran Panier de l’application mobile WooCommerce PWA affichera tous les produits ajoutés au panier. Les utilisateurs de l’application peuvent voir le nom du produit, la quantité, le prix total et les frais d’expédition. Cet écran propose les options suivantes :
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”.
Écran de paiement 3.7
L’application Web progressive pour WooCommerce propose un paiement simplifié sur un seul écran avec uniquement les informations pertinentes. Les utilisateurs de l’application peuvent afficher les détails complets de la commande tels que 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 d’expédition:
Toutes les méthodes d’expédition disponibles sont affichées ici. Les utilisateurs peuvent choisir celui qui convient à leurs besoins.
4. Commentaire de la 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.
5. Récapitulatif du paiement:
Cette section affiche les détails de paiement détaillés impliqués dans l’achat.
6. 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’écran de paiement de l’application WooCommerce PWA contient tous les paiements en ligne disponibles sur la boutique. Les acheteurs en ligne peuvent trouver des expériences de paiement similaires sur les sites Web et les applications.
Écran 3.9 Mon compte
L’écran Mon compte de l’application mobile WooCommerce PWA permet aux acheteurs en ligne de voir leurs détails complets enregistrés sur l’application Web progressive. Cet écran affiche également une liste des commandes d’applications précédentes.
1. Données personnelles:
Les utilisateurs peuvent afficher et mettre à jour leurs informations personnelles pré-enregistrées sur l’application mobile PWA.
2. Adresse (s) d’expédition:
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.91
L’écran des détails de la commande de l’application Web progressive WooCommerce fournit des détails complets sur les commandes spécifiques de l’application PWA. Les utilisateurs peuvent facilement afficher l’adresse de livraison, le résumé du produit, le mode d’expédition et de paiement, le résumé du coût total, etc. Il offre même la possibilité de suivre l’état de la commande et de la livraison.
