Accentsconagua

Magento Theme Development Productpagina, deel 1

Code
Share

Nu we de startpagina en de categoriepagina hebben voltooid, gaan we in deze tutorial de derde belangrijkste pagina van de eCommerce-website bewerken: de productpagina. Laten we eerst de productpagina openen en zien hoe het er nu uitziet en hoe we het willen laten lijken.

De productpagina in ons HTML-ontwerp ziet er als volgt uit:

Onze huidige productpagina ziet er als volgt uit:

Om het te bewerken, zullen we dezelfde stap doen als we tot nu toe tientallen keren hebben gedaan, d.w.z. de hints van de sjabloon inschakelen om erachter te komen welke sjabloonbestanden verantwoordelijk zijn voor het weergeven van deze pagina.


Zoals we kunnen zien, is de pagina een compilatie van meer dan een dozijn bestanden, maar gelukkig hoeven we deze niet allemaal te bewerken. We hoeven alleen maar drie of vier van deze bestanden te bewerken en voor de rest zullen we alleen de stijlen aanpassen om ze eruit te laten zien als ons ontwerp, zonder te knoeien met de phtml-bestanden.

Als u goed kijkt, komt de algemene structuur van de productsectie van het bestand \ template \ catalog \ product \ view.phtml. Ik heb dat via een pijl in de afbeelding hierboven aangegeven. Dit bestand biedt de buitenste structuur van alle componenten en de binnenste delen komen uit andere sjablonen, maar we zullen deze eerst bewerken.

We zullen dit view.phtml-bestand naar ons nieuwe thema kopiëren en beginnen met bewerken. De huidige code van dit bestand ziet er als volgt uit:

helper ( 'catalogus / output'); ?> getProduct (); ?>  
getMessagesBlock () -> toHtml ()?>
 
 
 
getOptions ()):?> enctype = "multipart / form-data"> getBlockHtml ('formkey')?> 
   
 
 
 
productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 
 getChildHtml ('media')?> 
 
 
 productAttribute ($ _ product, $ _product-> getName (), 'name')?> 
 
 getPriceHtml ($ _ product); ?> getChildHtml ('bundle_prices')?> getTierPriceHtml ()?> 
 
 getReviewsSummaryHtml ($ _ product, 'default', false)?> getChildHtml (product_type_availability); ?> 
 getChildHtml ('alert_urls')?> getShortDescription ()):?> 
 
productAttribute ($ _ product, nl2br ($ _ product-> getShortDescription ()), 'short_description')?>
 
  getChildHtml ( 'andere');?> isSaleable () && $ this-> hasOptions ()):?> getChildChildHtml ('container1', ", true, true)?>  
 
 getChildHtml ('product_type_data')?> getChildHtml ('extrahint')?> hasOptions ()):?> 
 isSaleable ()):?> getChildHtml ('addtocart')?> helper ('wishlist') -> isAllow () || $ _compareUrl = $ this-> helper ('catalog / product_compare') -> getAddUrl ($ _ product)):?> __ ('OF')?>   getChildHtml ('addto')?> getChildHtml ('delen')?> 
 getChildHtml ('extra_knoppen')?> isSaleable ()):?> 
 getChildHtml ('addto')?> getChildHtml ('delen')?> 
  
 getChildHtml ('related_products')?> 
 isSaleable () && $ this-> hasOptions ()):?> getChildChildHtml ('container2', ", true, true)?>  
  
 
 getChildGroup ('detailed_info', 'getChildHtml')):?> 
  $ Html):?> 
escapeHtml ($ this-> getChildData ($ alias, 'title'))?>
 
 
 
  
  
 getChildHtml ('upsell_products')?> getChildHtml ('product_additional_data')?>

Nu moeten we onze HTML-code bekijken en we zullen al onze HTML-code in dit view.phtml-bestand plaatsen en beginnen met bewerken. De huidige code van het details.html-bestand in ons HTML-ontwerpbestand is als volgt (ik kopieer alleen de code voor het productgedeelte met uitzondering van header-, footer-sectie, enz.):

 
 
 
 
 
 
     
    •  
    •  
    •  
    •  
    •  
 
 
 
 
Lincoln Corner Unit Products
 
 
Prijs: 450.00$450.00$
 
SDF,, HKF
 
 
 
Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrie ces posuere cubilia curae. Proin lectus ipsum, gravida etds mattis vulps utate, tristique ut lectus. Sed et lorem nunc ... 
 
 
 
asddas
 
  
 
 
 
 
asddas
 
  
 
 
 
 
 
Aantal  
 
  
 
 
 
 
 
 
 
 
 
     
  • OMSCHRIJVING
    •  
  • BEOORDELING
    •  
  • PRODUCT TAGS
    •  
 
 
 
 
Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibu um ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia curae ... 
 
Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibu um ante ipsum primis in faucibus orci luctus et ultri ces posuere cubilia curae Aenean eleifend laoreet congue. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc ... 
 
 
 
 
  
   1 ster 2 sterren 3 sterren 4 sterren 5 sterren 
   
 Kwaliteit      
 
 Prijs      
 
 Waarde      
  
 
 
 
   
 
   
 
   
 
 
 
   
 
  
 
 
 
 
 
 
  
Naam van beoordelaar
 
Datum: 01-01-2014
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Geheel getal een eros neque. In sapien est, malesuada non interdum id, cursus vel neque.
 
 
  
Naam van beoordelaar
 
Datum: 01-01-2014
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Geheel getal een eros neque. In sapien est, malesuada non interdum id, cursus vel neque.
 
 
 
 
 Tags toevoegen:   
 
 
 
 
 
 
heet producten
 
<>
 
     
  •  
     
     
     
     
      
     Lees verder 
     
    Iphone 5s Gold 32 Gb 2013
     
    $ 451.00
     
     
     
     
     
     
     
     
      
     Lees verder 
     
    Iphone 5s Gold 32 Gb 2013
     
    $ 451.00
     
     
     
     
     
     
     
     
      
     Lees verder 
     
    Iphone 5s Gold 32 Gb 2013
     
    $ 451.00
     
     
     
     
     
     
     
     
      
     Lees verder 
     
    Iphone 5s Gold 32 Gb 2013
     
    $ 451.00
     
     
     
     
     
     
    •  
  •  
     
     
     
    - % 20
     
    productnaam
     
    Iphone 5s Gold 32 Gb 2013
     
    $ 451.00
     
      
     
     
     
     
     
    productnaam
     
    Iphone 5s Gold 32 Gb 2013
     
    $ 451.00
     
      
     
     
     
     
     
    nieuwe
     
    productnaam
     
    Iphone 5s Gold 32 Gb 2013
     
    $ 451.00
     
      
     
     
     
     
    •  
  •  
     
     
     
    - % 20
     
    productnaam
     
    Iphone 5s Gold 32 Gb 2013
     
    $ 451.00
     
      
     
     
     
     
     
    productnaam
     
    Iphone 5s Gold 32 Gb 2013
     
    $ 451.00
     
      
     
     
     
     
     
    nieuwe
     
    productnaam
     
    Iphone 5s Gold 32 Gb 2013
     
    $ 451.00
     
      
     
     
     
     
    •

Ik weet dat dat veel code is en kan je misschien afschrikken. Maar maak je geen zorgen, want zoals je zult zien wanneer we beginnen met het plaatsen van de dynamische tags erin, smelt de code snel en hoeven we ons geen zorgen te maken over het meeste ervan.

Nu gaan we beginnen met het bewerken van deze HTML-code door dynamische tags in te voegen vanuit ons werkelijke view.phtml-bestand.

Allereerst voegen we deze regels bovenaan toe om wat initialisatie te doen:

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

En sluit vervolgens de productweergave div aan het einde van het bestand (regel 314):

Vervolgens verpakken we de productdetails div in een formulierelement, zoals in het daadwerkelijke bestand view.phtml. Dus we zullen deze regels toevoegen binnen de Productdetails div op regel 10:

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

Op dezelfde manier sluiten we dit nu het formulier, en kopieer ook dit JavaScript van view.phtml op regel 77:

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

In de volgende stap, binnen de tab-box div (beginnend bij regel 129), verwijder alle bestaande code en kopieer de volgende tabcode van view.phtml (ongeveer 100 regels code vervangen door deze paar regels). Om ervoor te zorgen dat het JavaScript-tabblad goed blijft werken, voegen we het huidige tabblad Tab-vak toe div, dus de nieuwe code ziet er als volgt uit:

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

Met dat alles gedaan, zullen we nu de getChildHtml ('related_products')?> tag in de hot-producten div, na het verwijderen van bestaande code, zodat het er zo uitziet op regel 166:

 getChildHtml ('related_products')?>

Zie je hoe ongeveer 150 regels code worden vervangen door alleen deze drie regels? Laten we alles opslaan en zien hoe de pagina tot nu toe komt. Als je alles goed hebt gedaan, zou het er ongeveer zo uit moeten zien:

Het ziet er misschien allemaal rommelig uit, maar geloof me, we komen dichterbij wat we willen dat de pagina eruit ziet. In het volgende artikel zullen we de bestanden bewerken die verantwoordelijk zijn voor het renderen van de afbeeldingensectie, gerelateerde producten, enz., En we zullen tenslotte een aantal stylingfixes uitvoeren, en onze productpagina zal klaar zijn.

Laat me ten slotte herhalen dat de grote stukjes code die hierboven worden weergegeven je in eerste instantie kunnen intimideren, maar zodra je de code gaat vervangen door de juiste dynamische tags, zul je snel merken dat het bewerken van deze code niet veel werk is.

In het volgende artikel zullen we de rest van deze pagina voltooien door andere phtml-bestanden te bewerken.

Code
×