Magento Theme Development Kategori Side, Del 1

Gratulerer med å fullføre hjemmesiden til ditt nye tema, og begynner med neste side. I denne opplæringen begynner vi å endre kategorisiden til Magento-temaet vårt.

Kategorisiden består i hovedsak av fire seksjoner: verktøylinjen, rutenettmodus, listemodus og sidebjelken. Vi behandler de tre første delene i denne artikkelen, og deretter i neste veiledning, vil vi endre sidefeltet og gjøre noen CSS-reparasjoner.

Hvis du ser på en kategoriside i vårt tema, ser det nå ut som noe slikt:

Mens vi vil få det til å se slik ut:

Hvis du merker, har vår nåværende kategori side store tomme mellomrom til venstre og høyre. Vi må finne ut hvorfor innholdsområdet ikke tar nok plass. La oss først se på hvilken mal som er ansvarlig for å gjengi denne siden. Vi kan gjøre dette ved å aktivere malttips fra administrasjonspanelet, som du har gjort flere ganger før i denne serien.

Her fant vi ut at det hadde en tre-kolonne-layout som gjengir denne siden, og dette er grunnen til at det er tomt bred plass til venstre, da ingen blokker er tilordnet til venstre sidefelt.

For å gjøre denne siden ser ut som vår HTML-design, endrer vi den til to kolonner. Fra administrasjonspanelet, gå til Katalog> Administrer kategorier> Egendefinert design> Sideoppsett og endre den til 2 kolonner med venstre stolpe.

Nå skal vår side ha en to-kolonne layout med et sidebar på venstre side, som var kravet til vårt design.

Som i denne artikkelen endrer vi bare det riktige området (ikke sidebjelken), vi starter redigeringsprosessen fra verktøylinjen. Med mallhint på, sjekker vi de phtml-filene som er ansvarlige for gjengivelsen, ved å igjen aktivere malhintene.

Som vi fant ut det, er denne filen: \ template \ catalog / product / list / toolbar.phtml.

Vi kopierer det i vårt nye tema, sammenligner det med koden til vår HTML-fil, og begynner deretter å gjøre endringer. Vår nåværende kode i verktøylinjen.phtml-filen ser slik ut:

getCollection () -> getSize ()):?>  isExpanded ()):?>  isEnabledViewSwitcher ()):?>  getModes (); ?> 1):?> __ ('Se som')?> getModes () som $ _code => $ _ label):?> isModeActive ($ _ kode)):?>   getModeUrl ($ _ code)?> "title ="">    
   __ ('Sorter etter')?>  getCurrentDirection () == 'desc'):?> getOrderUrl (null, 'asc')?> "title ="__ ('Still innstigende retning')?> ">__ ('Still inn stående retning')?>  getOrderUrl (null, 'desc')?> "title ="__ ('Sett nedadgående retning')?> ">__ ('Sett synkende rekkefølge')?>  
 
    getLastPageNum ()> 1):?>  __ ('% s-% s av% s', $ this-> getFirstNum (), $ this-> getLastNum (), $ this-> getTotalNum ())> 
   __ ('% s Element (er)', $ this-> getTotalNum ())?> 
   __ ('Vis')?>  
 
 getPagerHtml ()?>

Vi må sammenligne den med HTML-koden som er ansvarlig for verktøylinjen, som er dette:

  ListGrid
 Sorter etter :  
 Vise fram :

Vi begynner å endre denne koden ved å sette inn de dynamiske kodene og annerledes til og hvis uttalelser. For eksempel, for å gjøre koblingene for rutenett og listemodusene for visningsmodus, legger vi til denne koden:

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

Hva denne koden i hovedsak gjør, er iterere over alle aktive moduser (liste og grid), og deretter oppgi en ankermerke for hver av disse. Her, veldig smart, har vi tildelt forskjellige klasser og titler til dem, ved hjelp av $ _label variabel, som vil være forskjellig for hver modus.

På samme måte kan du endre Sorter etter og limiter deler deg selv ved å sammenligne den med den faktiske verktøylinjen.phtml-filen. Etter endringene vil den endelige koden for denne filen se slik ut:

getCollection () -> getSize ()):?>  isExpanded ()):?>  isEnabledViewSwitcher ()):?>  getModes (); ?> 1):?> getModes () som $ _code => $ _ label):?> isModeActive ($ _ kode)):?> "href =" # ">  "href ="getModeUrl ($ _ code)?> ">    
  Sorter etter :  getCurrentDirection () == 'desc'):?> getOrderUrl (null, 'asc')?> "title ="__ ('Still innstigende retning')?> ">__ ('Still inn stående retning')?>  getOrderUrl (null, 'desc')?> "title ="__ ('Sett nedadgående retning')?> ">__ ('Sett synkende rekkefølge')?>  
 __ ('Show:')?>  
 
  getPagerHtml ()?>

Og hvis vi oppdaterer siden nå, vil det se ut som dette. Alt er på plass, men CSS er ganske av, som vi skal fikse i neste artikkel.

Nå er det på tide å endre de faktiske produktene som vises på denne siden. Produkter her kan vises på to forskjellige måter, det vil si listemodus og rutemodus. Hvis vi aktiverer malttips for å finne ut filen som er ansvarlig for denne delen, ser vi at koden for både rutenett og listemodus er skrevet i samme fil, som er frontend \ rwd \ default \ template \ catalog / product / list .phtml.

Listekoden i denne filen er på linjene 44 til 116, som er dette:

 getMode ()! = 'grid'):?>      getProductUrl ()?> "title ="stripTags ($ this-> getImageLabel ($ _ produkt, 'small_image'), null, true)?> ">         stripTags ($ _ product-> getName (), null, true); ?> getProductUrl ()?> "title ="">productAttribute ($ _ product, $ _product-> getName (), 'navn'); ?>
 getRatingSummary ()):?> getReviewsSummaryHtml ($ _ produkt)?>  getChild ('name.after')) $ _nameAfterChildren = $ this-> getChild ('name.after') -> getSortedChildren (); foreach ($ _nameAfterChildren som $ _nameAfterChildName) $ _nameAfterChild = $ this-> getChild ('name.after') -> getChild ($ _ nameAfterChildName); $ _NameAfterChild-> setProduct ($ _ produkt); ekko $ _nameAfterChild-> toHtml (); ?> 
  getPriceHtml ($ _ produkt, sant)?> 
  canConfigure () && $ _product-> isSable ()):?> 
 getStockItem () && $ _product-> getStockItem () -> getIsInStock ()):?> __ ('Se detaljer')?> "Href ="getProductUrl ()?> ">__ ('Se detaljer')?>
  __ ('Ikke på lager')?>
   hjelper ('ønskeliste') -> isAllow ()):?> hjelper ('ønskeliste') -> getAddUrl ($ _ produkt)?> ">__ ('Legg til i ønskelisten')?>
  getAddToCompareUrl ($ _ produkt)):?> | ">__ ('Legg til sammenligning')?>
  
 
  productAttribute ($ _ product, $ _product-> getShortDescription (), 'short_description')?> getProductUrl ()?> "title ="">__ ('Lær mer')?>

Vi må nå sammenligne den med HTML-listekoden i productlist.html i vår HTML-mal.

  Ny
 
  Lincoln Corner Unit Products
 02 gjennomgang (er)
 Proin lectus ipsum, gravida og mattis vulputate, tristique ut lectus. Sed et lorem nunc. Først og fremst i faucibus orci luctus og ultramoderne cubilia curae. Proin lectus ipsum, gravida etds mattis vulputate, tristique ut lectus. Sed et lorem nunc ... 
  450.00^$450.00^$

Endring av denne koden er ganske enkel. Vi bruker disse initialiseringslinjene:

 getMode ()! = 'grid'):?>

Deretter plasserer vi en for sløyfe rundt li stikkord:

Og til slutt vil vi erstatte produktnavn, pris, beskrivelse, bildefilkobling og nettadresse med de dynamiske kodene. Den endelige koden vil se slik ut:

 getMode ()! = 'grid'):?>        
  productAttribute ($ _ product, $ _product-> getName (), 'navn'); ?>
 getRatingSummary ()):?> getReviewsSummaryHtml ($ _ produkt)?>  
 productAttribute ($ _ product, $ _product-> getShortDescription (), 'short_description')?>
  getPriceHtml ($ _ produkt, sant)?>

Nå, hvis vi oppdaterer siden, ser vi kategorisiden i listemodus vil se slik ut. Jeg vet at det ikke er det vi ønsker at det skal se ut, men all HTML er på plass, så nå må vi bare endre CSS, som vi skal gjøre i neste opplæringsveiledning.

Nå kommer til gridmodus, koden for det er fra 118 til 176 i samme list.phtml-fil.

 telle ()?> getColumnCount (); ?>      getProductUrl ()?> "title ="stripTags ($ this-> getImageLabel ($ _ produkt, 'small_image'), null, true)?> ">     getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?> ">productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 getChild ('name.after')) $ _nameAfterChildren = $ this-> getChild ('name.after') -> getSortedChildren (); foreach ($ _nameAfterChildren som $ _nameAfterChildName) $ _nameAfterChild = $ this-> getChild ('name.after') -> getChild ($ _ nameAfterChildName); $ _NameAfterChild-> setProduct ($ _ produkt); ekko $ _nameAfterChild-> toHtml (); ?> getPriceHtml ($ _ produkt, sant)?> getRatingSummary ()):?> getReviewsSummaryHtml ($ _ produkt, 'kort')?>   canConfigure () && $ _product-> isSable ()):?>  getStockItem () && $ _product-> getStockItem () -> getIsInStock ()):?> __ ('Vis detaljer')?> "href ="getProductUrl ()?> ">__ ('Se detaljer')?>  __ ('Ikke på lager')?>
   hjelper ('ønskeliste') -> isAllow ()):?> hjelper ('ønskeliste') -> getAddUrl ($ _ produkt)?> ">__ ('Legg til i ønskelisten')?>
  getAddToCompareUrl ($ _ produkt)):?> | ">__ ('Legg til sammenligning')?>

HTML-koden ser ut som dette i filen productgrid.html i vår HTML-mal:

       Les mer 
 Iphone 5s Gold 32 Gb 2013
 $ 451,00

Endring av denne delen vil være ganske lik det vi gjorde i listedelen. Først av alt vil vi gjøre noen initialisering, det samme som i standardlisten.phtml-filen.

 telle ()?> getColumnCount (); ?>

Neste vil vi pakke hver li elementet i en for-løkke for å iterere over alle produktene.

Til slutt erstatter vi produktattributter som produktnavn, pris, beskrivelse, etc., med relevante dynamiske koder. Du kan finne dem ganske enkelt fra den faktiske list.phtml-filen.

Den endelige koden vil se slik ut:

 telle ()?> getColumnCount (); ?>         getProductUrl ()?> "> Legg i handlekurv 
 stripTags ($ _ product-> getName (), null, true)?>
 getPriceHtml ($ _ produkt, sant)?>

Nå, hvis du oppdaterer siden, ser gridmodus slik ut:

I denne artikkelen har vi endret verktøylinjen og listen og rutenett av denne siden. I den neste artikkelen vil vi endre sidefeltet, og gjøre noen CSS-stilrettelser. Ved slutten av neste artikkel vil vår kategoriside se ganske lik HTML-designen.

Kode