Accentsconagua

Magento Theme Development Productpagina, deel 2

Code
Share

In dit artikel van de Magento Theme Development-serie finaliseren we de productpagina van waar we het in het vorige artikel hebben achtergelaten. We zullen de phtml-bestanden bewerken die verantwoordelijk zijn voor het renderen van de sectie media, gerelateerde producten, enz.

Laten we beginnen met het toevoegen van de dynamische tag van afbeeldingen, prijs, beschrijving, enz., In de product-detail div die we in het vorige artikel begonnen te bewerken..

We beginnen met het toevoegen van de dynamische tag van afbeeldingen. Als we naar onze bewerkte HTML kijken, strekt de code voor media zich uit van regel 19 tot 28. We zullen dit allemaal vervangen door een enkele regel code:

getChildHtml ('media')?>

Zoals we kunnen zien aan het echte view.phtml-bestand, haalt deze ene regel alle code op voor het tonen van de afbeeldingen.

Dus de nieuwe code op regel 18 ziet er als volgt uit:

 getChildHtml ('media')?>

Vervolgens vervangen we de productnaam op regel 22 met deze dynamische code:

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

Op regel 24 vervangen we de prijscode hiermee:

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

Binnen de klasse voor pull-right op regel 29 voegen we de code toe voor het weergeven van de beoordeling en beschikbaarheid van het product. Dus de nieuwe code op regel 29 ziet er als volgt uit:

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

Vervolgens vervangen we de hard-coded beschrijving geschreven op regel 33 met deze dynamische tag:

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

Als we het HTML-bestand bekijken dat we aan het bewerken zijn, zien we nu de vervolgkeuzelijsten voor de selectie van productopties. We zullen die code in de divode-invoer-div vervangen door deze dynamische code:

getChildHtml ( 'andere');?> isSaleable () && $ this-> hasOptions ()):?> getChildChildHtml ('container1', ", true, true)?>

Deze code genereert niet automatisch de opties voor het product, maar geeft ook de knop 'toevoegen aan winkelwagentje' en opties voor delen weer. We kunnen dus ook de volgende code verwijderen die daarna komt .size-input div:

 
 
Aantal

Als we nu naar de huidige pagina kijken, is alles op zijn plaats en werkt het prima. We hoeven alleen de interne code van sommige elementen, zoals afbeeldingengebied, gerelateerde producten sectie, enz. Te wijzigen. En tot slot moeten we gewoon de CSS oppoetsen, en onze pagina zal klaar zijn.

Zonder verdere vertraging beginnen we met het bewerken van de code voor de afbeeldingensectie. Vergeet niet dat we alle HTML-afbeeldingen hebben vervangen door slechts één regel code: getChildHtml ('media')?>. Deze regel code geeft hier de code weer uit de bestandssjabloon \ catalogus \ product \ view \ media.phtml: u kunt dit ook verifiëren door de sjabloontoetsen in te schakelen en te controleren vanaf waar de code voor de afbeeldingensectie komt.

Nu we het bestand hebben bepaald dat verantwoordelijk is voor het genereren van deze code, laten we dat bestand van het standaard RWD-thema naar ons nieuwe thema kopiëren en beginnen met bewerken. De code voor het bestand media.phtml ziet er als volgt uit:

getProduct (); $ _helper = $ this-> helper ('catalogus / uitvoer'); ?> 
 
 <?php echo $this->escapeHtml ($ this-> getImageLabel ())?>  getGalleryImages () als $ _image):?> isGalleryImageVisible ($ _ image)):?>    
 
 getGalleryImages ())> 0):?> 
 
__ ('Meer aanzichten')?>
 
     getGalleryImages () als $ _image):?> isGalleryImageVisible ($ _ image)):?> 
  •  escapeHtml ($ _ image-> getLabel ())?> "data-image-index =""> <?php echo $this->escapeHtml ($ _ image-> getLabel ())?>   
    •    
 
  getChildHtml ( 'na'); ?>

Allereerst kopiëren we deze HTML-code van onze afbeeldingensectie naar een nieuw gekopieerd media.phtml-bestand:

 
 
 
     
    •  
    •  
    •  
    •  
    •

Nu gaan we deze code aanpassen om de dynamische code op de juiste plaatsen in te voegen door deze te vergelijken met het daadwerkelijke bestand media.phtml.

We beginnen met het toevoegen van deze regels bovenaan het bestand:

getProduct (); $ _helper = $ this-> helper ('catalogus / uitvoer'); ?>

We zullen de div vervangen door class preview-small met deze code:

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

Op dezelfde manier vervangen we de div door klasse thum-image met deze code:

En aan het einde van de code voegen we deze regel toe:

getChildHtml ( 'na'); ?>

Dus de code van het bestand ziet er aan het einde als volgt uit:

getProduct (); $ _helper = $ this-> helper ('catalogus / uitvoer'); ?> 
 
 <?php echo $this->escapeHtml ($ this-> getImageLabel ())?>  getGalleryImages () als $ _image):?> isGalleryImageVisible ($ _ image)):?>    
 getGalleryImages ())> 0):?> 
 
     getGalleryImages () als $ _image):?> isGalleryImageVisible ($ _ image)):?> 
  •  escapeHtml ($ _ image-> getLabel ())?> "data-image-index =""> <?php echo $this->escapeHtml ($ _ image-> getLabel ())?>   
    •    
 
  
 getChildHtml ( 'na'); ?>

Nu zijn we bijna klaar met het gedeelte met afbeeldingen. Aan het einde zullen we een aantal CSS-problemen oplossen, en het zal vrij dicht in de buurt komen van ons HTML-ontwerp.

Vervolgens wordt het gerelateerde gedeelte gefixeerd. We kunnen zien door sjabloontoetsen in te schakelen dat dit gedeelte van de pagina afkomstig is van het bestand: template \ catalog \ product \ list \ related.phtml.

Zoals je waarschijnlijk wel kunt raden, zou de volgende stap zijn om dat bestand naar onze nieuwe themamap te kopiëren en het vervolgens te bewerken.

We maken een nieuw bestand en kopiëren de HTML-code van de gerelateerde productsectie uit ons HTML-thema. Hier zullen we slechts één instantie van het product behouden, omdat we het in ons phtml-bestand doorlopen. De code die we zullen kopiëren, is deze:

 
heet producten
 
<>
 
     
  •  
     
     
     
     
      
     Lees verder 
     
    Iphone 5s Gold 32 Gb 2013
     
    $ 451.00
     
     
     
     
    •

Nu gaan we het dynamisch maken door er dynamische tags in te plaatsen, terwijl we het vergelijken met het eigenlijke related.phtml-bestand.

We plaatsen de volledige code als tag:

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

Vervolgens plaatsen we deze voor lus direct na de rij div:

getItems () als $ _item):?>

Vervolgens zullen we beginnen met het plaatsen van de dynamische tag van productnaam, prijs, beschrijving, url, etc. in het product-onderdeel, zoals we deden tijdens het bewerken van producten op de startpagina.

De volledige code voor dit bestand na bewerking ziet er als volgt uit:

getItems () -> getSize ()):?> 
 
Verwant producten
 
<>
 
     
  •  
     getItems () als $ _item):?> 
     
     
     
     <?php echo $this->escapeHtml ($ _ item-> getName ())?>  
     getProductUrl ()?> "> Bekijk het product 
     
    escapeHtml ($ _ item-> getName ())?>
     
     getPriceHtml ($ _ item, true, '-related')?> 
     
     
     
     
      
     
    •

Nu zijn we bijna klaar met het bewerken van phtml-bestanden voor de productpagina. We moeten alleen wat CSS-problemen oplossen en onze pagina is klaar. Momenteel ziet de pagina er als volgt uit:

We zijn klaar met het meeste. Nu hoeven we alleen de CSS te bewerken om de laatste wijzigingen op deze pagina aan te brengen, wat we in het volgende artikel zullen doen, wat ook het laatste artikel van de serie zal zijn. Samen met de CSS-wijzigingen voor deze pagina zal ik uitleggen hoe je zelf wijzigingen kunt aanbrengen in de andere pagina's van het thema door de technieken te gebruiken die je in deze serie hebt geleerd.

Code
×