Shopsystem ShopPilot
ShopPilot => SSP - Shop Server Pages => SSP Bibliothek => Thema gestartet von: dobra am Dezember 13, 2014, 14:36:08
-
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
<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!):
<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.:
.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 (https://www.woll-insel.at/cgi-bin/demoshops/shop2_0/iboshop.cgi?placecart,,,,directItem=SM00002&directCount=3)
(https://www.woll-insel.at/Bilder/SP-Forum/plusminus.jpg)
-
Auf Produktseiten wird dann __anzkaufen__ mit
<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"> </button>
<button type="button" class="value-decrement"> </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:
.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 (https://www.woll-insel.at/cgi-bin/demoshops/shop2_0/iboshop.cgi?show340)