Here you go,
wie gesagt, am Beispiel
/templates/tpl_modified/module/product_options/table_listing.html:
{if $options != ''}{config_load
file="$language/lang_$language.conf" section
="product_info"}{config_load
file="lang_`$language`.custom"}{config_load
file="lang_`$language`.section" section
="product_info"}<div
class="productoptions"> {foreach name
=outer item
=options_data from
=$options} <div
class="options_row_selection"> <div
class="options_name">{$options_data.NAME
}</div
> {foreach key=key_data name
=key_data item
=item_data from
=$options_data.DATA
} <div
class="options_selection {cycle values="option_bg1
,option_bg2
"}"> <label
for="rdb_{$item_data.ID}"{* title
="{$thetitle}"*}> <span
class="label_row1 cf"> <span
class="options_selection_input"><input type
="radio" name
="id[{$options_data.ID}]" id
="rdb_{$item_data.ID}" value
="{$item_data.ID}"{if $item_data.CHECKED
== '1'} checked
="checked"{/if} /></span
> <span
class="options_selection_text">{$item_data.TEXT
}</span
> {if $item_data.FULL_PRICE
&& $options|count == 1} <span
class="options_selection_price">{$item_data.FULL_PRICE
}</span
>{elseif $item_data.PRICE
}<span
class="options_selection_price">{$item_data.PREFIX
}{$item_data.PRICE
}</span
> {/if} </span
> <span
class="label_row2 cf"> {#model#} {$item_data.MODEL}
{*BOC qty traffic light
, noRiddle
*} <span
class="traff-light"><strong
>{#nr_stock#}:</strong>
{if $item_data.STOCK
< #nr_stock_red_yell#}
<span aria
-label
="{#nr_qty_red#} | {$item_data.STOCK}" title
="{#nr_qty_red#} | {$item_data.STOCK}"><span
class="tl red-tl"></span
><span
class="tl red-tl"></span
><span
class="tl red-tl"></span
></span
> {elseif $item_data.STOCK
>= #nr_stock_red_yell# && $item_data.STOCK < #nr_stock_green#}
<span aria
-label
="{#nr_qty_yell#} | {$item_data.STOCK}" title
="{#nr_qty_yell#} | {$item_data.STOCK}"><span
class="tl yell-tl"></span
><span
class="tl yell-tl"></span
><span
class="tl yell-tl"></span
></span
> {elseif $item_data.STOCK
>= #nr_stock_green#}
<span aria
-label
="{#nr_qty_green#} | {$item_data.STOCK}" title
="{#nr_qty_green#} | {$item_data.STOCK}"><span
class="tl green-tl"></span
><span
class="tl green-tl"></span
><span
class="tl green-tl"></span
></span
> {/if} </span
> {*EOC qty traffic light
, noRiddle
*} <br
class="clearfix" /> </span
> {*BOC tooltip with stock info
, noRiddle
*} {if $item_data.STOCK
< #nr_stock_red_yell#}
<span
class="nr-tooltip red-tl" aria
-label
="{#nr_stock#}">{#nr_qty_red#} | {$item_data.STOCK}</span>
{elseif $item_data.STOCK
>= #nr_stock_red_yell# && $item_data.STOCK < #nr_stock_green#}
<span
class="nr-tooltip yell-tl" aria
-label
="{#nr_stock#}">{#nr_qty_yell#} | {$item_data.STOCK}</span>
{elseif $item_data.STOCK
>= #nr_stock_green#}
<span
class="nr-tooltip green-tl" aria
-label
="{#nr_stock#}">{#nr_qty_green#} | {$item_data.STOCK}</span>
{/if} {*EOC tooltip with stock info
, noRiddle
*} </label
> </div
> {/foreach} </div
> {/foreach}</div
>{/if} In
/templates/tpl_modified/module/product_options/product_options_selection.html kann es ähnlich gemacht werden (dafür muß das unten angegebene CSS aber leicht angepasst werden):
{if $options != ''}{config_load
file="lang_`$language`.custom"} {*added
for stock traffic lights
, noRiddle
*}<div
class="productoptions"> {foreach name
=outer item
=options_data from
=$options} <div
class="options_row_selection"> <div
class="options_name">{$options_data.NAME
}</div
> {foreach key=key_data name
=key_data item
=item_data from
=$options_data.DATA
} <div
class="options_selection"> <label
for="rdb_{$item_data.ID}"> <input type
="radio" name
="id[{$options_data.ID}]" id
="rdb_{$item_data.ID}" value
="{$item_data.ID}"{if $item_data.CHECKED
== '1'} checked
="checked"{/if} /> {$item_data.TEXT
} {*BOC qty traffic light
, noRiddle
*} <span
class="traff-light"><strong
>{#nr_stock#}:</strong>
{if $item_data.STOCK
< #nr_stock_red_yell#}
<span aria
-label
="{#nr_qty_red#} | {$item_data.STOCK}" title
="{#nr_qty_red#} | {$item_data.STOCK}"><span
class="tl red-tl"></span
><span
class="tl red-tl"></span
><span
class="tl red-tl"></span
></span
> {elseif $item_data.STOCK
>= #nr_stock_red_yell# && $item_data.STOCK < #nr_stock_green#}
<span aria
-label
="{#nr_qty_yell#} | {$item_data.STOCK}" title
="{#nr_qty_yell#} | {$item_data.STOCK}"><span
class="tl yell-tl"></span
><span
class="tl yell-tl"></span
><span
class="tl yell-tl"></span
></span
> {elseif $item_data.STOCK
>= #nr_stock_green#}
<span aria
-label
="{#nr_qty_green#} | {$item_data.STOCK}" title
="{#nr_qty_green#} | {$item_data.STOCK}"><span
class="tl green-tl"></span
><span
class="tl green-tl"></span
><span
class="tl green-tl"></span
></span
> {/if} </span
> {*EOC qty traffic light
, noRiddle
*} {if $item_data.PRICE
!= '' } <span
class="options_selection_price">{$item_data.PREFIX
} {$item_data.PRICE
}</span
> {/if} {if $item_data.STOCK
< #nr_stock_red_yell#}
<span
class="nr-tooltip red-tl" aria
-label
="{#nr_stock#}">{#nr_qty_red#} | {$item_data.STOCK}</span>
{elseif $item_data.STOCK
>= #nr_stock_red_yell# && $item_data.STOCK < #nr_stock_green#}
<span
class="nr-tooltip yell-tl" aria
-label
="{#nr_stock#}">{#nr_qty_yell#} | {$item_data.STOCK}</span>
{elseif $item_data.STOCK
>= #nr_stock_green#}
<span
class="nr-tooltip green-tl" aria
-label
="{#nr_stock#}">{#nr_qty_green#} | {$item_data.STOCK}</span>
{/if} <br
class="clearfix" /> </label
> </div
> {/foreach} </div
> {/foreach}</div
>{/if} CSS:(in den Kommentaren stehen Hinweise)
.options_row_selection .options_selection label {
...
position:relative; /*hinzufügen*/
}
.options_row_selection .options_selection label .options_selection_price {
...
/*padding-right:2px;*/ /*ersetzen mit s.u.*/
padding-right:40px; /*ersetzt, ist für product_options_selection.html*/
}
.options_row_selection .options_selection label .label_row2 {
/*display:inline-block;*/ /*ersetzen mit s.u.*/
display:block; /*ersetzt*/
...
}
/*BOC qty traffic lights, noRiddle*/
.traff-light {float:right;}
.options_row_selection .options_selection label .label_row2 .traff-light {padding-right:2px; font-style:normal;}
.options_row_selection .options_selection label .label_row1 .options_selection_price {padding-right:2px;}
.tl {display:inline-block; margin:0 1px; width:8px; height:8px; border-radius:50%;}
.red-tl {background:#A20000;}
.yell-tl {background:#AAA905;}
.green-tl {background:#116C10;}
/*BOC tooltip with stock*/
.options_row_selection .options_selection label .nr-tooltip {
position:absolute;
top:45%;
right:90%;
visibilty:hidden;
font-size:12px;
color:#fff;
padding:0 5px;
border-radius:5px;
white-space:nowrap;
opacity:0;
z-index:1;
transition:right 0.6s ease 0.1s, opacity 1s ease 0.1s;
}
html:not(.touch) .options_row_selection .options_selection label:hover .nr-tooltip {
right:30%;
visibilty:visible;
opacity:1;
}
/*EOC tooltip with stock*/
/*EOC qty traffic lights, noRiddle*/
Als Ansatz für Touchgeräte die ja Mouseover bzw.
:hover nicht oder nur eingeschränkt kennen:
In
/templates/tpl_modified/javascript/general_bottom.js.php direkt unter dem Anfangskommentar:
?>
<script>
/*<![CDATA[*/
with(document.documentElement){className += 'js'}
if (('ontouchstart' in document.documentElement)) {document.documentElement.className += ' touch';} else {document.documentElement.className += ' no-touch';}
/*]]>*/
</script>
<?php
Damit werden dem Root-Elelment des HTML (also
<html) bei aktiviertem Javascript die Klassen
js und
no-touch, bei Touch-Geräten anstelle von
no-touch die Klasse
touch vergeben.
Die Klassen kann man auch gut im CSS verwenden um Fallbacks für Touch-Geräte und deaktiviertes Javascript zu definieren.
(z.B.:
html:not(.js) ... {...}
html:not(.touch) ... {...}
html.touch ... {...}
html.no-touch ... {...}
)
Nachteil:
Wenn im Desktop-Browser Javascript deaktiviert ist greift die letzte Angabe nicht,
die ersten beiden greifen jedoch immer da auf Touch-Geräten Javascript immer aktiviert ist.
In derselben Datei
/templates/tpl_modified/javascript/general_bottom.js.phpunten innerhalb des Bereiches
<?php if (strstr($PHP_SELF, FILENAME_PRODUCT_INFO
)) { ?><?php } ?> so etwas in der Art einfügen:
<script>
$(function() {
var $osl = $('.touch .options_selection label');
$osl.click(function() {
var $this = $(this);
$('.nr-tooltip', this).animate({'right':'30%', 'opacity':1}, 200, function() {
$this.parent().siblings().find('.nr-tooltip').css({'right':'90%','opacity':'0'});
});
});
});
</script>
Die Werte für '
right' und '
opacity' sollten mit den CSS-Angaben übereinstimmen.
Nachteil, wie auch in der CSS-Variante für Desktop:
Die bereits ausgewählte Option wird evtl. nicht angeklickt (ge-mouseover-t) wenn man diese Option wählen möchte, sodaß die Info nicht erscheint, aber das kann man vernachlässigen.
Das Ganze könnte man auch in ein Plugin bauen wie es
awids angekündigt und mangels positiver Resonanz nicht zu Ende geführt hatte.
Gruß,
noRiddle
*NACHTRAG*
Der Vollständigkeit halber:
Es fehlen noch die Angaben in den
/templates/tpl_modified/lang/lang_SPRACHE.custom, hier am Beispiel 'german':
#BOC new vars for qty traffic lights, noRiddle
nr_stock = 'Bestand'
nr_qty_red = 'nicht auf Lager'
nr_qty_yell = 'wenige auf Lager'
nr_qty_green = 'auf Lager'
nr_stock_red_yell = 2
nr_stock_green = 5
#EOC new vars for qty traffic lights, noRiddle
In Englisch dann analog: 'Stock', 'not on stock', 'few on stock', 'on stock'.
