Farbiges Varianten-Dropdownmenü

Bei Artikeln mit Farbvarianten, z.B. bei Kleidungstücken, kann mit einer optischen Darstellung der Farben die Usability verbessert werden. Kunden finden sich mithilfe der dargestellten Farben schneller zurecht und optisch ansprechender ist es ebenfalls. Hier wird gezeigt, wie mit geringen Aufwand das OXID-eigene Varianten-Dropdownmenü mit passenden Farben ausgestattet werden kann.

Shoptemplate anpassen

Im Shoptemplate müssen die folgenden Anpassungen vorgenommen werden. Die Anpassungen sind für die Shopversionen 4.7 und 4.8 geeignet. Die Templatedatei /application/views/azure/tpl/widget/product/selectbox.tpl öffnen und folgendes suchen (ca. Zeile 10):

<span>[{$oActiveSelection->getName()}]</span>

und damit ersetzen:

<span class="[{$oActiveSelection->getName()|regex_replace:"/[^A-Za-z0-9]/":""}]">
 [{$oActiveSelection->getName()}]
</span>

Außerdem im gleichen Template folgendes suchen (ca. Zeile 34):

<li class="[{if $oSelection->isDisabled()}]js-disabled disabled[{/if}]">

und ersetzen mit:

<li class="[{if $oSelection->isDisabled()}]js-disabled disabled[{else}][{$oSelection->getName()|regex_replace:"/[^A-Za-z0-9]/":""}][{/if}]">

Nach dem Speichern sollte der tmp/smarty-Ordner geleert werden.

CSS-Klassen für die Farbdarstellung

Jeder Variante kann jetzt eine Farbe in Form einer CSS-Klasse zugeordnet werden. Die CSS-Klasse muss exakt genauso benannt werden, wie die Variante. Auch Groß- und Kleinschreibung muss beachtet werden. Umlaute, Leerstellen und Sonderzeichen aus den Variantennamen entfallen (z.B. aus dunkel-grün wird dunkelgrn). Hier ein paar Beispiele mit verschiedenen Möglichkeiten:

.White{background-color:#fff;padding:0 10px;}
.Violet{background-color:#66F;padding:0 10px;color:#fff;}
.Violet a{color:#fff;} /* Schrift weiß da dunkler Hintergrund */
.grau{background-color:#E0E0E0;padding:0 10px;}
.grn{background-color:green;padding:0 10px;

Die neuen CSS-Klassen können z.B. in der Datei /out/azure/css/oxid.css am Ende eingefügt werden. Für Templateänderungen ist die Verwendung eines Childthemes empfehlenswert.