Maintenant que nous avons terminé la page d'accueil et la page de catégorie, nous allons dans ce tutoriel commencer à modifier la troisième page la plus importante du site Web de commerce électronique: la page du produit. Commençons par ouvrir la page du produit pour voir à quoi il ressemble et comment nous voulons qu'il soit..

La page du produit dans notre conception HTML ressemble à ceci:

Notre page de produit actuelle ressemble à ceci:

Pour commencer à l’éditer, nous ferons la même chose que nous l’avons déjà fait des dizaines de fois, c’est-à-dire en permettant aux indicateurs de modèle de déterminer quels fichiers de modèle sont responsables du rendu de cette page..

Comme nous pouvons le constater, la page est une compilation de plus d'une douzaine de fichiers, mais heureusement, nous n'avons pas à les éditer tous. Nous devrons simplement éditer trois ou quatre de ces fichiers, et pour le reste, nous modifierons simplement les styles pour qu'ils ressemblent à notre conception, sans jouer avec les fichiers phtml.

Si vous regardez de plus près, la structure générale de la section produit provient du fichier \ template \ catalog \ product \ view.phtml. Je l'ai indiqué par une flèche dans l'image ci-dessus. Ce fichier fournit la structure externe de tous les composants, puis les pièces internes proviennent d'autres modèles, mais nous allons d'abord modifier celui-ci..

Nous allons copier ce fichier view.phtml dans notre nouveau thème et commencer à le modifier. Le code actuel de ce fichier ressemble à ceci:

assistant ('catalogue / sortie'); ?> 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 ('autre');?> isSaleable () && $ this-> hasOptions ()):?> getChildChildHtml ('conteneur1', ", vrai, vrai)?>  
 
 getChildHtml ('product_type_data')?> getChildHtml ('extrahint')?> hasOptions ()):?> 
 isSaleable ()):?> getChildHtml ('addtocart')?> helper ('wishlist') -> isAllow () || $ _compareUrl = $ this-> helper ('catalogue / product_compare') -> getAddUrl ($ _ product)):?> __ ('OU')?>   getChildHtml ('addto')?> getChildHtml ('partage')?> 
 getChildHtml ('extra_buttons')?> isSaleable ()):?> 
 getChildHtml ('addto')?> getChildHtml ('partage')?> 
  
 getChildHtml ('related_products')?> 
 isSaleable () && $ this-> hasOptions ()):?> getChildChildHtml ('conteneur2', ", vrai, vrai)?>  
  
 
 getChildGroup ('detailed_info', 'getChildHtml')):?> 
  $ html):?> 
escapeHtml ($ this-> getChildData ($ alias, 'title'))?>
 
 
 
  
  
 getChildHtml ('upsell_products')?> getChildHtml ('product_additional_data')?> 

Nous devons maintenant consulter notre code HTML et nous allons tout mettre dans ce fichier view.phtml, puis commencer à le modifier. Le code actuel du fichier details.html dans notre fichier de conception HTML est le suivant (je ne copie que le code de la partie produit, à l'exclusion de l'en-tête, du pied de page, etc.):

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Lincoln Corner Unit Produits
 
 
Prix ​​: 450.00$450.00$
 
sdf;, hkf
 
 
 
Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis dans le faucibus orci luctus et ultrie ces posuere cubilia curae. À propos des lectures, de la gravure et de la lecture, de la lecture, de la lecture et de la lecture. Sed et lorem nunc… 
 
 
 
asddas
 
  Sélectionnez une taille Noir Aubergine  
 
 
 
 
asddas
 
  Choisissez un matériau X-Small Petit  
 
 
 
 
 
Qté:  1  
 
 Ajouter au panier 
 
 
 
 
 
 
 
 
 
 
LA DESCRIPTION
 
LA REVUE
 
TAGS DE PRODUIT
 
 
 
 
 
Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis dans le 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 dans le 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 dans le 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 dans le 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 dans le 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 dans le 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 étoile
 
2 étoiles
 
3 étoiles
 
4 étoiles
 
5 étoiles
 
 
 
 
 
Qualité
 
 
 
 
 
 
 
 
Prix
 
 
 
 
 
 
 
 
Valeur
 
 
 
 
 
 
 
 
 
 
 
 votre nom *  
 
 Votre email *  
 
 Résumé de votre revue *  
 
 
 
 votre nom *  
 
  
 
 
 
 
 
 
  
Nom du réviseur
 
Date: 01-01-2014
 
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Integer a eros neque. Dans sapien est, malesuada non interdum id, cursus vel neque.
 
 
  
Nom du réviseur
 
Date: 01-01-2014
 
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Integer a eros neque. Dans sapien est, malesuada non interdum id, cursus vel neque.
 
 
 
 
 Ajouter des balises :   
 
 
 
 
 
 
Chaud Des produits
 
<>
 
 
 
 
 
 
 
  
 Lire la suite 
 
Iphone 5s Or 32 Gb 2013
 
451,00 $
 
 
 
 
 
 
 
 
  
 Lire la suite 
 
Iphone 5s Or 32 Gb 2013
 
451,00 $
 
 
 
 
 
 
 
 
  
 Lire la suite 
 
Iphone 5s Or 32 Gb 2013
 
451,00 $
 
 
 
 
 
 
 
 
  
 Lire la suite 
 
Iphone 5s Or 32 Gb 2013
 
451,00 $
 
 
 
 
 
 
 
 
 
 
 
- % 20
 
 
Iphone 5s Or 32 Gb 2013
 
451,00 $
 
 Ajouter au panier 
 
 
 
 
 
 
Iphone 5s Or 32 Gb 2013
 
451,00 $
 
 Ajouter au panier 
 
 
 
 
 
Nouveau
 
 
Iphone 5s Or 32 Gb 2013
 
451,00 $
 
 Ajouter au panier 
 
 
 
 
 
 
 
 
 
- % 20
 
 
Iphone 5s Or 32 Gb 2013
 
451,00 $
 
 Ajouter au panier 
 
 
 
 
 
 
Iphone 5s Or 32 Gb 2013
 
451,00 $
 
 Ajouter au panier 
 
 
 
 
 
Nouveau
 
 
Iphone 5s Or 32 Gb 2013
 
451,00 $
 
 Ajouter au panier 
 
 
 
 
 
 
 
 
 
 

Je sais que cela fait beaucoup de code et pourrait vous effrayer. Mais ne vous inquiétez pas, car comme vous le constaterez lorsque nous commencerons à placer les balises dynamiques, le code commencera à fondre rapidement et nous n'aurons pas à nous en soucier pour la plupart..

Nous allons maintenant commencer à éditer ce code HTML en insérant des balises dynamiques à partir de notre fichier view.phtml actuel..

Tout d'abord, nous allons ajouter ces lignes en haut, pour faire une initialisation:

assistant ('catalogue / sortie'); ?> getProduct (); ?>  
getMessagesBlock () -> toHtml ()?>
 
 

Et puis fermez la vue produit div à la fin du fichier (ligne 314):

Ensuite, nous allons emballer les détails du produit div dans un élément de formulaire, comme dans le fichier view.phtml. Nous allons donc ajouter ces lignes à l'intérieur du détails du produit div à la ligne 10:

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

De même, nous allons maintenant fermer cette forme, et copiez également ce code JavaScript de view.phtml à la ligne 77:

 isSaleable () && $ this-> hasOptions ()):?> getChildChildHtml ('conteneur2', ", vrai, vrai)?>    

Dans l'étape suivante, à l'intérieur de la boîte à onglet div (à partir de la ligne 129), supprimez tout le code existant et copiez le code de tabulation suivant dans view.phtml (environ 100 lignes de code remplacées par ces quelques lignes). Pour vous assurer que l'onglet JavaScript continue à bien fonctionner, nous allons ajouter l'onglet des classes actuelles div, le nouveau code ressemblera à ceci:

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

Avec tout cela fait, maintenant nous allons insérer le getChildHtml ('related_products')?> étiquette à l'intérieur des produits chauds div, après avoir supprimé le code existant, afin qu'il ressemble à ceci à la ligne 166:

 getChildHtml ('related_products')?> 
 

Vous voyez comment environ 150 lignes de code sont remplacées par seulement ces trois lignes? Sauvons tout et voyons comment la page avance si loin. Si vous avez tout fait correctement, cela devrait ressembler à ceci:

Cela peut sembler tout foiré, mais croyez-moi, nous nous rapprochons de ce à quoi nous voulons que la page ressemble. Dans le prochain article, nous éditerons les fichiers responsables du rendu de la section images, des produits connexes, etc., et nous ferons enfin des corrections de style, et notre page produit sera prête..

En fin de compte, permettez-moi de répéter que les gros morceaux de code présentés ci-dessus peuvent vous intimider au début, mais que lorsque vous commencez à remplacer le code par des balises dynamiques appropriées, vous vous rendrez vite compte que leur modification ne demande pas beaucoup de travail..

Dans le prochain article, nous compléterons le reste de cette page en modifiant d’autres fichiers phtml..