Share
Dans l'article précédent sur les pages de catégorie, nous avions modifié la disposition de la barre d'outils, de la grille et de la liste. Dans ce deuxième article sur la personnalisation de la page de catégorie, nous allons personnaliser la barre latérale et effectuer des corrections CSS..
Tout d’abord, nous ajouterons quelques composants dans la barre latérale afin que nous puissions les styler. Ici, à des fins de démonstration, nous allons simplement ajouter un ou deux composants et les modifier. Cela vous permettra de comprendre comment modifier les autres composants de la barre latérale..
Pour l'instant, nous allons simplement ajouter "comparer les produits" et une bannière à la barre latérale. Nous ferons cela à partir du code local.xml. Si vous vous rappelez des premiers articles de la série, vous pouvez trouver le fichier local.xml dans le dossier de présentation de votre fichier de thème..
Nous allons ajouter une référence à la section de gauche, puis une bannière et un module de comparaison des produits dans la barre latérale, en utilisant le code ci-dessous:
images / banner-small-01.png Notre service client est disponible 24h / 24 et 7j / 7. Appelez-nous au (555) 555-0123. caisse / panier
Utilisez-le simplement comme code de référence. Vous pouvez ajouter plus de modules ou de bannières en suivant la même procédure..
Si nous examinons notre conception HTML, nous remarquons que tous les composants sont bien conçus, en particulier la partie en-tête qui contient plusieurs couleurs..
Alors que notre design actuel n’est pas très désagréable, nous pouvons le modifier via CSS, mais nous devons modifier le code HTML pour ajouter des classes à différentes couleurs dans l’en-tête..
Pour modifier le code HTML, nous allons d’abord activer les indicateurs de modèle et découvrir que le fichier responsable est \ template \ catalog / product / compare / sidebar.phtml..
Maintenant, ouvrons ce fichier sidebar.phtml et comparons-le avec le code HTML..
Notre code HTML de conception pour la barre latérale ressemble à ceci:
Des produits Mots clés
- Lincoln nous
- Robe pour fille
- Coin
- La fenêtre
- PG
- oscar
- Salle de bains
- PSD
Nous pouvons voir que la rubrique a la h3 tag avec une classe de Titre, et il a le fort étiquette autour des en-têtes, qui ont une couleur différente.
Pour cela, nous allons remplacer le block-title div avec ça:
__ ('Comparer')?>__ ('Produits')?> getItemCount ()> 0):?> __ ('(% d)', $ _helper-> getItemCount ())?>
Actualisez la page. Elle devrait maintenant ressembler beaucoup à notre conception HTML. Vous pouvez ajouter et mettre en forme d'autres composants de la barre latérale de la même manière.
Maintenant que nous avons fini d’éditer les fichiers phtml, commençons à corriger les styles CSS.
Nous allons commencer à fixer les styles par le haut. Le premier composant qui mérite notre attention est le titre de la page. Comme nous pouvons le constater, il est assez inoffensif et n’est pas proche de nos exigences HTML.
Nous allons ajouter ces lignes dans notre nouveau fichier CSS pour styliser l'en-tête.
.titre de page h1 font-family: "Raleway", "Helvetica Neue", Verdana, Arial, sans serif; float: gauche; position: relative; largeur: 100%; marge inférieure: 15 px; taille de police: 24px; couleur: # 2f2f2f; poids de la police: 300; rembourrage en bas: 5px; text-align: center; fond: url (… /images/hadingBg.jpg) centre sans répétition; hauteur de ligne: 3; .col-md-9 .toolbar float: none; bordure: aucune; couleur de fond: transparent; rembourrage à gauche: 0;
Ici, nous venons de lui donner une bonne police de texte, une hauteur de ligne, un alignement de texte, une image d'arrière-plan, etc. Nous avons également rendu l'arrière-plan transparent sans bordure. Cela devrait ressembler à ceci maintenant:
Ensuite, nous devons modifier la section de la barre d’outils. Pour cela, nous allons ajouter ces styles dans notre fichier CSS:
.barre d'outils .sorter> .view-mode float: left;. barre d'outils .sorter> .view-mode .grid background-image: url (… /images/grid-icon.png); largeur: 25px; hauteur: 25px; position d'arrière-plan: 0px 0px; .toolbar .sorter> .view-mode .list background-image: url (… /images/list-icon.png); largeur: 25px; hauteur: 25px; position d'arrière-plan: 0px 0px; .toolbar .sorter select taille de la police: 12px;
Ici, nous venons de spécifier des images d’arrière-plan, largeur, hauteur, etc., et le tour est joué. La page devrait ressembler à ceci:
Maintenant, commençons à éditer la section produits en mode grille. La page ressemble à ceci maintenant:
Nous allons juste devoir faire quelques ajustements de style de largeur et de vol stationnaire. La couleur des prix doit également changer. Nous ferons tout cela en ajoutant ces lignes CSS:
.categorie-produits .produits-grille - max-4-col> li largeur: 30%; .category-produits .produits-grille - max-4-col> li .view-huitième: survol. masque : 170px; .item .price-box .price, .price couleur: noir;
Maintenant, la section de grille devrait ressembler à ceci:
Dans la dernière partie, nous devons corriger la section produits en mode liste. Il semble actuellement assez foiré, mais ne vous inquiétez pas, quelques lignes de CSS régleront tout.
Pour que ça ait l'air bien, nous allons utiliser ces styles CSS:
.élément .product-list-description .price-box .price float: left; taille de police: 28px; couleur: # b39a64; margin-right: 10px; .products-list .products .thumbnail border: medium aucun; float: gauche; marge: 0; rembourrage: 10px; position: relative; largeur: 18%; height: auto; .products-list .products min-height: 100px; .products-list .products: hover background: #fff; couleur de bordure: # b39a64; -webkit-box-shadow: 0 0 5px 1px # d3d3d3; box-shadow: 0 0 5px 1px # d3d3d3; .products-list .products border: 1px solid # e1e1e1; position: relative; débordement caché; background: #fff; rembourrage: 15px; marge supérieure: 15 px; hauteur min .: 150px; .products .button background: # b39a64; couleur: #fff; .button: survol, bouton: survol border: 1px solid # b39a64;
Ici, nous avons défini la largeur de l'image du produit, placé le prix à droite, donnant à l'ensemble de la section un joli effet de fond, de bordure et de survol, et légèrement modifié le bouton. La page devrait ressembler à ceci:
Ceci fait, votre page de catalogue devrait être belle et proche de nos exigences en matière de conception HTML. Vous aurez peut-être besoin d'un autre ajustement CSS, mais à part cela, vous êtes tous prêts.
Dans le prochain article de cette série, nous commencerons à modifier la page de détail du produit..
S'il vous plaît laissez vos suggestions et commentaires dans la section commentaires. Nous attendons avec impatience.
Accentsconagua