Tema custom Magento 2: workflow base

Introduzione

Creare un tema custom Magento 2 e' un'attività' tipica per agenzie e sviluppatori. Conoscere il workflow consigliato evita errori di compilazione, override sbagliati e problemi di deploy degli static asset.

Struttura tema

Sotto app/design/frontend/Vendor/tema_nome:

theme.xml
registration.php
composer.json
etc/view.xml
web/css/
web/js/
web/images/
Magento_Catalog/layout/
Magento_Theme/templates/

theme.xml

Dichiara il nome del tema visibile in admin e il parent:

<theme>
  <title>Vendor Custom</title>
  <parent>Magento/luma</parent>
</theme>

L'ereditarieta' permette di sovrascrivere solo cio' che serve.

registration.php

Registra il tema usando ComponentRegistrar::THEME con path frontend/Vendor/tema_nome.

Workflow LESS

Magento usa LESS per i CSS. I file principali sono _styles.less, _module.less, _extend.less. Si sovrascrivono solo i pezzi del parent che si vogliono cambiare. Pubblicare con php bin/magento dev:source-theme:deploy in modalita' developer e poi setup:static-content:deploy.

Override template

Per modificare un template Magento_Catalog/view/frontend/templates/product/view/details.phtml, lo si copia in app/design/frontend/Vendor/tema_nome/Magento_Catalog/templates/product/view/details.phtml e si modifica. Magento usera' la versione del tema.

Layout XML

I file di layout (catalog_product_view.xml, default.xml) permettono di aggiungere/rimuovere blocchi senza toccare i template. Usare referenceContainer, referenceBlock, move, remove.

Asset JS

JavaScript va dichiarato in requirejs-config.js, posizionato in view/frontend/. Si possono definire mixin per estendere componenti esistenti senza override completo.

Deploy in produzione

1. php bin/magento setup:di:compile
2. php bin/magento setup:static-content:deploy -f --area frontend --theme Vendor/tema_nome it_IT en_US
3. php bin/magento cache:flush

Versionamento

Il tema va tracciato in Git come repository indipendente o come parte del progetto. composer.json permette di pubblicarlo come pacchetto magento2-theme.

Hai bisogno di aiuto?

Se vuoi un Magento ottimizzato dal team di G Tech Group, scrivici tramite il modulo di contatto.