Dezvoltarea temelor Magento Fișiere de dispunere

În acest articol, vom acoperi elementele de bază ale layout-ului Magento XML. 

Vom merge peste local.xml și fac unele modificări de bază. Aceasta va include adăugarea și eliminarea scripturilor, eliminarea blocurilor și adăugarea de modificări ale aspectului.

Acum, că avem o înțelegere de bază a ierarhiei temelor din primul articol din această serie, vom scufunda puțin mai adânc și vom explica fișierele templante.

Dosarele templante sunt formate din două subdirectoare din care sunt:

  • Aspect: app / proiectare / front-end /// Aspect /
  • Format: app / proiectare / front-end /// Template /

Există multe de acoperit, din acest motiv îi voi împărți în propriile lor articole. Astăzi vom acoperi doar aspectul aspectului. Aspectul șablonului va intra în joc în articolul următor.

Așteaptă, înainte să începem chiar să facem un lucru vital care este de a dezactiva memoria cache Magento, dacă nu ați făcut-o deja, asta este! Procedând astfel, ne va permite să vedem modificările noastre instantaneu, mai degrabă decât să refacem cache-ul de fiecare dată când facem o schimbare. Ideal ar trebui să fie oprit în timpul dezvoltării unui site. Pentru a face acest jurnal în zona de administrare și se îndreaptă spre sistem> gestionarea cache-ului și dezactivați toate.

Acum, care este sortit, să începem.

schemă

Dosarul de layout conține fișierele XML care dictează în mare măsură ce este afișat în partea frontală a magazinului. Structura layout-ului este destul de complexă în Magento, totuși acesta este unul dintre motivele care îl face atât de puternic și flexibil. 

Veți găsi sute de fișiere XML, fiecare făcându-și propriul lucru, fiecare vizualizare sau modul în app / code / devine aspectul specificat de propriul fișier XML. Dacă instalați vreodată un modul terț în magazinul dvs. și afectează capătul din față, acesta va avea fără îndoială propriul fișier XML.

Deci, de unde știu ce fișier să editez dacă trebuie??

Ei bine, convenția de numire a fișierelor ușurează depistarea când trebuie să faceți modificări. De exemplu, Magento app / code / core / Mage / Pagina / modul are propriul fișier XML numit app / proiectare / front-end / de bază / default / aspect / page.xml după cum puteți vedea că există un model care începe să apară aici! Odată ce v-ați familiarizat și ați făcut câteva magazine, veți observa în curând o repetabilitate și veți reaminti care fișiere trebuie să le editați.

Notă:Vă rugăm să fiți conștienți de modulele terțelor părți, deoarece, din punct de vedere tehnic, dezvoltatorul poate numi fișierul XML orice doresc. În acest scenariu, cu excepția cazului în care se află în documentația acestora, va trebui să găsiți numele fișierului în modulul propriu-zis, de obicei găsit în config.xml fişier. De asemenea, notați că nu toate modulele au un fișier XML, de obicei fișierul XML va fi prezent numai dacă afectează partea frontală a magazinului, așa că nu vă așteptați mereu!

Cale pentru config: app / code / local ///etc/config.xml

Observați că am făcut referire de bază / default mai sus, amintiți-vă aici sunt locurile în care se află fișierele de bază, dacă trebuie să faceți modificări, întotdeauna să le copiați pe cont propriu pachet / temă nu Editați | × de bază / default fișiere. 

Ca astfel:

app / proiectare / front-end / de bază / default / aspect / page.xml

copiaza in:

app / proiectare / front-end ///layout/page.xml

Modificările grave ale acestor fișiere necesită experiență și, având în vedere că este un tutorial pentru începători, este dincolo de sfera acestei serii; cu toate acestea, voi trece prin local.xml și cum acest lucru se leagă de dezvoltarea temelor, precum și de acoperirea unor modificări de bază care cred că vor fi utile.

Ce este local.xml?

Puneți pur și simplu, este un fișier care este plasat în folderul nostru de aspect tematic care va găzdui o mare parte din suprascrierile noastre sau actualizări la referințele XML pentru acea temă. Este considerat o practică bună și Magento o recomandă. Am putea să-l privim ca pe versiunea Magento a WordPress functions.php fişier.

Așteaptă o "mare parte" de ce nu "toate" din suprascrierile sau actualizările noastre?

Există o dezbatere pe această temă și dacă am face un pic de cercetare vom găsi că toată lumea are propria opinie. Unii vor spune doar utilizarea local.xml și nu faceți modificări în altă parte, în timp ce alții nu vor fi de acord, deci nu luați următorul set în piatră.

Personal, cred că este un loc minunat pentru mici modificări, cum ar fi adăugarea blocurilor, eliminarea blocurilor sau schimbarea șabloanelor. Nu este un loc pentru a structura complet pagina dvs. de produs sau similare, dacă doriți să faceți acest lucru, faceți-o în fișierul relevant, de ex. catalog.xml

Da, s-ar putea să ne salvăm un pic de timp când actualizăm programul Magento, deoarece toate editiile noastre sunt într-un singur fișier, dar primesc toate editările într-un singur fișier, cu toate durerile de cap care încearcă să suprascrie alte fișiere XML. pur și simplu depășește.

Mai mult, atunci când făceam o mulțime de modificări unei pagini pe care, în mod ideal, am dori să o referim la celălalt XML care face parte din acea pagină, trebuia să trecem în mod constant între cele două fișiere și, în cele din urmă, divizând funcționalitatea între două fișiere separate - nu ceea ce dorim cu adevărat!

Deci, cum să o configurați ...

Creați local.xml fișier în interiorul dosarului nostru layout temă app / proiectare / front-end //default/layout/local.xml și adăugați niște structuri de bază de marcare XML:

    

Acum, când avem dosarul nostru, vă voi arăta câteva tehnici comune.

1. Adăugarea și eliminarea scripturilor / foilor de stil

O modificare foarte comună este adăugarea sau eliminarea JavaScript și CSS. Dacă lucrați cu jQuery va trebui să adăugați acest lucru deoarece Magento nu îl include în mod implicit și orice JavaScript personalizat pe care îl solicitați va trebui, de asemenea, să adăugați.

Dacă vom vedea sursa pe o instalare Magento vom vedea o mulțime de JavaScript fiind tras în, unele dintre care nu vom folosi, caz în care trebuie să eliminați ca fiind o inutilă http cerere - Magento nu este rapid, asa ca sa facem corect elementele de baza!

Pentru a include un fișier, trebuie să decidem dacă va fi global, de exemplu, în fiecare pagină a magazinului nostru sau doar în anumite zone. Cu aceasta putem selecta mânerul de aspect potrivit pentru utilizare.

Voi introduce două mânere de aspect, și . Desigur, sunt mult mai multe disponibile pentru noi, dar pentru moment vă permite să vă concentrați doar pe acestea.

mânerul este global și va afecta toate paginile în timp ce va afecta numai pagina de pornire.

Acum, la codul.

     skin_jsjs / libs / jquery.min.js       ]]>     skin_jsjs / libs / modernizr.min.js skin_jsjs / libs / html5shiv.min.jsIE 9 skin_jsjs / libs / respond.min.jsIE 9 skin_jsjs / libs / selectivizr.min.jsIE 9  skin_csscss / widgets.css skin_csscss / print.css skin_csscss / stiluri de-ie.cssIE 8 skin_jsjs / ie6.jsIE 7 jslib / DS-sleight.jsIE 7      skin_jsjs / libs / home.min.js skin_csscss / home.css   

Se întâmplă destul de mult, dar atunci când este rupt, este relativ direct.

 tip de fișier / locație cale către fișier 
  1. Metoda este locul în care intrăm ceea ce dorim să obținem
  2. Tipul face referire la tipul de fișier și este, de asemenea, dictează locul în care fișierul se află în ierarhie.
  3. Numele este locul în care introducem calea către fișier

Urmând punctul doi: De asemenea, dictează locul în care fișierul se află în ierarhie, fiecare tip referă la o poziție diferită în ierarhie care devine prependată la ceea ce introduceți în camp. Le-am enumerat mai jos pentru referință:

  • skin_js: piele / front-end // Default / name
  • skin_css: piele / front-end // Default / name
  • js: js / name

Observați că încărcarea unui fișier dintr-o sursă externă, cum ar fi un CDN, are o sintaxă puțin diferită. De asemenea, este important să includeți jQuery.noConflict (); la sfârșitul anului, pentru a evita conflictul jQuery cu Magento construit în Biblioteca Prototype.

2. Înlăturarea blocurilor

Magento vine însoțit de mai multe blocuri laterale de bara laterală, pentru a face față faptului că nu vom folosi niciodată într-o situație reală de viață, cum ar fi anunțul "Înapoi la școală". Mai jos sunt două metode pe care le putem folosi: 

       right.poll   

elimina metoda este o modalitate bună de a elimina un bloc, indiferent de care mâner de aspect a încărcat blocul, uneori pur și simplu dorim să meargă la nivel global indiferent unde este și să nu se întoarcă niciodată!

Pe de altă parte unsetChild va elimina doar un bloc dintr-un anumit mâner de aspect. Puteți vedea că o numesc în cadrul dreapta aspect mâner astfel încât acesta va fi eliminat numai de acolo. În cazul în care right.poll bloc este apelat de oriunde altundeva într-un alt aspect mâner se va afișa.

3. Adăugarea unei modificări a aspectului

Aici avem un exemplu de adăugare a unui bloc structural suplimentar la pagina de pornire. Referindu-ne la blocul de conținut și la utilizarea acestuia după pentru a specifica blocul de afișat la sfârșitul blocului de conținut.

       

4. Adăugarea unui bloc CMS static

În sfârșit, avem un exemplu de adăugare într-un bloc CMS static, dar mai întâi va trebui să creați una pentru ca aceasta să funcționeze.

După ce v-ați conectat la zona de administrare, faceți clic pe CMS> Blocuri statice și adăugați un nou bloc. Luați notă de "identificatorul" deoarece trebuie să menționăm acest lucru în codul XML.

     home_static_block    

În cadrul BlockJD este locul în care introducem identificatorul nostru.

Citirea în continuare

Abia am zgâriat suprafața și există multe alte utilizări pentru XML, fără a mai menționa mai multe machete de aspect și taguri XML disponibile pentru noi. Aspectul Magento însăși dorește să fie o serie, deoarece este foarte mult de acoperit, pentru că acum o țin doar la elementele de bază.

Dacă doriți să faceți mai multe lecturi pe XML aș recomanda citirea acestui articol și, de asemenea, să descărcați o copie a Ghidului Oficial de Design Magento care merge mai adânc și are o explicație bună a celorlalte tag-uri XML pe care le putem folosi.

Ce urmeaza?

În următorul articol, vom merge mai departe și vom examina fișierele șablonului.


Cod