Artikel-Anzahl im Warenkorb mit +/- Button ändern

[dobra]

Aufgabe:
im WK soll die Artikelanzahl mit +/- Buttons geändert werden können

Lösung:
Voraussetzung: jquery ist bereits eingebunden !

in der cart-Vorlage
__anzaendern__  mit

Code [Auswählen] Expand

<form method="post" action=__xanzaendern__>
<div class="value-change"><input name="__xid__" style="width:25px;" size="1" maxlength="3" value="__anzahl__">
<button type="submit" class="value-increment">+</button>
<button type="submit" class="value-decrement">-</button>
</div>
</form>
ersetzen.

Im Head (muß im head-Bereich stehen!):

Code [Auswählen] Expand

<script>
$(document).ready(function () {
   $('.value-change').each(function () {
       $('button.value-decrement', this).click(function () {
           var value = new Number($(this).siblings('input').attr('value'));
           value = value - 1;
           $(this).siblings('input').attr('value', value);
       });
       $('button.value-increment', this).click(function () {
           var value = new Number($(this).siblings('input').attr('value'));
           value = value + 1;
           $(this).siblings('input').attr('value', value);
       });
   });        
});
</script>

Optional (aber "schöner") ist, die Button-Ausgabe noch zu stylen.
z.B.:

Code [Auswählen] Expand

.value-increment {
position:relative;
top: -4px;
width: 15px;
height: 12px;
background: url("../images/plus.jpg") no-repeat left top;
font-size: 8px;
margin: 0px;
padding:0px;
border:none;
}
.value-decrement {
position:relative;
top: 6px;
left: -19px;
   width: 15px;
height: 12px;
background: url("../images/minus.jpg") no-repeat left top;
   font-size: 8px;
margin: 0px;
padding:0px;
border:none;
}


Life-Demo: WK im Demo-Shop2_0

[dobra]

Auf Produktseiten wird dann __anzkaufen__ mit

Code [Auswählen] Expand

<div class="value-change">
<form action="http://__xxpath__?placecart,__xxsession__," method="post">
<input type="text" name="a____artnr__" value="1" size="3">
    <button type="button" class="value-increment">&nbsp;</button>
    <button type="button" class="value-decrement">&nbsp;</button>
<button class="inwk" type="submit" value="in den Warenkorb"></form>
</div>
ersetzt.

(das jquery-Script muß natürlich auch hier im head eingebunden sein)

css-Ergänzung:

Code [Auswählen] Expand

.inwk {
    width: 30px;
height: 31px;
background: url("../images/other/wk.gif") no-repeat left top;
margin: 0px;
padding:0px;
border:none;
margin-left: -15px;
}

Anschauen kann man das im Echtbetrieb hier:
shop2_0 Productseite