Personalizate Layouts și șabloane cu Magento

În prima parte a acestei serii am învățat elementele de bază ale dezvoltării modulului Magento, inclusiv structura directorului Magento, structura modulului personalizat și am creat un modul de bază "Hello World" pentru a înțelege cum funcționează controlerele în Magento. 

În acest articol, vom învăța cum să creați fișiere bloc și layout. Mai exact, vom analiza modul în care funcționează fișierele de aspect și blocurile de fișiere în Magento și vom examina redarea fișierelor de aspect. 

Căutați o soluție rapidă?

Dacă sunteți în căutarea unei soluții rapide, există o mare colecție de teme și șabloane Magento de la Envato Market. Este o modalitate excelentă de a construi rapid o colecție de articole poli de joasă calitate de înaltă calitate pentru proiectul dvs..

De asemenea, puteți obține ajutor personalizat prin angajarea unuia dintre furnizorii de servicii Magento pe Envato Studio.

Dar, cu tutorialul! Mai întâi, vom vedea ce sunt layout-ul și fișierele bloc și cum sunt ele utile în redarea paginilor de front-end în Magento și apoi vom vedea cum le putem include în modulul nostru personalizat.

Ce este fișierul Layout?

După cum sugerează și numele, fișierele de layout sunt utile în redarea paginilor inițiale ale Magento. Fișierele de configurare sunt fișiere XML care se află în aplicația> design> frontend> interfața> tema> aspectul. Aici, puteți vedea că există multe fișiere de aspect pentru un anumit modul. Fiecare modul Magento are propriile fișiere de aspect asemănătoare modulului clientului customer.xmllayout file, modul de catalog au catalog.xmllayout file etc Aceste fișiere de layout conțin blocuri structurale și blocuri de conținut. 

Dacă vă întrebați de ce Magento are nevoie de aceste blocuri, puteți afla mai multe despre acest lucru în prima parte a seriei.

Să mai săpăm mai multe în fișierele de aspect

Să explorăm mai mult în fișierele de aspect, examinând un exemplu. Accesați aplicația> design> frontend> base> layoutși deschideți customer.xmlfişier. Aici, toate blocurile sunt înfășurate în jurul principalelor etichetă. Puteți vedea diferitele care conține blocuri specifice. 

Vedeți fragmentul de mai jos:

  Formular de înregistrare a contului de client          Formați câmpuri înainte    

Mâner

Mânerele sunt entitatea principală prin care Magento identifică ce bloc să se încarce când se cheamă un anumit modul. este mânerul specific modulului. Acest mâner este declanșat când cineva deschide pagina de înregistrare a clienților. 

Fiecare rulează un bloc imbricat în conținut specific pentru pagină. Unele dintre fișierele de layout conțin mâner. În această etapă, puteți întreba diferența dintre mânerele specifice modulului și mânerele implicite. Pe scurt, mânerele specifice modulelor fac doar blocurile din interiorul lor atunci când modulul este redat în browser, în timp ce mânerul implicit se încarcă în cea mai mare parte a paginii.

În interiorul mânerului există diferite blocuri diferite care specifică fișierul de șablon care urmează să fie redat când este apelat acest bloc. Blocurile sunt de două tipuri: 

1. Structură blocuri
2. Blocuri de conținut

În fișierul nostru de dispunere definim numai Blocuri de conținutși apoi le înfășurăm în Sblocuri de blocare. De exemplu, dacă cineva sună la o pagină de înregistrare a clienților și vrem să o încărcăm pe stânga, la dreapta, la conținut sau la subsol, înfășurăm acest bloc în blocul structurar respectiv. Aici am înfășurat două blocuri în blocul "conținut" care este un bloc structural. 

Blocurile conțin atribute precum:

1. tip definește clasele bloc în care putem defini diferite funcționalități
2. Nume defineștenumele unic al unui anumit bloc, astfel încât celelalte blocuri să poată face o referință a blocului existent după nume și să o extindă
   
3. înainte după sunt atribute pe care le putem seta care ne permit să definim poziția blocului nostru în interiorul blocului structur
4. șablon definește realitatea phtml numele fișierului și calea în care rulează codul nostru HTML și PHP
5. acțiune ne permite să declanșăm orice acțiune cum ar fi încărcarea JavaScript și toate prin utilizarea acestui atribut.
6. la fel de este un atribut este folosit în principal pentru blocuri structur

eticheta este folosită pentru a extinde blocurile care există deja. În acest caz, am extins blocul de conținut și am inserat propriul bloc în el. Trebuie să utilizați numele blocului corect pe care doriți să îl extindeți.

 eticheta este utilizată pentru a elimina blocul specific. De exemplu, spuneți că în pagina de înregistrare a contului dvs., nu doriți să afișați coloanele din dreapta și din stânga. În acest caz, puteți să eliminați blocul cu următoarea sintaxă .

Copil

Când înfășurați un bloc sub alt bloc, blocul înfășurat se numește bloc copil. Ori de câte ori blocul nostru părinte este apelat de modulul nostru, blocul copil este automat apelat.

Puteți să apelați separat un bloc de copii cu sintaxa de mai jos în fișierul șablon
echo $ this-> getChildHtml ("copil");

rădăcină

Deschis page.xmllayout fișier, veți găsi bloc care arată mai jos

Magento începe redarea din blocul rădăcină. Toate celelalte blocuri sunt blocuri de copii ale blocului rădăcină. Blocul rădăcină definește structura paginii. Aici puteți vedea că este setat în prezent 3columns.phtml, puteți schimba acest lucru 1column.phtml, 2columns-right.phtml sau 2columns-left.phtml.

Adăugarea de CSS și JavaScript în XML Layout

Pentru o anumită pagină, puteți adăuga fișiere CSS și JavaScript în eticheta de aspect așa cum este aceasta:

  css / styles.css    

Aici puteți vedea că am adăugat un fișier CSS și un fișier JavaScript în interiorul cap din pagina contului nostru de clienți.

Care sunt clasele de bloc?

Clasele de bloc sunt utilizate pentru a defini funcțiile specifice unui anumit bloc. Blocurile de clase de blocuri se află în app> code> local / community / core> spațiul dvs. de nume al modulelor> numele modulului dvs.> Blockdirector. Aceste fișiere conțin funcțiile pe care le putem folosi direct $ thiscuvânt cheie în fișier șablon specifice blocului. Să luăm un exemplu pentru a înțelege clasele bloc.

Mergi la review.xml fișierul în care se află app> design> frontend> base> implicit> layout director și găsiți linia de mai jos a codului:

Aici puteți vedea blocul recenzie / customer_recentcare se referă la șablon recent.phtml. Mergi la app> design> frontend> base> default> template> review> clientși deschis recent.phtml. 

În acest fișier, puteți vedea două funcții care se utilizează $ this cuvinte cheie. Sunt $ This-> getCollection () și $ This-> count (). Aceste funcții sunt definite în fișierul claselor bloc recent.php care locuiește în app> code> core> Mage> recenzie> Block> clientdirector.

Aici, blocul type = "review / customer_recent" se referă la  Mage_Review_Block_Customer_Recent bloc clasa care este definită în recent.php fişier. Indiferent de funcțiile pe care le definiți în această clasă, puteți să o utilizați direct în fișierul șablon corespunzător cu $ this.

Crearea structurii personalizate a modulelor și blocarea fișierelor

În cele din urmă, am fost lăsați cu modulul "Hello World" personalizat cu controlerul. Aici, vom crea fișierul layout al modulului nostru custom.so să îl creăm.

Pentru a crea fișierul de aspect, trebuie să creați mai întâi fișierul de clasă bloc. Înainte de a adăuga fișierul de clasă, trebuie să ne spuneți modulului nostru că includeți fișierele bloc. Deci, du-te la app> code> local> Chiragdodia> Mymodule> etc>config.xmlși adăugați linia de mai jos a codului:

    mymodule.xml         Chiragdodia_Mymodule_Block   

Fișierul final XML conține următoarele linii de cod:

    0.1.0       standard  Chiragdodia_Mymodule mymodule       mymodule.xml         Chiragdodia_Mymodule_Block    

Creați fișierul de clasă bloc

Apoi, du-te la app> code> local> Chiragdodia> Mymodule> Blockși creați fișierul Mymodule.phpcare conține linii de cod de mai jos

Aici am declarat clasa Chiragdodia_Mymodule_Block_Mymodule care conține funcția myFunction pe care o putem apela direct din fișierul șablonului de aspect.
Creați fișierul Layout XML
Mergi la app> design> frontend> implicit> implicit> layoutși creați mymodule.xml fișier care conține linii de cod de mai jos
        
Creați fișierul șablon
Mergi la app> design> frontend> implicit> implicit> șablonși creați mymodule.phtml fişier. În acest fișier, vom apela funcția myFunction pe care le-am declarat în clasa noastră de bloc.
myFunction (); ?>
Dacă totul este corect până acum, veți vedea ieșirea cu trei coloane aspect prin accesarea adresei URL yoursite.com/index.php/mymodule/index.
În unele versiuni Magento, temele implicite nu conțin directoarele de layout și șablon. În acest caz, puteți să vă creați fișierul de aspect și șablon în app> design> frontend> basedirector.
Acesta este modul în care machetele funcționează în Magento. În articolul precedent, am creat modulul simplu "Hello World", în acest articol l-am creat utilizând fișierul de aspect. Structura layout-ului Magento este puțin greu de înțeles la început, dar odată ce începi să te gândești la asta, vei obține cu ușurință ideea din spatele ei. 
În acest post, am atașat fișierele demo module pe care le-am creat până acum. Simțiți-vă libertatea de a comenta și de a pune întrebări pe care le puteți avea despre această problemă.



		
			
	   
	




Cod