Eigenes Theme pro Kategorie

Hallo,

wir haben folgendes Szenario in unserem Shop:

Es gibt pro Produkt eine eigene Einkaufswelt. Jedes Produkt soll in einer eigenen Kategorie liegen, so dass wir jeder Kategorie eine Einkaufswelt zuweisen können (entspricht dann einer Einkaufswelt pro Produkt).

Wird ein Produkt ausverkauft, wird es in die Kategorie “Archiv” verschoben.

Das eigentliche Problem ist jetzt aber das Theme. Jedes Produkt soll auch eine eigenes Farbschema haben, das die entsprechende Einkaufswelt färbt. Das heißt für uns aber, wir müssten pro Kategorie (und damit pro Einkaufswelt) ein eigenes Theme zuweisen … geht das irgendwie?

Alternative Idee: jede EKW hat eine ID. Diese in CSS abfangen [data-controllerurl=…] und färben?

 

EDIT: und wenn das nicht ausreicht, dann im Theme die ID dieser Kategorie im body ausgeben, z.B. <.body id=„catid{sCategoryID}“> (Sinngemäß)</.body>

@brettvormkopp‍

das ist auch der Ansatz, der mir als einziges eingefallen ist.

Problem dabei ist, dass im Theme die Farben per LESS-Variablen festgelegt werden. Es gibt eine Hand voll zentrale Farbvariablen, um schnell und zentral für jedes Produkt die Farbgestaltung ändern zu können.

Wenn ich auf die ID im Body selektieren muss, geht dies nicht mehr und ich müsste pro Produkt eigene Farbvariablen ala color_product1:#88839 anlegen…

Das wollte ich eher vermeiden.

 

Ziel war eigentlich, dass man am eigentlichen CSS-Gerüst nichts anpassen muss wenn es ein neues Produkt gibt sondern lediglich ein neues Theme auf Basis des Basis-Themes anlegt, eine Hand voll Farben anpasst und das Theme zuweist…

mhh könnte man nicht die vaiablen überschreiben, sowas wie #catid123{ @primary: red;} ? Oder eben  die LESS-Bäume klonen und es dann anwenden? Wäre jetzt nur “laut” gedacht. das müsste man mal checken.

@brettvormkopp‍

dann dürfte ich die Variablen aber nicht überschreiben denn dann sind sie in allen Produkten überschrieben…

 

Ziel ist, dass ich folgende Struktur aufbauen kann:

 

Main-CSS:

.panel {
    color: @primary-color;
    background: @secondary-color;
}

Produkt-1-CSS:

@primary-color: #009900;
@secondary-color: #999988;

Produkt-2-CSS:

@primary-color: #771100;
@secondary-color: #991100;

 

beide Einkaufswelten sind gleich aufgebaut und nutzen das gleiche Main-CSS für die Struktur und Styling. Ich möchte nur pro Produkt irgendwie die Farben austauschen. Es macht natürlich keinen Sinn, das komplette CSS pro Produkt zu klonen und dann statt zentralen Variablen wieder Farbcodes direkt zu schreiben… ich möchte das schon zentral gesteuert …

 

Gedanke war, dass wenn ich ein Theme pro Kategorie (= Produkt) hätte, die Less-Variablen des Produkt-CSS nur jeweils in das entsprechende Theme gerendert werden,  und in das andere Produkt wieder andere Less-Variablen …

hat noch jemand eine Idee?