Magento Theme Development Produktside, Del 1

Nå som vi har fullført hjemmesiden og kategorisiden, vil vi i denne opplæringen begynne å redigere den tredje viktigste siden på eCommerce-nettsiden: produktsiden. La oss først åpne produktsiden, og se hvordan den ser ut nå og hvordan vi vil se den.

Produktsiden i vår HTML-design ser slik ut:

Vår nåværende produktside ser slik ut:

For å begynne å redigere det, gjør vi det samme trinnet som vi har gjort dusinvis av ganger så langt, det vil si at mallhintene kan finne ut hvilke malfiler som er ansvarlige for å gjengi denne siden.

Som vi kan se, er siden en samling av over et dusin filer, men heldigvis behøver vi ikke redigere alle disse. Vi må bare redigere tre eller fire av disse filene, og for resten vil vi bare endre stilene for å få dem til å se ut som vårt design, uten å rote med phtml-filene.

Hvis du ser nøye ut, kommer den generelle strukturen til produktdelen fra \ template \ catalog \ product \ view.phtml filen. Jeg har pekt det ut gjennom en pil i bildet ovenfor. Denne filen gir den ytre strukturen til alle komponentene, og de indre delene kommer fra andre maler, men vi vil redigere denne ytre en først.

Vi kopierer denne view.phtml-filen til vårt nye tema, og begynner å redigere det. Nåværende kode for denne filen ser slik ut:

helper ( 'katalogen / output'); ?> 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 ($ _ produkt, 'default', false)?> getChildHtml ( 'product_type_availability'); ?> 
 getChildHtml ('alert_urls')?> getShortDescription ()):?>  productAttribute ($ _ product, nl2br ($ _ product-> getShortDescription ()), 'short_description')?>
 
  getChildHtml ( 'andre');?> isSable () && $ this-> hasOptions ()):?> getChildChildHtml ('container1', ', sant, sant)?>  
  getChildHtml ('product_type_data')?> getChildHtml ('extrahint')?> hasOptions ()):?>  isSable ()):?> getChildHtml ('addtocart')?> hjelper ('ønskeliste') -> isAllow () || $ _compareUrl = $ this-> hjelper ('catalog / product_compare') -> getAddUrl ($ _ produkt)):?> __ ('ELLER')?>   getChildHtml ('addto')?> getChildHtml ('deling')?> 
 getChildHtml ('extra_buttons')?> isSable ()):?>  getChildHtml ('addto')?> getChildHtml ('deling')?> 
  
 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')?>

Nå må vi sjekke ut vår HTML-kode, og vi legger all vår HTML-kode inn i denne view.phtml-filen, og deretter begynner å redigere den. Nåværende kode for detaljer.html-filen i HTML-designfilen vår er slik (jeg kopierer bare koden for produktdelen, unntatt topptekst, bunntekstseksjon, etc.):

Lincoln Corner Unit Products

Pris: 450.00^$450.00^$
SDF;, HKF

Proin lectus ipsum, gravida og mattis vulputate, tristique ut lectus. Sed et lorem nunc. Først og fremst er det en del av faucibus orci luctus og ultie ces posuere cubilia curae. Proin lectus ipsum, gravida ets mattis vulps utate, tristique ut lectus. Sed et lorem nunc ...
asddas

asddas

Antall:

BESKRIVELSE
ANMELDELSE
PRODUKT TAGS

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 Aenean eleifend laoreet congue. Proin lectus ipsum, gravida og mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibu um ante ipsum primitiva i faucibus orci luctus et ultimata posuere cubilia curae Aenean eleifend laoreet congue. 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 Aenean eleifend laoreet congue. 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 og mattis vulputate, tristique ut lectus. Sed et lorem nunc. Først og fremst i faucibus orci luctus og ultramoderne cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida og mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibu um ante ipsum primitiva i faucibus orci luctus et ultimata posuere cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida og mattis vulputate, tristique ut lectus. Sed et lorem nunc ...

1 stjerne 2 stjerner 3 stjerner 4 stjerner 5 stjerner

Kvalitet
Pris
Verdi

Navnet ditt *
Din epost *
Sammendrag av deg gjennomgang *

Navnet ditt *

Anmeldernavn
Dato: 01-01-2014
Kjæresten er dum og sitter, og er en avgjørende forfatter. Heltall en eros neque. I sapien er det ikke noe annet, men det er ikke noe som helst.

Legg til merkelapper :

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

Les 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

Jeg vet at det er mye kode, og kan skremme deg bort. Men ikke bekymre deg, for som du vil se når vi begynner å plassere de dynamiske kodene i den, begynner koden å smelte fort, og vi trenger ikke å bekymre deg for det meste av det.

Nå begynner vi å redigere denne HTML-koden ved å sette inn dynamiske koder fra vår faktiske view.phtml-fil.

Først av alt legger vi til disse linjene øverst, for å gjøre noen initialiseringer:

helper ( 'katalogen / output'); ?> getProduct (); ?>  getMessagesBlock () -> toHtml ()?>

Og så lukk produktvisningen div på slutten av filen (linje 314):

Neste vil vi pakke produktdetaljer div inne i et formelement, som det er i selve view.phtml-filen. Så vi legger til disse linjene inne i produkt detaljer div på linje 10:

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

På samme måte vil vi nå lukke dette skjema, og kopier også denne JavaScript fra view.phtml på linje 77:


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

I neste trinn, inne i faneboksen div (starter ved linje 129), fjern all eksisterende kode, og kopier følgende tabkode fra view.phtml (rundt 100 linjer med kode erstattet med disse få linjene). For å sørge for at fanen JavaScript fortsetter å fungere bra, legger vi til fanebladet Aktuelle klasser kategorien div, så den nye koden vil se slik ut:

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

Med alt som er gjort, nå setter vi inn getChildHtml ('related_products')?> tag inne de varme produktene div, etter at du har fjernet eksisterende kode, slik at den ser slik ut på linje 166:

 getChildHtml ('related_products')?>

Se hvordan rundt 150 kodelinjer erstattes med bare disse tre linjene? La oss lagre alt og se hvordan siden kommer fram så langt. Hvis du gjorde alt riktig, bør det se slik ut:

Det kan se alt forvirret, men stol på meg, vi kommer nærmere hva vi vil at siden skal se ut. I neste artikkel redigerer vi filene som er ansvarlige for gjengivelse av bildeseksjonen, relaterte produkter, etc., og vi vil til slutt gjøre noen stylingrettelser, og vår produktside vil være klar.

Til slutt, la meg gjenta at de store kodestykkene som vises ovenfor, kan skremme deg først, men når du begynner å erstatte koden med passende dynamiske koder, vil du snart innse at redigering av disse ikke er mye arbeid.

I neste artikkel fullfører vi resten av denne siden ved å redigere andre phtml-filer.

Kode