1.0 Présentation
Cette extension OpenCart automatisée est conçue pour permettre aux propriétaires de boutiques en ligne de transformer facilement leur boutique en une application Web progressive. Le magasin de commerce électronique dans PWA est l’une des principales technologies avancées que toute entreprise de commerce électronique devrait rechercher. L’application mobile OpenCart PWA est en fait une application Web qui ne repose pas sur les magasins d’applications tiers (Google Play et Apple App Store). Les acheteurs en ligne peuvent facilement “Ajouter une application PWA à l’écran d’accueil” et acheter des produits en déplacement comme toute autre application.
1.1 Comment fonctionne OpenCart Progressive Web App (PWA)?
Une fois que la boutique de commerce électronique est convertie en application mobile OpenCart PWA, chaque fois qu’un utilisateur ouvre l’URL de la boutique dans le navigateur mobile, les utilisateurs seront invités à “Ajouter PWA à l’écran d’accueil”. C’est aussi simple que cela à installer et à utiliser OpenCart Progressive Web App.
1.2 Principales fonctionnalités pour choisir OpenCart PWA:
- Chargement plus rapide et performances rapides
- Écran d’accueil entièrement personnalisable avec l’éditeur de bricolage
- Prise en charge de tous les modes d’expédition et de paiement sur le site Web
- Notifications push illimitées (notifications automatiques et personnalisées)
- Notification push de panier abandonné
- Prise en charge du chat Zopim et WhatsApp
- Interface conviviale engageante
- Pas de dépendance sur les magasins d’applications
- Entièrement marqué pour votre magasin (marque blanche)
- Email et connexion sociale (Google et Facebook)
- Prise en charge multilingue et RTL
- Fonctionnement en mode hors ligne
- Fonctionnalité de liste de souhaits intégrée
- Synchronisation en direct sur le site Web et l’application
- Mise à jour automatique de l’inventaire
- Compatibilité de plusieurs appareils
- Paiement d’une page
- Application légère
- Gestion des pages CMS
- Produits associés sur Progressive Web App
- Avis d’utilisateurs pour les produits sur PWA
- Prise en charge de plusieurs devises
- Assistance pour les coupons / bons
[IMP] Remarques pour iOS PWA :
�> Les appareils iOS (iPhone, iPad, etc.) n’offrent aucune invite “Ajouter à l’écran d’accueil” intégrée. Par conséquent, les utilisateurs de l’application mobile PWA doivent ajouter manuellement l’application mobile OpenCart 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, l’administrateur du magasin ne peut envoyer les notifications push qu’à l’appareil Android, pas sur iOS.
[NOUVELLE MISE À JOUR]�OpenCart PWA prend en charge les langues RTL (arabe, hébreu, etc.) :
Le créateur d’applications mobiles OpenCart PWA prend désormais en charge plusieurs langues, y compris les scripts RTL (de droite à gauche) comme l’arabe, l’hébreu, le persan, etc. Toutes les langues de la boutique OpenCart seront sur l’application Web progressive et d’autres langues requises peuvent également être ajoutées. Les utilisateurs peuvent choisir la langue sur l’application Web progressive et tout le contenu de l’application sera traduit en conséquence.
Entièrement compatible avec le marché multifournisseur KnowBand:
Notre application mobile OpenCart PWA est compatible avec Place de marché multifournisseurs OpenCart. Convertissez votre boutique de commerce électronique OpenCart en un marché à part entière et lancez l’application mobile PWA pour la même chose. Les vendeurs de la marketplace seront disponibles sur votre Progressive Web App et les utilisateurs pourront simplement les parcourir également.
Remarque: Les applications mobiles OpenCart PWA sont uniquement centrées sur le client, c’est-à-dire que les utilisateurs peuvent visiter l’application de navigation PWA avec les vendeurs. Il n’y aura pas de tableau de bord ou de gestion du vendeur via OpenCart Progressive Web App. L’administrateur peut gérer les vendeurs à partir du Web du marché et il sera mis à jour automatiquement sur l’application mobile PWA.
1.3 Voir la démo OpenCart 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://opencartdemo.knowband.com/3.0/pwa/admin/
Application de démonstration PWA: ,warhttps://opencartdemo.knowband.com/3.0/pwa/pwa-app/
(Copiez-collez l’URL dans le navigateur mobile et “Ajouter à l’écran d’accueil”)
2.0 Écrans du panneau d’administration:
Explorez tous les paramètres du panneau d’administration de l’extension OpenCart PWA Mobile App ainsi que les fonctionnalités et travaillez avec les instantanés partagés 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) Statut: 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) Nom de l’application PWA: Entrez le nom de l’application OpenCart PWA.
e) Sélectionnez Disposition pour la page d’accueil: Choisissez parmi la disposition d’écran d’accueil pré-ajoutée pour OpenCart Progressive Web App.
f) Activer la barre d’onglets: Activez la barre d’onglets en bas de l’application OpenCart PWA pour une navigation transparente.
g) Police pour l’application PWA: Choisissez une police pour OpenCart Progressive Web App (PWA).
h) Couleur du bouton de l’application: Choisissez la couleur du bouton pour l’application mobile PWA.
i) Couleur du thème de l’application: Choisissez la couleur du thème pour l’application PWA.
j) Couleur d’arrière-plan de l’application: Choisissez la couleur d’arrière-plan de l’application PWA.
k) Couleur de l’écran de démarrage de l’application: Choisissez un écran de démarrage pour l’application mobile PWA.
l) Activer le logo: Ajoutez le logo de votre marque sur l’en-tête de l’application mobile OpenCart PWA.
m) Image de l’icône de l’application: Ajoutez l’image de l’icône de l’application dans le panneau d’administration de l’extension OpenCart PWA.
n) Redirection 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.
Paramètres de notifications push 2.2
Les notifications push sont le meilleur outil marketing pour la Progressive Web App (PWA) pour OpenCart. 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. Entrez 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 automatique à envoyer aux utilisateurs de l’application chaque fois qu’ils passent une commande réussie à partir de l’application Web progressive OpenCart (PWA).
B) Notification push de mise à jour de l’état de la commande:
Activer / Désactiver la notification push automatique envoyée chaque fois que l’état de la commande de l’application est mis à jour. Les utilisateurs de l’application mobile OpenCart 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 d’OpenCart Progressive Web App (PWA) selon les besoins. L’administrateur du magasin peut configurer lui-même ces notifications et les envoyer aux utilisateurs d’OpenCart Progressive Web App (PWA).
Mise en page de la page d’accueil 2.4:
Concevez et enregistrez plusieurs modèles de mises en page (vente, festivals, etc.) et choisissez simplement celui qui convient dans le panneau d’administration pour mettre à jour sur OpenCart Progressive Web App.
L’OpenCart Progressive Web App (PWA) offre un écran d’accueil personnalisable dont la mise en page 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 OpenCart PWA.
Ajoutez une nouvelle mise en page à partir de cet onglet ou modifiez les mises en page précédemment ajoutées. Les paramètres de configuration de la page d’accueil offrent les éléments suivants:
Catégories principales:
Bannière carrée:
Bannière coulissante horizontale:
Grille de bannière:
Bannière du compte à rebours:
Produits carrés:
Produits coulissants:
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.
Pages d’informations 2.7:
Ajoutez des pages CMS sur l’application et proposez un contenu informatif aux utilisateurs de l’application mobile OpenCart PWA.
3.0 Écrans de l’application PWA frontale:
Écran d’accueil 3.1:
L’écran d’accueil de l’OpenCart Progressive Web App (PWA) est entièrement personnalisable avec un éditeur de bricolage 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 éléments de bannière, de curseur et 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 magasin sur l’en-tête supérieur de l’application Web progressive OpenCart (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.
Menu 3.2 Accordion (barre de navigation)
Les applications mobiles OpenCart 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 au 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 d’OpenCart Progressive Web App peuvent afficher et mettre à jour les informations enregistrées.
2. Catégories:
Les catégories affichées dans le menu de navigation de gauche de l’application Web progressive OpenCart 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. Devise (s):
Toutes les devises disponibles sur votre site Web sont affichées ici sur l’application OpenCart Progressive Web App (PWA).
6. Connexion / Déconnexion:
Les utilisateurs peuvent facilement se connecter / se déconnecter de l’application OpenCart 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 OpenC Progressive Web App (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 OpenCart peuvent être parcourues à la fois en vue liste et 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 OpenCart PWA offre la possibilité de filtrer les produits en simplifiant la recherche de produits. Les acheteurs en ligne peuvent trouver les produits souhaités sous 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’OpenCart Progressive Web App est aussi simple et intrigant que possible. Avec toutes les options et informations nécessaires sur le produit, cela devient une question de minutes pour que l’utilisateur soit sûr du produit qu’il s’apprête à acheter. Des images multiples sont disponibles pour le produit avec les options En stock et 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.
4. 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.
5. 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 OpenCart PWA offre des options de connexion sociale en un clic et rend le processus de connexion / d’enregistrement plus transparent. L’application Web Progressive OpenCart propose 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 le magasin à partir de l’application OpenCart 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 OpenCart PWA affichera tous les produits ajoutés au panier. Les utilisateurs de l’application peuvent afficher 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
La Progressive Web App pour OpenCart dispose d’une caisse simplifiée sur un seul écran avec uniquement les informations pertinentes. Les utilisateurs de l’application peuvent afficher les détails complets du paiement, tels que les détails d’expédition, les détails de facturation, le résumé de la commande, le commentaire de la commande, le résumé 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 correspond à 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.
6. Récapitulatif du paiement:
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’écran de paiement de l’application OpenCart PWA présente tous les paiements par vue Web disponibles sur le magasin. 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 OpenCart 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 réapprovisionnement direct sur l’écran Mon compte de l’OpenCart Progressive Web App (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 OpenCart 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, la méthode d’expédition et de paiement, et le résumé du coût total, etc. Il offre même la possibilité de garder une trace de l’état de la commande et de la livraison.
