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 ;)
- Téléchargez l'archive superclick sur le github de Joeldbirch
- 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
- 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');
- Ouvrez le fichier blocktopmenu.tpl, puis ajoutez un id à votre menu :
<ul class="sf-menu clearfix" id="example">{$menu}...
- 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}
- 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