Cum se creează o temă personalizată în Magento

Publicat: 2015-04-06

Chiar dacă, Magento 2 este în fază de dezvoltare, a făcut deja o mulțime de zgomot în industria comerțului electronic din cauza noilor și îmbunătățite abordări front-end, se așteaptă să le ofere. În timp ce îmbunătățirile front-end par să facă procesul de teme Magento mult mai eficient, mulți dezvoltatori (în special începătorii) nu sunt încă conștienți de procesul de creare a unei teme personalizate în Magento 2.

Prin această postare, voi acoperi procesul pas cu pas de creare a unei teme personalizate Magento 2. Dar înainte de asta, să avem mai întâi o prezentare generală a temei Magento.

Tema Magento – O prezentare generală

O temă ajută la crearea unei reprezentări vizuale a magazinului dvs. Magento, folosind o combinație a următoarelor:

Șabloane personalizate
Aspecte
fișiere CSS/LESS

Aplicația Magento oferă două teme de design diferite, și anume Luma (numită și ca temă demonstrativă) și Blank (folosită pentru crearea de teme personalizate). Deoarece trebuie să creăm o temă Magento personalizată, vom folosi tema Magento Blank.

Pentru a crea o temă nouă folosind Blank, va trebui să o personalizați. Dar, modificarea temei implicite va face ca modificările să fie suprascrise, de fiecare dată când noua versiune a fișierelor implicite este actualizată. O alternativă viabilă la această problemă este de a crea o nouă temă personalizată care moștenește funcționalitatea din tema implicită sau din orice temă existentă.

Pune simplu, vom crea o temă copil personalizată care moștenește funcționalitatea temei existente. Făcând acest lucru, te va ajuta să treci prin necazul creării unei noi teme de sine stătătoare de la zero. Deci, în loc să copiați un set extins de fișiere și să le modificați, va trebui doar să suprascrieți și să extindeți fișierele existente în cadrul temei părinte.

Să începem acum să discutăm pașii implicați în crearea unei noi teme Magento (adică unul câte unul.

Înțelegerea procesului de creare a temei

În această secțiune, vom trata despre crearea fișierelor care ar ajuta la crearea temei. În plus, vom avea și o privire asupra procesului de adăugare a unui logo la temă sau a modului în care putem configura imaginile.

Pasul 1 – Creați un director de teme

Primul pas pe care trebuie să-l faceți atunci când creați o temă personalizată necesită să vă creați structura directorului temei. Pentru a face acest lucru, urmați punctele cheie menționate mai jos:

Accesați și deschideți backend-ul de administrator de instalare Magento, apoi treceți la dir>/app/design/frontend.

Majoritatea magazinelor electronice oferă produse ale diferiților furnizori și, prin urmare, este important să existe un director separat al furnizorilor, în care sunt listate toate produsele oferite de vânzători. Deci, următorul pas este să creați un director nou cu un nume similar cu numele furnizorului dvs.: /app/design/frontend/<Vendor>.

În cazul în care utilizați orice temă Magento încorporată, atunci trebuie să vă referiți la directorul: app/design/frontend/Magento

Acum că ați creat directorul de furnizori, creați un alt director cu numele similar cu cel al temei dvs. în directorul de furnizori, așa cum se arată mai jos.

aplicație/design/frontend/

>> <Vânzător>/

>>…<temă>/

>>…

Pasul 2 – Înțelegerea Declarației Temei

Odată ce ați terminat de creat structura de directoare a temei dvs., va trebui să creați theme.xml pentru a defini aspectul temei. Fișierul xml trebuie să conțină cel puțin numele temei secundare și numele temei părinte. Toate actualizările aduse aspectului temei dvs. vor fi stocate în acest fișier.

Există două sarcini pe care trebuie să le îndeplinească aspectul temei.

Mai întâi adăugați sau copiați conținut din theme.xml curent în directorul de teme app/design/frontend/<Vendor>/<theme>

În al doilea rând, pentru a vă face tema vizibilă, trebuie să o configurați. În acest scop, folosiți următorul exemplu:

<parent>Magento/blank</parent> <!– tema părinte, în cazul în care tema dvs. moștenește dintr-o temă existentă –>

<media>

<preview_image>media/preview.jpg</preview_image> <!– calea către imaginea de previzualizare a temei dvs. –>

</media>

</temă>

Pentru a vă asigura că tema dvs. este recunoscută de aplicația Magento, conectați-vă la panoul de administrare Magento și verificați dacă puteți vedea tema în grilă sub Conținut-> Design -> Teme.

Pasul 4 - Configurați imagini (modificarea dimensiunii imaginilor produsului)

Când încărcați imaginile produsului, dacă dimensiunea acestuia depășește cele ale temei implicite, va trebui să adăugați un fișier view.xml. Acest fișier conține detalii de configurare ale dimensiunilor imaginii produsului care sunt afișate în vitrină. Să vedem acum pașii pe care trebuie să îi urmați pentru configurarea imaginilor:

Conectați-vă la serverul dvs. Magento, totuși, va trebui să accesați serverul ca utilizator cu un anumit set de permisiuni. Trebuie să aveți permisiuni pentru a crea directoare, precum și fișiere în directorul instalării Magento.

În folderul cu tema, creați directorul etc.

Apoi, copiați fișierul view.xml din „directorul etc” al temei existente (să spunem, de exemplu, din tema Blank) în directorul etc nou creat al temei personalizate.

În cele din urmă, trebuie să configurați toate dimensiunile de imagini ale produselor utilizate pe front-end-ul magazinului dvs. în view.xml. De exemplu, puteți alege să înfățișați imaginile produsului în vizualizarea grilă a categoriei de produse ca pătrat, atribuindu-i o dimensiune de 250 x 250 px. Să vedem cum ar arăta configurația imaginii:

<var name="category_page_grid:type">small_image</var>

Pasul 5 – Creați directoare pentru fișierele statice ale temei dvs

La fel ca orice temă standard Magento, tema dvs. va conține, de asemenea, mai multe fișiere statice, inclusiv stiluri, JavaScript, imagini și alte fișiere. Asigurați-vă că stocați fiecare tip de fișier într-un subdirector „web” separat în dosarul dvs. de teme, după cum urmează:

app/design/<zonă>/<Vânzător>/<temă>/

>> web/

>> css/

>> sursa/

>> fonturi/

>> imagini/

>> js/

Notă: Toate fișierele statice ale temei generale ar trebui să fie stocate în …<theme>/web/images, de exemplu, logo-ul temei dvs. trebuie să fie stocat în …<theme>/web/images. Există o posibilitate mai mare ca tema dvs. să includă unele fișiere specifice modulului. Aceste fișiere sunt stocate în subdirectoare precum …/<theme>/<Namspace_Module>/web/css și subdirectoare aferente. Cu toate acestea, acesta este un subiect complet nou de discuție. Deci, deocamdată vom sări peste acest subiect.

Aplicarea și configurarea temei dvs. în Magento

Această secțiune vă va arăta cum vă puteți aplica tema în vitrina Magento. Pentru a face acest lucru, pur și simplu urmați pașii enumerați mai jos:

Pasul 1 – Deschideți panoul de administrare de instalare Magento și navigați la CONȚINUT-> Design-> Teme. Asigurați-vă că vă puteți vedea tema în lista de teme dată.

Pasul 2 – Din panoul de administrare, accesați Magazine -> Configuration -> Design.

Pasul 3 - Din câmpul drop-down „Scope”, alegeți vizualizarea magazinului la care doriți să aplicați tema.

Pasul 4 - Apoi, din fila Tema „Design”, alegeți tema pe care tocmai ați creat-o listată în meniul drop-down Tema de design.

Pasul 5 – În cele din urmă, faceți clic pe opțiunea „Salvare configurație” pentru a aplica modificările pe care le-ați făcut până acum. Și odată ce ați terminat, asigurați-vă că reîncărcați paginile vitrinei dvs.

Notă: În cazul în care stocarea în cache este activată în back-end-ul dvs. Magento, este important să goliți memoria cache, altfel este posibil să nu puteți vedea modificările pe care tocmai le-ați aplicat.

Concluzie

Sper că citirea acestui tutorial va servi drept ghid de bază care vă va ajuta să înțelegeți procesul de creare a unei teme personalizate în Magento 2.

Biografia autorului:

Isabella Morris este în prezent angajată la o companie renumită de dezvoltare personalizată Magento și este, de asemenea, angajată în redactarea articolelor informative despre cele mai bune instrumente și trucuri pentru dezvoltarea Magento. Scrierile ei s-au dovedit benefice pentru un grup mai larg de dezvoltatori Magento de pe tot globul.