Accentsconagua

Magento Theme Development Produktside, Del 2

Kode
Share

I denne artikkelen i Magento Theme Development-serien avsluttes produktsiden fra hvor vi forlot den i forrige artikkel. Vi redigerer phtml-filene som er ansvarlige for gjengivelse av medieseksjonen, relaterte produkter, og så videre.

Nå, la oss begynne å legge til den dynamiske taggen av bilder, pris, beskrivelse, etc., inne i produktdetalj-diven som vi begynte å redigere i forrige artikkel.

Vi starter med å legge til den dynamiske taggen av bilder. Hvis vi ser på vår redigert HTML, strekker koden for media fra linjene 19 til 28. Vi erstatter alt dette med en enkelt linje med kode:

getChildHtml ('media')?>

Som vi kan se fra den faktiske view.phtml-filen, henter denne en linjen all koden for å vise bildene.

Så den nye koden på linje 18 vil se slik ut:

 getChildHtml ('media')?>

Neste erstatter vi produktnavnet på linje 22 med denne dynamiske koden:

productAttribute ($ _ product, $ _product-> getName (), 'name')?>

På linje 24 erstatter vi priskoden med dette:

 getPriceHtml ($ _ produkt); ?> getChildHtml ('bundle_prices')?> getTierPriceHtml ()?>

Inne i pull-right-klassen på linje 29 legger vi til koden for å vise gjennomgang og produkttilgjengelighet. Så den nye koden på linje 29 vil se slik ut:

 getReviewsSummaryHtml ($ _ produkt, 'default', false)?> getChildHtml ( 'product_type_availability'); ?>

Neste erstatter vi den hardkodede beskrivelsen skrevet på linje 33 med denne dynamiske taggen:

productAttribute ($ _ product, nl2br ($ _ product-> getShortDescription ()), 'short_description')?>

Hvis vi ser på HTML-filen som vi redigerer, er det neste vi ser er rullegardinene for valg av produktvalg. Vi erstatter denne koden inne i divisjonsinngangs-diven med denne dynamiske koden:

getChildHtml ( 'andre');?> isSable () && $ this-> hasOptions ()):?> getChildChildHtml ('container1', ', sant, sant)?>

Nå genererer denne koden ikke automatisk alternativene for produktet, men vil også vise knappen "legg til i handlekurven" og delingsalternativer. Så, vi kan også slette følgende kode, som kommer etter .størrelsesinngang div:

 
 
Antall:

Nå ser vi på den nåværende siden, alt er på plass og fungerer fint. Vi trenger bare å endre innvendige koden til noen elementer som bilder område, relaterte produkter seksjon, etc. Og til slutt trenger vi bare å børste opp CSS, og vår side vil være klar.

Uten ytterligere forsinkelser, la oss begynne å redigere koden for bildeseksjonen. Husk at vi erstattet alle bildene HTML med bare én linje med kode: getChildHtml ('media')?>. Denne linjen med kode viser koden fra filmalen \ catalog \ product \ view \ media.phtml: Du kan også bekrefte dette ved å aktivere mallhintene og sjekke hvor koden for bildeseksjonen kommer.

Nå som vi har bestemt filen som er ansvarlig for å generere denne koden, la oss kopiere den filen fra standard rwd-temaet til vårt nye tema, og begynn å redigere det. Koden for media.phtml-filen ser slik ut:

getProduct (); $ _helper = $ this-> hjelper ('katalog / utgang'); ?> 
 
 <?php echo $this->escapeHtml ($ this-> getImageLabel ())?>  getGalleryImages () som $ _image):?> isGalleryImageVisible ($ _ image)):?>    
 
 getGalleryImages ())> 0):?> 
 
__ ('Flere visninger')?>
 
     getGalleryImages () som $ _image):?> isGalleryImageVisible ($ _ image)):?> 
  •  escapeHtml ($ _ image-> getLabel ())?> "data-image-index =""> <?php echo $this->escapeHtml ($ _ image-> getLabel ())?>   
    •    
 
  getChildHtml ( 'etter'); ?>

Først av alt kopierer vi denne HTML-koden til bildeseksjonen til en nylig kopiert media.phtml-fil:

 
 
 
     
    •  
    •  
    •  
    •  
    •

Nå begynner vi å endre denne koden for å sette den dynamiske koden på de aktuelle stedene ved å sammenligne den med den aktuelle media.phtml-filen.

Vi starter med å legge til disse linjene øverst i filen:

getProduct (); $ _helper = $ this-> hjelper ('katalog / utgang'); ?>

Vi erstatter div med forhåndsvisning av klasse - liten med denne koden:

 <?php echo $this->escapeHtml ($ this-> getImageLabel ())?>  getGalleryImages () som $ _image):?> isGalleryImageVisible ($ _ image)):?>    
 getGalleryImages ())> 0):?> 
 
     getGalleryImages () som $ _image):?> isGalleryImageVisible ($ _ image)):?> 
  •  escapeHtml ($ _ image-> getLabel ())?> "data-image-index =""> <?php echo $this->escapeHtml ($ _ image-> getLabel ())?>   
    •

På samme måte erstatter vi div med klassens thum-bilde med denne koden:

Og i slutten av koden legger vi til denne linjen:

getChildHtml ( 'etter'); ?>

Så filens kode vil se slik ut på slutten:

getProduct (); $ _helper = $ this-> hjelper ('katalog / utgang'); ?> 
 
 <?php echo $this->escapeHtml ($ this-> getImageLabel ())?>  getGalleryImages () som $ _image):?> isGalleryImageVisible ($ _ image)):?>    
 getGalleryImages ())> 0):?> 
 
     getGalleryImages () som $ _image):?> isGalleryImageVisible ($ _ image)):?> 
  •  escapeHtml ($ _ image-> getLabel ())?> "data-image-index =""> <?php echo $this->escapeHtml ($ _ image-> getLabel ())?>   
    •    
 
  
 getChildHtml ( 'etter'); ?>

Nå er vi nesten ferdige med bildedelen. På slutten vil vi fikse noen CSS-problemer, og det ser ganske nær vår HTML-design.

Neste er å fikse den relaterte delen. Vi kan se ved å aktivere malhint om at denne delen av siden kommer fra filen: mal \ catalog \ product \ list \ related.phtml.

Som du sikkert kan gjette, ville neste skritt være å kopiere den filen til vår nye temamappe, og deretter begynne å redigere den.

Vi lager en ny fil, og kopierer HTML-koden til den relaterte produktdelen fra vårt HTML-tema. Her vil vi bare holde en forekomst av produktet, siden vi slår den gjennom i vår phtml-fil. Koden vi kopierer vil være dette:

 
Varmt Produkter
 
<>
 
     
  •  
     
     
     
     
      
     Les mer 
     
    Iphone 5s Gold 32 Gb 2013
     
    $ 451,00
     
     
     
     
    •

Nå begynner vi å gjøre det dynamisk ved å sette dynamiske koder inn i det mens du sammenligner det med den faktiske related.phtml-filen.

Vi legger hele koden i dette hvis tag:

getItems () -> getSize ()):?>

Deretter plasserer vi dette for løkke rett etter rad div:

getItems () som $ _item):?>

Deretter begynner vi å plassere den dynamiske taggen av produktnavn, pris, beskrivelse, URL, etc., i produkt div, som vi gjorde mens du redigerte produkter på hjemmesiden.

Hele koden for denne filen etter redigering vil se slik ut:

getItems () -> getSize ()):?> 
 
I slekt Produkter
 
<>
 
     
  •  
     getItems () som $ _item):?> 
     
     
     
     <?php echo $this->escapeHtml ($ _ item-> getName ())?>  
     getProductUrl ()?> "Vis produkt 
     
    escapeHtml ($ _ item-> getName ())?>
     
     getPriceHtml ($ _ item, true, '-relatert')?> 
     
     
     
     
      
     
    •

Nå er vi nesten ferdig med phtml-filredigering for produktsiden. Vi må bare fikse noen CSS-problemer, og vår side vil være klar. For øyeblikket ser siden ut slik:

Vi er ferdig med det meste. Nå trenger vi bare å redigere CSS for å gjøre de siste endringene på denne siden, som vi vil gjøre i neste artikkel, som også vil være den siste artikkelen i serien. Sammen med CSS endringene for denne siden, forklarer jeg hvordan du kan gjøre endringer i de andre sidene av temaet selv ved å bruke teknikkene du har lært i denne serien.

Kode
×