Neu Artikel Anzahl Warenkorb mit Plus/Minus (Mobile)

Anarchnophobia

Gut bekanntes Mitglied
26. Oktober 2010
226
8
Leipzig
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
1.878
518
Halle
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:
  • Gefällt mir
Reaktionen: Anarchnophobia

Anarchnophobia

Gut bekanntes Mitglied
26. Oktober 2010
226
8
Leipzig
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
226
8
Leipzig
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
1.878
518
Halle
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
226
8
Leipzig
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

Gut bekanntes Mitglied
14. Juli 2014
114
10
Passau
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();
}
 
Ähnliche Themen
Titel Forum Antworten Datum
Workflow Artikel + Anzahl in Einkaufsliste aktualisieren JTL-Wawi 1.8 0
Neu Nova - Größe der Slides / Anzahl der Artikel bei Cross Selling Slider anpassen Templates für JTL-Shop 3
Neu SW5 Artikel nachträglich Variantenartikel Shopware-Connector 4
Artikel als neu kennzeichnen JTL-Wawi 1.8 3
Artikel bei Conrad anlegen JTL-Wawi 1.8 0
Neu Überverkäufe aktiviert doch beim Artikel steht Ausverkauft JTL-Shop - Fehler und Bugs 1
Neu Amazon Varianten anlegen bei bestehendem Artikel Amazon-Anbindung - Fehler und Bugs 0
Neu Alles Artikel "unverkäuftlich" mit Urlaubshinweis JTL-Ameise - Ideen, Lob und Kritik 2
Neu Probleme mit Artikelzustand bei Ebay Laufene Artikel ändern Einrichtung und Installation von JTL-eazyAuction 3
Benutzerrechte - Artikel auf Einkaufsliste setzen JTL-Wawi 1.6 1
Neu Artikel kopieren / duplizieren Arbeitsabläufe in JTL-Wawi 4
Neu Bestimmte Artikel von JTL-Search ausschließen JTL-Search 0
WaWi Preisuntergrenze für Artikel festschreiben JTL-Wawi 1.7 4
Artikel Netto Preis von 4 Nachkommastellen auf 2 umstellen JTL-Wawi 1.7 5
Neu Artikel: Stückliste & Lieferant User helfen Usern - Fragen zu JTL-Wawi 1
Neu Zusatzkosten für Artikel Gelöste Themen in diesem Bereich 17
Neu Artikel wieder dem Vater zu ordnen User helfen Usern - Fragen zu JTL-Wawi 4
Datenbank-Abfrage per SQL nach Lagermenge pro Artikel & Warenbereich (WMSLager) JTL-Wawi 1.8 1
In Bearbeitung Artikel über csv-Datei bearbeiten und importieren Allgemeine Fragen zu JTL-POS 3
Neue angelegte Artikel ausverkauft - kein Erscheinen auf Bestellvorschlägen JTL-Wawi 1.6 1
Neu Sortierung von Artikel nach Preis absteigend Allgemeine Fragen zu JTL-Shop 4
Neu Artikel nicht pro Stk. sondern pro kg verkaufen User helfen Usern 2
In Diskussion Automatische Zuweisung der Kategorien für Artikel durch Workflow JTL-Workflows - Ideen, Lob und Kritik 3
Neu Verschiedene Artikel pro Lagerplatz beschränken JTL-WMS / JTL-Packtisch+ - Ideen, Lob und Kritik 0
Issue angelegt [WAWI-75449] Artikel duplizieren - ASIN wird nicht mit dupliziert. JTL-Wawi - Fehler und Bugs 1
Neu Bewertungen mittels Importtabelle auf andere Artikel übertragen User helfen Usern - Fragen zu JTL-Wawi 0
Neu Artikel mit Variationen? Allgemeine Fragen zu JTL-Shop 2
Workflow für Artikel versandklassen JTL-Wawi 1.7 1
Lieferant hat identischen Artikel von verschiedenen Herstellern oder verschiedene Packungsgrößen JTL-Wawi 1.7 0
Wie kann ich eine Benachrichtigung bei einem Wareneingang auslösen mit einer Mail über die Artikel die eingebucht wurden JTL-Wawi 1.8 2
Artikel wurden über Weclapp über FFN-Connect an JTL FFN übermittelt jedoch leider nicht an Wawi & WMS JTL-Wawi 1.8 0
Info wenn Artikel mit Bestand leer geht JTL-Wawi 1.8 1
Neu Ebay Artikel - bei Umstellung auf Designvorlagen werden Beschreibungen verändert User helfen Usern - Fragen zu JTL-Wawi 1
Beantwortet WF Mail wenn Amazon Artikel nicht verknüpft ist JTL-Workflows - Ideen, Lob und Kritik 1
Neu einfache SQL Verknüfpung zweier Tabellen, z.B. Artikel mit ArtikelBeschreibung 1.6.46.1 Gelöste Themen in diesem Bereich 13
Neu Artikel mit 2 Lagerorten (Regal und Palette) Arbeitsabläufe in JTL-WMS / JTL-Packtisch+ 1
Neu Artikel - Sprachen - Alle eigene SEO URL? Smalltalk 1
Neu Kurzbeschreibung von einem "Stücklisten-Artikel" wird in der Rechnungskorrektur Vorlage nicht angezeigt. Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 1
Neu Artikel Verfügbarkeitsanzeige "AUF ANFRAGE" Allgemeine Fragen zu JTL-Shop 0
Neu Richtige Hook zum Berechnen der Lieferzeit in Artikel.php Technische Fragen zu Plugins und Templates 1
Neu Ebay Artikel Designer - Erfahrungen ? eBay-Designvorlagen - Fehler und Bugs 1
Gelöst Zebra T21 Scanner mit Installierten JTL POS 1.0.9.3 beim Bon versuche Ich einfach zu Scannen er sucht aber kein Artikel JTL-POS - Fehler und Bugs 1
Neu Inaktive Artikel werden mit 404 Fehler bei Google Search angezeigt Allgemeine Fragen zu JTL-Shop 2
Neu Artikel in SQLDB und MariaDB vorhanden aber nicht in Wawi JTL-Wawi - Fehler und Bugs 2
Neu Bilder unter "Mehr dieser Waregruppe" und "Kunden, die diesen Artikel gekauft haben, kauften auch" fehlen eBay-Designvorlagen - Fehler und Bugs 0
Auftragspositionen - Erfolgter Versand Artikel - Teilieferung Welche Tabelle JTL-Wawi 1.7 2
Lieferanten EK wird nicht auf Artikelebene kopiert? EK ist überall 0 beim Artikel. JTL-Wawi 1.8 8
Neu Artikel werden nicht mehr aktualisiert, wenn sie sich auf Pickliste befinden JTL-Ameise - Fehler und Bugs 1
Neu Wawi Artikelattribut = externer Link wie am besten darstellen beim Artikel? Allgemeine Fragen zu JTL-Shop 0
Neu Keine Artikel Details nach Serverumzug (Wechsel des Hosters) Gelöste Themen in diesem Bereich 7

Ähnliche Themen