J'ai créé mon propre module pour surchager Topmenu.php.
<?php namespace Perso\Menu\Block\Html; class Topmenu extends \Magento\Theme\Block\Html\Topmenu { protected function _getHtml( \Magento\Framework\Data\Tree\Node $menuTree, $childrenWrapClass, $limit, $colBrakes = [] ) { $html = ''; $children = $menuTree->getChildren(); $parentLevel = $menuTree->getLevel(); $childLevel = $parentLevel === null ? 0 : $parentLevel + 1; $counter = 1; $itemPosition = 1; $childrenCount = $children->count(); $parentPositionClass = $menuTree->getPositionClass(); $itemPositionClassPrefix = $parentPositionClass ? $parentPositionClass . '-' : 'nav-'; foreach ($children as $child) { $child->setLevel($childLevel); $child->setIsFirst($counter == 1); $child->setIsLast($counter == $childrenCount); $child->setPositionClass($itemPositionClassPrefix . $counter); $outermostClassCode = ''; $outermostClass = $menuTree->getOutermostClass(); if ($childLevel == 0 && $outermostClass) { $outermostClassCode = ' class="' . $outermostClass . '" '; $child->setClass($outermostClass); } if (count($colBrakes) && $colBrakes[$counter]['colbrake']) { $html .= '</ul></li><li class="column"><ul>'; } $html .= '<li ' . $this->_getRenderedMenuItemAttributes($child) . '>'; $html .= '<span class="menu" data-atc="'.base64_encode($child->getUrl()) . '" ' . $outermostClassCode . '>' . $this->escapeHtml($child->getName()) . '</span>' . $this->_addSubMenu( $child, $childLevel, $childrenWrapClass, $limit ) . '</li>'; $itemPosition++; $counter++; } if (count($colBrakes) && $limit) { $html = '<li class="column"><ul>' . $html . '</ul></li>'; } return $html; } }
J'ai ensuite créé un custom JS qui fait l'inverse, et qui remplace les span par des a href en récupérant le contenu de la balise data-atc du span pour le décoder et le transférer dans le href du a quand l'usager bouge sa souris.
require(['jquery', 'jquery/ui'], function($){ var job= false; function update_dom(){ if(job == false) { $(".menu").each(function(){ var url = atob($(this).attr("data-atc")); var anchor = $(this).html(); $(this).replaceWith('<a href="'+url+'" target="_self" >'+anchor+'</a>'); }); job= true; } }$(function(){ $("body").mousemove(update_dom); $("body").scroll(update_dom); $("body").touchmove(update_dom); }); }
Mon but est d'éviter que Google ne suive les liens de mon méga menu (je lui présente ces liens dans le contenu textuel de la HP) sans pour autant pénaliser mes visiteurs et leur permettre de cliquer sur des liens "classiques".
Mon problème : si je bouge ma souris durant le chargement de la page, tout se passe à merveille (mon code source est bien avec des <span> au lieu des <a href>, mon menu et mon sous-menu se chargent sous la forme de span puis se transforment en a href au mouvement de la souris etc...). Mais si je laisse ma souris immobile pendant l'intégralité du chargement de la page, quand je la bouge à nouveau, mon sous-menu n'apparait pas au survol des éléments de mon menu. Mes spans ont bien été transformés en a href mais mon sous menu reste désespérément en display none. On dirait que l'action de survol des éléments principaux du menu n'est effective que si les éléments sont des a href + de classe="level-top" pour que l'action de survol display:block fonctionne.
Comment puis-je remédier à ça ? Merci d'avance !