Neu Artikel Anzahl Warenkorb mit Plus/Minus (Mobile)

  • Wenn Ihr uns das erste Mal besucht, lest euch bitte zuerst die Foren-Regeln durch.

Anarchnophobia

Gut bekanntes Mitglied
26. Oktober 2010
203
5
Leipzig
#1
Hallo Gemeinde

Mich stört in dem mobilen Template massiv die Eingabe der Artikelanzahl, die man in den Warenkorb legen möchte. In der Desktopansicht gibt es sowas ja ganz klein (könnte aber auch größer sein), in der mobilen Ansicht muss man erst in das feld reinklicken, die "1" löschen (und dazu dann nochmal extra klicken, rechts neben die "1" gehen, dann löschen) und erst dann kann man eine neue Anzahl eintragen. Will man die ändern das selbe Spielchen... sehr nervig.

Das geht bestimmt besser!
Könnte man da nicht generell neben das Feld ein großes Plus / Minus einbauen, das am Desktop und Mobil gleichermaßen funktioniert?

Oder hat jemand vielleicht einen Workaround dazu? :)

Grüße
 

FPrüfer

Moderator
Mitarbeiter
19. Februar 2016
804
133
Halle
#2
Das geht bestimmt besser!
Könnte man da nicht generell neben das Feld ein großes Plus / Minus einbauen, das am Desktop und Mobil gleichermaßen funktioniert?
Aktuell werden einfach die Controls des jeweiligen Browsers verwendet - sprich es gibt keine spezielle Formatierung für die Spinner-Buttons. Wenn man hier explizit ran will kann man sich mit ein bisschen Javascript und CSS behelfen.

Javascript (z.B. in der custom.js des eigenen Child-Themes):
JavaScript:
(function ($) {
    'use strict';
    let numberInputSel  = 'input[type="number"]:not([data-wrapped])';
    let wrapNumberInput = function ($numberInputs) {
        $numberInputs.each(function (index, item) {
            let $item = $(item);
            let wrap  = [];

            $item.attr('data-wrapped', 'true');

            wrap.push($('<a href="#" class="input-group-addon input-button-minus"><i class="fa fa-minus"></i></a>').data('for', $item).insertBefore($item)[0]);
            wrap.push(item);
            wrap.push($('<a href="#" class="input-group-addon input-button-plus"><i class="fa fa-plus"></i></a>').data('for', $item).insertAfter($item)[0]);
            $(wrap).wrapAll('<div class="input-group"></div>');
        });
    };

    $(window).on('load', function () {
        $(document).on('click', '.input-button-minus', function (e) {
            e.preventDefault();
            $(this).data('for').val(parseInt($(this).data('for').val()) - 1).change();
        });
        $(document).on('click', '.input-button-plus', function (e) {
            e.preventDefault();
            $(this).data('for').val(parseInt($(this).data('for').val()) + 1).change();
        });
        $(document).ajaxSuccess(function() {
            window.setTimeout(function () {
                wrapNumberInput($(numberInputSel));
            }, 100);
        });

        wrapNumberInput($(numberInputSel));
    });
})(jQuery);
CSS (im eigenen Child-Theme):
CSS:
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}
Das JavaScript erzeugt vor und nach jedem numerischen Inputfeld einen Button. Davor mit einem + und danach mit einem -, die bei einem Klick jeweils den Wert des zugehörigen Inputfeldes um eins erhöhen bzw. verringern. Das CSS sorgt dafür, dass in den meisten neuen Browsern die automatischen Spin-Buttons wieder ausgeblendet werden.
Achtung: Ich habe das jetzt nur mit dem Quantity-Input des Warenkorbbuttons getestet. Ob das irgendwo im Template "Nebeneffekte" hat, die noch berücksichtigt werden müsste noch getestet werden. Ist auch nur als Ansatz gedacht ;)
 
Zuletzt bearbeitet:
Zustimmungen: Anarchnophobia

Anarchnophobia

Gut bekanntes Mitglied
26. Oktober 2010
203
5
Leipzig
#3
sehr cool, danke!
Das probiere ich gleich morgen mal aus und teste das ausführlich... und werde mich dann hier nochmal melden ob es geht oder obs Probleme gibt :)
 

Anarchnophobia

Gut bekanntes Mitglied
26. Oktober 2010
203
5
Leipzig
#6
Gibt leoder doch ein Problem mit config-Artikeln... da klappt zwar das +- zwar prinzipiell, aber die Anzahl wird dann nicht in die Konfiguration übernommen.
 

FPrüfer

Moderator
Mitarbeiter
19. Februar 2016
804
133
Halle
#7
Ich habe das JS in meinem Post nochmal angepasst und für die Button-Handler jeweils ein .change() ergänzt. Damit werden auch die Änderungen im Konfigurator direkt übernommen.
 

Anarchnophobia

Gut bekanntes Mitglied
26. Oktober 2010
203
5
Leipzig
#9
es gab eine weitere Änderung von FPrüfer, gab noch ein Problem damit dass das Script in Kindartikeln nicht direkt geladen wurde.

Nun, soweit ich das überblicken kann, scheint alles zu funktionieren. Vielen Dank für die Mühe! Voll gut! :)
 

Dull

Aktives Mitglied
14. Juli 2014
54
1
Pfarrkirchen
#10
Was hier dem ganzen noch den letzten Schliff verpassen würde wäre wenn man nicht nur die einfache Zählung, also +/-1, sondern auch das Abnahmeintervall mit einbeziehen würde ^^

Bei mir funktioniert das aber leider nicht so wie gewollt. Hätte einfach folgendes mit rein geschustert, vllt. kann mich ja jemand korrigieren ;) :

Code:
var step = input.attr('step');


if (step > 1) {
$(this).data('for').val(parseInt($(this).data('for').val()) - step).change();
} else {
$(this).data('for').val(parseInt($(this).data('for').val()) - 1).change();
}


if (step > 1) {
$(this).data('for').val(parseInt($(this).data('for').val()) + step).change();
} else {
$(this).data('for').val(parseInt($(this).data('for').val()) + 1).change();
}