Artikelgruppen & Farbanpassung

In diesem Tutorial geht es darum, für jede Hauptartikelgruppe eine eigenes Farblayout verwenden zu können.

Beispiele aus Liveshops:
- http://www.baby-walz.de
- http://www.otto.de
- http://www.mytoys.de
- http://www.christiani.de

Die Basis für die Umsetzung ist eigentlich recht simpel und einfach umzusetzen. Die Hauptarbeit liegt in der Erstellung der Farbanpassungs-Dateien - also CSS und Bilddaten.

Die Idee - von der ausgewählten Artikelgruppe die Hauptartikelgruppe (Level 0) ermitteln und dann eine CSS-Datei zur Hauptartikelgruppe einbinden. Wenn keine Artikelgruppe ausgewählt ist, wird das Theme ohne Farbanpassung angezeigt. Dann erweitern wir die Navigationselemente mit einer ID als Selektoren. Für diese können wir dann eigene CSS-Definitonen erstellen.

Hier als Beispiel in unserem Demoshop: http://shop.mxperts.de/

Programmierung:

1. Fügen Sie folgenden Code nach <?php echo $this->getCssJsHtml() ?> in die Datei app/design/frontend/default/[ihr_theme]/template/page/html/head.phtml ein.

   <!-- Categories-CSS BEGIN -->
   <?php
     $root_id = Mage::app()->getStore()->getRootCategoryId();
     $main_id = 0; $last_id = 0;
     $cat = Mage::getBlockSingleton('catalog/navigation')->getCurrentCategory(); 
   
     if (($cat != NULL) && ($root_id != $cat->entity_id)) {
       while ( ($cat != NULL) && ($cat->entity_id > 0) && ((int)$main_id != (int)$root_id) ) {
         $last_id = $main_id;
         if ((int)$main_id != (int)$root_id) {
           $main_id = $cat->entity_id;
           $cat = $cat->getParentCategory();
         }
       }
     }
     echo '<div style="font-size:0.75em;padding:0;margin:0;background-color:black;color:white;">Main categories-id: <strong>'.$last_id.'</strong></div>';
     $css = $this->getSkinUrl('css').'/'.trim($last_id).'.css';
     $cssfile = str_replace("http://".$_SERVER['SERVER_NAME']."/", "",$css);
     if (file_exists($cssfile)) {
   ?>
   
     <link rel="stylesheet" type="text/css" href="<?php echo $css; ?>" media="all" />
   <?php } ?>
   <!-- Categories-CSS END -->
   

2. Öffnen Sie die Datei <strong>app/code/core/Mage/Catalog/Block/Navigation.php
   Suchen Sie nach: $html.= ‘ class=”level’.$level;
   Fügen Sie davor folgenden Code ein:

           $html.= ' id="category_id_'.$category->getEntityId();
           if ($this->isCategoryActive($category)) {
               $html.= '_active';
           }
           $html.= '" ';
   

Ich habe in der head.phtml die Ausgabe der ID integriert, und nun müssen Sie für jede Haupt-Artikelgruppe eine CSS-Datei erstellen. Im Beispielshop von Magento ist das:
- Furniture, ID=10, 10.css
- Electronics, ID=13, 13.css
- Apparel, ID=18, 18.css
Die CSS-Dateien kopieren Sie in skin/frontend/default/[Ihr Theme]/css

Zur Veranschaulichung habe ich die 2 Bilder nav_bg.jpg und main_bg.gif angepasst sowie den Border der Klasse .header. Die Bilder habe ich in jeweils getrennte Verezeichnisse kopiert.
- images\categories\10\
- images\categories\13\
- images\categories\18\

Das war es eigentlich schon. Wer es nun noch perfektionieren möchte, der kann anstatt die Core-Datei zu überschreiben ein eigenes Modul erstellen und die Klasse überladen.

Hier gibts alle Files zum Download: cat_colors.zip

Ich wünsche viel Spaß beim dekorieren

Johannes Teitge

12 Kommentare to “Artikelgruppen & Farbanpassung”

1. ds_1984 sagt:

   6. Juni 2009 um 21:28

   Klasse Tutorial! Darauf hat wirklich die Welt gewartet

   Ich werde das nun mal versuchen in das Blue-Skin, modern Theme usw. rein zu basteln - da ich das default Theme mit default Skin hasse wie die Pest.

   Aber es bietet sich natürlich für das Tutorial an und ist dafür ideal geeignet wegen der langen Grafik oben.

   Vielen Dank!
   Daniel

   Zum Antworten anmelden
2. Brigtte sagt:

   8. Juni 2009 um 20:15

   Ja, ich danke auch recht herzlich, so was wollte ich schon lange haben, und hätte es nie alleine auf die Beine bekommen.

   Nochmals

   Vielen Dank

   Brigitte

   Zum Antworten anmelden
3. uli schaefer sagt:

   15. Juni 2009 um 14:25

   Hallo zusammen,
   ich finde den Ansatz mit der farbigen Navigation richtig schick. Leider fehlt mir das KnowHow, es richtig umzusetzen (Bin gerade angefangen mit Magento).
   Ich wuerde gerne den Hintergrund der Kategoriebeschriftung ebenfalls in der entsprechenden Farbe darstellen (so wie im MX Demo Shop) und die kleine Bezeichnung der Kategorie ueber dem Header weg haben. Waere fuer einen kleinen Tipp dankbar.

   Zum Antworten anmelden
   • Johannes Teitge sagt:

     15. Juni 2009 um 23:14

     Über die ID CSS-Dateien kann man nun alle Werte aus der Default-CSS überschreiben. Falls es nicht klappen sollte helfe ich gerne. Einfach eine E-Mail an teitge@tmedia.de senden.

     Zum Antworten anmelden
4. Joachim Richter sagt:

   16. Juni 2009 um 11:14

   Hi Johannes,
   ich hoffe dies ist keine zu blöde Frage. Bei einem Update von Magento, werden die Änderungen doch überschrieben, welche Möglichkeit haben wir denn das zu verhindern

   gruss

   Joe

   Zum Antworten anmelden
   • Johannes Teitge sagt:

     16. Juni 2009 um 12:20

     Hallo Joe,
     deine Frage ist natürlich sehr allgemein gehalten. Im Prinzip muss man darauf achten, dass man keine Core-Files verändert und für den eigenen Shop ein eigenes Interface/Theme erstellt. Weitere Infos dazu im Designer’s Guide: how-magento-builds-content
     Bei der Veränderungen oder Erweiterung von Funktionen sollte man eigene Module verwenden.
     Beispiel:
     Man möchte die Navigation um eine eigene Funktion erweitern? Dann sucht man die dafür zuständige Klasse entweder über eine Desktopsuche (Z.B. FileExpress) oder aber in der technischen Doku von Magento.
     Die für uns wichtige Klasse wäre Mage_Catalog_Block_Navigation die wir über ein Modul erweitern.

     
< ?php
class Mxperts_Catalog_Block_Navigation extends Mage_Catalog_Block_Navigation
{
public function EigeneFunktion($parameter, ...) {

     ...

     }
}

     Ein detailiertes Beispiel findet man in unserem Tutorial Magentonavigation als TreeView

     Wenn man bei Magento anfängt “Quick & Dirty” zu arbeiten, ist es auf den ersten Blick zeitlich und finanziell ein Vorteil. Aber die Quittung erhältt man beim nächsten Update - das hast Du ja schon bemerkt.

     Ich hoffe das hilft Dir weiter.

     Viele Grüße
     Johannes Teitge

     Zum Antworten anmelden
5. OrinocoDelta sagt:

   17. Juni 2009 um 16:33

   Huhu, Daniel hast Du schon die passenden Veränderungen für das Modern bzw. Blue Theme realisiert???

   Die Farbanpassung reißt nämlich das Design aus den Fugen ;-(
   Wäre nett wenn Du da vielleicht eine Lösung aufzeigen würdest…

   Oder anders gesagt ein Modul für das Ganze wäre übergeordnet natürlich nicht schlecht

   Und noch zu der Seite hier ansich;

   TOP Infos
   TOP HILFE!
   Note 1A ++++++++++++++

   Zum Antworten anmelden
6. andreas sagt:

   17. Juni 2009 um 18:41

   Hallo,

   imo ist in der head.phtml noch der Fehlerteufel drinn bei der Abfrage, wenn eine Datei existiert, dann CSS Datei anzeigen. Hab diese Abfrage nun einfach herausgelöscht, nachdem funktioniert es bei mir. Als nächstest versuch ich (obs mir als Magento Neuling gelingt ist die andere Frage ) ein Modul zu schreiben das die Funktion “drawItem($category, $level=0, $last=false)” überschreibt.

   Denkt drann [img]http://phoxis.files.wordpress.com/2009/05/23wofh1-jpg.png[/img]

   P.S. Das Einloggen über den Footerlink “Login” scheinte bei mir nicht zu funktionieren, konnte mich nur über den direkten Link “http://www.mxperts.de/wp-login.php” einloggen.

   Zum Antworten anmelden
7. Johannes Teitge sagt:

   17. Juni 2009 um 18:52

   Gib mal die Variable $cssfile aus. Eventuell musst du da Anpassungen vornehmen.

   echo $cssfile und dann überprüfen. Bei mir hat das ganz gut geklappt.

   Zum Antworten anmelden
8. andreas sagt:

   17. Juni 2009 um 20:09

   Hallo Johannes,

   wie geschrieben, an der $cssfile liegt es nicht, nur an der Abfrage “ob eine CSS Datei vorhanden ist”. (und diese Abfrage ist in meinen Fall nicht notwendig, deshalb hab ich sie schlichtweg rausgelöscht, danach hat es funktioniert)

   Könnte man vielleicht das ReCaptcha für eingeloggte User abschalten? Vielleicht wäre es auch gut, wenn eingeloggte User Ihren Inhalt editieren könnten?

   Zum Antworten anmelden
9. OrinocoDelta sagt:

   19. Juni 2009 um 13:40

   Hallo nochmal ,-)

   also im Modern Theme habe ich bisher noch keinen Erfolg gehabt; das Design wird zerissen - ich kriegs einfach nicht hin ;-(

   Dann habe ich mir überlegt einfach mal eine neue Installation der 1.3.2.1 zu machen und das ganz mal im Standard Theme zu probieren.

   Auch hier sieht das ganze nicht so aus wie auf http://shop.mxperts.de

   Was mache ich evtl. falsch oder hat sich in der aktuellen Magento soviel geändert, dass das Tutorial hier nicht funktioniert…

   Anbei mal ein Screenshot, alles geht bis das die Kategorien auch farblich unterlegt sind…

   http://skitch.com/orinocodelta/bw3yp/furniture

   Zum Antworten anmelden
10. andreas sagt:

    20. Juni 2009 um 00:37

    Hallo OrinocoDelta,

    hast Du Dir meine Kommentare durchgelesen? Falls ja und Dus trotzdem nicht hinbekommst, einfach Zeile 19 und 23 in der Datei head.phtml löschen (Zeilen lt. Webeditoranzeige auf dieser Seite)

    Zum Antworten anmelden