PSVERTICALMENU Gestionnaire de menu pour PRESTASHOP Edité par ARETMIC S.A.

PSVERTICALMENU Gestionnaire de menu pour PRESTASHOP Edité par ARETMIC S.A.

SOMMAIRE I. APERCU GENERAL DU PSVERTICALMENU... 4 1.1. Présentation du PSVERTICALMENU... 4 1.2. Avantages du PSVERTICALMENU... 4 1.3. Caractéristiques du PSVERTICALMENU... 4 II. INSTALLATION DU MODULE PSVERTICALMENU... 5 III. PANNEAU DE CONTROLE DU PSVERTICALMENU... 6 3.1. Menu «Paramètres»... 6 3.1.1. Suggestions... 7 3.1.2. Paramètres généraux... 8 3.1.3. Flèches images... 8 3.1.4. Paramètres du menu principal et Paramètres des sous menus... 8 3.2. Menu «Ajouter des liens internes»... 10 3.2.1. Paramètres... 10 3.2.1 Réarranger le menu... 11 3.3. Menu «Ajouter des liens personnalisés»... 11 3.3.1. Ajout de lien personnalisé... 12 3.3.2. Liste des liens personnalisés... 12 3.3.3. Editer un lien... 13 3.3.4. Supprimer un lien... 13 3.3.5. Réarranger le menu... 13 3.4. Menu «Réarranger le menu»... 13 3.5. Menu «Paramètres avancés»... 14 3.5.1. Afficher dans un bloc de module standard... 15 3.5.2. Afficher les produits... 15 Ce paramètre, lorsque la case checkbox est à l état coché, permet d afficher les produits qui correspondent à chaque catégorie dans l arborescence du menu... 15 3.5.3. Ajout d'alias pour les menus CMS... 16 3.5.4. Ajout de sous-menus pour les menus CMS... 16 3.5.5. Ajout de sous menu pour les menus personnalisés... 16 3.6. Menu «Aide»... 17 2

PREAMBULE Les conditions générales d utilisation détaillant l ensemble des dispositions applicables aux Produits Virtuels proposés par la société Aretmic S.A. sont disponibles sur le site internet www.module-prestashop.aretmic.com. Le client déclare les avoir lues et acceptées, l achat de produits et l utilisation des services proposés par la société ARETMIC S.A. emportant l acceptation et l adhésion expresse et sans réserve du client aux présentes CGU ainsi que, le cas échéant, aux documents contractuels existants complétant ou amendant lesdites CGU. La Société Aretmic S.A. conserve intégralement la propriété intellectuelle de ses Produits. La Société concède à chaque Client qui aura acheté un Produit virtuel une licence d utilisation, et ce à titre non exclusif et pour le monde entier. Cette licence n'est valable qu'une seule fois pour une seule boutique e-commerce. Aucune cession de droits n est accordée par les présentes par la Société au Client. Il est par ailleurs interdit au Client de revendre ou d utiliser sur d autres boutiques les Produits virtuels achetés sur www.moduleprestashop.aretmic.com. Cette restriction inclut toutes les ressources fournies avec le Produit virtuel. Conditions Générales d Utilisation des modules de la Société ARETMIC S.A. en date du 31 août 2010 http://www.module-prestashop.aretmic.com/content/3-conditions-generales-de-ventes 3

I. APERCU GENERAL DU PSVERTICALMENU 1.1. Présentation du PSVERTICALMENU PSVERTICALMENU est un module Prestashop multilingue permettant de mettre en place et de gérer avec aisance un menu déroulant multi niveau en haut de votre site. L utilisation de cet outil est très facile grâce à son interface d administration simple et intuitive. En outre, PSVERTICALMENU n exige aucune connaissance en programmation et est, de ce fait, à la portée de tout le monde. Pour simplifier les réglages, le module autorise la saisie des principaux paramètres depuis le backend. Ainsi, vous aurez la possibilité de changer le style de menu selon votre goût ou bien d ajouter divers liens internes (catégories/produits, articles, fabricants, fournisseurs ) ainsi que des liens personnalisés de votre choix. 1.2. Avantages du PSVERTICALMENU Menu multilingue à plusieurs niveaux. Divers types de liens : Lien internes (Articles, Produits, Catégories, Fabricants, Fournisseurs), liens personnalisables. Interface d administration très claire et facile d utilisation. Possibilité de création d alias pour les menus d articles. Selon votre choix, on peut intégrer une barre de recherche à côté du menu. 1.3. Caractéristiques du PSVERTICALMENU Ajout, édition et suppression des liens Réorganisation de l ordre d affichage des liens. Possibilité de créer des liens de parentés entre les articles de Prestashop Possibilité des créer des liens de parentés entre les liens personnalisés que vous avez crées. Edition en ligne des fichiers CSS. Gestions des langues. Gestion de la barre de recherche. 4

II. INSTALLATION DU MODULE PSVERTICALMENU 1. Tout d abord, décompressez le fichier d installation de PSVERTICALMENU (psverticalmenu.v.1.2.zip), puis utilisez votre logiciel FTP pour copier le répertoire «psverticalmenu» ainsi obtenu dans le dossier /modules de Prestashop. 2. Une fois tous les fichiers uploadés, allez dans la partie administration de votre site et cliquez sur l onglet «modules» depuis le menu du haut. 3. Repérez le nouveau module dans la liste appelé MENU VERTICAL POUR PRESTASHOP, faites défiler vers le bas si nécessaire. 4. Cliquez sur le bouton Installer. 5. Pour finir, repérez à nouveau le module dans la liste. Un lien «>> configurer» devrait apparaître, et à coté sa description. Cliquez dessus pour accéder aux panneaux de contrôle du module. 5

III. PANNEAU DE CONTROLE DU PSVERTICALMENU Après avoir fini l installation du module PSVERTICALMENU, vous avez désormais accès au panneau de contrôle via le lien «configurer» disponible juste à côté de sa description. En cliquant sur ce lien, six menus s affichent comme suite : 3.1. Menu «Paramètres» Le menu «Paramètres» permet d accéder aux paramètres d affichage du menu de votre site Prestashop. A partir de ce menu, vous avez accès à divers outils vous permettant de personnaliser votre menu. Vous pouvez définir les tailles et les couleurs des éléments de votre menu. En cliquant sur «Paramètres», vous accédez à la fenêtre suivante : 6

3.1.1. Suggestions Dans «Suggestions», vous pouvez choisir 9 styles de menus prédéfinis. Un seul clic sur l une des palettes de couleurs met à jour automatiquement votre menu sur de nouveaux paramètres et des jeux de couleurs correspondants à cette la palette. 7

3.1.2. Paramètres généraux Cette section contient d une part, le paramétrage des marges à gauche et à droite des éléments du menu lorsqu on les survole. Juste en dessous, le paramètre «hauteur des menus» sert à régler la hauteur des éléments de menus. Cette hauteur s applique à tous des éléments, y compris les sous menus. 3.1.3. Flèches images Cette partie vous donne l opportunité de modifier les images de flèche placées juste à côté du texte d un menu lorsque ce dernier renferme des sous niveaux. Notons ici qu il y a l image au repos, c est-à-dire que la souris ne passe pas en dessus du menu et l image au survol lorsque celle-ci se trouve dessus. Pour personnaliser les images que ce soit au repos ou au survol on procède de la même manière. On a deux options : La première consiste à choisir directement les images parmi celles des listes déroulantes. Dans la seconde option vous avez la possibilité d uploader des images depuis ton ordinateur. Position horizontal de la flèche vous permet d ajuster horizontalement la position de la flèche. 3.1.4. Paramètres du menu principal et Paramètres des sous menus Ces deux paramètres permettent respectivement de personnaliser la mise en forme du menu principal des menus de premier niveau et celle des sous menus dans le cas ou ceux-ci existent. Le paramétrage vous donne la possibilité de modifier l aspect visuel du menu. Ainsi vous pouvez régler la taille, les couleurs des conteneurs et des textes au repos et au survol, le taux d arrondissement d un angle. 8

Que ce soit pour le menu principal ou pour les sous menus les paramètres à régler sont identiques. Ci-dessous, les descriptions des éléments de paramétrages. Le paramétrage se divise en deux catégories : le paramétrage des menus parents et le paramétrage des sous-menus. Ces derniers se divisent à leurs tours en deux sections : le paramétrage du conteneur principal et celui des blocs contenant les textes du menu. Taille : Cet élément définit la taille (largeur) en pixel du conteneur. Taille du coin arrondi : Ce paramètre règle le taux d arrondissement des angles du conteneur principal. Taille bordure : Définit la taille en pixel de la bordure entourant le conteneur. Couleur bordure : Sert à modifier la couleur de la bordure dans le cas on la taille est supérieure à 0. Style bordure : Le style de bordure permet de spécifier la forme de la bordure. On peut en choisir 13 différentes. none et hidden : Aucune bordure. Cette valeur force la valeur calculée de la propriété 'border-width' à 0 ; dotted : La bordure est une ligne en pointillé ; dashed : La bordure est une ligne en tirets ; solid : La bordure est une ligne en trait plein. double : La bordure est une ligne double, de deux traits pleins. groove : La bordure donne l'impression qu'elle est gravée dans le canevas ; ridge : À l'opposé de 'groove', la bordure semble sortir du canevas ; inset : La bordure donne l'impression que la boîte entière est incrustée dans le canevas ; outset : À l'opposé de 'inset', la bordure donne l'impression que la boîte entière est extrudée du canevas. inherit: Indique que le style de la bordure doit hériter de l'élément parent. thin : Une bordure mince. medium : Une bordure moyenne. thick : Une bordure épaisse. Couleur de fond : C est ici qu on fixe la couleur de fond du conteneur (du bloc de menu survolé). Taille du texte : Définit en pixel la taille de la police de caractère. Couleur du texte et Couleur du texte survolé : Définit respectivement, la couleur des textes au repos et au passage de la souris. A la fin de votre paramétrage, n oubliez pas de valider le tous en cliquant le bouton sauvegarder. 9

3.2. Menu «Ajouter des liens internes» Comme son nom l indique, le menu «Ajouter des liens internes» permet de gérer les liens internes du menu. C est-à-dire, il vous sera possible depuis ce menu d insérer des liens avec les éléments contenu par défaut dans Prestashop. Ces éléments sont les articles (CMS), les catégories de produits, les produits, les fournisseurs et les fabricants. En cliquant sur ce menu, la fenêtre suivante apparaît : 3.2.1. Paramètres «Paramètres» permet de supprimer ou d ajouter les liens internes. La case de gauche représente la liste des liens placés sur le menu de votre site et la case de droite représente la liste de tous les liens existants dans votre site (CMS, Fournisseurs, Fabricants, Catégorie, Produits). 10

Pour ajouter des éléments internes dans PSVERTICALMENU, cliquez avec votre souris un élément de la liste de gauche pour choisir un seul élément ou bien si vous voulez sélectionner plusieurs objets en même temps, sélectionnez le premier objet en cliquant dessus. Vous saurez que l'objet est sélectionné si des carrés apparaissent autour de l'objet. Gardez votre doigt sur la touche MAJ (Shift) et sélectionnez les autres objets en cliquant dessus. Tous les éléments compris entre le premier et le dernier clic seront sélectionnés. Lorsque les éléments sont sélectionnés, cliquez avec votre souris le bouton «ajouter» pour faire déplacer ces éléments sur la liste de gauche. Si par contre vous voulez sélectionner plusieurs éléments qui ne se suivent pas dans une liste, il faut garder un doigt sur la touche Ctrl. Pour supprimer un lien du menu, sélectionnez ce menu (case de gauche) et appuyez sur «Supprimer» ou tout simplement faire un double clic avec le souris sur l élément. Pour valider le tout, il faut cliquer sur le bouton «enregistrer» (A ne pas oublier). Voilà, vous avez ajouté des liens internes à votre menu. REMARQUE : En haut vous pouvez apercevoir la case à cocher «Afficher dans un bloc de module standard», ceci lorsqu elle est cochée permet d afficher le menu à l intérieur d un bloc de module standard dont le titre peut être spécifié depuis le champ texte «Titre du bloc» placé juste en dessous de la case. 3.2.1 Réarranger le menu Vous pouvez réarranger votre menu depuis la section «Réarranger le menu», Cette partie permet de modifier l ordre des éléments du menu comme vous le souhaitez en utilisant les flèches «Haut» et «Bas». 3.3. Menu «Ajouter des liens personnalisés» Si vous voulez des liens autres que des liens internes, alors le menu «Ajouter des liens personnalisé» vous sera utile. En effet, il permet de créer de nouveaux liens avec les paramètres de votre choix. En cliquant sur ce menu, vous accédez à la fenêtre suivante : 11

3.3.1. Ajout de lien personnalisé C est dans cette partie que vous aurez à créer le nouveau lien personnalisé. Voici les descriptions des champs à remplir : - Label : Titre du lien Exemple : Facebook - Lien : URL Exemple : http://www.facebook.com/ - Menu principal : Si vous cochez la case, le lien sera affiché directement sur le menu, sinon il ne sera pas affiché mais considéré comme un potentiel sous menu d un menu parent. - Nouvelle fenêtre : Si vous cochez la case, le lien s ouvrira sur une nouvelle fenêtre. Par contre, si vous la décochez, le lien s ouvrira sur la même fenêtre. Pour finir, cliquez dur «Ajouter» pour que lien soit sauvegardé et figure dans la liste des liens personnalisés comme le montre la figure ci-après : 3.3.2. Liste des liens personnalisés 12

Après sa création, un lien personnalisé sera classé automatiquement dans une liste affichée juste en dessous du formulaire d ajout de lien personnalisé. De cette liste, vous pouvez éditer ou supprimer un lien. 3.3.3. Editer un lien Pour éditer un lien, cliquez sur pour accéder à la fenêtre suivante : Après avoir fini la modification du lien, appuyez sur «Enregistrer» pour tout sauvegarder. Vous pouvez changer la langue d édition en cliquant sur les petits icones de drapeaux affichées justes en dessous pour modifier le lien sur d autres langues. 3.3.4. Supprimer un lien Pour supprimer un lien, cliquez sur, la boite de dialogue suivante apparaît : Faites «OK» pour confirmer la suppression du lien. 3.3.5. Réarranger le menu «Réarranger le menu» permet de modifier l ordre des éléments du menu comme vous le souhaitez en utilisant les flèches «Haut» et «Bas». 3.4. Menu «Réarranger le menu» Le menu «Réarranger le menu» permet comme on vient de mentionner précédemment, de changer l ordre des éléments du menu selon votre choix en utilisant les flèches «Haut» et «Bas». En cliquant sur ce menu, la fenêtre suivante s affiche : 13

3.5. Menu «Paramètres avancés» Le menu «Paramètres avancés» permet de gérer quatre points : - la barre de recherche - l alias des menus CMS - les sous-menus pour les menus CMS - les sous-menus pour les menus personnalisés En cliquant sur ce menu, vous accédez à la fenêtre suivante : 14

3.5.1. Afficher dans un bloc de module standard Il est possible d activer ou de désactiver l option permettant de placer le menu à l intérieur d un bloc de module standard. Pour l activation, cochez la case et cliquez sur «Changer la valeur» pour enregistrer. Pour la désactivation, décochez la case et clique à nouveau «Changer la valeur» pour enregistrer l action. 3.5.2. Afficher les produits Ce paramètre, lorsque la case checkbox est à l état coché, permet d afficher les produits qui correspondent à chaque catégorie dans l arborescence du menu. 15

3.5.3. Ajout d'alias pour les menus CMS Cette partie permet de modifier les titres par défaut des menus CMS. Une fois modifiée, ces alias peuvent également être affichés à la place des titres. Pour activer cette option, vous devez cocher la case sur. Faites ensuite «Enregistrer» pour prendre en compte les changements. 3.5.4. Ajout de sous-menus pour les menus CMS Cette partie permet de créer un ou des sous-menus pour un menu CMS (menu parent). Si par exemple je choisis Livraison comme menu parent et Mentions légales comme un de ses sous-menus : Après avoir fait «enregistrer», ils vont automatiquement apparaître dans la «Liste des sous menus». Pour supprimer un sous-menu de cette liste, il suffit de cliquer sur placé à droite du sousmenu concerné. Une boite de dialogue s affichera comme suite : Faite «OK» pour confirmer la suppression du sous-menu. 3.5.5. Ajout de sous menu pour les menus personnalisés Cette partie est fonctionnelle qu après avoir créé des liens personnalisés. C est seulement après et grâce à «Ajout de sous menu pour les menus personnalisés» que vous pouvez définir vos liens comme un menu parent ou un sous-menu. Une fois enregistré, les menus et ses sous-menus se trouveront automatiquement dans la «Liste des sous-menus». 16

Pour supprimer un sous-menu de cette liste, il suffit de cliquer sur placé à droite du sousmenu concerné. Une boite de dialogue s affichera comme suite : Faite «OK» pour confirmer la suppression du sous-menu. 3.6. Menu «Aide» Dans le menu «Aide», vous trouverez le manuel d utilisation multilingue du module PSVERTICALMENU, également disponible en format PDF. Nous souhaitons que les outils que nous avons développés pour vous, vous apportent beaucoup de satisfactions et que votre imagination repousse nos limites... 17