Freut mich wenn es funktioniert, ich muss allerdings dazu sagen, dass der Code im Wesentliche dem entspricht den greenhorn im
Beitrag #4 bereits gepostet hat.
Beim Ausprobieren des Codes sind mir aber einige Sachen aufgefallen die wie ich finde bereinigt werden müssen.
1. Beim dekrementieren geht es bis Null runter, dies ist unschön weil die Mindestmenge die vernünftigerweise in den Warenkorb gelegt werden soll ja Eins ist.
2. In das Mengeneingabefeld kann man ja auch manuelle Eingaben machen und dabei ist es auch möglich ausser positiven Ganzzahlen z.B. unsinnige Floats oder Buchstaben einzutragen aber solche Eingaben werden durch nachträgliches klicken auf + oder - durch ein 'NaN' im Eingabefeld beantwortet.
3.Es existiert kein Fallback für Shop-Besucher in deren Browser JavaScript deaktiviert ist.
Hier nun eine verbesserte Version des Codes aus meinem letzten
Beitrag #7 bei der die drei oben erwähnten Schwachstellen bereinigt sind, ausserdem habe ich noch ein Stück CSS-Code beigefügt, damit + und - als Buttons zur Geltung kommen, passend zum xtc5-Template.
Suche in '/templates/xtc5/module/product_info/product_info_tabs_v1.html' (oder in der verwendeten 'product_info' HTML-Datei)
{$ADD_QTY}
und füge unmittelbar davor (inerhalb des selben <td></td>-Tag’s) folgenden Code ein
<script type="text/javascript">
/* <![CDATA[ */
{literal}
$(document).ready(function(){
$("input[name='products_qty']").before('<a id="inc" class="btn-plus">+</a> ').after(' <a id="dec" class="btn-minus">–</a>');
$("#inc, #dec").click(function() {
var oldValue = parseInt($(this).parent().find("input[name='products_qty']").val());
if ($(this).attr("id") == "inc") {
if (oldValue > 0) {
var newVal = oldValue + 1;
} else {
newVal = 1;
}
} else {
// Don't allow decrementing below 1
if (oldValue > 1) {
var newVal = oldValue - 1;
} else {
newVal = 1;
}
}
$(this).parent().find("input[name='products_qty']").val(newVal);
});
});
{/literal}
/*]]>*/
</script>
Alternativ kann man obigen Code auch in die '/templates/xtc5/javascript/general.js.php' einbauen, so wie es eXcite in seinem
Beitrag #8 gezeigt hat, dann muss man allerdings die Smarty-Tag’s '{literal}{/literal}' entfernen.
1. alternativer JavaScript Code:[...]
<script type="text/javascript">
/* <![CDATA[ */
var quantity = parseInt({$PRODUCTS_QUANTITY});
{literal}
$(document).ready(function(){
var item = $("input[name='products_qty']");
item.before('<a id="inc" class="btn-plus">+</a> ').after(' <a id="dec" class="btn-minus">–</a>');
$("#inc, #dec").click(function() {
var oldVal = parseInt($(this).parent().find("input[name='products_qty']").val());
if ($(this).attr("id") == "inc") {
var newVal = (oldVal > 0 ? (oldVal + (oldVal < quantity ? 1 : 0)) : 1);
} else {
var newVal = (oldVal > 1 ? (oldVal - 1) : 1);
}
$(this).parent().find("input[name='products_qty']").val(newVal);
});
item.focusout(function() {
var val = parseInt($(this).val());
if (val > quantity) {
$(this).val(quantity);
} else if (!val || val < 1) {
$(this).val(1);
}
});
});
{/literal}
/*]]>*/
</script>
1. Plus Button zählt nur bis Lagermenge hoch.
2. Wenn man "händisch" zu viel einträgt, wird automatisch auf die Lagermenge reduziert.
3. Wenn man "händisch" 0 einträgt, wird automatisch 1 gesetzt.
[...]
2. alternativer JavaScript Code:[...]
hier noch eine Idee, bei der wird das Mengeneingabefeld für die manuelle Eingabe gesperrt, die Menge kann also nur mit den Plus-/Minus-Buttons geändert werden, die Obergrenze ist der Warenbestand, ist dieser Wert 0 oder negativ wird 0 ins Eingabefeld eingetragen und es kann nichts in den Warenkorb gelegt werden.
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){ldelim}
$("input[name='products_qty']").attr('readonly', 'readonly').val({$PRODUCTS_QUANTITY}<1?0:1).before('<a id="inc" class="btn-plus">+</a> ').after(' <a id="dec" class="btn-minus">–</a>');
{literal}
$("#inc, #dec").click(function() {
var oldValue = parseInt($(this).parent().find("input[name='products_qty']").val());
if ($(this).attr("id") == "inc") {
if (oldValue > 0) {
var newVal = oldValue + 1;
} else {
newVal = 1;
}
} else {
// Don't allow decrementing below 1
if (oldValue > 1) {
var newVal = oldValue - 1;
} else {
newVal = 1;
}
}
{/literal}
$(this).parent().find("input[name='products_qty']").val(Math.min(newVal, ({$PRODUCTS_QUANTITY}<0?0:{$PRODUCTS_QUANTITY})));
{rdelim});
{rdelim});
/*]]>*/
</script>
[...]
In '/templates/xtc5/stylesheet.css' ganz am Ende folgendes einfügen
/* BOF - buttons increment/decrement */
#inc {
position: relative;
top: 2px;
background: #757575;
background-image: -webkit-linear-gradient(top, #757575, #010b12);
background-image: -moz-linear-gradient(top, #757575, #010b12);
background-image: -ms-linear-gradient(top, #757575, #010b12);
background-image: -o-linear-gradient(top, #757575, #010b12);
background-image: linear-gradient(to bottom, #757575, #010b12);
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
font-family: Arial;
color: #ffffff;
font-size: 18px;
padding: 1px 7px 1px 7px;
text-decoration: none;
}
#dec {
background: #757575;
background-image: -webkit-linear-gradient(top, #757575, #010b12);
background-image: -moz-linear-gradient(top, #757575, #010b12);
background-image: -ms-linear-gradient(top, #757575, #010b12);
background-image: -o-linear-gradient(top, #757575, #010b12);
background-image: linear-gradient(to bottom, #757575, #010b12);
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
font-family: Arial;
color: #ffffff;
font-size: 14px;
font-weight: bold;
padding: 3px 8px 4px 8px;
text-decoration: none;
}
#inc:hover, #dec:hover {
background: #828082;
color: #ffffff;
background-image: -webkit-linear-gradient(top, #828082, #3d3d3d);
background-image: -moz-linear-gradient(top, #828082, #3d3d3d);
background-image: -ms-linear-gradient(top, #828082, #3d3d3d);
background-image: -o-linear-gradient(top, #828082, #3d3d3d);
background-image: linear-gradient(to bottom, #828082, #3d3d3d);
text-decoration: none;
}
/* EOF - buttons increment/decrement */
Wer will kann natürlich auch eigene CSS-Buttons gestalten ->
http://css3buttongenerator.comGruss
Hanspeter
[
EDIT Tomcraft 11.12.2014: Anleitung in
Beitrag 1 verlinkt.]
[
EDIT Tomcraft 26.09.2015: 1. alternativen JavaScript Code
eingefügt.]
[
EDIT Tomcraft 26.09.2015: 2. alternativen JavaScript Code
eingefügt.]
