Personalizzare il menu di Magento 2

La realizzazione del menu è uno dei task più importanti e delicati nello sviluppo di un tema.

Magento 2, come anche Magento 1, non genera il markup del menu all’interno di un template, dunque il modo migliore per modificare strutturalmente il menu è estendere la classe \Magento\Theme\Block\Html\Topmenu che genera il markup dell’albero delle categorie. Vediamo nel dettaglio come fare.

Innanzitutto dobbiamo realizzare un modulo per Magento 2 (Vedi come realizzare un modulo per Magento2).

Creiamo il nostro file registration.php

<pre class="brush: php; title: ; notranslate" title="">use \Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Bitbull_CustomMenu', DIR ); </pre>

Poi dichiariamo il modulo e la dipendenza dello stesso da Magento_Theme. Quindi in etc/module.xml scriviamo:

<pre class="brush: xml; title: ; notranslate" title=""><?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Bitbull_CustomMenu" setup_version="2.0.0"> <sequence> <module name="Magento_Theme"/> </sequence> </module> </config> </pre>

Successivamente andremo a configurare la Dependency Injection in etc/di.xml. Questo è solo uno dei modi con cui si può ottenere questo risultato in Magento2 (Per un approfondimento sul tema rimandiamo a un successivo articolo più specifico su questo blog).

<pre class="brush: xml; title: ; notranslate" title=""><?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

</config> </pre>

Adesso abbiamo dichiarato una dipendenza dalla classe \Magento\Theme\Block\Html\Topmenu all’interno del nostro modulo e possiamo andare ad estenderla per riscrivere il metodo _addSubMenu( … ) che genera il markup del menu e l’albero delle categorie.

<pre class="brush: php; title: ; notranslate" title=""><?php /**

• Copyright © 2016 Magento. All rights reserved.

• See COPYING.txt for license details. */ namespace Bitbull\CustomMenu\Block;

class CustomMenu extends \Magento\Theme\Block\Html\Topmenu {

} </pre>

In questo esempio è stato semplicemente aggiunto un blocco statico all’interno del sottomenu che ha come id l’id della categoria di primo livello corrispondente. E’ chiaro che lo stesso principio può essere usato per fare delle operazioni più complesse o per modificare radicalmente la struttura del menu.

jQuery menu widget

Per quanto riguarda la parte js Magento 2 estende il menu widget di jQuery Ui per renderlo responsive. Rispetto al menu di default di Magento 1 è già un grosso passo avanti ma la maggior parte dei progetti ha esigenze di navigazione specifiche che richiedono del javascript ad hoc.

Il widget viene inizializzato sul tag ul del menu principale, all’interno del template module-theme/view/frontend/templates/html/topmenu.phtml

<pre class="brush: xml; title: ; notranslate" title="">data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}' </pre>

Per sostituirlo con un componente custom dovremo creare un file di configurazione di RequireJs requirejs-config.js all’interno del nostro tema o modulo specificando il nome del componente custom da sostituire a quello di default di Magento 2.

<pre class="brush: jscript; title: ; notranslate" title="">var config = { "map": { "*": { "menu": "js/CustomMenu", } } }; </pre>

Approfondimenti

• https://community.magento.com/t5/Programming-Questions/Overriding-a-block-in-Magento-2/m-p/6831#U6831

• http://inchoo.net/magento-2/basics-dependency-injection-usage-magento-2/

• http://www.eschrade.com/page/basic-configuring-the-magento-2-dependency-injection-container/

• http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/widgets/widget_menu.html

• http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/js_init.html