Buttons im Menü links Farbe je nach Kategorie-Zugehörigkeit zuweisen

Hebsacker · October 27, 2010, 2:38pm

werte Gemeinde…

Seit einiger Zeit lese ich hier mit und habe auch schon viele Tips nutzen können.

Zu meinem jetzigen Problem habe ich allerdings noch keine Lösung finden können, also denke ich mal laut. Bin ich da in die richtige Richtung unterwegs?

In unserem Shop sind die Artikel in 5 Produkt-“Welten” eingeteilt, die alle eine eigene Farbe haben. Diese Farben sollen auch im Menü links aufgegriffen werden, so dass der User die direkte optische Zuordnung hat.
Eine Ansteuerung der Schriftfarbe bzw. des Buttonhintergrunds per CSS fällt aus, da man dann ja bei allen (gefühlten) 2 Milliarden Kategorien und Subkategorien jeweils mehreren Zuständen (aktiv, inaktiv, mouseover…) einen eigenen Eintrag mit der jeweiligen Cat ID machen müsste. Neue Kategorien oder Subkategorien müssten nach dem Anlegen ebenfalls jeweils mit individueller Cat ID von Hand ins CSS aufgenommen werden. Also - schlechte Idee!

Aber - jeder Kategorie kann doch ein eigenes Template zugewiesen werden. Wenn ich nun also für jede Produkt-“Welt” ein Template anlege, das auf ein ebenfalls verändertes CSS verweist, in dem die <li> Elemente entsprechend festgelegt werden, und das dann im Backend den der Produkt-“Welt” zugehörigen Kategorie zuweise - dann muss das doch klappen, oder?
Und neue Kategorien bzw Subkategorien bekommen das dann durch Zuweisung des Templates ebenfalls automatisch mit. Dann muss ich nur einmal je Produkt-“Welt” arbeiten und nicht an jeder einzelnen Kategorie.

Soweit korrekt gedacht?

Danke schonmal fürs mitdenken…

leofonic · October 27, 2010, 3:37pm

Du kannst das über die OXROOTID steuern, da steht die “Weltkategorie” drin:

[{if $ocat->oxcategories__oxrootid->value=="8a142c3e4143562a5.46426637"}] class="redlist"[{/if}]

Hebsacker · October 27, 2010, 8:20pm

Die OXROOTID steuert alle Unterkategorien mit demselben Stamm?
Dann funktioniert das nicht bei uns, bzw. spare ich mir doch nicht so viel Arbeit.

Die 5 “Welten” sind keine eigenen Kategorien, sondern werden “nur” graphisch im Header bzw. auf der Startseite mit Blöcken aufgegriffen. Wer auf eine Welt klickt landet auf einer zwischengeschalteten “Welt”-Landingpage, auf der er dann neben weitern Infos auch die einzelnen Kategorien auswählen kann.
Oder der User steigt direkt links im Menü in die gewünschte Kategorie ein, die eben durch die Farben direkt zuordenbar sind (sein sollen). Es gibt also je “Welt” einige Rootlevel-Kategorien, die sich auch mal in der Anzahl ändern, erweitern oder verringern könnten.

Ich habe mal noch weiter gesucht und nen Ansatz gefunden, so in etwa hatte ich das gedacht:
http://www.oxid-esales.com/forum/showthread.php?t=2180#post12757

Also ein Welt-Template (list.tpl) mit individuell eingebundenem Header der ein individuelles CSS aufruft in dem die Menü-<li> nach der Welt-Farbe definiert sind. Und der einzelnen Rootlevel-Kategorie dann jeweils das passende Welt-Template mitgeben.
Die Subkategorien dürften dann ja ebenfalls dieses Template ziehen denke ich, oder?
Korrekt gedacht?

leofonic · October 27, 2010, 9:28pm

Nein die Subkategorien übernehmen nicht das alternative Template, du musst wenn dann jede einzeln zuweisen. Das geht, ich finde es aber eher umständlich, ich würde die Welten als Kategorien anlegen, die Landing Pages mit alternativem Template und dann die Navi anpassen.

Hebsacker · October 28, 2010, 7:39am

hmmm…

Kann ich eigentlich den Root- (Welten-) Kategorien dann sagen, dass diese nicht im Menü erschienen sollen? Sondern nur jeweils deren erste Unterebene?

Eigentlich soll nämlich das Menü die erste Ebene der einzelnen Welten zeigen und nicht nur die 5 Welten.

Oder die erste Ebene der Untermenüs immer aufgeklappt lassen?

leofonic · October 28, 2010, 12:43pm

Gehen tut alles ;), muss man aber kräftig am Template feilen. Die Kats wären dann aber erstmal natürlich nach Welten gruppiert, was du vielleicht nicht willst. Wenn du lieber bei den Kats ein alternatives Template einträgst, würde das so gehen:

Du legst ein Template an in dem du eine Variable setzt und das list.tpl includest:

[{include file="list.tpl" altcss="yellow"}]

Im list.tpl gibst du die Variable an _header.tpl weiter (ganz hinten):

[{include file="_header.tpl" tree_path=$oView->getTreePath() titlepagesuffix=$oView->getTitlePageSuffix() altcss=$altcss}]
...

und im _header lädst du dann die alterrnative css nach der originalen wenn die Variable existiert:

<link rel="stylesheet" type="text/css" href="[{ $oViewConf->getResourceUrl() }]oxid.css">
[{if $altcss}]
<link rel="stylesheet" type="text/css" href="[{ $oViewConf->getResourceUrl() }][{$altcss}].css">
[{/if}]

in der “yellow.css” musst du dann nur die Abweichungen eintragen, weil sie nach der originalen geladen wird, werden die Einträge überschrieben:

ul.tree li a{color:yellow}

Hebsacker · October 28, 2010, 1:12pm

Kats nach Welten gruppiert wär schon in Ordnung… aber kräftig am Template feilen wollte ich eigentlich nicht. Eher mit vorhandenen Bordmitteln und geringstem Aufwand maximales Ergebnis erzielen

Und die Zeit is ja sowieso immer zu knapp…

Ich habe derweil mal getestet ein alternatives Template (mit Aufruf eines alternativem Headers in dem das alternative CSS drinsteht) den einzelnen Kategorien zuzuweisen, das funktioniert ganz gut. Wenn ich Dich richtig verstanden habe würde es genügen, mit einer zusätzlichen Variablen ein zusätzliches CSS aufzurufen in dem nur die zu ändernden Werte drin stehen?

leofonic · October 28, 2010, 1:38pm

[QUOTE=Hebsacker;42897]Wenn ich Dich richtig verstanden habe würde es genügen, mit einer zusätzlichen Variablen ein zusätzliches CSS aufzurufen in dem nur die zu ändernden Werte drin stehen?[/QUOTE]
Ja genau, hat halt den Vorteil dass man nichts doppelt pflegen muss. Das alternative Template besteht dann nur aus der einen Zeile, und im alternativen css stehen nur die geänderten Werte.

Hebsacker · October 28, 2010, 1:45pm

allrighty then!

Danke fürs mitdenken / tippgeben!

Ich geh dann mal was arbeiten…

Hebsacker · October 29, 2010, 9:42am

…soweit so gut (schlecht…)

Das Zuweisen des individuellen CSS über alt. Template und Variable im _head funktioniert wie zu erwarten problemlos.

Allerdings wird dann bei Aufruf der Kategorie mit dem veränderten CSS das komplette linke Menü (also alle Welten) mit den veränderten Farben der einen Welt umgestaltet. Das war ja so nicht im Sinne des Erfinders…

Also werde ich wohl nun doch die Welten als Root-Kategorien anlegen, die entsprechenden Unterkategorien dort neu anlegen und denen dann über OXROOTID ein eigenes CSS zuweisen. Und die erste Unterkategorieebene immer ausgeklappt lassen.

Ansonsten würde ich ja dann wieder nur die Möglichkeit haben, den einzelnen Kategorien über deren individuelle ID einzelne CSS zuzuweisen, oder?

leofonic · October 29, 2010, 11:16am

Genau das ist mir auch aufgefallen.
Das Problem ist dass du eine Unterscheidungsmöglichkeit pro Link haben musst, eine alternative css bringt dich da nicht weiter. Eine css-Anweisung pro Kategorie würde ich ausschließen, bleibt die Idee mit oxrootid oder du nimmst ein anderes Kriterium dafür her.

Eine Idee wäre, du trägst das alternative Template ein, aktivierst mude_lazyloading (findest du bei Google), dann kannst du im Template mit

[{$ocat->oxcategories__oxtemplate->rawValue}]

den Wert abfragen und eine css-Klasse setzen.

Hebsacker · October 29, 2010, 11:30am

Mir ist noch was aufgefallen: Das alternative Template wird erst gezogen, wenn die jeweilige Kategorie angeklickt wird, also aktiv ist. Die den Welten zugehörigen Kategorien sollen aber immer in den jeweiligen Farben dargestellt werden. Also ist der Ansatz mit den Welten als Rootkategorie und Zuweisung von CSS per OXROOTID für mich dann genau der richtige.
Nur die Sache mit der immer ausgeklappten ersten Subkategorie…
Die Einstellung “aktive Kategorie beim Start” im Backend kann nur eine einzige Kategorie ausklappen. Wo wird das denn gesteuert? Kann ich da in den Code dann eventuell reinschreiben, dass alle Rootkategorien ihre erste Ebene ausklappen sollen? Und zwar immer? Und nur die erste?

Im alten Forum hab ich mal nen halben Ansatz dafür gefunden, die Hauptkategorien auszublenden und die erste Subebene immer anzuzeigen, leider nicht bis zum Ende beschrieben, hatte wohl aber funktioniert. Ausblenden müsste ich ja gar nicht, mir würde schon genügen, dass die erste Subkategorie immer ausgeklappt ist.

Weis da jemand was?

leofonic · October 29, 2010, 4:12pm

Der Baum wird in core/oxcategorylist.php aufgebaut, aber das ist etwas schwer durchschaubar.
Bei meinem Vorschlag aus dem letzten Post mit alternativem Template macht es nichts, dass das Template erst gezogen wird, wenn die Kategorie aufgerufen wird, weil das Template selbst gar nichts macht, sondern einfach der Wert ausgelesen wird der für die Kategorie eingetragen ist. Das geht auch für jeden Link ohne dass die Kategorie aufgerufen wird.

Hebsacker · November 10, 2010, 7:20pm

Ich muss mir über Plan B Gedanken machen, falls die Navigationsdarstellung nicht so klappt wie ich mir das vorstelle…

[QUOTE=leofonic;42828]Du kannst das über die OXROOTID steuern, da steht die “Weltkategorie” drin:

[{if $ocat->oxcategories__oxrootid->value=="8a142c3e4143562a5.46426637"}] class="redlist"[{/if}]

[/QUOTE]

Diese Klassenzuweisung über OXROOTID, funktioniert die eigentlich auch mit der individuellen Kategorie-ID? Wie müsste ich diese dann ansteuern?

Und wo sollte ich diese Zuweisung dann einbinden? category_tree.tpl?
Überschreibt das die vorangegangenen Klassenzuweisungen oder werden die ergänzt?

Hebsacker · November 21, 2010, 7:44pm

aaaalsooo…

Ich hab jetzt ne mörder Fleissarbeit hinter mir und den einzelnen Welten ein eigenes Template gebastelt, eigene CSS geschrieben, eigene Hintergründe angelegt usw…

Die habe ich dann wie oben schon beschrieben via “altcss” - Prüfung eingebunden. Funktioniert soweit ja auch, kein Problem…

…bis ich dann auf der Detailseite der Artikel ankomme. Da wird das Standard-CSS gezogen.
Daraufhin hab ich mir das details.tpl mal angesehen und nichts auffälliges gefunden. Das _header.tpl wird ja mit eingebunden, demnach ja eigentlich auch die “altcss” Anweisung, oder? Macht er aber leider nicht…

Hebsacker · November 24, 2010, 9:44pm

Ich hab noch was versucht, aber geht leider auch nicht:

ein eigenes details_outdoor.tpl hinterlegt, folgender Inhalt:
[{include file=“details.tpl” altcss=“outdoor”}]

Im details.tpl wird ja das _header.tpl (mit der if-altcss-Abfrage bezüglich des geänderten css) integriert.
Bei den list.tpl macht er das ja auch einwandfrei und nutzt das geänderte css, aber beim details.tpl macht er das nicht und verwendet das oxid.css

Warum nur liest er das neue css nicht aus?

auch ein erneutes Einfügen der if-altcss-Abfrage im details.tpl bringt keinen Effekt…

Hat mir jemand einen Tip?

(ja, Cache geleert…)

Hebsacker · November 25, 2010, 9:57am

Update:

wenn ich die css-Anweisung auf das alternative css hart in das individuelle Template schreibe, dann wird das gezogen.
Also:
<link rel=“stylesheet” type=“text/css” href=“http://oxid-ce.mein-shop.de/out/basic/src/alternatives.css”>

Weshalb macht er das aber nicht mit der if-Abfrage?

leofonic · November 25, 2010, 4:27pm

Was willst du denn jetzt genau lösen und wie? Ich denke du hast 2 unterschiedliche Problemstellungen:

Die Links in der Navi einfärben
Das Design wechseln je nach aktuell gewählter Kategorie

Für beides benötigst du einen “Schalter” bei den Kategorien (Ich nehme an du willst nicht bei jedem Artikel einzeln ein alternatives Template eintragen). Der Schalter kann die oxrootid sein oder z.B. ein alternatives Template welches bei der Kategorie eingetragen ist.

Für Problem Nummer 1 musst du in der Schleife die die Links erzeugt jeweils die gerade erzeugte Kategorie prüfen und entsprechend direkt im Link eine Style-Anweisung oder -Klasse setzen.

Für Problem Nummer 2: Wenn du für die Kategorie-Übersichtsseite und die Artikel der Kategorie ein zusätzliches css laden willst, kannst du mit $oView->getActCategory() die aktuelle Kategorie holen, und dann prüfen ob dort der Schalter gesetzt ist.

Für die Lösung mit eingetragenem alternativen Template würde das z.B. so aussehen:

    [{assign var="ocat" value=$oView->getActCategory()}]
    [{if $ocat->oxcategories__oxtemplate->rawValue=="yellow.tpl"}]
    <link rel="stylesheet" type="text/css" href="[{ $oViewConf->getResourceUrl() }]yellow.css">
    [{/if}]

Hebsacker · November 29, 2010, 9:57pm

ähm, genau!
sonst schreib ich mir ja die Finger wund…

Also wenn ich diese Prüfung und Zuweisung in die details.tpl lege, dann kann ich das alternative css zuweisen?
Die list.tpl ist ja schon je nach Welt eine andere, da dies in den Kategorien hinterlegt wurde. Nur muss ich dann eben 5 Alternativen abfragen und jeweils ein anderes css zuweisen.

So dann richtig?

[{assign var="ocat" value=$oView->getActCategory()}]

    [{if $ocat->oxcategories__oxtemplate->rawValue=="yellow.tpl"}]
    <link rel="stylesheet" type="text/css" href="[{ $oViewConf->getResourceUrl() }]yellow.css">
    [{/if}]

    [{if $ocat->oxcategories__oxtemplate->rawValue=="red.tpl"}]
    <link rel="stylesheet" type="text/css" href="[{ $oViewConf->getResourceUrl() }]red.css">
    [{/if}]

    [{if $ocat->oxcategories__oxtemplate->rawValue=="green.tpl"}]
    <link rel="stylesheet" type="text/css" href="[{ $oViewConf->getResourceUrl() }]green.css">
    [{/if}]
   .
   .
   .

Edit: perfekt, danke!

Roschu · December 17, 2012, 7:05pm

Hallo und Entschuldigung, dass ich den alten Beitrag nochmal rauskrame aber bei mir klappt das nicht und ich weiss nicht warum.

Folgendes möchte ich machen:
Ich habe 3 Kategorien, denen ich jeweils ein unterschiedliches Design zuweisen möchte. Dabei handelt es sich eigentlich nur um ein paar Farben und unterschiedliche Hintergrundbilder.
Habe die list.tlp 3xkopiert, mit den jeweiligen Kategorienamen versehen und bei “alternatives Template” im Backend zugewiesen. Die verschiedenen .tpl werden gezogen (Hab einfach Dummy-Text geschrieben und der wurde angezeigt). Nun wollte ich - wie hier beschrieben - das .css schalten.
Deshalb habe ich 3 css erstellt; mit den jeweiligen Änderungen vesehen.
Die Abfrage


[{assign var="ocat" value=$oView->getActCategory()}]
    [{if $ocat->oxcategories__oxtemplate->rawValue=="yellow.tpl"}]
    <link rel="stylesheet" type="text/css" href="[{ $oViewConf->getResourceUrl() }]yellow.css">
    [{/if}]

habe ich - mit meinen Namen natürlich umbenannt - in die neuen list.tpl oben eingefügt. Leider wird das css nicht gezogen. Gehört die Abfrage wirklich in die list.tpl?

Vielen Dank im Voraus,

Roland