Farbschema für Kategorien

Shopware 5 Themes & Design
1

Hallo zusammen,

ich sitze gerade vor dem Problem, einzelnen Kategorien ein anderes Farbschema zuweisen zu müssen.

Zu dem Problem habe ich zwar schon einiges gefunden aber eine Lösung war letztendlich nicht dabei. Ich weiß, daß es ein Plugin dafür gibt, ich will aber versuchen, mit möglichst wenig Plugins auszukommen.

Spezielle Klassen im Body-Tag für Kategorien habe ich schon vergeben. Nachdem ich aber das ganze Farbschema ändern will, wäre es extrem aufwändig, alles via CSS-Abfragen für die entsprechenden Kategorien zu ändern.

Super wäre, wenn man Einfluß auf die all.less hätte, also im Template mit einer Abfrage für die entsprechenden Kategorien eine modifizierte less Datei laden könnte, also z.B. eine all2.less, in der dann z.B. die @brand-primary anders definiert ist, dann würde für die entsprechenden Kategorien eine extra CSS daraus erstellt werden.
Oder in der theme.php eine abweichende all.less, abhängig von der aktuellen Kategorie.

Diese Abfrage in der all.less funktioniert zwar, ist aber nicht optimal, da die resultierende CSS-Datei dann doppelt so groß wird, da alles zweimal enthalten ist.

all.less

body.cat_special
{
	@import "__special/all";
}


__special/all.less

@brand-primary: #ff0000;
@brand-primary-light: saturate(lighten(@brand-primary, 12%), 5%);
@link-color: @brand-primary;
@btn-default-hover-text-color: @brand-primary;
@btn-default-hover-border-color: @brand-primary;
@btn-primary-top-bg: @brand-primary-light;
@btn-primary-bottom-bg: @brand-primary;
@btn-primary-hover-bg: @brand-primary;
@input-focus-border: @brand-primary;

@import "mixins";
@import "components";
@import "modules";

Der Ordner '__special' ist eine Kopie vom Original-Less-Ordner aus dem Responsive-Theme, wobei die all.less oben genanntes enhält und die drei Teile (mixins, components, modules) jeweils Ordner und Datei kopiert werden müssen.

Wie gesagt, die Lösung funktioniert so zwar, ist aber nicht wirklich optimal, da in der generierten CSS-Datei alles doppelt ist. Lieber wäre mir, wenn bei der speziellen Kategorie einfach eine komplett eigene CSS generiert werden würde.

Viele Grüße und danke schon mal für jeden Hinweis

Andi

2

und wenn du in deiner theme.php einfach neue Farben definierst? dann brauchst du keine neue all.less? Oder denke ich da zu einfach?

3

Was ändert sich den bei den unterschiedlichen Kategorien, nur die “@brand-primary” oder auch noch nachfolgende Einträge?

Dann braucht du doch nur eine neue Primarfarbe laden und der Rest ergibt sich ja weil das Nachfolgende von dieser Primarfabe beeinflusst wird, weiß aber nicht ob es mit den Cache Probleme gibt.

Uwe

4

Im Prinzip ändert sich eigentlich nur der @brand-primary und alles, was darauf aufbaut, also heller, dunkler usw.

Das Problem ist aber, daß nur eine CSS-Datei aus LESS generiert wird und in LESS Variablen, wie Konstanten funktionieren, also nur einmal definiert werden können.

Ich habe es auch schon über ein Plugin versucht und hier über \Shopware\Components\Theme\LessDefinition eine neue LESS-Datei hinzuzufügen. Das funktioniert zwar, aber am Ende kommt wieder nur eine gemeinsame CSS-Datei raus.

private function registerEvents()
	{
    	$this->subscribeEvent(
    		'Theme_Compiler_Collect_Plugin_Less',
            'onCollectLessFiles'
		);
	}

	public function onCollectLessFiles(Enlight_Event_EventArgs $args)
    {
    	$pathResolver = $this->get('theme_path_resolver');
        $template = $args->getTemplate();
        $lessDir = $pathResolver->getLessDirectory($template);

        $less = new \Shopware\Components\Theme\LessDefinition(
            array(),
            array(
                $lessDir . DIRECTORY_SEPARATOR . 'all_special.less'
            ),
            $pathResolver->getPublicDirectory($template)
        );

        return new ArrayCollection(array($less));
    }

Wenn ich hier im ersten Array die brand-primary anders definiere (z.B. ‚brand-primary‘ => ‚#ff0000‘), wird das komplett für die resultierende CSS-Datei verwendet, also das Original überschrieben.

Ich weiß nicht, wie ich Shopware dazu bringen kann, mehrere CSS-Dateien zu generieren und nicht alles zusammen zu fassen. Im Theme  gibt es ja in der header.tpl den Abschnitt:

{block name="frontend_index_header_css_screen"}
{{compileLess timestamp={themeTimestamp} output="lessFiles"}}
{foreach $lessFiles as $stylesheet}
    
{/foreach}
{/block}

Super wäre, wenn aus den LESS-Dateien mehrere CSS-Dateien generiert werden würden, die man dann einzeln ausgeben kann, z.B. abhängig von der aktuellen Kategorie.

Generell bin ich ja ein großer Fan von LESS aber wenn man keinen Einfluß darauf hat, was wie generiert wird, geht viel von den Möglichkeiten verloren.

5

Du hast mehrere Möglichkeiten.

Du wechselt die Klasse (mit spezifischen Styles) also das HTML mittels Smarty oder nutzt die LESS-Guards dafür.

Ich nutze immer letzteres mit im Theme angelegten Optionen zur Steuerung.