Dezvoltarea temelor Magento Fișiere de șabloane

În acest articol, vom acoperi elementele de bază ale fișierelor șablon Magento. Vom trece peste introducerea lor și vom face unele modificări de bază.

Aceasta va include afișarea produselor recomandate pe pagina principală și modul de încărcare a JavaScript în subsolul paginii.

În urma articolului precedent, am văzut că fișierele de aspect controlează fiecare bloc într-o temă și decid ce se întâmplă și nu se afișează. Dar ceea ce se obține redat în interiorul acelui bloc este locul unde fișierele șablonului intră în acțiune.

În acest articol, ne vom concentra pe următoarele directoare:

Format - app / proiectare / front-end /// Template /
locale - app / proiectare / front-end /// Locale /

Dacă v-ați alăturat, vă rugăm să fiți siguri că ați terminat articolele anterioare din această serie.

Pentru referință, am abordat:

O introducere
Layout Fișiere

Fără a mai face, să începem.

Format

Fișierele șablon Magento sunt fișiere PHTML alcătuite dintr-un amestec de HTML și PHP, dintre care unele fac o pagină precum 1column.phtml în timp ce altele fac blocuri specifice într-o pagină cum ar fi header.phtml.

În cea mai mare parte a timpului în timpul dezvoltării unui site web, acestea sunt fișierele cu care vom lucra cel mai mult, adică pentru dezvoltatorii din segmentul frontului. Odată ce XML-ul este pus în funcțiune și un șablon este sunat, este de așteptat ca fișierul să fie analizat și afișat corespunzător.

Există sute de fișiere șablon disponibile, știind care dintre ele să editați și apoi să urmăriți fișierul în ierarhie poate fi dificil când începeți prima dată.

Totul este bine, totuși, există câteva setări de zonă de administrare îngrijite care ne pot ajuta, ne vor salva ore de durere de cap!

Este important să rețineți că putem utiliza următoarele setări numai la domeniul "Site Web" sau "Magazin", setările nu sunt disponibile pentru noi în domeniul "Configurare implicită", așa că trebuie să ne amintim să schimbați domeniul de aplicare odată conectat Acest lucru este util, deși înseamnă că putem schimba setările doar pentru un anumit site web sau pentru un magazin, mai degrabă decât la nivel global.

Sugestii pentru sugestii

Acestea vor identifica rapid ce fișiere sunt încărcate pentru o anumită pagină, arătându-ne calea spre fișier. Dacă îl activați sau dezactivați, este o modificare rapidă a zonei de administrare.

Treceți la sistem> configurație. Apoi, în meniul din stânga, derulați până jos și faceți clic pe "Dezvoltator" de sub rubrica "Avansat". Odată ce am schimbat domeniul de aplicare la "Site principal", atunci avem setarea disponibilă pentru noi în secțiunea "Debug".

S-ar părea că nimic nu sa întâmplat după ce ați făcut clic pe salvați config, dar dacă mergeți la capătul din față al site-ului web, de exemplu pagina de pornire și reîmprospătați pagina, veți vedea sugestiile care vin.

Cu aceasta știm acum unde sunt localizate fișierele și dacă sunt necesare modificări, copiați fișierul de la bază la tema noastră și modificați-o după cum este necesar.

Putem de asemenea să setăm "Adăugați numele blocului la sugestii" la "Da" dacă vrem informații suplimentare, aceasta este în general folosită pentru dezvoltarea back end, așa că nu mă voi preocupa prea mult de această setare.

Acum, la codul. Voi trece prin câteva modificări care sunt adesea folosite în dezvoltarea temelor, dar din nou voi ating doar suprafața pe cât posibil.

Afișarea produselor recomandate pe pagina de pornire
Încărcarea JavaScript în subsol

Să începem…

1. Afișarea produselor recomandate pe pagina de pornire

Acest punct trebuie să fie cea mai frecventă solicitare pe orice site web, fiecare dorește să arate o mână de produse pe pagina de destinație a site-ului propriu?

Este de fapt mult mai ușor decât v-ați imagina, cu o combinație de XML și PHP, putem obține acest lucru în cel mai scurt timp. Există, ca și în multe lucruri din Magento, mai multe moduri de a face acest lucru. Am să vă arăt ceea ce cred că este cea mai ușoară metodă.

În primul rând, trebuie să creăm categoria noastră în zona de administrare care va conține produsele noastre. După ce v-ați conectat la cap catalog> gestionați categoriile. Pentru acest exemplu, vom crea o subcategorie sub root, așa că trebuie să faceți clic pe "Catalog Root" și apoi faceți clic pe butonul "Add Subcategory". Introduceți un titlu pentru categorie, asigurați-vă că "Este activ" este setat la "Da" și apoi faceți clic pe "Salvați categoria".

Notați numărul de identificare al categoriei din partea de sus, deoarece vom avea nevoie mai târziu de aceasta:

Acesta va fi momentul potrivit pentru a adăuga și câteva produse la categoria pe care tocmai am creat-o. Pentru aceasta, faceți clic pe fila "Categoria produselor" și selectați produsele pe care doriți să le afișați, uitând să faceți clic pe "Salvați categoria" după ce am terminat.

În continuare, trebuie să creăm șablonul în locul nostru pentru fiecare buclă va fi rulat.

Pentru aceasta, vom baza pe șablonul listei de produse care are deja codul necesar pentru noi, trebuie doar să facem câteva ajustări pentru a ne satisface nevoile.

app / proiectare / Frontend a / baza / default / / Catalog produse / list.phtml

Copiaza in:

app / proiectare / front-end //default/catalog/product/list-home-featured.phtml

Vom face apoi câteva modificări în dosarul nostru.

Încărcați în colecția noastră de produse prin ID-ul categoriei
Afișați doar o vizualizare, am selectat vizualizarea de rețea, dar nu ezitați să modificați acest lucru
Eliminați bara de instrumente deoarece aceasta nu mai este necesară
Adăugați în denumirea categoriei pentru o rubrică

Fișierul final va arăta astfel:

 încărcare ($ _ categoryID); $ _productCollection = $ _categoria-> getProductCollection (); $ _ProductCollection-> addAttributeToSelect ( '*'); ?> getName (); ?>
 count ()):?> __ ('Nu există produse care să corespundă selecției.')?>
      getProductUrl ()?> "title ="stripTags ($ this-> getImageLabel ($ _ produs, 'small_image'), null, true)?> ">  init ($ _ produs, 'small_image') -> redimensionare (135); ?> "alt ="($ this-> getImageLabel ($ _ product, 'small_image'), null, true)?> "/>   getProductUrl ()?> "title ="($ _ product-> getName (), null, true)?> "> getName (); ?>  
 getRatingSummary ()):?> getReviewsSummaryHtml ($ _ product, 'short')?>  getPriceHtml ($ _ produs, adevărat)?>  isSaleable ()):?>   __ ("În afara stocului")?>
   helper ("lista de dorințe") -> isAllow ()):?> helper (lista de dorințe) -> getAddUrl ($ _ produs)?> ">__ ('Adaugă în lista de dorințe')?>
  getAddToCompareUrl ($ _ produs)):?> | „>__ ('Adaugă la comparare')?>

Nu uitați să schimbați valoarea $ _categoryId variabilă la ID-ul categoriei dvs..

În cele din urmă trebuie doar să creăm un bloc XML care se va încărca în șablonul pe care l-am creat mai sus. Vom face asta în nostru local.xml fișier cum ar fi:

Asta e tot ce-i drept, destul de drept, nu? Mai jos este o captură de ecran a produsului finit.

2. Încărcarea JavaScript în subsol

Pentru inceput, credem ca Magento are deja aceasta abilitate incorporata prin XML atunci cand adaugam scripturile noastre, un fel de parametru pe care l-am putea trece dar am fi gresit - Magento nu o va face asa de usor pentru noi!

WordPress, pe de altă parte, face acest lucru perfect prin intermediul wp_register_script. Poate că un dezvoltator de back end va prelua acest lucru și va adăuga abilitatea de a trece printr-un parametru XML suplimentar, acum există un proiect lateral pentru ca cineva să se crawleze cu.

Orice careva?

Deci, din fericire, pentru moment, există o metodă alternativă pentru a face ca acest lucru să funcționeze.

Cred că este important să acoperiți acest subiect, deoarece va îmbunătăți viteza site-ului nostru pe care toată lumea o dorește. Am tendința de a părăsi fișierele de bază JavaScript de la Magento, la fel cum sunt în , Le pot minifica, dar în afară de asta rămân așa cum sunt.

Orice adăugăm pe Magento, cum ar fi jQuery și funcțiile noastre personalizate, nu există nici un rău în încărcarea acestora în subsolul paginii. Când construiesc un site web, am tendința să păstrez un ochi minunat tag-ul, atunci când un modul de terță parte este instalat, de obicei adaugă ceva aici. Cu un pic de lucru putem edita modulul terță parte XML și îndreptați-l să se încarce în subsol - merită să faceți în plus cinci minute!

Mai întâi trebuie să creăm un bloc XML în cadrul nostru local.xml fișierul din macheta implicită a aspectului, cum ar fi:

      skin_jsjs / build / jquery.min.js

Observați că folosim aceeași metodă de adăugare a fișierelor JavaScript ca în articolul precedent. Dacă aveți nevoie de o reîmprospătare, faceți clic aici, pentru demonstrații vom adăuga o copie locală a jQuery.

Acum putem să creăm fișierul de șablon. Creați un fișier nou în:

app / proiectare / front-end //default/page/html/footer-js.phtml

cu următorul conținut:

getCssJsHtml ()?>

În cele din urmă, trebuie să adăugăm o singură linie de cod în fișierele șablonului chiar înainte de închidere etichetă.

Fișierele noastre șablon pot fi găsite la app / proiectare / Frontend a / baza / default / pagina / fără să uităm să le copiem pe propria noastră temă. Există mai multe fișiere de șablon, am comparat o listă împreună mai jos:

1column.phtml
2columns-left.phtml
2columns-right.phtml
3columns.phtml

Mai jos este un exemplu de cum ar trebui să arate:

... getAbsoluteFooter ()?>  getChildHtml ("footer.js")?>

Cu toți pașii acum completați dacă ne reînviorăm pagina și vom vedea sursa, vom vedea acum scriptul încărcat chiar înainte de închidere etichetă.

Dacă ați reușit până acum, cred că o felicitare este în ordine! Există multe de luat în ședință, dar sperăm că totul începe să aibă sens.

Înfășurați-o!

Această serie este doar vârful aisbergului, Magento este o platformă foarte puternică și are mult mai multe de oferit decât ceea ce am acoperit. Sper că ți-a oferit o perspectivă asupra principiilor tematice ale Magento și că o poți folosi bine.

Nu există nicio modalitate mai bună de a învăța Magento, dar doar să vă blocați, veți învăța în scurt timp funiile.

Ca întotdeauna sunt mai mult decât bucuros să vă ajut dacă aveți nevoie de o mână cu ceva. De asemenea, asigurați-vă că pentru a finaliza My Magento Boilerplate, care are o grămadă de bunătăți în interiorul.

Pana data viitoare.

Cod