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]

<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]

<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]

.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



Linkback: https://www.shoppilot.net/pf/index.php?topic=1713.0

[dobra]

Auf Produktseiten wird dann __anzkaufen__ mit

Code: [Auswählen]

<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]

.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