Accentsconagua

Dezvoltarea temelor Magento pagina categoriei, partea 1

Cod
Share

Felicitări pentru completarea paginii de pornire a noii tale teme și începând cu următoarea pagină. În acest tutorial, vom începe să modificăm pagina de categorii a temei Magento. 

Pagina de categorii constă, în esență, din patru secțiuni: bara de instrumente, modul rețea, modul listă și bara laterală. Vom aborda primele trei secțiuni din acest articol, iar apoi în tutorialul următor, vom modifica bara laterală și vom face unele corecții CSS.

Dacă te uiți la orice pagină de categorie a temei noastre, va arăta în prezent în felul următor:

În timp ce vrem să facem să arate așa:

Dacă observați, pagina noastră de categorii curente are spații largi goale și stânga. Trebuie să ne dăm seama de ce zona de conținut nu are suficient spațiu. Să aruncăm o privire mai întâi la ce șablon este responsabil pentru redarea acestei pagini. Putem face acest lucru prin activarea sugestiilor de șablon din panoul de administrare, așa cum ați făcut de mai multe ori înainte în această serie.

Aici am aflat că are o structură în trei coloane care redă această pagină, și acesta este motivul pentru care spațiul liber din stânga este gol, deoarece nu sunt atribuite blocuri în bara laterală stângă.

Pentru a face ca această pagină să semene cu designul HTML, o vom schimba în două coloane. Din panoul de administrare, accesați Catalog> Gestionați categorii> Design personalizat> Aspect pagină și schimbați-l 2 coloane cu bara stângă.

Acum, pagina noastră ar trebui să aibă o dispunere cu două coloane, cu o bară laterală pe partea stângă, așa cum a fost cerința designului nostru.

Ca și în acest articol, vom schimba doar zona potrivită (nu bara laterală), vom începe procesul de editare din bara de instrumente. Cu sugestiile șablonului, vom verifica fișierele phtml responsabile de randare, care permit din nou sugestiile șablonului.

După cum am aflat, este acest fișier: \ template \ catalog / product / list / toolbar.phtml.

Vom copia asta în noile noastre teme, comparați-le cu codul fișierului nostru HTML și apoi începeți să efectuați modificări. Codul nostru actual al fișierului toolbar.phtml arată astfel:

getCollection () -> getSize ()):?> 
 isExpanded ()):?> 
 isEnabledViewSwitcher ()):?> 
 getModes (); ?> 1):>>  getModes () ca $ _code => $ _ label):?> isModeActive ($ _ code)):?>   getCurrentDirection () == 'desc'):?> getOrderUrl (null, 'asc')?> "title ="__ ('Setați direcția ascendentă')?> ">__ ('Setați direcția ascendentă')?>  getOrderUrl (null, 'desc')?> "title ="__ ('Setați direcția descendentă')?> ">__ ('Setați direcția descendentă')?>  
 
  
 
 getLastPageNum ()> 1):?> 
 __ ('% s-% s din% s', $ this-> getFirstNum (), $ this-> getLastNum (), $ this-> getTotalNum () 
  
 __ ('Articolele% s', $ this-> getTotalNum ())?> 
  
   
 
 getPagerHtml ()?>

Trebuie să îl comparăm cu codul HTML responsabil pentru partea din bara de instrumente, și anume:

 
 
ListGrid
 
Filtrează după :  
 
Spectacol :

Vom începe să modificăm acest cod introducând etichetele dinamice și diferite pentru și dacă declarații. De exemplu, pentru a afișa legăturile pentru modurile grilă și listă pentru modul de vizualizare, vom adăuga acest cod:

1):>> getModes () ca $ _code => $ _ label):?> isModeActive ($ _ code)):?> "href =" # ">  "href ="getModeUrl ($ _ code)?> ">

Ceea ce face în mod esențial acest cod este repetarea tuturor modurilor active (listă și grilă), apoi listați o etichetă de ancorare pentru fiecare dintre acestea. Aici, foarte inteligent, le-am atribuit diferite clase și titluri, folosind $ _label variabilă, care va fi diferită pentru fiecare mod. 

În mod similar poți modifica filtrează după și Limitatorul vă componente prin compararea cu fișierul propriu toolbar.phtml. După modificări, codul final pentru acest fișier va arăta cam așa:

getCollection () -> getSize ()):?> 
 isExpanded ()):?> 
 isEnabledViewSwitcher ()):?> 
 getModes (); ?> 1):>> getModes () ca $ _code => $ _ label):?> isModeActive ($ _ code)):?> "href =" # ">  "href ="getModeUrl ($ _ code)?> ">    
  
Filtrează după :  getCurrentDirection () == 'desc'):?> getOrderUrl (null, 'asc')?> "title ="__ ('Setați direcția ascendentă')?> ">__ ('Setați direcția ascendentă')?>  getOrderUrl (null, 'desc')?> "title ="__ ('Setați direcția descendentă')?> ">__ ('Setați direcția descendentă')?>  
 
__ ('Arată:')?>  
 
  getPagerHtml ()?>

Și dacă actualizăm pagina acum, va arăta așa. Totul este în vigoare, dar CSS este destul de oprit, pe care o vom rezolva în următorul articol.

Acum este momentul să schimbați produsele reale afișate pe această pagină. Produsele de aici pot fi afișate în două moduri diferite, adică modul de listă și modul grilă. Dacă activați sfaturile șablonului pentru a afla fișierul responsabil pentru această parte, vom vedea că codul pentru modul grilă și listă este scris în același fișier, care este frontend \ rwd \ default \ template \ catalog / product / list .phtml.

Codul de listă din acest fișier se află pe liniile 44-116, care este următorul:

 getMode ()! = 'grilă'):?>  
      
  1.   getProductUrl ()?> "title ="stripTags ($ this-> getImageLabel ($ _ produs, 'small_image'), null, true)?> ">    init ($ _ produs, 'small_image') -> keepFrame (false) -> redimensionare ($ _ imgSize); ?> "alt ="($ this-> getImageLabel ($ _ product, 'small_image'), null, true)?> "/>   
     
     
     strijete ($ _ product-> getName (), null, true); ?> 
    getProductUrl ()?> "title ="„>productAttribute ($ _ produs, $ _product-> getName (), 'nume'); ?>
     getRatingSummary ()):?> getReviewsSummaryHtml ($ _ produs)?>  getChild ('nume.after')) $ _nameAfterChildren = $ this-> getChild ('name.after') -> getSortedChildren (); forename ($ _nameAfterChildren ca $ _nameAfterChildName) $ _nameAfterChild = $ this-> getChild ('name.after') -> getChild ($ _ nameAfterChildName); $ _NameAfterChild-> setProduct ($ _ produs); echo $ _nameAfterChild-> toHtml (); ?> 
     
     getPriceHtml ($ _ produs, adevărat)?> 
     
     canConfigure () && $ _product-> isSaleable ()):?> 
     getStockItem () && $ _product-> getStockItem () -> getIsInStock ()):?> 
    __ ('Vezi detalii')?> "Href ="getProductUrl ()?> ">__ ('Vezi detalii')?>
      
    __ ("Î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')?>
      •   
     
     
     productAttribute ($ _ produs, $ _product-> getShortDescription (), 'short_description')?> getProductUrl ()?> "title ="„>__ ("Aflați mai multe")?> 
     
     
     
    2.

Acum trebuie să îl comparăm cu codul de listă HTML în productlist.html din șablonul nostru HTML.

     
  •  
    Nou
     
    numele produsului
     
     
    Produse Lincoln Corner Unit
     
    02 Revizuire (e)
     
    Proin lectus ipsum, gravida et mattis vulputate, tristi t ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis în faucibus orci luctus și ultri ces posuere cubilia curae. Proin lectus ipsum, gravida etds mattis vulputate, tristique ut lectus. Sed și lorem nunc ... 
     
     
    450.00$450.00$
     
      
     
     
     
    •

Modificarea acestui cod este destul de simplă. Vom folosi aceste linii de inițializare:

 getMode ()! = 'grilă'):?>

Apoi vom plasa o buclă în jurul valorii de Li etichetă:

În cele din urmă, vom înlocui numele produsului, prețul, descrierea, linkul fișierului imagine și adresa URL cu etichetele dinamice. Codul final va arăta astfel:

 getMode ()! = 'grilă'):?>  
      
  1.  
       init ($ _ produs, 'small_image') -> keepFrame (false) -> redimensionare ($ _ imgSize); ?> "alt ="($ this-> getImageLabel ($ _ product, 'small_image'), null, true)?> "/> 
     
     
    productAttribute ($ _ produs, $ _product-> getName (), 'nume'); ?>
     
    getRatingSummary ()):?> getReviewsSummaryHtml ($ _ produs)?>  
     
    productAttribute ($ _ produs, $ _product-> getShortDescription (), 'short_description')?>
     
     
    getPriceHtml ($ _ produs, adevărat)?>
     
      
     
     
     
    2.

Acum, dacă actualizăm pagina, vom vedea că pagina din categoria din lista va arăta cam așa. Știu că nu este ceea ce vrem să pară, dar tot HTML-ul nostru este în vigoare, așa că acum trebuie să modificăm CSS-ul pe care îl vom face în următorul tutorial.

Acum vine la modul de rețea, codul pentru care este de la 118 la 176 în același fișier list.phtml.

 count ()?> getColumnCount (); ?> 
        
  •  getProductUrl ()?> "title ="stripTags ($ this-> getImageLabel ($ _ produs, 'small_image'), null, true)?> ">   init ($ _ produs, 'small_image') -> redimensionare ($ _ imgSize); ?> "alt ="($ this-> getImageLabel ($ _ product, 'small_image'), null, true)?> "/>  
     
    getProductUrl ()?> "title ="($ _ product-> getName (), null, true)?> ">productAttribute ($ _ produs, $ _product-> getName (), 'name')?>
     getChild ('nume.after')) $ _nameAfterChildren = $ this-> getChild ('name.after') -> getSortedChildren (); forename ($ _nameAfterChildren ca $ _nameAfterChildName) $ _nameAfterChild = $ this-> getChild ('name.after') -> getChild ($ _ nameAfterChildName); $ _NameAfterChild-> setProduct ($ _ produs); echo $ _nameAfterChild-> toHtml (); ?> getPriceHtml ($ _ produs, adevărat)?> getRatingSummary ()):?> getReviewsSummaryHtml ($ _ product, 'short')?>  
     canConfigure () && $ _product-> isSaleable ()):?>  getStockItem () && $ _product-> getStockItem () -> getIsInStock ()):?> __ ("Vezi detalii")?> "href =getProductUrl ()?> ">__ ('Vezi detalii')?>  
    __ ("Î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')?>
      •   
     
     
     
    •

Codul HTML arată astfel în fișierul productgrid.html din șablonul HTML:

 
 
 
 
  
 Citeste mai mult 
 
Iphone 5s Gold 32 Gb 2013
 
$ 451.00

Modificarea acestei părți va fi destul de similară cu ceea ce am făcut în partea din listă. În primul rând, vom face o inițializare, la fel ca în fișierul list.potal implicit. 

 count ()?> getColumnCount (); ?>

Înainte vom înfășura fiecare Li element în bucla pentru a itera peste toate produsele.

În cele din urmă, vom înlocui atributele produsului, cum ar fi numele produsului, prețul, descrierea etc., cu etichete dinamice relevante. Le puteți găsi destul de convenabil din fișierul list.pft actual.

Codul final va arăta astfel:

 count ()?> getColumnCount (); ?> 
        
  •  
      init ($ _ produs, 'small_image') -> redimensionare ($ _ imgSize); ?> "alt ="($ this-> getImageLabel ($ _ product, 'small_image'), null, true)?> "/> 
     getProductUrl ()?> "> Adaugă în coș 
     
    stripTags ($ _ product-> getName (), null, true)?>
     
    getPriceHtml ($ _ produs, adevărat)?> 
     
     
    •

Acum, dacă actualizați pagina, modul de rețea va arăta astfel:

În acest articol, am modificat bara de instrumente și secțiunile listă și grilă ale acestei pagini. În următorul articol vom modifica bara laterală și vom face unele corecții de stil CSS. Până la sfârșitul următorului articol, pagina noastră de categorii va arăta destul de similar cu designul HTML.

Cod
×