Magento 2: personalizarea temei cu Less și layout XML

Personalizarea vizuală a unui magazin Magento 2 este una dintre sarcinile frecvente ale dezvoltatorilor care lucrează cu această platformă. Magento 2 folosește un sistem de teme bazat pe Less pentru stilizare și fișiere XML pentru structura layout-ului, oferind flexibilitate maximă pentru personalizare fără a modifica fișierele core.

Acest ghid explică cum să creezi și să personalizezi teme Magento 2 corect.

Arhitectura sistemului de teme în Magento 2

Magento 2 folosește un sistem de moștenire a temelor care permite construirea de teme custom pornind de la o temă părinte. Tema Blank și tema Luma sunt temele oficiale Magento care servesc ca bază pentru temele custom.

Structura unui director de temă urmează convenții stricte: directorul app/design/frontend/{Vendor}/{theme_name}/ conține toate fișierele temei. Sistemul de fallback al fișierelor permite suprascrierea selectivă a oricărui fișier din tema sau modulele părinte.

Dacă vrei să înțelegi cum performanța temei influențează SEO, citește ghidul nostru despre configurarea SEO în Magento 2.

Structura fișierelor unei teme

O temă Magento 2 conține mai multe directoare cu roluri specifice. Directorul web/css/source/ conține fișierele Less pentru stilizare. web/images/ conține imaginile specifice temei.

Directorul templates/ conține template-urile .phtml suprascrise. Directorul layout/ conține fișierele XML de layout.

Fișierul theme.xml definește metadatele temei (nume, moștenire), iar registration.php înregistrează tema în sistemul Magento. Fișierul composer.json este util dacă dorești distribuirea temei prin Composer.

Crearea unei teme noi

Primul pas este crearea structurii de directoare și a fișierelor obligatorii. theme.xml specifică tema părinte prin tagul parent. registration.php înregistrează tema folosind ComponentRegistrar::register(). Odată create aceste fișiere, tema apare în panoul de administrare Magento la Content > Design > Themes și poate fi aplicată prin Configuration.

Rularea comenzilor bin/magento setup:upgrade și bin/magento setup:static-content:deploy este necesară după orice modificare a temei în producție. Pentru mai multe informații despre optimizarea vitezei magazinului, citește ghidul nostru despre viteza magazinelor Magento.

Personalizarea stilurilor cu Less

Magento 2 folosește Less ca preprocessor CSS, cu un sistem specific de variabile și mixin-uri pentru personalizare sistematică.

Sistemul de variabile Less

Magento 2 definește sute de variabile Less pentru culori, fonturi, spațieri și alte proprietăți vizuale. Suprascrierea acestor variabile în fișierul _variables.less al temei tale schimbă aspectul elementelor care le utilizează în tot magazinul.

Aceasta este metoda preferată pentru personalizări simple, deoarece nu necesită duplicarea stilurilor. Variabilele pentru culoarea principală, fonturi și dimensiuni sunt cele mai frecvent personalizate.

Structura fișierului de variabile urmează convenții clare: @color-brand, @font-family-base, @button__background etc.

Extinderea și suprascrierea stilurilor

Pentru personalizări mai complexe decât variabilele permit, poți suprascrie fișierele Less ale temei sau modulelor. Fișierul _extend.less din tema ta este adăugat după stilurile temei părinte, permițând adăugarea de stiluri fără a suprascrie întregul fișier.

Pentru suprascrierea completă a unui fișier Less dintr-un modul, creezi aceeași structură de directoare în tema ta (de ex. web/css/source/Magento_Catalog/). Utilizarea selectoarelor specifice și a namespace-urilor ajută la evitarea conflictelor de specificitate în stiluri.

Compilarea Less și Static Content Deploy

În modul de dezvoltare, Magento compilează Less automat la primul acces. În producție, compilarea se face prin comanda bin/magento setup:static-content:deploy.

Grunt poate fi configurat pentru recompilarea automată în timpul dezvoltării, eliminând necesitatea ștergerii cache-ului la fiecare modificare. Comanda grunt watch monitorizează modificările fișierelor Less și recompilează automat.

Această configurare reduce semnificativ timpul de dezvoltare pentru teme complexe.

Personalizarea layout-ului cu XML

Fișierele XML de layout controlează structura paginilor, blocurile afișate și ordinea acestora, fără a necesita modificarea template-urilor PHP.

Structura fișierelor de layout

Fișierele de layout XML din Magento 2 sunt organizate pe module și pagini. Fișierul default.xml se aplică tuturor paginilor.

Fișierele specifice paginilor (catalog_product_view.xml, cms_index_index.xml etc.) se aplică doar paginilor respective. Acțiunile disponibile în XML de layout includ: adăugarea de blocuri (block), mutarea blocurilor (move), eliminarea lor (remove), actualizarea argumentelor (arguments) și referința la blocuri sau containere existente (referenceBlock, referenceContainer).

Mutarea și eliminarea blocurilor

Una dintre cele mai comune operațiuni în layout XML este mutarea sau eliminarea blocurilor. Instrucțiunea move permite repoziționarea unui bloc existent fără a modifica template-ul. remove elimină complet un bloc dintr-o pagină.

Aceste operațiuni pot fi aplicate global (în default.xml) sau specifice paginii. Adăugarea de atribute CSS containerelor și blocurilor este de asemenea posibilă prin XML, permițând personalizarea vizuală fără modificarea CSS-ului.

Buna structurare a layout-ului ajută și la SEO – consultă ghidul nostru despre migrarea de la Magento 1 la Magento 2.

Template-uri și blocuri custom

Când XML de layout și Less nu sunt suficiente, personalizarea template-urilor PHP și crearea de blocuri custom oferă control complet.

Suprascrierea template-urilor

Pentru a suprascrie un template dintr-un modul, creezi aceeași structură de directoare în tema ta: {Vendor}/{Module}/templates/. Fișierul .phtml din tema ta va fi folosit în locul celui din modul.

Aceasta permite modificarea HTML-ului generat fără a altera codul core. Ghidul de bune practici recomandă să modifici cât mai puțin posibil față de template-ul original pentru a facilita upgrade-urile viitoare.

Comentariile clare care explică modificările sunt esențiale pentru mentenabilitate.

Blocuri și ViewModel-uri custom

Blocurile Magento 2 sunt clase PHP care furnizează date template-urilor. ViewModel-urile sunt o alternativă mai curată pentru logica de prezentare, introdusă în Magento 2.2.

Crearea unui bloc custom implică extinderea AbstractBlock și implementarea metodelor necesare. ViewModel-urile sunt injectate în blocuri prin DI (Dependency Injection) și sunt preferate deoarece sunt mai ușor de testat și mențin blocurile slabe din punct de vedere al dependențelor.

Integrarea datelor custom în layout se face prin configurarea XML și injectarea viewModelului în blocul de template.

Personalizarea temelor Magento 2 cu Less și layout XML oferă un nivel ridicat de flexibilitate și control vizual fără a compromite upgrade-abilitatea platformei. Respectarea structurii de fișiere și a convențiilor Magento asigură că personalizările tale sunt sustenabile pe termen lung și compatibile cu viitoarele versiuni ale platformei.