Magento Theme Development Hjemmeside, Del 3

Nå som vi har tilpasset første halvdel av hjemmesiden, må vi endre innholdet på hjemmesiden neste. Hvis vi ser på vår HTML-design, har innholdsseksjonen på hjemmesiden bare en overskrift og en karusell for de nyeste produktene. Det er en Magento-widget vi kan bruke til å vise de nyeste produktene på hjemmesiden. Faktisk, hvis vi ser på vår nåværende hjemmesideseksjon, har den allerede den nyeste widgeten på den, men vi må endre den for å matche våre designkrav.

Hvis vi ser på innholdet på vår hjemmeside ved å gå til Administrasjonspanel> CMS> Sider> Madison Island> Innhold, vi ser at det bare er én linje med PHP-kode (annet enn noen stilkoder), dvs.

widget type = "katalog / product_widget_new" display_type = "new_products" products_count = "5" template = "katalog / produkt / widget / nytt / innhold / new_grid.phtml"

Så, i utgangspunktet kommer alt innholdet på hjemmesiden fra denne malen (som bare er en mal for å vise nye produkter). Vi kopierer denne filen fra RWD-temaet til vårt nye tema, i Katalog / produkt / widget / new / content / new_grid.phtml, og begynn å redigere den slik at den ser ut som vår HTML-design. Hvis vi ser på nåværende kode for denne filen, er det:

getProductCollection ()) && $ _products-> getSize ()):?> 
 
 
__ ('Nye produkter')?>
 
 
 getPagerHtml ()?> getColumnCount (); ?>  
 getItems () som $ _product):?> 
  getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?> ">   
 
getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?>) ">helper ('katalog / utgang') -> productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 getPriceHtml ($ _ produkt, true, '-widget-new-grid')?> getReviewsSummaryHtml ($ _ produkt, 'kort')?> 
 isSable ()):?> __ ('Legg i handlekurv')?>  
__ ('Ikke på lager')?>
  
 hjelper ('ønskeliste') -> isAllow ()):?> 
getAddToWishlistUrl ($ _ product)?> ">__ ('Legg til i ønskelisten')?>
  getAddToCompareUrl ($ _ produkt)):?> 
| ">__ ('Legg til sammenligning')?>
  
 
 
 
  
 
 
  

Når vi ser på vår HTML-kode for denne delen, ser det slik ut:

 
 
Varmt Produkter
 
 
 
 
 
 
  
 Legg i handlekurv 
 
Iphone 5s Gold 32 Gb 2013
 
$ 451,00
 
 
 
 
 
 

Så begynner vi ved å plugge inn de dynamiske kodene i denne HTML-en. Grunnen til at jeg har vist deg den nåværende koden til denne filen, er at du kan finne de nødvendige dynamiske kodene fra koden og sette dem i HTML-koden.

Vi trenger ikke å gjøre noen endringer i div-strukturen, så den første linjen som må endres, er h3 stikkord:

Varmt Produkter

Vi må erstatte den statiske teksten til Varmt og Produkter med Magento $ dette koder, slik at Magento senere kan oversette disse i henhold til brukerens preferanser. Så, denne linjen blir noe slikt: 

__ ('Ny')?>__ ('Produkter')?>

Neste linje som må endres, er bilde tag, der vi må endre den relevante banen til bildekilden. Foreløpig ser det slik ut:

Vi endrer den til dette:

Her får denne dynamiske tag det faktiske lille bildet av produktet med en størrelse på 236 x 357 px. Deretter må vi endre dette Legg i handlekurv link:

Legg i handlekurv

Vi endrer den til dette:

getProductUrl ()?> "> isSable ()):?> __ ('Legg i handlekurv')?>  __ ('Ikke på lager')?>   

Den har en dynamisk nettadresse for produktdetaljer siden, og viser bare 'Legg i handlekurv' hvis produktet er tilgjengelig. Ellers vil det vise 'Ikke på lager'. Til slutt oppdaterer vi produktprisen og navnet ved å erstatte denne linjen:

Iphone 5s Gold 32 Gb 2013
 
$ 451,00
 

Med denne: 

helper ('katalog / utgang') -> productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 
getPriceHtml ($ _ produkt, true, '-widget-new-grid')?>
 

Dette vil få vårt enkeltproduktvisning klart, men for å gjenkjøre det over alle nye produkter, må vi legge inn vareelementet vårt i en løkke, så vi legger til denne linjen øverst på det:

getItems () som $ _product):?>

Og denne linjen på slutten av den for å avslutte sløyfen:

Så hele koden for den filen blir slik:

getProductCollection ()) && $ _products-> getSize ()):?> 
 
 
__ ('Ny')?>__ ('Produkter')?>
 
 
 getItems () som $ _product):?> 
 
 
 
  
 getProductUrl ()?> "> isSable ()):?> __ ('Legg i handlekurv')?>  __ ('Ikke på lager')?>   
 
helper ('katalog / utgang') -> productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 
getPriceHtml ($ _ produkt, true, '-widget-new-grid')?>
 
 
 
 
  
 
 
  

Oppdater hjemmesiden din nå. Det burde ha en helt fungerende og stilig ny produktseksjon, som ville se slik ut:

Nå må vi endre footer før vi er ferdige med hjemmesiden. Hvis vi ser på vår HTML-design, har bunnteksten fire seksjoner. Den første viser 'Våre merker', den andre viser en abonnementsboks og sosiale medier, den tredje viser noen nettadresser, og den fjerde er bare opphavsretten.

Den fjerde delen er allerede til stede i vårt tema, så vi må bare endre innhold og stiler, men de tre andre komponentene vi må legge til i vårt tema. 

For å legge til en komponent, oppretter vi en ny statisk blokk fra administrasjonspanelet og legger inn innholdet vårt. Så, vi går til Administrasjonspanel> Statiske blokker> Legg til ny blokk, og legg til en ny blokk for Våre merker seksjon. Vi endrer tittelblokken til 'Våre varemerker', sett inn identifikatoren til 'our_brands', velg butikkvisningen av 'Alle butikkvisninger', og sett dette inn i innholdsdelen:

Våre  Merker
 
<>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Hvis du ser nøye ut, er det samme kode som vi har i HTML-koden vår for denne delen - vi har nettopp forandret relative bilder i bildene, mens du manuelt laster opp de nye bildene fra WYSIWYG-editoren. Lagre blokken, og begynn å opprette en annen blokk for påmeldingsdelen.

For denne andre blokken bruker vi blokktittelen "Over fotfoten". For identifikatoren bruker vi 'over_footer', og for innholdet vil vi legge inn denne koden:

Nå må vi lage koblingsblokken på en lignende måte. Vi lager en ny blokk med blokktittelen til "Footer Links", med identifikatoren som "footer_links", og sett denne koden inn der:

 
Kunde Brukerstøtte
 
 
FAQ
 
Betalingsalternativ
 
Booking Tips
 
infomation
 
 
 
 
Kunde Brukerstøtte
 
 
FAQ
 
Betalingsalternativ
 
Booking Tips
 
infomation
 
 
 
 
Kunde Brukerstøtte
 
 
FAQ
 
Betalingsalternativ
 
Booking Tips
 
infomation
 
 
 
 
Ta kontakt med info
 
Anwar ul Haq, California
 
Ring oss: (123) 398 5063
 
Ring oss: (123) 398 5063
 
E-post: abs @ tutsplus
 
 

Alle disse koblingene knytter ingen steder nå, men du kan senere endre dem. Bildelinkene genereres igjen dynamisk ved hjelp av opplastingsfunksjonen til WYSIWYG-editoren. Resten av koden er bare kopiert og limt inn fra HTML-koden.

Lagre denne blokken også, og sjekk hjemmesiden, men du vil fortsatt ikke se disse tre blokkene dukker opp. Dette skyldes at du må fortelle Magento eksplisitt hvor du skal vise disse nye blokkene, og det vi kan gjøre fra layoutseksjonen. For dette, gå til oppsett / local.xml fil, og legg til disse linjene, like før lukkingen av misligholde stikkord.

  footer_links   above_footer   våre merker   

Denne XML-koden er i utgangspunktet å fortelle Magento å legge til disse to nye blokkene i Magento-bunnteksten. Til slutt må vi koble disse blokkene fra phtml-filen til bunnteksten. For det vil vi opprette en ny footer.phtml-fil på dette stedet: mal / side / html / footer.phtml.

Legg til denne koden i dette footer.phtml fil: 

 
 
 getChildHtml ("our_brands")?> 
 
 
 
 
 
 
 getChildHtml ("above_footer")?> 
 
 
 
 
 
 getChildHtml ("footer_links_sm")?> getChildHtml ()?> 
 
 
 
 
 
 
 
getCopyright ()?>
 
 
 
 
 
 
 

Dette er igjen bare HTML-kode tatt, der alle seksjonskodene er erstattet med relevante lenker til Static Blocks. Og opphavsretten er erstattet med en dynamisk tagg for opphavsrett.

Sjekk hjemmesiden nå, og den skal nå vise disse nyopprettede statiske blokkene, og skal se slik ut:

Vår hjemmeside er nå fullført. Det eneste igjen er noen stilfiksering, og det gjør vi i neste artikkel.