Share
Als ich diese Serie ursprünglich plante, war es beabsichtigt, eine Serie mit 15 Artikeln zu sein, in der wir alle Seiten des Themas entwickeln wollten, einschließlich des Warenkorbs, der Checkout-Seiten, der Login- / Anmeldeseiten und der Seiten der Benutzerkonten.
Nachdem ich die ersten 10 Artikel geschrieben hatte, wurde mir klar, dass wir alle Schritte, die erforderlich sind, um die Änderungen an Ihren Magento-Design-Seiten vorzunehmen, bereits ausführlich erklärt haben. Die Bearbeitung der anderen Seiten ist nur eine Wiederholung der bereits erläuterten Schritte Vor.
Deshalb beende ich die Serie in diesem Artikel, auf der wir die Produktseite abschließen, die wir im vorherigen Artikel hinterlassen haben, und ich werde Ihnen einige Tipps geben, wie Sie die in dieser Serie erlernten Techniken anwenden können um den Rest der Seiten selbst zu bearbeiten.
Lassen Sie uns also die Anpassung der Produktdetailseite fortsetzen. So sieht es aktuell aus:
Wenn wir es mit dem HTML-Design vergleichen, das wir haben, sollte es so aussehen:
Damit es wie unser HTML-Design aussieht, müssen wir einige Änderungen an den Schriftarten in den Bereichen Produktüberschrift, Preis und Verfügbarkeit vornehmen. Außerdem müssen wir im Abschnitt "In den Warenkorb" die Hintergrundfarbe und die Ränder ändern. Ansonsten müssen wir einige Änderungen an den Rändern und der Polsterung vornehmen. Dies tun wir, indem Sie diese Zeilen in unsere theme.css-Datei einfügen:
/ ***** Produktdetailseite *********** / .more-views margin-top: 10px; .product-image-thumbs text-align: center; .more- Ansichten .product-image-thumbs a: hover border-color: # b39a64; .mehr-views .product-image-thumbs a float: left; Polsterung: 3px; Rahmen: 1px fest #cccccc; .products-details font-family: Georgia, serifenlos; .products-description .name font-family: Georgia, serifenlos; Schriftgröße: 30px; .availability.in-stock Schriftgröße: 11px; .products-details .products-description .price width: 50%; Schriftgröße: 25px; Farbe: # b39a64; font-weight: 500; .products-description .product-options border: keine; Polsterung links: 30px; .product-view .products-description .product-options .swatch-attr label font-size: 11px; Schriftfamilie: erben; Schriftgewicht: normal; .products-description .product-options-bottom border: keine; Hintergrund: keine; Polsterung links: 30px; Schriftgröße: 12px; Auffüllen: 17px 0 0px 0; Border-Top: 1px fest #ccc; Marge: 10px 30px 0 30px; .product-view .product-options-bottom .add-to-cart-buttons .button background: # b39a64; Farbe: #fff; .product-view .products-description .add-to-cart margin-bottom: 21px;
Der Code sollte ziemlich selbsterklärend aussehen. Nachdem Sie diese Änderungen vorgenommen haben, sollte die Seite folgendermaßen aussehen:
Jetzt sind wir unseren HTML-Designanforderungen ziemlich nahe. Wenn wir uns jedoch den Tabs-Abschnitt der Produktseite ansehen, sieht das zwar gut aus, passt aber nicht zu unserer HTML-Designanforderung. So sieht es aktuell aus:
Damit es mit unserem HTML-Design übereinstimmt, fügen wir diese CSS-Zeilen in unsere Datei theme.css ein:
/ ***** Tabs Section *********** / .product-view .product-collateral .toggle-tabs border: keine; Hintergrund: keine; .product-view .product-collateral .toggle-tabs li.current .product-view .product-collateral .toggle-tabs li float: left; Rand: 1px fest #ececec; .product-view .product-collateral> dl> dd padding: 0 15px 15px 0px; Grenze: keine; .product-view .product-collateral .toggle-tabs li.current> span background-color: #eee; Farbe: # b39a64 ;;
Wir haben die Hintergrundfarbe für die Registerkartenüberschriften und die Farbe für die aktuelle Registerkarte geändert. Die Auffüllung und der Rand für diese werden ebenfalls bearbeitet. So sollte es jetzt aussehen:
Es sieht jetzt ziemlich nah aus. Die Seite sollte bis auf eine kleine Sache gut aussehen: Der Abstand zwischen den Registerkarten und den zugehörigen Produkten ist viel zu groß und ruiniert das Aussehen der gesamten Seite.
Dies ist wegen der min-Höhe für die definierte Eigenschaft .Tab-Box Klasse. Wir werden es mit diesem schnellen Code beheben:
/ ***** Margin Bottom Problem Problem *********** / .product-view .tab-box min-height: initial;
Das Problem ist jetzt behoben:
Jetzt ist unsere gesamte Produktdetailseite fertig und entspricht ziemlich genau unseren HTML-Designanforderungen. Damit haben wir die drei wichtigsten Seiten der eCommerce-Website komplettiert: Homepage, Produktlistenseite und Produktdetailseite.
Wie ich zu Beginn dieses Artikels bereits erwähnt habe, werde ich diese Artikelserie hier zusammenfassen und Ihnen einige Tipps geben, wie Sie andere Seiten des Themas anpassen können, indem Sie die in dieser Serie erlernten Fähigkeiten verwenden.
Schauen wir uns die Warenkorb-Seite an. Es sieht aktuell so aus:
Wenn wir jedoch unser HTML-Design betrachten, sollte es so aussehen:
Zum Anpassen verwenden wir dasselbe Verfahren, um die Vorlagenhinweise zu aktivieren und festzulegen, welche Vorlagendateien für das Rendern dieser Seite verantwortlich sind. Anschließend nehmen wir Änderungen an diesen Dateien vor:
Hier sehen Sie, dass das Gesamtlayout der Seite aus der Datei /template/checkout/cart.phtml stammt. Wir müssen es bearbeiten, um die Komponenten in die richtige Position zu bringen. Wir fügen den HTML-Code, den wir haben, in unsere HTML-Datei ein und beginnen, den Code durch den dynamischen Code zu ersetzen.
In ähnlicher Weise können wir sehen, dass die Produktzeilen aus der Datei template / checkout / cart / item / default.phtml gerendert werden. Wir müssen diese Datei auch bearbeiten. Abgesehen davon denke ich nicht, dass wir weitere Änderungen an den PHP-Dateien vornehmen müssen, da wir den Rest problemlos über CSS erledigen können.
Schauen wir uns nun die Checkout-Seite an. Es sieht aktuell so aus:
Gemäß unserem HTML-Code sollte es jedoch so aussehen:
Wiederholen Sie den gleichen Vorgang noch einmal und finden Sie heraus, welche PHP-Dateien hier geändert werden müssen. Dort sehen Sie das Hauptlayout von /template/checkout/onepage.phtml. Die Fortschrittsleiste wird mit dieser Datei gefüllt: template / checkout / onepage / progress.phtml.
Wir können Änderungen an diesen beiden Dateien vornehmen, indem wir den Code mit unserer HTML-Datei vergleichen. Nachdem Sie die Änderungen in diesen beiden Dateien vorgenommen haben, können Sie die restlichen Änderungen über CSS vornehmen. Ich glaube nicht, dass Sie für diese Seite eine andere Datei ändern müssen.
An dieser Stelle möchte ich noch einmal betonen, dass Sie die Änderungen im Standarddesign nicht vornehmen sollten. Sie sollten immer eine Kopie der zu editierenden HTML-Datei in Ihrem neuen Design erstellen und sie nur dort bearbeiten.
Wenn Sie zur Anmeldeseite wechseln, sieht es derzeit folgendermaßen aus:
Hier wiederholen wir noch einmal dieselben Schritte und aktivieren zunächst die Vorlagenhinweise:
Hier sehen Sie die Hauptdatei, die Sie bearbeiten müssen: template \ persistent / customer / form / login.phtml. Sie können den Großteil des Layouts der Seite in dieser Datei ändern. Für die Stiländerungen können Sie dies über CSS tun.
Ebenso können Sie sehen, wie Sie die Anmeldeseite bearbeiten. Zuerst aktivieren wir die Vorlagenhinweise:
Anhand von Vorlagenhinweisen können wir sehen, dass das gesamte Layout des Anmeldeabschnitts von template / persistent / customer / form / register.phtml stammt. Sie können es ändern, indem Sie diese Datei bearbeiten.
Wenn Sie bisher mitverfolgt haben, sollten Sie wahrscheinlich alle Schritte auswendig kennen. Sie können die Benutzerkontenseiten mit den gleichen Verfahren, die Sie hier gelernt haben, bearbeiten und bearbeiten.
Sie können sich jetzt formell beglückwünschen: Sie können sich selbst als Magento-Theme-Entwickler bezeichnen, weil Sie tatsächlich ein Magento-Theme entwickelt haben und alle grundlegenden Methoden und Verfahren dafür gelernt haben.
Beim Schreiben dieser Serie habe ich große Anstrengungen unternommen, um es einfach und klar zu machen, dem zu folgen. Ich hoffe, diese Serie war eine gute Lernerfahrung für Sie!
Geben Sie Ihr Feedback zu dieser Serie im Kommentarbereich ein und besuchen Sie Tuts +, um weitere nützliche Artikel zu lesen. Und vergessen Sie nicht zu sehen, welche Erweiterungen verfügbar sind, um Ihre Arbeit mit Magento zu erweitern.
Haben Sie eine tolle Lernerfahrung!
Accentsconagua