Magento Theme-Entwicklung Kategorieseite, Teil 2

Im vorherigen Artikel zu Kategorienseiten haben wir die Symbolleiste, das Raster und das Listenlayout bearbeitet. In diesem zweiten Artikel zum Anpassen der Kategorieseite werden die Seitenleiste angepasst und einige CSS-Korrekturen vorgenommen.

Zunächst fügen wir der Seitenleiste einige Komponenten hinzu, damit wir sie stylen können. Zur Demonstration fügen wir hier eine oder zwei Komponenten hinzu und modifizieren sie. Dadurch erhalten Sie ein umfassendes Verständnis dafür, wie Sie auch die anderen Komponenten der Seitenleiste ändern können. 

Im Moment fügen wir der Sidebar einfach nur "Produkte vergleichen" und ein Sidebar-Banner hinzu. Wir machen das aus dem local.xml-Code. Wenn Sie sich an die ersten Artikel der Serie erinnern, finden Sie die Datei local.xml im Layoutordner Ihrer Designdatei.

Wir fügen dem linken Abschnitt einen Verweis hinzu und fügen dann ein Banner und ein Produktmodul in der Seitenleiste mit dem folgenden Code hinzu:

   images / banner-small-01.png Unser Kundenservice steht Ihnen rund um die Uhr zur Verfügung. Rufen Sie uns an unter (555) 555-0123. Kasse / Warenkorb   

Verwenden Sie es nur als Referenzcode - Sie können mit demselben Verfahren weitere Module oder Banner hinzufügen.

Wenn wir unser HTML-Design betrachten, werden wir feststellen, dass alle Komponenten gut gestaltet sind, insbesondere der Überschriftenteil, der mehrere Farben enthält. 

Unser aktuelles Design ist zwar wenig, aber wir können das Design über CSS ändern, aber wir müssen den HTML-Code ändern, um Klassen für verschiedene Farben in der Überschrift hinzuzufügen. 

Um den HTML-Code zu ändern, müssen wir zunächst Vorlagenhinweise aktivieren und feststellen, dass die dafür verantwortliche Datei \ template \ catalog / product / compare / sidebar.phtml ist.

Jetzt öffnen wir diese sidebar.phtml-Datei und vergleichen sie mit dem HTML-Code.

Unser Design-HTML-Code für die Seitenleiste sieht folgendermaßen aus:

 
Produkte Stichworte
 
 
Lincoln uns
 
SDresse für Mädchen
 
Ecke
 
Fenster
 
PG
 
Oscar
 
Bad
 
PSD
 
 

Wir können sehen, dass die Überschrift das hat h3 tag mit einer Klasse von Titel, und es hat die stark Markieren Sie die Überschriften, die eine andere Farbe haben. 

Dafür ersetzen wir den Blocktitel div mit diesem:

__ ('Compare')?>__ ("Produkte")?> getItemCount ()> 0):?> __ ('(% d)', $ _helper-> getItemCount ())?>  

Aktualisieren Sie die Seite, und sie sollte jetzt unserem HTML-Design sehr nahe kommen. Sie können andere Sidebar-Komponenten auf ähnliche Weise hinzufügen und gestalten.

Nachdem wir nun die PHP-Dateien bearbeitet haben, beginnen wir mit der Korrektur der CSS-Stile.

Wir beginnen, die Stile von oben zu korrigieren. Die erste Komponente, die unsere Aufmerksamkeit erfordert, ist die Seitenüberschrift. Wie wir sehen können, ist es ziemlich falsch und entspricht nicht unseren HTML-Anforderungen.

Wir fügen diese Zeilen in unsere neue CSS-Datei ein, um die Überschrift zu gestalten.

.Seitentitel h1 Schriftfamilie: "Raleway", "Helvetica Neue", Verdana, Arial, serifenlos; Schwimmer: links; Position: relativ; Breite: 100%; Rand unten: 15px; Schriftgröße: 24px; Farbe: # 2f2f2f; Schriftgewicht: 300; Polsterung unten: 5px; Text ausrichten: Mitte; Hintergrund: URL (… /images/hadingBg.jpg) Wiederholungszentrum; Zeilenhöhe: 3;  .col-md-9 .toolbar float: none; Grenze: keine; Hintergrundfarbe: transparent; Polsterung links: 0; 

Hier haben wir gerade eine gute Textschriftart, Zeilenhöhe, Textausrichtung, Hintergrundbild usw. angegeben. Außerdem haben wir den Hintergrund transparent ohne Rand gemacht. Es sollte jetzt so aussehen:

Als Nächstes müssen wir den Symbolleistenabschnitt ändern. Dazu fügen wir diese Stile in unsere CSS-Datei ein:

.toolbar .sorter> .view-mode float: left; .toolbar .sorter> .view-mode .grid background-image: url (… /images/grid-icon.png); Breite: 25px; Höhe: 25px; Hintergrundposition: 0px 0px;  .toolbar .sorter> .view-mode .list background-image: url (… /images/list-icon.png); Breite: 25px; Höhe: 25px; Hintergrundposition: 0px 0px;  .toolbar .sorter select font-size: 12px;

Hier haben wir einige Hintergrundbilder, Breite, Höhe usw. angegeben, und das wird den Trick meistern. Die Seite sollte so aussehen:

Lassen Sie uns nun den Produktbereich in der Rasteransicht bearbeiten. Die Seite sieht jetzt so aus:

Wir müssen nur einige Einstellungen für Breite und Schwebeflug vornehmen. Auch die Preisfarbe muss geändert werden. Wir werden das alles tun, indem wir diese CSS-Zeilen hinzufügen:

.Kategorie-Produkte .products-grid - max-4-col> li Breite: 30%; .category-products .products-grid - max-4-col> li .view-eighth: hover .mask nach oben : 170px; .item .price-box .price, .price color: black;

Nun sollte der Rasterabschnitt so aussehen:

Im letzten Teil müssen wir den Produktbereich im Listenmodus korrigieren. Derzeit sieht es ziemlich durcheinander aus, aber machen Sie sich keine Sorgen - ein paar Zeilen CSS werden alles richtig machen. 

Damit es gut aussieht, verwenden wir diese CSS-Stile:

.item .product-list-description .price-box .price float: left; Schriftgröße: 28px; Farbe: # b39a64; Margin-Right: 10px; .products-list .products .thumbnail border: medium none; Schwimmer: links; Marge: 0; Polsterung: 10px; Position: relativ; Breite: 18%; height: auto; .products-list .products min-height: 100px; .products-list .products: hover background: #fff; Rahmenfarbe: # b39a64; -webkit-box-shadow: 0 0 5px 1px # d3d3d3; Box-Schatten: 0 0 5px 1px # d3d3d3;  .products-list .products border: 1px fest # e1e1e1; Position: relativ; Überlauf versteckt; Hintergrund: #fff; Polsterung: 15px; Rand oben: 15px; min-Höhe: 150px;  .products .button background: # b39a64; Farbe: #fff;  .button: hover, button: hover border: 1px fest # b39a64;  

Hier haben wir die Bildbreite des Produkts festgelegt, den Preis nach rechts geschoben, den gesamten Bereich mit einem schönen Hintergrund, Rand und Hover-Effekt versehen und den Button leicht modifiziert. Die Seite sollte ungefähr so ​​aussehen:

Nachdem dies geschehen ist, sollte Ihre Katalogseite gut aussehen und unseren HTML-Designanforderungen entsprechen. Möglicherweise benötigen Sie eine andere CSS-Feinabstimmung, ansonsten sind Sie alle festgelegt.

Im nächsten Artikel dieser Serie beginnen wir mit der Bearbeitung der Produktdetailseite. 

Bitte hinterlassen Sie Ihre Anregungen und Ihr Feedback in den Kommentaren. Wir freuen uns darauf.