Code: Konfigurator Optionen einfärben

Beschreibung

Hier ein kleiner Codeschnipsel der Eure Konfigurator Artikel im Frontend besser aussehen läßt. Konkret kann über die css Datei zwischen „auf Lager“, „nicht auf Lager“ und „aktuell ausgewählt“ unterschieden werden.
Am Einfachsten geht es indem man unterschiedliche Farben zuweißt.

Screenshots


Im Beispiel sind die Größen S und M noch verfügbar, L, XL und XXL nicht mehr.

Code

Wir erkläre die Lösung anhand der Datei „config_upprice.tpl“. Es gibt unterschiedliche Templates für die verschiedenen Konfiguratoren, diese Code Anpassung  müsste dann entsprechend wiederholt werden.

Das hier ist der Code der Datei „config_upprice.tpl“

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<form method="post" action="{url sArticle=$sArticle.articleID sCategory=$sArticle.categoryID}" class="upprice_config">
 
	{foreach from=$sArticle.sConfigurator item=sConfigurator}
 
		{* Group name *}
		{block name='frontend_detail_group_name'}
		<p>
			<strong>{$sConfigurator.groupname}</strong>
		</p>
		{/block}
 
		{* Group description *}
		{if $sConfigurator.groupdescription}
			{block name='frontend_detail_group_description'}
				<p class="groupdescription">{$sConfigurator.groupdescription}</p>
			{/block}
		{/if}
 
		<select name="group[{$sConfigurator.groupID}]" onChange="this.form.submit();">
			{foreach from=$sConfigurator.values item=configValue}
					<option {if $configValue.selected}selected="selected"{/if} value="{$configValue.optionID}">
						{$configValue.optionname}{if $configValue.upprice} {if $configValue.upprice > 0}{/if}{/if}
					</option>
			{/foreach}
		</select>
	{/foreach}
 
	<noscript>
		<input name="recalc" type="submit" value="{s name='DetailConfigActionSubmit'}{/s}" />
	</noscript>
</form>

1) Anpassung

Unsere Anpassung betrifft Zeile 21, sie wird ersetzt durch

1

 <option {if $configValue.selected}selected="selected"{/if} value="{$configValue.optionID}" class="{if !$configValue.selected && ($configValue.active == 0 || $configValue.instock <= 0)}not{/if}available{if $configValue.selected} selected{/if}">

Damit weisen wir den Dropdown Options verschiedene Klassen zu, basierend auf der Verfügbarkeit und diese können wir dann ganz bequem per css ansprechen.
Diese Anpassung sollte idealerweise in der eigenen Template stattfinden und nicht in der _default Template.

2) Anpassung

Nun schreibt Ihr einfach noch folgendes in Eure css Datei. Die Farben können natürlich entsprechend Euren Wünschen angepasst werden.

1
2
3
4

// Konfigurator Verfügbarkeit visualisieren
#buybox select .available {color:#000000;}
#buybox select .notavailable {color:#cccccc;}
#buybox select .selected {color:#000000;}

Et voila, notre fromage est prêt … äh fertig ist die Lösung 😉

Wir wünschen viel Erfolg beim Nachprogrammieren.

Kommentar verfassen