Mengen-Buttons +/- — Vollständige Anleitung

Überblick

Das Modul Mengen-Buttons +/- fügt echte +– und −-Buttons auf beiden Seiten des Mengenfelds auf der Produktseite hinzu. Es ersetzt die Nutzung des kleinen nativen Zahlenfelds von PrestaShop — unpraktisch sowohl mit der Tastatur als auch mit dem Finger auf dem Smartphone — durch zwei große, leicht antippbare Buttons.

Das Modul verändert keine Theme-Datei: Es fügt ein leichtgewichtiges Stylesheet und Skript hinzu, ausschließlich auf der Produktseite, die das vorhandene Mengenfeld umschließen. Es ist kompatibel mit PrestaShop 1.7, 8 und 9, mit dem Classic-Theme ebenso wie mit den meisten individuellen Themes.

Installation

1. Öffnen Sie im Backoffice Module > Modul-Manager.
2. Klicken Sie auf Ein Modul hochladen und legen Sie das ZIP-Archiv des Moduls ab.
3. Klicken Sie nach Abschluss der Installation auf Konfigurieren (optional: Das Modul funktioniert direkt nach der Installation mit seinen Standardeinstellungen).

Es wird keine SQL-Tabelle erstellt und keine Theme-Datei verändert. Das Modul registriert lediglich den Hook, der seine Ressourcen auf der Produktseite lädt.

Konfiguration

Die Konfigurationsseite vereint vier Einstellungen. Alle sind optional: Standardmäßig sind die Buttons aktiviert, im eckigen Stil, mit ausgeblendeten nativen Pfeilen.

Buttons aktivieren

Der Schalter Buttons aktivieren steuert die globale Anzeige. Schalten Sie ihn aus, um die Buttons vorübergehend auszublenden, ohne das Modul zu deinstallieren: Die Produktseite kehrt dann zum ursprünglichen Mengenfeld zurück.

Button-Stil

Wählen Sie das Aussehen der Buttons:

• Eckig: Die +- und −-Buttons haben an den Enden der Gruppe leicht abgerundete Ecken (Standardstil).
• Abgerundet: Die Buttons nehmen eine Pillenform mit vollständig abgerundeten Enden an.

Hintergrundfarbe und Symbolfarbe

Zwei Farbwähler ermöglichen die Anpassung:

• der Hintergrundfarbe der Buttons (standardmäßig hellgrau);
• der Farbe der +- und −-Symbole (standardmäßig dunkelgrau).

Der Hover-Effekt wird automatisch aus der Hintergrundfarbe abgeleitet, sodass keine dritte Einstellung zu verwalten ist. Die Farben werden über CSS-Variablen angewendet, was eine saubere Integration in die meisten Themes gewährleistet.

Native Zahlenpfeile ausblenden

Wenn diese Option aktiviert ist (empfohlen), werden die kleinen vertikalen Pfeile des Browser-Zahlenfelds ausgeblendet, sodass nur die +- und −-Buttons des Moduls übrig bleiben. Deaktivieren Sie sie, wenn Sie die nativen Pfeile sichtbar lassen möchten.

Kundenseite

Auf der Produktseite sieht der Kunde einen −-Button links vom Mengenfeld und einen +-Button rechts. Jeder Klick erhöht oder verringert die Menge um einen Schritt und aktualisiert dann den Preis, etwaige Kombinationen und den In-den-Warenkorb-Button, genau wie bei einer manuellen Eingabe. Die Menge lässt sich natürlich weiterhin direkt über die Tastatur im Feld bearbeiten.

Funktionsweise und Kompatibilität

Kein Template-Override

Das Modul überschreibt keine Theme-Datei. Es findet das Standard-Mengenfeld der Produktseite und umschließt es per JavaScript-Injektion, um die Buttons hinzuzufügen. Dieser Ansatz macht es mit einer großen Bandbreite an Themes kompatibel und schützt es vor PrestaShop-Updates, da kein Template überschrieben wird.

Classic-Theme und bootstrap-touchspin

Das Classic-Theme erweitert das Mengenfeld bereits mit bootstrap-touchspin, das zwei kleine vertikale Pfeile hinzufügt. Das Modul neutralisiert diese Pfeile sauber innerhalb seiner eigenen Button-Gruppe und lässt nur die gut lesbaren + und − übrig, ohne Duplikat und ohne Layout-Verschiebung.

Synchronisierung mit dem Warenkorb

Bei jedem Klick übernimmt das Modul den neuen Wert und löst dann die von PrestaShop erwarteten Events aus, sowohl native als auch jQuery. Gesamtpreis, Kombinationen und der In-den-Warenkorb-Button reagieren normal. Nach einem Kombinationswechsel, der den Mengenblock neu aufbaut, werden die Buttons automatisch neu eingefügt.

Berücksichtigung von Bestand und Vorgaben

Die Buttons lesen die Mindestmenge, Höchstmenge und Schrittweite des Felds. Der Kunde kann nicht unter das erforderliche Minimum (oft 1) gehen oder den verfügbaren Bestand überschreiten, sofern dieser begrenzt ist. Das Verhalten bleibt mit den Regeln des Shops konsistent.

Fehlerbehebung

Die Buttons erscheinen nicht auf der Produktseite

Prüfen Sie, ob das Modul aktiviert und die Option Buttons aktivieren auf Ja gesetzt ist. Leeren Sie anschließend den PrestaShop-Cache (Erweiterte Einstellungen > Leistung) und laden Sie die Produktseite neu. Wenn Ihr Theme ein stark angepasstes Mengenfeld verwendet, erkennt das Modul es möglicherweise nicht; kontaktieren Sie den Support unter Angabe Ihres Themes.

Die nativen Pfeile des Classic-Themes bleiben sichtbar

Stellen Sie sicher, dass Sie Version 1.1.0 oder höher verwenden, die die bootstrap-touchspin-Pfeile neutralisiert, und leeren Sie dann den Cache. Prüfen Sie außerdem, ob kein CSS-Override Ihres Themes diese Pfeile erneut anzeigt.

Die Menge ändert sich, aber der Preis wird nicht aktualisiert

Dieses Verhalten stammt meist von einem Theme, das die Standard-Events von PrestaShop nicht verwendet. Das Modul löst die nativen und jQuery-Events aus; wenn das Theme auf einen anderen Mechanismus hört, kontaktieren Sie den Support unter Angabe des verwendeten Themes.

Deinstallation

Die Deinstallation des Moduls entfernt seine Ressourcen von der Produktseite und löscht seine Konfiguration. Das Mengenfeld kehrt zu seinem ursprünglichen Aussehen zurück. Keine Produktdaten oder Bestellungen sind betroffen.

FAQ

Ändert das Modul mein Theme?

Nein. Es überschreibt keine Theme-Datei: Es fügt ein Stylesheet und ein Skript nur auf der Produktseite hinzu, die das vorhandene Mengenfeld umschließen.

Kann ich die Farbe der Buttons ändern?

Ja. In der Konfiguration können Sie die Hintergrundfarbe und die Farbe der +- und −-Symbole sowie den eckigen oder abgerundeten Stil einstellen. Der Hover-Effekt wird automatisch aus der Hintergrundfarbe abgeleitet.

Ist das Modul mit PrestaShop 9 kompatibel?

Ja, das Modul ist mit PrestaShop 1.7, 8.x und 9.x kompatibel, im Einzelshop wie im Multishop.