Tutoriel – Personnaliser le menu de son application mobile PrestaShop

Publié il y a 6 ans Mis à jour il y a 6 ans Par PrestApp

Le sujet que nous allons traiter aujourd’hui, fait suite au dernier article, relatif à la création d’une application mobile et tablette pour PrestaShop. Pour rappel : https://www.prestapp.eu/prestapp/comment-creer-application-mobile-prestashop/

Nous allons voir aujourd’hui comment personnaliser le menu d’une application mobile PrestaShop générée avec PrestApp.

1. Personnalisation du menu

1.1 Configuration du menu automatique

Personnalisation menu application mobile PrestaShop générée par PrestApp — Interface de personnalisation du menu, application mobile PrestaShop

Avec PrestApp, il est possible de personnaliser le menu de votre application mobile, directement depuis notre interface d’administration. Pour cela, cliquer sur le menu « Settings » puis sur « Menu ».

Présentation du menu vide dans l'application mobile PrestaShop de MJS — Rendu du menu à vide, application mobile PrestaShop pour Mon Joli Sautoir

Depuis cette page, retrouvez automatiquement l’ensemble des menus et sous-menus de votre boutique PrestaShop. La fonctionnalité « Autocomplete » (1) permet de récupérer automatiquement l’arborescence de vos menus tels qu’ils sont configurés sur votre backoffice Prestashop. Il est également possible de créer votre propre menu, en glissant-déposant les éléments de la partie de gauche dans la partie de droite (2). Lorsque votre menu est réalisé, il ne vous reste plus qu’à cliquer sur « Save » (3) pour répercuter vos changements sur votre application mobile PrestaShop.

Par défaut le menu, se présente de la manière suivante, il est vide à l’image de l’affichage du panel d’administration présenté ci-dessus.

Complétion automatique du menu pour coller au paramétrage de la boutique PrestaShop — Utilisation de la fonction AutoComplete pour récupérer le menu à l’image de la boutique PrestaShop

Résultat obtenu après avoir cliqué sur le bouton « Autocomplete »

Menu généré automatiquement pour la boutique PrestaShop Mon Joli Sautoir — Rendu de l’application mobile PrestaShop pour Mon Joli Sautoir avec un menu auto complété

Pour visualiser votre nouveau menu, il vous suffit de fermer votre application et de la relancer. La mise à jour s’effectue de manière automatique, chez vous et chez les utilisateurs de votre application mobile PrestaShop.

1.2 Positionnement et regroupement des éléments du menu

Modification sur l'application mobile PrestaShop de l'ordre des éléments du menu — Panel d’administration afin de gérer la hiérarchie et l’ordre des éléments dans le menu de l’application mobile PrestaShop

Remontée d'un bloc parent / enfant dans le menu de l'application mobile PrestaShop Mon Joli Sautoir — Exemple de modification d’ordre d’affichage des éléments du menu de l’application mobile Mon Joli Sautoir

Cela n’a pas été abordé précédemment mais il est possible de remonter certains éléments du menu afin de changer l’ordre d’affichage mais également de les regrouper sous forme de hiérarchie. Pour changer l’ordre, il suffit de glisser / déposer les blocs présents dans la partie droite vers le haut ou le bas. Pour les regrouper, vous n’avez qu’à inclure un élément enfant dans un bloc parent. L’exemple ci-dessous illustre le regroupement « Bougies » avec le bloc parent « Coup de coeur MJS » ainsi que sa remontée en 1ère position. A noter qu’il est possible de réaliser une hiérarchie sur 3 niveaux au maximum.

Comme d’habitude, vous n’avez qu’à cliquer sur le bouton « Save » et les modifications sont répercutées sur votre site mobile généré par PrestApp ou votre application mobile PrestaShop.

Dans le prochain tutoriel, nous verrons comment ajouter ou supprimer des moyens de transport ainsi que des moyens de paiement sur votre application Android PrestaShop.

Merci d’avoir lu cet article, à bientôt.

L’équipe PrestApp.