Autor Thema: Artikel-Anzahl im Warenkorb mit +/- Button ändern  (Gelesen 2884 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline dobra

  • Global Moderator
  • Hero Member
  • *****
  • Beiträge: 1337
  • Lob: 18
    • ShopPilot AT
Artikel-Anzahl im Warenkorb mit +/- Button ändern
« 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



Linkback: http://www.shoppilot.net/pf/ssp-bibliothek/18/seo/1713/
mfG
dobra
______________________________
Betreute Shops:
Barrique Einzelhandel
Barrique Großhandel

Offline dobra

  • Global Moderator
  • Hero Member
  • *****
  • Beiträge: 1337
  • Lob: 18
    • ShopPilot AT
Re: Artikel-Anzahl auf Produktseiten mit +/- Button ändern
« Antwort #1 am: Dezember 13, 2014, 21:44:50 »
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">&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:
.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


xx
FAQ Anzahl gefundene Artikel

Begonnen von sre

1 Antworten
3268 Aufrufe
Letzter Beitrag September 30, 2002, 22:43:27
von hop
xx
Anzahl Artikel dynamisch?

Begonnen von jg

3 Antworten
4077 Aufrufe
Letzter Beitrag Juni 13, 2007, 12:13:50
von dobra
xx
Anzahl Artikel in Unterkategorieen ausgeben

Begonnen von admin

0 Antworten
3461 Aufrufe
Letzter Beitrag November 17, 2009, 16:35:58
von admin
xx
EP: Preis aller Artikel im Subkatalog ändern

Begonnen von hop

1 Antworten
6634 Aufrufe
Letzter Beitrag August 11, 2006, 23:39:22
von admin