Magento Theme Development Produktsida, Del 1

Nu när vi har avslutat hemsidan och kategorisidan, börjar vi redigera den tredje viktigaste sidan av e-handelswebbsidan: produktsidan i den här handledningen. Låt oss först öppna produktsidan och se hur den ser ut nu och hur vi vill att den ska se ut.

Produktsidan i vår HTML-design ser så här ut:

Vår nuvarande produktsida ser så här ut:

För att börja redigera det gör vi samma steg som vi har gjort tiotals gånger hittills, det vill säga att malltipsen kan ta reda på vilka mallfiler som är ansvariga för att göra denna sida.

Som vi kan se är sidan en sammanställning av över ett dussin filer, men lyckligtvis behöver vi inte redigera alla dessa. Vi behöver bara redigera tre eller fyra av dessa filer, och i övrigt ändrar vi bara stilerna så att de ser ut som vår design, utan att röra med phtml-filerna.

Om du tittar noga kommer den övergripande strukturen för produktsektionen från filen \ template \ catalog \ product \ view.phtml. Jag har pekat ut det genom en pil i bilden ovan. Den här filen tillhandahåller den yttre strukturen för alla komponenter och sedan kommer de inre delarna från andra mallar, men vi redigerar det här yttre först.

Vi kopierar den här view.phtml-filen till vårt nya tema och börjar redigera det. Den nuvarande koden i den här filen ser så här ut:

hjälpare ( 'katalog / utgång'); ?> getProduct (); ?>  getMessagesBlock () -> toHtml ()?>
   getOptions ()):?> enctype = "multipart / form-data"> getBlockHtml ('formkey')?>    
   productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 
 getChildHtml ('media')?> 
   productAttribute ($ _ product, $ _product-> getName (), 'name')?> 
  getPriceHtml ($ _ produkt); ?> getChildHtml ('bundle_prices')?> getTierPriceHtml ()?> 
  getReviewsSummaryHtml ($ _ product, 'default', false)?> getChildHtml ( 'product_type_availability'); ?> 
 getChildHtml ('alert_urls')?> getShortDescription ()):>  productAttribute ($ _ product, nl2br ($ _ product-> getShortDescription ()), 'short_description')?>
 
  getChildHtml ( 'andra');> isSable () && $ this-> hasOptions ()):?> getChildChildHtml ('container1', ', true, true)?>  
  getChildHtml ('product_type_data')?> getChildHtml ('extrahint')?> hasOptions ()):?>  isSable ()):?> getChildHtml ('addtocart')?> hjälpar ('önskelista') -> isAllow () || $ _compareUrl = $ this-> hjälper ('catalog / product_compare') -> getAddUrl ($ _ produkt)):?> __ ('ELLER')?>   getChildHtml ('addto')?> getChildHtml ("sharing")?> 
 getChildHtml ('extra_buttons')?> isSable ()):?>  getChildHtml ('addto')?> getChildHtml ("sharing")?> 
  
 getChildHtml ('related_products')?> 
 isSable () && $ this-> hasOptions ()):?> getChildChildHtml ('container2', ', true, true)?>  
  
  getChildGroup ('detailed_info', 'getChildHtml')):?>   $ Html):?> escapeHtml ($ this-> getChildData ($ alias, 'title'))?>
  
 
  
  
 getChildHtml ('upsell_products')?> getChildHtml ('product_additional_data')?>

Nu måste vi kolla in vår HTML-kod och vi lägger all vår HTML-kod i den här view.phtml-filen och börjar sedan redigera den. Nuvarande kod för detaljer.html-filen i vår HTML-designfil är så här (jag kopierar bara koden för produktdelen exklusive rubrik, sidfot, etc.):

Lincoln Corner Unit Products

Pris : 450,00^$450,00^$
SDF;, HKF

Proin lectus ipsum, gravida och mattis vulputate, tristique ut lectus. Sed et lorem nunc. Förstärkningar är en viktig del i faucibus orci luctus och ultrar ces posuere cubilia curae. Proin lectus ipsum, gravida etds mattis vulps utate, tristique ut lectus. Sed et lorem nunc ...
asddas

asddas

Antal:

BESKRIVNING
RECENSION
PRODUKT TAGS

Proin lectus ipsum, gravida och mattis vulputate, tristique ut lectus. Sed et lorem nunc. Förstärkande ante ipsum primitiv i faucibus orci luctus och ultimata posuere cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida och mattis vulputate, tristique ut lectus. Sed et lorem nunc. Förstärkningen är en viktig del i faucibus orci luctus och ultramoderna cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida och mattis vulputate, tristique ut lectus. Sed et lorem nunc. Förstärkande ante ipsum primitiv i faucibus orci luctus och ultimata posuere cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida och mattis vulputate, tristique ut lectus. Sed et lorem nunc. Förstklassigt och centralt i faucibus orci luctus och ultimata posuere cubilia curae ...
Proin lectus ipsum, gravida och mattis vulputate, tristique ut lectus. Sed et lorem nunc. Förstärkande ante ipsum primitiv i faucibus orci luctus och ultimata posuere cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida och mattis vulputate, tristique ut lectus. Sed et lorem nunc. Förstärkningen är en viktig del i faucibus orci luctus och ultramoderna cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida och mattis vulputate, tristique ut lectus. Sed et lorem nunc ...

1 stjärna 2 stjärnor 3 stjärnor 4 stjärnor 5 stjärnor

Kvalitet
Pris
Värde

Ditt namn *
Din email *
Sammanfattning av din recension *

Ditt namn *

Anmälarens namn
Datum: 01-01-2014
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal en eros neque. I sapien är man inte en ung man, men är välvårdad.

Lägg till taggar :

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

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

- % 20

Iphone 5s Gold 32 Gb 2013
$ 451,00

- % 20

Iphone 5s Gold 32 Gb 2013
$ 451,00

Jag vet att det är mycket kod och kan skrämma dig borta. Men oroa dig inte, för som du ser när vi börjar placera de dynamiska taggarna i den, börjar koden smälta snabbt och vi behöver inte oroa sig för det mesta.

Nu börjar vi redigera denna HTML-kod genom att infoga dynamiska taggar från vår faktiska view.phtml-fil.

Först och främst lägger vi till de här raderna överst, för att göra några initialiseringar:

hjälpare ( 'katalog / utgång'); ?> getProduct (); ?>  getMessagesBlock () -> toHtml ()?>

Och stäng sedan produktvyn div i slutet av filen (rad 314):

Nästa lägger vi om produktinformationen div inuti ett formelement, som det är i den faktiska view.phtml-filen. Så vi lägger till dessa rader inuti Produktinformation div på rad 10:

getOptions ()):?> enctype = "multipart / form-data"> getBlockHtml ('formkey')?>

På samma sätt stänger vi nu detta form, och kopiera även JavaScript från view.phtml på rad 77:


 isSable () && $ this-> hasOptions ()):?> getChildChildHtml ('container2', ', true, true)?>

I nästa steg, inuti fliken div (börjar vid rad 129), ta bort all befintlig kod och kopiera följande flikkod från view.phtml (cirka 100 streckkod ersatt med dessa få rader). För att se till att fliken JavaScript fortsätter fungera bra, lägger vi till fliken Aktuell klassificering flik div, så kommer den nya koden att se ut så här:

 getChildGroup ('detailed_info', 'getChildHtml')):?>   $ Html):?> escapeHtml ($ this-> getChildData ($ alias, 'title'))?>

Med allt som gjort, nu ska vi infoga getChildHtml ('related_products')?> tagga inuti heta produkterna div, efter att du har tagit bort befintlig kod så att den ser ut så här på rad 166:

 getChildHtml ('related_products')?>

Se hur 150 koden ersätts med bara dessa tre rader? Låt oss spara allt och se hur sidan kommer fram så långt. Om du gjorde allt rätt borde det se ut så här:

Det kanske ser ut som ett ord, men lita på mig, vi närmar oss vad vi vill att sidan ska se ut. I nästa artikel redigerar vi filerna som är ansvariga för att göra bilderna, relaterade produkter etc., och vi gör slutligen några stylingfixar och vår produktsida är klar.

I slutändan, låt mig upprepa att de stora bitarna av kod som visas ovan kan skrämma dig först, men när du börjar byta koden med lämpliga dynamiska taggar kommer du snart inse att redigering av dessa inte är mycket arbete.

I nästa artikel slutar vi resten av den här sidan genom att redigera andra phtml-filer.

Koda