Développement de thèmes Magento Page de produit, partie 2

Dans cet article de la série Développement de thèmes Magento, nous allons finaliser la page du produit à partir de celle où nous l'avions laissée dans l'article précédent. Nous allons éditer les fichiers phtml responsables du rendu de la section média, de la section produits connexes, etc..

Maintenant, commençons à ajouter la balise dynamique des images, prix, description, etc., à l'intérieur de la div de détail de produit que nous avons commencé à modifier dans l'article précédent..

Nous allons commencer par ajouter la balise dynamique des images. Si nous regardons notre code HTML modifié, le code pour les médias s'étend des lignes 19 à 28. Nous allons remplacer tout cela par une seule ligne de code:

getChildHtml ('media')?>

Comme nous pouvons le voir dans le fichier view.phtml, cette ligne récupère tout le code permettant d'afficher les images..

Ainsi, le nouveau code de la ligne 18 ressemblera à ceci:

 getChildHtml ('media')?>

Ensuite, nous remplacerons le nom du produit à la ligne 22 par ce code dynamique:

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

Sur la ligne 24, nous allons remplacer le code de prix par ceci:

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

À la ligne 29 de la classe Pull-Right, nous ajouterons le code permettant d'afficher l'examen et la disponibilité du produit. Ainsi, le nouveau code de la ligne 29 ressemblera à ceci:

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

Ensuite, nous allons remplacer la description codée en dur écrite sur la ligne 33 par cette balise dynamique:

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

Si nous examinons le fichier HTML que nous sommes en train d’éditer, nous verrons ensuite les listes déroulantes pour la sélection des options de produits. Nous allons remplacer ce code à l'intérieur de la taille-entrée div par ce code dynamique:

getChildHtml ('autre');?> isSaleable () && $ this-> hasOptions ()):?> getChildChildHtml ('conteneur1', ", vrai, vrai)?>

Désormais, ce code ne générera pas automatiquement les options du produit, mais affichera également le bouton "Ajouter au panier" et les options de partage. Donc, nous pouvons également supprimer le code suivant, qui vient après .taille-entrée div:


  Qté:

Maintenant, si nous regardons la page actuelle, tout est en place et fonctionne bien. Nous avons juste besoin de modifier le code interne de certains éléments tels que la zone des images, la section des produits connexes, etc. Enfin, nous avons juste besoin de rafraîchir le CSS, et notre page sera prête.

Sans plus tarder, commençons à éditer le code de la section images. N'oubliez pas que nous avons remplacé toutes les images HTML par une seule ligne de code: getChildHtml ('media')?>. Cette ligne de code affiche ici le code du fichier template \ catalog \ product \ view \ media.phtml: Vous pouvez également le vérifier en activant les indicateurs de modèle et en vérifiant d'où provient le code de la section images.

Maintenant que nous avons déterminé le fichier responsable de la génération de ce code, copions ce fichier du thème par défaut rwd dans notre nouveau thème et commençons à le modifier. Le code du fichier media.phtml ressemble à ceci:

getProduct (); $ _helper = $ this-> helper ('catalogue / sortie'); ?>    getGalleryImages () en tant que $ _image):?> isGalleryImageVisible ($ _image)):?>    
 
 getGalleryImages ())> 0):?>  __ ('Plus de vues')?>
  getGalleryImages () en tant que $ _image):?> isGalleryImageVisible ($ _image)):?>  EscapeHtml ($ _ image-> getLabel ())?> "data-image-index ="">   
   
 
  getChildHtml ('après'); ?>

Tout d'abord, nous allons copier ce code HTML de notre section images dans un fichier media.phtml récemment copié:

Maintenant, nous allons commencer à modifier ce code pour insérer le code dynamique aux endroits appropriés en le comparant avec le fichier media.phtml.

Nous allons commencer par ajouter ces lignes en haut du fichier:

getProduct (); $ _helper = $ this-> helper ('catalogue / sortie'); ?>

Nous allons remplacer la div par la classe preview-small par ce code:

  getGalleryImages () en tant que $ _image):?> isGalleryImageVisible ($ _image)):?>    
 getGalleryImages ())> 0):?>   getGalleryImages () en tant que $ _image):?> isGalleryImageVisible ($ _image)):?>  EscapeHtml ($ _ image-> getLabel ())?> "data-image-index ="">

De même, nous allons remplacer la div par la classe thum-image par ce code:

Et à la fin du code, nous ajouterons cette ligne:

getChildHtml ('après'); ?>

Le code du fichier ressemblera à ceci à la fin:

getProduct (); $ _helper = $ this-> helper ('catalogue / sortie'); ?>    getGalleryImages () en tant que $ _image):?> isGalleryImageVisible ($ _image)):?>    
 getGalleryImages ())> 0):?>   getGalleryImages () en tant que $ _image):?> isGalleryImageVisible ($ _image)):?>  EscapeHtml ($ _ image-> getLabel ())?> "data-image-index ="">   
   
 
  
 getChildHtml ('après'); ?>

Nous en avons presque terminé avec la partie images. À la fin, nous réglerons certains problèmes de CSS, ce qui ressemblera beaucoup à notre conception HTML..

Suivant est la réparation de la section liée. En activant les indications de modèle, nous pouvons voir que cette partie de la page provient du fichier: template \ catalog \ product \ list \ related.phtml.

Comme vous pouvez probablement le deviner, l'étape suivante consiste à copier ce fichier dans notre nouveau dossier de thème, puis à commencer à le modifier..

Nous allons créer un nouveau fichier et copier le code HTML de la section produit correspondante de notre thème HTML. Ici, nous ne garderons qu'une seule instance du produit, car nous allons la parcourir dans notre fichier phtml. Le code que nous copierons sera le suivant:

 Chaud Des produits
 <>
          Lire la suite 
 Iphone 5s Or 32 Gb 2013
 451,00 $

Nous allons maintenant commencer à le rendre dynamique en y insérant des balises dynamiques tout en le comparant avec le fichier connexe réel.phtml..

Nous allons mettre le code entier dans cette balise if:

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

Ensuite, nous placerons cette boucle juste après la ligne div:

getItems () en tant que $ _item):?>

Ensuite, nous allons commencer à placer la balise dynamique du nom du produit, du prix, de la description, de l’URL, etc., dans la division du produit, comme nous l’avions fait lors de la modification des produits sur la page d’accueil..

Le code complet de ce fichier après édition ressemblera à ceci:

getItems () -> getSize ()):?>  en relation Des produits
 <>
    getItems () en tant que $ _item):?>       getProductUrl ()?> "> Voir le produit 
 EscapeHtml ($ _ item-> getName ())?>
  getPriceHtml ($ _ item, true, '-related')?>

Nous en avons presque terminé avec l'édition de fichier phtml pour la page du produit. Nous devons juste résoudre certains problèmes de CSS, et notre page sera prête. Actuellement, la page ressemble à ceci:

Nous en avons terminé avec la plupart. Il ne nous reste plus qu'à modifier le CSS pour apporter les dernières modifications à cette page, ce que nous ferons dans le prochain article, qui sera également le dernier article de la série. En plus des modifications CSS de cette page, je vais expliquer comment modifier vous-même les autres pages du thème en utilisant les techniques que vous avez apprises dans cette série..

Code