Knowband Blog | Ecommerce Modules

Application Web progressive PrestaShop (PWA) – Manuel de l’utilisateur

Joe Parker


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):

[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 peuvent être envoyées qu’à l’appareil Android à partir du panneau d’administration de PrestaShop PWA Mobile App Builder.

[NOUVELLE MISE À JOUR] PrestaShop PWA prend en charge les scripts de langage RTL

Le créateur d’applications mobiles PrestaShop PWA 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 apporter toutes les langues de son magasin sur l’application Web progressive et peut même ajouter toutes les langues RTL. selon l’exigence. D’autre part, les acheteurs mobiles ne rencontreront aucun problème pour accéder à l’application mobile PrestaShop PWA dans leur langue préférée.

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.

Remarque: 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 leur nom l’indique, ces paramètres de configuration généraux sont destinés à toutes sortes de modifications régulières dans les applications Web progressives (PWA). Les options sous cet onglet permettent à l’application de fonctionner sur les appareils des acheteurs en ligne.

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:�Activer l’affichage d’une courte description du produit sur l’écran du produit de Progressive Web App (PWA).
d) Activer le logo: Ajoutez le logo de votre boutique sur l’en-tête de Progressive Web App (PWA) et présentez votre marque aux utilisateurs.

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 Web progressive (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ésactiver les méthodes d’expédition de travailler dans Progressive Web App (PWA) selon ce que 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 (PWA).

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.

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


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

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.

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

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

2.2 Historique des notifications push

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

A) Envoyer une notification:

Quoi de mieux pour concevoir et envoyer des notifications push selon les besoins ? Cette option permet aux propriétaires de boutiques de configurer et d’envoyer manuellement une notification personnalisée aux utilisateurs de l’application PrestaShop PWA.


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.


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 la forme de petits carrés sur l’écran d’accueil de Progressive Web App (PWA). Leurs images et leurs liens de redirection peuvent être configurés à partir d’ici. Ces catégories peuvent être utilisées pour mettre en évidence les meilleures marques sur l’écran d’accueil de l’application. Le module PrestaShop PWA permet un maximum de 8 catégories dont 4 minimum sont obligatoires.

B) Bannière carrée:

La liste des bannières carrées sur l’écran d’accueil de l’application Web progressive (PWA) propose 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.


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.

D) Grille Bannières:

Ce sont des bannières de forme carrée répertoriées sur l’écran d’accueil de Progressive Web App (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 leur lien de redirection.


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.


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.


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.


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.


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.

Remarque: 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”.

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

2.5 Comment obtenir les détails de l’application Google?

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

3.0 Écrans de l’application PWA frontale:

Écran d’accueil 3.1

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 la Progressive Web App (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.

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:

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 (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 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:

1. Vues multiples:
Les catégories sur Progressive Web App (PWA) pour PrestaShop peuvent être visualisé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 du produit de votre Progressive Web App (PWA) 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 sous la forme “En stock” ou “En rupture de stock” en fonction de statut 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

La Progressive Web App (PWA)�offre 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 (PWA) à l’aide de leurs informations d’identification de 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, quantité, 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 Progressive Web App (PWA) ont une interface simplifiée paiement 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 Web progressive (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 contient tous les paiements en ligne 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 3.9 Mon compte

L’écran Mon compte de l’application Web progressive PrestaShop (PWA) permet aux utilisateurs de visualiser leurs détails complets enregistrés sur l’application, y compris une liste des commandes précédentes.

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