Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Magento
Code

Développement de thèmes Magento: Page produit, 1ère partie

by
Length:LongLanguages:
This post is part of a series called Magento Theme Development.
Magento Theme Development: Category Page, Part 2
Magento Theme Development: Product Page, Part 2

French (Français) translation by honeymmmm (you can also view the original English article)

Maintenant que nous avons terminé la page d'accueil et la page de catégorie, nous allons dans ce tutoriel commencer à éditer 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 votre conception HTML ressemble à ceci:

HTML design of product page

Notre page de produit actuelle ressemble à ceci:

Product Page before editing

Pour commencer à l’éditer, nous allons procéder comme 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 chargés de rendre cette page.

Enabling template hints

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 ne modifierons que les styles pour qu'ils ressemblent à notre conception, sans jouer avec les fichiers phtml.

Si vous regardez bien, la structure globale 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:

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, de la section de pied de page, etc.):

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 à y placer les balises dynamiques, le code commencera à fondre rapidement et nous n'aurons pas à nous en soucier.

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

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

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

Ensuite, nous allons insérer les détails du produit div dans un élément de formulaire, comme dans le fichier view.phtml. Nous allons donc ajouter ces lignes dans la division product-details à la ligne 10:

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

Dans l'étape suivante, à l'intérieur de tab-box 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 à fonctionner correctement, nous allons ajouter la classe div de l'onglet de classes en cours, afin que le nouveau code se présente comme suit:

Cela fait, nous allons maintenant insérer la balise <?php echo $this->getChildHtml ('related_products')?> Dans la div hot-products, après avoir supprimé le code existant, afin que cela ressemble à ceci à la ligne 166:

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:

Product page after editing viewphtml

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 une fois que 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.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.