Neu Artikel Anzahl Warenkorb mit Plus/Minus (Mobile)

[Anarchnophobia]

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]

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):

(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):

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

 

[Anarchnophobia]

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]

Funktioniert soweit ich das bisher Testen konnte hervorragend und genau wie gewünscht! DANKE!

 

[MichaelH]

@FPrüfer: und warum ist das nun kein Standard, wenn es so toll ist oder optional wählbar ?

 

[Anarchnophobia]

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]

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.

 

[css-umsetzung]

Einige meiner Kunden gaben von mir solch eine Version bekommen, die ist dann auch für dicke finger geeignet.
https://bit.ly/2JN7gyU

 

[Anarchnophobia]

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]

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 :

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();
}

 

[css-umsetzung]

Hatte ich vermutlich vergessen zu erwähnen

https://dysell.de/Karton-110x110x100-1-wellig-braun