PrestaShop PWA Mobile App – User Manual


1.0 Présentation

La croissance rapide de l’industrie du mCommerce a conduit à l’urgence de disposer d’une application mobile de commerce électronique. Mais la création d’applications mobiles implique beaucoup de codage et d’autres aspects techniques. Pourquoi ne pas transformer votre site Web en ligne en une application Web? Offrir une application PrestaShop PWA optimisée améliorerait l’expérience d’achat mobile pour les utilisateurs. Ce module d’application PrestaShop PWA est conçu et construit pour transformer votre boutique en une application Web qui peut être gérée à partir d’un panneau backend convivial. Ces applications proposent diverses fonctionnalités étendues que les applications natives telles que le mode hors ligne et l’indépendance de la plate-forme, ce qui en fait une solution d’achat sans tracas et transparente pour les utilisateurs.

1.1 Voir l’application de démonstration:

Avant d’acheter l’extension, affichez le fonctionnement de l’application de démonstration en ouvrant l’URL de l’application de démonstration PrestaShop PWA sur votre navigateur.

URL du magasin de démonstration: https://psm.knowband.com/pwa/admin1
URL de l’application PWA: ,warhttps://psm.knowband.com/pwa/pwa-app/

1.2 Principales caractéristiques de l’application Web progressive PrestaShop (PWA):

  • Interface d’écran d’accueil personnalisable (éditeur de bricolage)
  • Notifications push illimitées (notifications manuelles et automatisées)
  • Prise en charge du chat Zopim et WhatsApp
  • Prise en charge de tous les modes de paiement et d’expédition
  • Synchronisation en temps réel
  • Mise à jour automatique de l’inventaire
  • Application légère avec chargement plus rapide
  • Prise en charge multilingue et RTL
  • Options de connexion aux e-mails et aux réseaux sociaux (Google et Facebook)
  • Interface intuitive avec navigation en couches
  • Aucune dépendance sur Google Play ou Apple App Store
  • Solution complète en marque blanche
  • Accessibilité en mode hors ligne
  • Paiement d’une page simplifié
  • Contrôle des pages CMS (pages d’informations)
  • Présenter les produits connexes
  • Afficher les avis des utilisateurs
  • Fonctionnalité de liste de souhaits intégrée
  • Assistance pour les coupons / bons
  • Prise en charge de plusieurs devises

Compatible avec le marché multifournisseur PrestaShop

La Marché multifournisseur PrestaShop Le module est entièrement compatible avec l’application mobile PrestaShop PWA. L’application Web progressive affiche la section des vendeurs avec tous les vendeurs de la place de marché sur la même application. Les détails du vendeur restent synchronisés en temps réel avec le Web de la place de marché et seront mis à jour automatiquement sur l’application PrestaShop PWA.

Note : L’application mobile PWA multifournisseur pour PrestaShop est uniquement centrée sur le client. Cela signifie qu’il n’y aura pas de tableau de bord ou de gestion du vendeur à partir de l’application. L’administrateur du magasin peut gérer les vendeurs à partir du module PrestaShop Marketplace et le même sera mis à jour instantanément sur l’application.

Écrans du panneau d’administration 2.0

L’application mobile PrestaShop PWA peut être entièrement configurée à l’aide de ces onglets et paramètres d’administration pratiques. Tout ce que vous avez à faire est de faire les clics et les boutons nécessaires pour effectuer les modifications dans Progressive Web App. Discutons chacun d’eux en détail:

Paramètres généraux 2.1

Comme son nom l’indique, ces paramètres de configuration généraux s’appliquent à toutes sortes de modifications régulières dans les applications Web progressives. Les options sous cet onglet permettent à l’application de fonctionner sur les appareils des acheteurs en ligne.

paramètres généraux-1

a) Activer le plugin:Activez le module PrestaShop PWA pour que l’application fonctionne sur les appareils mobiles.
b) Redirection sur la page du panier lors de l’ajout au panier: Cette fonctionnalité permet à l’administrateur de contrôler la redirection du bouton «Ajouter au panier». Les utilisateurs peuvent être redirigés vers le panier ou conservés sur l’écran du produit en appuyant sur “Ajouter au panier”.
c) Description abrégée de l’affichage:Permet d’afficher une brève description du produit sur l’écran du produit de Progressive Web App.
d) Activer le logo: Ajoutez le logo de votre boutique sur l’en-tête de l’application PWA et présentez votre marque aux utilisateurs.

paramètres généraux-2

e) 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.
f) Nom de l’application PWA: Choisissez le nom de votre application PWA selon votre choix.
g) Sélectionnez Disposition:Choisissez la mise en page d’accueil souhaitée pour votre application PrestaShop. Vous pouvez créer plusieurs mises en page d’écran d’accueil dans le backend selon divers festivals et thèmes et les utiliser selon les exigences de votre magasin.
h) Méthodes d’expédition désactivées:Désactivez les méthodes d’expédition de travailler dans l’application PWA si vous ne vous sentez pas bien. Sur le site Web, ils fonctionneront généralement bien.
i) Pages CMS activées:Choisissez les pages CMS souhaitées à afficher sur l’application PrestaShop PWA.
j) Activer le rapport du journal des demandes:Activez l’option pour partager le fichier journal sur les applications Web progressives afin d’obtenir des détails sur tout type de comportement anormal de l’application.
k) Activez le codage URL des liens d’image:Activez cette fonctionnalité pour prendre en charge les caractères non ASCII sur l’application Web progressive.

Paramètres de notifications push 2.2

Les notifications push sont un outil pratique pour commercialiser et promouvoir les produits, les offres et les offres de vente de votre magasin. Les paramètres sous cet onglet permettent aux utilisateurs de configurer et d’envoyer des notifications push illimitées sur l’application PrestaShop PWA.

notifications-push-1

Les différents détails sous ces paramètres seront obtenus lorsque vous définissez le compte Firebase. Voici le processus étape par étape pour le faire:

2.21 Comment configurer un compte Firebase?

Étape 1 : Connectez-vous à Google Firebase

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

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 authentification >> connexion.

clé de serveur firebase

clés Firebase

A) Notification push de commande réussie:

Activer / désactiver la notification push automatisée envoyée aux utilisateurs de l’application pour une création de commande réussie à partir de l’application PrestaShop PWA.

notifications push

B) Notification push de mise à jour de l’état de la commande:

Activer / Désactiver la notification push automatique envoyée aux utilisateurs de l’application pour toute mise à jour concernant l’état de livraison de leur commande précédente. Les utilisateurs peuvent voir ce statut sous l’onglet “Détails de la commande” de l’application PWA

notifications push

C) Notification push de panier abandonné:

Activer / désactiver la notification push automatisée envoyée aux utilisateurs qui ont abandonné le panier sans achat réussi. Cette notification push sera envoyée aux utilisateurs automatiquement après l’intervalle de temps entré.

notifications push

2.2 Historique des notifications push

Ici, l’administrateur du magasin peut afficher l’historique complet des notifications push envoyées à l’application PWA. Parallèlement à cela, l’administrateur du magasin peut même personnaliser la notification manuelle et envoyer la même chose aux utilisateurs de l’application Web progressive.

historique des notifications push

A) Envoyer une notification:

Quoi de mieux pour concevoir et envoyer une notification push selon le besoin? Cette option permet aux propriétaires de magasins de configurer et d’envoyer manuellement une notification personnalisée aux utilisateurs de l’application PrestaShop PWA.

historique des notifications push
Mise en page de la page d’accueil 2.3

Le module PrestaShop PWA permet à l’administrateur du magasin de contourner les restrictions liées à l’interface utilisateur fixe de l’écran d’accueil et de concevoir celle qui convient à ses besoins professionnels. Cet onglet permet à l’administrateur du magasin de créer et d’enregistrer plusieurs mises en page et de les utiliser selon les occasions et les festivals en cours.

mise en page d'accueil
Afin de configurer les mises en page de page d’accueil de l’application PWA, les éléments suivants sont disponibles dans le back-end:

A) Top Catégories:

Les principales catégories sont affichées sous forme de petits carrés sur l’écran d’accueil de Progressive WebApp. Leurs images et liens de redirection peuvent être configurés à partir d’ici. Ces catégories peuvent être utilisées pour mettre en évidence les grandes marques sur l’écran d’accueil de l’application. Le module PWA de PrestaShop autorise 8 catégories au maximum dont 4 au minimum sont obligatoires.

top-catégories

B) Bannière carrée:

La liste des bannières carrées sur l’écran d’accueil de l’application PWA offre un bloc de bannière de forme carrée dans lequel l’administrateur du magasin peut utiliser l’image souhaitée. Le lien de redirection correspondant peut être utilisé pour ces bannières.

bannière carrée
C) Bannière coulissante horizontale:

Voici le bloc de bannière en forme de rectangle disponible en glissement horizontal sur l’écran d’accueil de l’application PrestaShop PWA. Pour cela également, le lien image et redirection est entièrement configurable.

bannières coulissantes

D) Grille Bannières:

Ce sont des bannières de forme carrée répertoriées sur l’écran d’accueil de l’application PWA sous la forme d’une vue en grille. L’administrateur du magasin peut ajouter autant de bannières que nécessaire et définir son lien de redirection.

bannières en grille
E) Bannière du compte à rebours:

Le module PrestaShop PWA permet à l’administrateur du magasin de configurer et d’ajouter une bannière basée sur une minuterie sur l’écran d’accueil de l’application Web. L’administrateur du magasin peut ajouter une image de bannière et un écran d’atterrissage avec une minuterie jusqu’à ce que la bannière soit affichée sur l’écran d’accueil de l’application Web progressive. Une fois la minuterie terminée, la bannière sera supprimée automatiquement.

compte à rebours-bannière
F) Produits carrés:

À partir des bannières, les applications mobiles PrestaShop PWA permettent de présenter les produits dans une liste de blocs carrés. L’administrateur peut choisir les produits pour cet élément.

produits carrés
G) Produits coulissants horizontaux:

Vous pouvez ajouter les produits sous forme de glissement horizontal. Les produits choisis peuvent être du choix de l’administrateur du magasin, tels que les nouveautés, les meilleures ventes, les produits personnalisés, etc.

produits coulissants
H) Produits de grille:

Les produits peuvent également être ajoutés sur l’écran d’accueil sous la forme de listes de blocs d’affichage en grille. L’administrateur du magasin peut choisir les produits souhaités et la quantité à afficher sur l’écran d’accueil de l’application PrestaShop PWA.

produits en grille
I) Produits récemment consultés:

Le module PrestaShop Mobile PWA permet au propriétaire du magasin d’ajouter un élément d’onglet récent sur l’écran d’accueil de l’application Web. Il affichera tous les produits consultés récemment par les utilisateurs.

Note : L’administrateur du magasin peut ajouter jusqu’à 20 éléments lors de la conception de la mise en page dans le panneau principal.

2.4 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”.

add-new-app

É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”.

create-app-id

É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é:

create-app-id

Étape 7 :Cliquez sur l’onglet “Paramètres”.

paramètre fb-app

É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

id-app-fb

Étape 14 :Maintenant, cliquez sur “+ Ajouter une plate-forme”.

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

plate-forme de choix

Étape 16 :Maintenant, entrez l’URL de votre site.

enter-website-url
Étape 17 et 18:Cliquez sur “Produits +” et sélectionnez Connexion Facebook.

Identifiant Facebook
Étape 19 :Sélectionnez Web comme plate-forme pour l’application.

plate-forme de choix

Étape 20 :“ Maintenant, cliquez sur Enregistrer.

facebook-app-id
É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

URL de redirection

Étape 23 et 24:Cliquez sur “Revue de l’application”. Et marquez «Rendre le nom de votre application public» sur Oui.

examen de l'application
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.

dernière étape

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

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: Application Web.
Origines JavaScript autorisées: Le nom de domaine de votre boutique (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:

Écran d’accueil 3.1écran d'accueil

1. Disposition dynamique:

En utilisant divers éléments de conception, 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 Web progressive.

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.

L’application Web progressive propose une catégorisation appropriée des produits disponibles sur le site Web. Les acheteurs mobiles peuvent facilement parcourir les produits de plusieurs catégories. Toutes les pages CMS sont également disponibles dans le menu Accordéon. Il propose les options suivantes:

barre de navigation

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 Web progressive 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 PrestaShop PWA.

6. Connexion / Déconnexion
Les utilisateurs peuvent facilement se connecter / se déconnecter de l’application Web progressive PrestaShop via cette option.

Écran de catégorie 3.3:écran de catégorie

1. Vues multiples:
Les catégories de l’application PWA pour PrestaShop peuvent être visualisées à la fois en liste et en 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 du produit de votre “ Progressive Web App ” est simple et intrigant. Plusieurs images du même produit sont affichées avec le nom et le prix. La disponibilité du produit est également affichée comme “En stock” ou “En rupture de stock” en fonction de produit-écranstatut de l’inventaire. Il contient les autres options suivantes:

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 décider rapidement à propos de 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 un produit 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 le produit sur plusieurs canaux sociaux.

Écran de connexion 3.5

L’application Web progressive écran de connexionoffre diverses options de connexion en un clic et rend le processus de connexion / d’inscription plus transparent:

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 PrestaShop 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 Web progressive en utilisant les identifiants de leur compte Google.

Écran du panier d’achat 3.6:

L’écran Panier de votre application Web Progressive affichera tous les produits ajoutés au panier. Les utilisateurs de l’application peuvent afficher le nom du produit, écran shopping-cartquantité, prix total et 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 saisir des 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. Continuer vos achats
Les utilisateurs peuvent quitter le panier pour parcourir plus de produits sur votre application Web progressive.

6. Continuer à 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

Les applications Web progressives avec le module PrestaShop PWA ont une écran de paiementpaiement en un seul écran avec uniquement les informations pertinentes. Les utilisateurs peuvent afficher les détails complets de la commande, 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 Web progressive 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 avec 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 PrestaShop PWA propose tous les paiements par vue Web disponibles sur la boutique. Les acheteurs en ligne peuvent trouver une expérience de paiement similaire sur le site Web et les applications Web progressives.

écran de paiement

Écran 3.9 Mon compte

L’écran de mon compte de l’application PrestaShop PWA permet aux utilisateurs de voir leurs détails complets enregistrés sur l’application, y compris une liste des commandes précédentes.écran de mon compte

Écran Détails de la commande 3.10

L’écran des détails de la commande de l’application Web progressive PrestaShop fournit les détails complets de la commande spécifique 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 existe même une option pour suivre l’état de la commande et sa livraison.

détails de la commande

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 *