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 de catégorie, première partie

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

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

Félicitations pour avoir complété la page d’accueil de votre nouveau thème et commencé à la page suivante Dans ce tutoriel, nous allons commencer à modifier la page de catégorie de notre thème Magento.

La page de catégorie comprend essentiellement quatre sections: la barre d’outils, le mode grille, le mode liste et la barre latérale. Nous traiterons des trois premières sections de cet article, puis dans le prochain tutoriel, nous modifierons la barre latérale et effectuerons quelques corrections CSS.

Si vous regardez une page de catégorie de notre thème, cela ressemblera à quelque chose comme ceci:

Category Page before editing

Alors que nous voulons le faire ressembler à ceci:

HTML design Category Page

Si vous remarquez, notre page de catégorie actuelle comporte de grands espaces vides à gauche et à droite. Nous devons comprendre pourquoi la zone de contenu ne prend pas assez d'espace. Voyons d'abord quel modèle est responsable du rendu de cette page. Pour ce faire, vous pouvez activer les indicateurs de modèle à partir du panneau d'administration, comme vous l'avez déjà fait à plusieurs reprises dans cette série.

Nous avons découvert ici que sa page était représentée par une disposition en trois colonnes, ce qui explique le large espace vide à gauche, car aucun bloc n'est affecté à la barre latérale gauche.

Template Hints for Category Page

Pour que cette page ressemble à notre conception HTML, nous allons la changer en deux colonnes. Dans le panneau d'administration, sélectionnez Catalog > Manage Categories > Custom Design > Page Layout et remplacez-le par 2 columns with left bar.

Changing Page Layout

Maintenant, notre page devrait avoir une disposition en deux colonnes avec une barre latérale sur le côté gauche, comme l'exigeait notre conception.

Comme dans cet article, nous ne modifierons que la bonne zone (pas la barre latérale), nous commencerons le processus d'édition à partir de la barre d'outils. Les astuces de modèles activées, nous allons vérifier les fichiers phtml chargés de les rendre en activant à nouveau les indicateurs de modèles.

Comme nous l'avons découvert, ce fichier est: \template\catalog/product/list/toolbar.phtml.

Nous copierons cela dans notre nouveau thème, le comparerons avec le code de notre fichier HTML, puis commencerons à apporter des modifications. Notre code actuel du fichier toolbar.phtml ressemble à ceci:

Nous devons le comparer avec le code HTML responsable de la partie barre d’outils, qui est la suivante:

Nous commencerons par modifier ce code en insérant les balises dynamiques et différentes instructions for et if . Par exemple, pour rendre les liens pour les modes grille et liste pour le mode affichage, nous allons ajouter le code suivant:

Ce code fait essentiellement une itération sur tous les modes actifs (liste et grille), puis répertorie une balise d'ancrage pour chacun d'entre eux. Ici, très intelligemment, nous avons affecté différentes classes et titres, en utilisant la variable $_label, qui sera différente pour chaque mode.

De même, vous pouvez modifier vous-même les parties sort-by et limiter en les comparant au fichier toolbar.phtml. Après les modifications, le code final de ce fichier ressemblera à ceci:

Et si nous actualisons la page maintenant, cela ressemblera à quelque chose comme ça. Tout est en place, mais le CSS est assez désactivé, ce que nous allons corriger dans le prochain article.

Toolbar after editing

Il est maintenant temps de modifier les produits affichés sur cette page. Les produits ici peuvent être affichés de deux manières différentes, à savoir le mode liste et le mode grille. Si nous activons les astuces sur les modèles pour trouver le fichier responsable de cette partie, nous verrons que le code des modes grille et liste est écrit dans le même fichier, qui est frontend \ rwd \ default \ template \ catalog / product / list .phtml.

Le code de liste dans ce fichier est sur les lignes 44 à 116, qui est la suivante:

Nous devons maintenant le comparer avec le code de liste HTML dans productlist.html dans notre modèle HTML.

La modification de ce code est assez simple. Nous allons utiliser ces lignes d'initialisation:

Ensuite, nous placerons une boucle for autour de la balise li:

Enfin, nous remplacerons le nom du produit, le prix, la description, le lien du fichier image et l’URL par les tags dynamiques. Le code final ressemblera à ceci:

Maintenant, si nous actualisons la page, nous verrons que la page de catégorie en mode liste ressemblera à ceci. Je sais que ce n'est pas ce à quoi nous voulons ressembler, mais tout notre code HTML est en place, nous devons donc maintenant modifier son CSS, ce que nous ferons dans le prochain tutoriel.

List Mode after editing

En ce qui concerne le mode grille, son code va de 118 à 176 dans le même fichier list.phtml.

Le code HTML ressemble à ceci dans le fichier productgrid.html de notre modèle HTML:

La modification de cette partie ressemblera beaucoup à ce que nous avons fait dans la partie liste. Tout d’abord, nous allons faire une initialisation, comme dans le fichier list.phtml par défaut.

Ensuite, nous allons envelopper chaque élément li dans une boucle for pour itérer sur tous les produits.

Enfin, nous remplacerons les attributs du produit tels que nom du produit, prix, description, etc. Vous pouvez facilement les trouver dans le fichier list.phtml.

Le code final ressemblera à ceci:

Maintenant, si vous actualisez la page, le mode grille ressemblera à ceci:

Grid Mode after editing

Dans cet article, nous avons modifié les sections Barre d’outils, Liste et Grille de cette page. Dans le prochain article, nous allons modifier la barre latérale et effectuer quelques corrections de style CSS. À la fin du prochain article, notre page de catégorie ressemblera beaucoup à la conception HTML.

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.