Magento Theme Development Produktsida, Del 2

I den här artikeln i Magento Theme Development-serien kommer vi att slutföra produktsidan från var vi lämnade den i föregående artikel. Vi redigerar de phtml-filer som är ansvariga för att återge mediesektionen, relaterade produkter, etc..

Nu börjar vi lägga till den dynamiska taggen av bilder, pris, beskrivning etc. i produktdetalj-diven som vi började redigera i föregående artikel.

Vi börjar med att lägga till den dynamiska taggen av bilder. Om vi tittar på vår redigerade HTML, sträcker sig koden för media från rad 19 till 28. Vi ersätter allt detta med en enda kodrad:

getChildHtml ('media')?>

Som vi kan se från den faktiska view.phtml-filen hämtar den här raden hela koden för att visa bilderna.

Så ser den nya koden på rad 18 ut så här:

 getChildHtml ('media')?>

Nästa ersätter vi produktnamnet på rad 22 med den här dynamiska koden:

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

På rad 24 ersätter vi priskoden med följande:

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

Inom högerklassen på rad 29 lägger vi till koden för att visa översynen och produkttillgängligheten. Så kommer den nya koden på rad 29 att se ut så här:

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

Nästa ersätter vi den hårdkodade beskrivningen skrivet på rad 33 med den här dynamiska taggen:

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

Om vi tittar på den HTML-fil som vi redigerar är nästa sak vi ser i rullgardinsmenyn för val av produktalternativ. Vi ersätter den koden i divisionsinmatnings-diven med den här dynamiska koden:

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

Nu kommer denna kod inte automatiskt att generera alternativen för produkten, men kommer även att visa "lägg till i kundvagnen" -knappen och delningsalternativen. Så, vi kan även ta bort följande kod, som kommer efter .divisionsinmatad div:


  Antal:

Nu om vi tittar på den aktuella sidan är allt på plats och fungerar bra. Vi behöver bara ändra insidan av vissa element såsom bildområde, relaterade produkter, avsnitt etc. Och till sist behöver vi bara borsta upp CSS, och vår sida kommer att vara klar.

Låt oss börja redigera koden för bilderna utan ytterligare försening. Kom ihåg att vi ersatte alla bilder HTML med bara en rad kod: getChildHtml ('media')?>. Denna kodlinje visar koden från filmallen \ catalog \ product \ view \ media.phtml: Du kan också verifiera detta genom att aktivera malltipset och kolla från var koden för bildavsnittet kommer.

Nu när vi har bestämt filen som är ansvarig för att generera den här koden, låt oss kopiera den filen från standard rwd-temat till vårt nya tema och börja redigera det. Koden för media.phtml-filen ser så här ut:

getProduct (); $ _helper = $ this-> hjälpen ('katalog / output'); ?>    getGalleryImages () som $ _image):?> isGalleryImageVisible ($ _ image)):?>    
 
 getGalleryImages ())> 0):?>  __ ('Fler visningar')?>
  getGalleryImages () som $ _image):?> isGalleryImageVisible ($ _ image)):?>  escapeHtml ($ _ image-> getLabel ())?> "data-image-index ="">   
   
 
  getChildHtml ( 'efter'); ?>

Först och främst kopierar vi denna HTML-kod i vår bildsektion till en nykopierad media.phtml-fil:

Nu börjar vi ändra den här koden för att infoga den dynamiska koden på lämpliga platser genom att jämföra den med den aktuella media.phtml-filen.

Vi börjar med att lägga till dessa rader högst upp i filen:

getProduct (); $ _helper = $ this-> hjälpen ('katalog / output'); ?>

Vi ersätter div med förhandsgranskning av klass - liten med den här koden:

  getGalleryImages () som $ _image):?> isGalleryImageVisible ($ _ image)):?>    
 getGalleryImages ())> 0):?>   getGalleryImages () som $ _image):?> isGalleryImageVisible ($ _ image)):?>  escapeHtml ($ _ image-> getLabel ())?> "data-image-index ="">

På samma sätt ersätter vi div med klass thum-bild med den här koden:

Och i slutet av koden lägger vi till följande rad:

getChildHtml ( 'efter'); ?>

Så filens kod kommer att se ut så här i slutet:

getProduct (); $ _helper = $ this-> hjälpen ('katalog / output'); ?>    getGalleryImages () som $ _image):?> isGalleryImageVisible ($ _ image)):?>    
 getGalleryImages ())> 0):?>   getGalleryImages () som $ _image):?> isGalleryImageVisible ($ _ image)):?>  escapeHtml ($ _ image-> getLabel ())?> "data-image-index ="">   
   
 
  
 getChildHtml ( 'efter'); ?>

Nu är vi nästan färdiga med bilddelarna. I slutet kommer vi att fixa några CSS-problem, och det ser ganska nära vår HTML-design.

Nästa är att fixa den relaterade sektionen. Vi kan se genom att möjliggöra malltips om att denna del av sidan kommer från filen: mall \ catalog \ product \ list \ related.phtml.

Som du antagligen kan gissa, skulle nästa steg vara att kopiera den filen till vår nya temalmapp och börja sedan redigera den.

Vi skapar en ny fil och kopierar HTML-koden i den relaterade produktdelen från vårt HTML-tema. Här behåller vi bara en förekomst av produkten, eftersom vi slingar igenom den i vår phtml-fil. Koden vi ska kopiera kommer att vara så här:

 Varm Produkter
 <>
          Läs mer 
 Iphone 5s Gold 32 Gb 2013
 $ 451,00

Nu börjar vi göra det dynamiskt genom att placera dynamiska taggar i det samtidigt som det jämförs med den aktuella related.phtml-filen.

Vi lägger hela koden i detta om taggen:

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

Nästa lägger vi det här för loop precis efter raden div:

getItems () som $ _item):?>

Nästa börjar vi placera den dynamiska taggen av produktnamn, pris, beskrivning, webbadress etc. i produktdivan, som vi gjorde när du redigerade produkter på hemsidan.

Hela koden för den här filen efter redigering kommer att se ut så här:

getItems () -> getSize ()):?>  Relaterad Produkter
 <>
    getItems () som $ _item):?>       getProductUrl ()?> "Visa produkt 
 escapeHtml ($ _ item-> getName ())?>
  getPriceHtml ($ _ item, true, '-related')?>

Nu är vi nästan färdiga med phtml-filredigeringen för produktsidan. Vi måste bara fixa några CSS-problem, och vår sida kommer att vara klar. För tillfället ser sidan ut så här:

Vi är färdiga med det mesta. Nu behöver vi bara redigera CSS för att göra de senaste ändringarna på den här sidan, vilket vi kommer att göra i nästa artikel, som också kommer att vara den sista artikeln i serien. Tillsammans med CSS-ändringarna för den här sidan ska jag förklara hur du kan göra ändringar på de andra sidorna av temat själv med hjälp av de tekniker du har lärt dig i den här serien.

Koda