Le blog DSI94

Comment modifier le comportement Hover pour du onClick sur le blocktopmenu de Prestashop

Vous avez certainement remarqué que le menu horizontal intégré à Prestashop (blocktopmenu basé sur superfish) fonctionne de manière à ce que les sous-menus apparaissent lorsque l'on passe la souris dessus...

C'est certainement un gain de temps sur pc, mais cela pose à l'évidence un problème de taille pour les tablettes et les smartphones (si le thème mobile n'est pas activé ; Ce que je conseille) car impossible de faire du hover sur ces plateformes.

La solution est donc de modifier l'événement hover par du onclick de manière à pouvoir afficher vos sous-menus, même sous mobile. Rassurez-vous, c'est très simple à réaliser ;)

1. Téléchargez l'archive superclick sur le github de Joeldbirch
2. Connectez-vous à votre FTP, puis uploadez les fichiers superclick.js et superfish.css présents dans l'archive superclick dans les dossiers js et css du module blocktopmenu
3. Ouvrez le fichier blocktopmenu.php avec votre éditeur de texte préféré (notepadd++ par exemple), puis modifiez la ligne 736 comme suit (en fait, il faut commenter les lignes 736 à 738, puis ajouter les lignes 739 et 740): /*$this->context->controller->addJS($this->_path.'/a_propos/le_blog/24_prestashop/js/hoverIntent.js'); $this->context->controller->addJS($this->_path.'/a_propos/le_blog/24_prestashop/js/superfish_modified.js'); $this->context->controller-> addCSS($this->_path.'/a_propos/le_blog/24_prestashop/css/superfish_modified.css');*/ $this->context->controller->addJS($this->_path.'/a_propos/le_blog/24_prestashop/js/superclick.js'); $this->context->controller->addCSS($this->_path.'/a_propos/le_blog/24_prestashop/css/superfish.css');
4. Ouvrez le fichier blocktopmenu.tpl, puis ajoutez un id à votre menu : <ul class="sf-menu clearfix" id="example">{$menu}...
5. Ajoutez le code suivant à la ligne 1 du fichier pour initialiser le plugin jQuery {literal} <script> (function($){ $(document).ready(function(){ var example = $('#example').superclick({ }); }); })(jQuery); </script> {/literal}
6. Et voilà...C'est tout !!! Vous pouvez tester votre nouveau menu sur votre tablette :)

Testé sous Prestashop 1.5.x, mais devrait fonctionner avec toutes les versions