Installation du module Progressive Web App PrestApp
Pour cet article, nous nous sommes basés sur la dernière version de PrestaShop disponible à savoir la version 1.7.6.7, à ce jour nous sommes capable de couvrir PrestaShop de la version 1.5 à 1.7.
Avant d’installer le module de PrestApp, il est nécessaire de le télécharger 😉 Pour obtenir le module de test, cliquez ici : https://prestapp.eu/module/prestapp.zip
- Lorsque vous êtes connecté à votre Backoffice PrestaShop, cliquez sur « Installer un module »
- Une popup s’ouvre, vous n’avez plus qu’à glisser déposer l’archive ZIP récupérée précédemment.
- Cliquez ensuite sur « Continuer l’installation » puis « Configurer »
Interface d’administration PrestApp
Une fois le module installé, il ne reste que quelques étapes pour connecter votre boutique PrestaShop à PrestApp.
- Pour créer votre compte sur l’administration de PrestApp, rien de plus simple, nous avons mis en place un système d’autologin. Vous avez juste à sélectionner votre adresse mail dans la liste des adresses mails des employés ou alors à sélectionner « Autre » dans la liste si vous souhaitez créer votre compte avec une adresse mail non présente dans cette liste. Il ne vous reste qu’à cliquer sur « Envoyer » pour créer votre compte PrestApp.
- Récupérez l’ensemble des informations suivantes :
- Protocole http
- URL de votre boutique PrestaShop
- Clé API
- Clé de sécurité
Connexion de la boutique avec PrestApp
Liaison entre la boutique PrestaShop et PrestApp
A cette étape, vous avez normalement dû recevoir un email avec un lien vous permettant d’accéder à l’interface d’administration de PrestApp, cliquez sur ce dernier pour accéder à l’interface pour effectuer la liaison entre PrestaShop et PrestApp.
- Cliquez sur « Créer une application » pour accéder au step-by-step pour paramétrer la liaison mais également le rendu de votre future Progressive Web App pour PrestaShop.
- Saisissez l’ensemble des informations récupérées dans l’étape précédente (sur votre backoffice PrestaShop)
- Cliquez sur « Vérifier ». Notre service va effectuer un ensemble de vérification entre votre boutique PrestaShop et PrestApp (version de PHP, paramétrage du serveur, contact vers l’extérieur possible, etc…)
- Lorsque l’ensemble des points de vérification sont validés, le bouton « Configuration » se débloque, cliquez dessus
Paramétrage des couleurs
Ici, rien de compliqué, choisissez les 3 couleurs de votre charte graphique à savoir « Accent de couleur principal », « Couleur claire principale » et pour finir « Couleur foncée principale ». Notre système décline à partir de ces trois couleurs, tout un ensemble de nuances permettant d’obtenir une harmonie parfaite et optimisée pour votre future PWA pour PrestaShop. Lorsque vous avez sélectionné vos trois couleurs, cliquez sur « Logos » pour passer à l’étape suivante.
Envoi des logos
Uploadez deux logos, un au format carré d’une résolution de 500×500 et un logo au format rectangulaire au format 300×80 maximum. Ces logos seront réutilisés au sein de l’application, dans le menu et dans le bandeau haut sur toutes les pages lorsque l’option est activée.
Configuration du menu
Pour vous simplifier la vie, nous avons mis en place une fonctionnalité « Auto », en un clic (1), toute l’arborescence est répliquée :
Ce menu sera propre à la version mobile, qui correspond à un FRONT totalement décorrélé de votre PrestaShop. Vous pouvez donc imaginer réaliser une navigation propre au mobile avec moins de sous catégories par exemple pour offrir une meilleure ergonomie de navigation à vos clients 😉
Nouvelles fonctionnalités
Lien
Fonctionnalité très attendue, il est maintenant possible de réaliser des liens dans le menu. Pour cela c’est très simple, il vous suffit de cliquer sur « Ajouter » à droite de Lien, de saisir un titre et l’URL et le tour est joué !
Petite précision sur les liens vers des pages CMS, la version Reponsive s’affiche. Très pratique, l’utilisateur peut alors consulter le contenu « classique » du PrestaShop sans que le e-commerçant doive effectuer un copier/coller dans une page personnalisée PrestApp. Pour finir, lorsque l’utilisateur est sur une page CMS et clique sur une catégorie, un produit ou sur la home, il est de nouveau redirigé vers la version PWA de la boutique PrestaShop. Pratique non ?! 😊
Conteneur
Le conteneur permet de réaliser de la classification et ainsi regrouper des catégories enfants dans un conteneur parent « virtuel » et propre à la PWA PrestaShop.
Activation des transporteurs PrestaShop
Par défaut PrestApp prend en compte l’ensemble des transporteurs natifs PrestaShop. Pour les activer rien de plus simple, vous avez juste à cliquer sur « Activer » sur les transporteurs que vous souhaitez activer sur la PWA.
A noter, si vous avez des moyens de transport non natifs avec des modules propres à ces derniers, nous sommes en mesure de les intégrer parfaitement à PrestApp sur devis. Vous pourrez ainsi proposer l’activation de la géolocalisation à vos clients pour les points relais les plus proches par exemple, correspondre avec l’API de votre transporteur, etc…
Activation des moyens de paiement PrestaShop
Même précision que pour les transporteurs PrestaShop, nativement PrestApp couvre les moyens de paiement par défaut de PrestaShop et propose gratuitement PayPal. Si vous possédez un moyen de paiement de type TPE virtuel, wallet ou autre, nous pouvons sur devis intégrer ce dernier à votre Progressive Web App PrestaShop.
Activation des langages et des devises
Nous le savons tous, un PrestaShop est souvent destiné à plusieurs pays. Cela implique donc plusieurs langues et plusieurs devises. Vous pouvez donc très simplement lier les différentes langues couvertes par PrestApp à votre PrestaShop. A ce jour, PrestApp couvre les langues suivantes : Français, Anglais, Allemand, Espagnol. Si jamais une langue n’est pas présente, nous pouvons l’ajouter gratuitement sur demande.
Personnalisation de la page d’accueil
Nous n’allons pas aborder l’ensemble des widgets disponibles dans cet article et leur détail puisque leur nom parle d’eux-mêmes 😉
L’idée est simple, la composition de la page d’accueil est libre et intuitive, il n’y a qu’à cliquer sur « Ajouter », à configurer le widget et à le repositionner dans la partie de droite pour modifier l’ordre de positionnement s’il le faut.
PrestApp étant multilingue, nous avons ajouté la possibilité de configurer une page d’accueil différente par langue et ainsi proposer du contenu adapté à chaque pays (promotion, langue sur les bannière, contenu textuel personnalisé, etc…). Pour simplifier la conception de la page d’accueil pour chaque langue, nous proposons de répliquer ce qui a été réalisé pour une langue en cliquant sur « Copier depuis ».
Prévisualisation
C’est terminé, vous avez paramétré votre Progressive Web App pour PrestaShop ! La magie opère et un déploiement est effectué en temps réel sur nos serveurs. En quelques secondes, vous pouvez consulter le rendu depuis l’interface d’administration ou directement depuis votre mobile grâce au lien fourni.
Notification Push
Pour aller plus loin, nous allons réaliser un test d’une notification push sur la PWA PrestaShop.
Dans le menu de gauche, cliquez sur « Fonctionnalités » puis « Notification Push ». Vous serez alors redirigé sur l’écran de paramétrage des notifications push. Ces dernières peuvent être envoyées en direct ou de manière programmée.
Une fois sur cet écran, cliquez sur « Créer une nouvelle notification push », saisissez un Titre et une Description puis cliquez sur « Créer ».