Développement de thèmes Magento page de catégorie, première partie

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:

Alors que nous voulons faire ressembler à ceci:

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 conseils de modèles à partir du panneau d'administration, comme vous l'avez déjà fait à plusieurs reprises dans cette série..

Ici, nous avons découvert que sa mise en page était composée de trois colonnes, raison pour laquelle il y a un grand espace vide à gauche, car aucun bloc n'est attribué à la barre latérale gauche..

Pour que cette page ressemble à notre conception HTML, nous allons la changer en deux colonnes. Dans le panneau d'administration, allez à Catalogue> Gérer les catégories> Design personnalisé> Mise en page et le changer en 2 colonnes avec barre de gauche.

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-il: \ 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:

getCollection () -> getSize ()):?>  isExpanded ()):?>  isEnabledViewSwitcher ()):?>  getModes (); ?> 1):?> __ ('Voir comme')?> getModes () en tant que $ _code => étiquette $ _):?> isModeActive ($ _ code)):?>   getModeUrl ($ _ code)?> "title ="">    
   __ ('Trier par')?>  getCurrentDirection () == 'desc'):?> getOrderUrl (null, 'asc')?> "title ="__ ('Définir la direction ascendante')?> ">__ ('Définir la direction ascendante')?>  getOrderUrl (null, 'desc')?> "title ="__ ('Définir la direction décroissante')?> ">__ ('Définir Direction Descendante')?>  
 
    getLastPageNum ()> 1):?>  __ ('% s-% s de% s', $ this-> getFirstNum (), $ this-> getLastNum (), $ this-> getTotalNum ())?> 
   __ ('% s élément (s)', $ this-> getTotalNum ())?> 
   __ ('Show')?>  
 
 getPagerHtml ()?>

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

  ListGrid
 Trier par :  
 Spectacle :

Nous allons commencer à modifier ce code en mettant dans les balises dynamiques et différents pour et si déclarations. Par exemple, pour rendre les liens pour les modes grille et liste pour le mode affichage, nous allons ajouter le code suivant:

1):?> getModes () en tant que $ _code => étiquette $ _):?> isModeActive ($ _ code)):?> "href =" # ">  "href ="getModeUrl ($ _ code)?> ">

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 leur avons attribué différentes classes et titres, en utilisant le $ _label variable, qui sera différente pour chaque mode.

De même, vous pouvez modifier le Trier par et limiteur vous sépare en le comparant avec le fichier toolbar.phtml. Après les modifications, le code final de ce fichier ressemblera à ceci:

getCollection () -> getSize ()):?>  isExpanded ()):?>  isEnabledViewSwitcher ()):?>  getModes (); ?> 1):?> getModes () en tant que $ _code => étiquette $ _):?> isModeActive ($ _ code)):?> "href =" # ">  "href ="getModeUrl ($ _ code)?> ">    
  Trier par :  getCurrentDirection () == 'desc'):?> getOrderUrl (null, 'asc')?> "title ="__ ('Définir la direction ascendante')?> ">__ ('Définir la direction ascendante')?>  getOrderUrl (null, 'desc')?> "title ="__ ('Définir la direction décroissante')?> ">__ ('Définir Direction Descendante')?>  
 __ ('Show:')?>  
 
  getPagerHtml ()?>

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

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:

 getMode ()! = 'grid'):?>      getProductUrl ()?> "title ="stripTags ($ this-> getImageLabel ($ _ product, 'small_image'), null, true)?> ">         stripTags ($ _ product-> getName (), null, true); ?> getProductUrl ()?> "title ="">productAttribute ($ _ product, $ _product-> getName (), 'name'); ?>
 getRatingSummary ()):?> getReviewsSummaryHtml ($ _ product)?>  getChild ('name.after')) $ _nameAfterChildren = $ this-> getChild ('name.after') -> getSortedChildren (); foreach ($ _nameAfterChildren en tant que $ _nameAfterChildName) $ _nameAfterChild = $ this-> getChild ('name.after') -> getChild ($ _ nameAfterChildName); $ _nameAfterChild-> setProduct ($ _ product); echo $ _nameAfterChild-> toHtml (); ?> 
  getPriceHtml ($ _ product, true)?> 
  canConfigure () && $ _product-> isSaleable ()):?> 
 getStockItem () && $ _product-> getStockItem () -> getIsInStock ()):?> __ ('View Details')?> "Href ="getProductUrl ()?> ">__ ('Voir les détails')?>
  __ (en rupture de stock)?>
   helper ('wishlist') -> isAllow ()):?> helper ('wishlist') -> getAddUrl ($ _ product)?> ">__ ('Ajouter à la liste de souhaits')?>
  getAddToCompareUrl ($ _ product)):?> | ">__ ('ajouter pour comparer')?>
  
 
  productAttribute ($ _ product, $ _product-> getShortDescription (), 'short_description')?> getProductUrl ()?> "title ="">__ ('En savoir plus')?>

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

  Nouveau
 
  Lincoln Corner Unit Produits
 02 Commentaire (s)
 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 etds mattis vulputate, tristique ut lectus. Sed et lorem nunc… 
  450.00^$450.00^$

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

 getMode ()! = 'grid'):?>

Ensuite, nous placerons une boucle for autour du li étiquette:

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:

 getMode ()! = 'grid'):?>        
  productAttribute ($ _ product, $ _product-> getName (), 'name'); ?>
 getRatingSummary ()):?> getReviewsSummaryHtml ($ _ product)?>  
 productAttribute ($ _ product, $ _product-> getShortDescription (), 'short_description')?>
  getPriceHtml ($ _ product, true)?>

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 code CSS, ce que nous ferons dans le prochain tutoriel..

Maintenant en mode grille, le code pour cela est de 118 à 176 dans le même fichier list.phtml.

 compte ()?> getColumnCount (); ?>      getProductUrl ()?> "title ="stripTags ($ this-> getImageLabel ($ _ product, 'small_image'), null, true)?> ">     getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?> ">productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 getChild ('name.after')) $ _nameAfterChildren = $ this-> getChild ('name.after') -> getSortedChildren (); foreach ($ _nameAfterChildren en tant que $ _nameAfterChildName) $ _nameAfterChild = $ this-> getChild ('name.after') -> getChild ($ _ nameAfterChildName); $ _nameAfterChild-> setProduct ($ _ product); echo $ _nameAfterChild-> toHtml (); ?> getPriceHtml ($ _ product, true)?> getRatingSummary ()):?> getReviewsSummaryHtml ($ _ product, 'short')?>   canConfigure () && $ _product-> isSaleable ()):?>  getStockItem () && $ _product-> getStockItem () -> getIsInStock ()):?> __ ('Afficher les détails')?> "href ="getProductUrl ()?> ">__ ('Voir les détails')?>  __ (en rupture de stock)?>
   helper ('wishlist') -> isAllow ()):?> helper ('wishlist') -> getAddUrl ($ _ product)?> ">__ ('Ajouter à la liste de souhaits')?>
  getAddToCompareUrl ($ _ product)):?> | ">__ ('ajouter pour comparer')?>

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

       Lire la suite 
 Iphone 5s Or 32 Gb 2013
 451,00 $

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.

 compte ()?> getColumnCount (); ?>

Ensuite, nous allons envelopper chacun li article dans une boucle for pour parcourir tous les produits.

Enfin, nous allons remplacer les attributs du produit tels que nom du produit, prix, description, etc., par des balises dynamiques appropriées. Vous pouvez les trouver facilement dans le fichier list.phtml.

Le code final ressemblera à ceci:

 compte ()?> getColumnCount (); ?>         getProductUrl ()?> "> Ajouter au panier 
 stripTags ($ _ product-> getName (), null, true)?>
 getPriceHtml ($ _ product, true)?>

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

Dans cet article, nous avons modifié les sections Barre d’outils, Liste et Grille de cette page. Dans le prochain article, nous modifierons la barre latérale et effectuerons quelques corrections de style CSS. À la fin du prochain article, notre page de catégorie sera assez similaire au design HTML..

Code