Hoeveelheidsknoppen +/- — Complete handleiding

Presentatie

De module Hoeveelheidsknoppen +/- voegt echte knoppen + en − toe aan weerszijden van het hoeveelheidsveld op de productpagina. Ze vervangt het gebruik van het kleine native nummerveld van PrestaShop, onhandig met het toetsenbord en met de vinger op mobiel, door twee brede, makkelijk te raken knoppen.

De module wijzigt geen enkel themabestand: ze voegt een lichte stylesheet en een licht script toe, uitsluitend op de productpagina, die het bestaande hoeveelheidsveld omkapselen. Ze is compatibel met PrestaShop 1.7, 8 en 9, met het Classic-thema en met de meeste aangepaste thema’s.

Installatie

1. Open vanuit de backoffice Modules > Modulebeheer.
2. Klik op Een module uploaden en sleep het ZIP-archief van de module erin.
3. Klik na de installatie op Configureren (optioneel: de module werkt vanaf de installatie met haar standaardinstellingen).

Er wordt geen SQL-tabel aangemaakt en geen enkel themabestand gewijzigd. De module registreert eenvoudig de hook die haar resources op de productpagina laadt.

Configuratie

De configuratiepagina bundelt vier instellingen. Alle zijn optioneel: standaard zijn de knoppen actief, in vierkante stijl, met verbergen van de native pijltjes.

De knoppen inschakelen

De schakelaar Knoppen inschakelen bepaalt de globale weergave. Schakel hem uit om de knoppen tijdelijk te verbergen zonder de module te deïnstalleren: de productpagina krijgt dan het oorspronkelijke hoeveelheidsveld terug.

Knopstijl

Kies het uiterlijk van de knoppen:

• Vierkant: de knoppen + en − hebben licht afgeronde hoeken aan de uiteinden van de groep (standaardstijl).
• Afgerond: de knoppen krijgen een pilvorm, met volledig afgeronde uiteinden.

Achtergrondkleur en icoonkleur

Twee kleurkiezers laten u aanpassen:

• de achtergrondkleur van de knoppen (standaard een lichtgrijs);
• de kleur van de iconen + en − (standaard een donkergrijs).

Het hovereffect wordt automatisch afgeleid van de achtergrondkleur: er is dus geen derde instelling te beheren. De kleuren worden toegepast via CSS-variabelen, wat een nette integratie in de meeste thema’s garandeert.

De native pijltjes van het nummerveld verbergen

Wanneer deze optie is ingeschakeld (aanbevolen), worden de kleine verticale pijltjes van het nummerveld van de browser verborgen, zodat alleen de knoppen + en − van de module overblijven. Schakel haar uit als u de native pijltjes liever zichtbaar laat.

Aan klantzijde

Op de productpagina ziet de klant een knop − links van het hoeveelheidsveld en een knop + rechts. Elke klik verhoogt of verlaagt de hoeveelheid met één stap, en werkt vervolgens de prijs, de eventuele varianten en de winkelwagenknop bij, precies zoals bij handmatige invoer. De hoeveelheid blijft uiteraard rechtstreeks met het toetsenbord in het veld aanpasbaar.

Werking en compatibiliteit

Geen template-override

De module overschrijft geen enkel themabestand. Ze spoort het standaardhoeveelheidsveld van de productpagina op en omkapselt het via JavaScript-injectie om er de knoppen aan toe te voegen. Deze aanpak maakt haar compatibel met een breed scala aan thema’s en beschermt haar tegen PrestaShop-updates, aangezien geen enkel template wordt overschreven.

Classic-thema en bootstrap-touchspin

Het Classic-thema verrijkt het hoeveelheidsveld al met bootstrap-touchspin, dat twee kleine verticale pijltjes toevoegt. De module neutraliseert deze pijltjes netjes binnen haar eigen knoppengroep, om alleen de goed leesbare + en − over te houden, zonder duplicaten of lay-outverschuivingen.

Synchronisatie met de winkelwagen

Bij elke klik past de module de nieuwe waarde toe en triggert vervolgens de door PrestaShop verwachte events, zowel native als jQuery. De totaalprijs, de varianten en de winkelwagenknop reageren normaal. Na een variantwissel, die het hoeveelheidsblok opnieuw opbouwt, worden de knoppen automatisch opnieuw geïnjecteerd.

Respect voor voorraad en beperkingen

De knoppen lezen de minimale hoeveelheid, de maximale hoeveelheid en de stap die op het veld zijn gedefinieerd. De klant kan niet onder het vereiste minimum zakken (vaak 1) en niet boven de beschikbare voorraad gaan wanneer die begrensd is. Het gedrag blijft consistent met de regels van de winkel.

Probleemoplossing

De knoppen verschijnen niet op de productpagina

Controleer of de module is ingeschakeld en of de optie Knoppen inschakelen op Ja staat. Leeg vervolgens de PrestaShop-cache (Geavanceerde instellingen > Prestaties) en herlaad de productpagina. Als uw thema een sterk aangepast hoeveelheidsveld gebruikt, detecteert de module het mogelijk niet; neem contact op met de support en vermeld uw thema.

De native pijltjes van het Classic-thema blijven zichtbaar

Zorg dat u versie 1.1.0 of hoger gebruikt, die de bootstrap-touchspinpijltjes neutraliseert, en leeg de cache. Controleer ook of geen CSS-override van uw thema deze pijltjes opnieuw toont.

De hoeveelheid wijzigt maar de prijs wordt niet bijgewerkt

Dit gedrag komt meestal van een thema dat de standaardevents van PrestaShop niet gebruikt. De module triggert de native en jQuery-events; als het thema naar een ander mechanisme luistert, neem dan contact op met de support en vermeld het gebruikte thema.

Deïnstallatie

De deïnstallatie van de module verwijdert haar resources van de productpagina en wist haar configuratie. Het hoeveelheidsveld krijgt zijn oorspronkelijke uiterlijk terug. Geen enkel product- of bestelgegeven wordt beïnvloed.

FAQ

Wijzigt de module mijn thema?

Nee. Ze overschrijft geen enkel themabestand: ze voegt uitsluitend op de productpagina een stylesheet en een script toe die het bestaande hoeveelheidsveld omkapselen.

Kan ik de kleur van de knoppen wijzigen?

Ja. In de configuratie kunt u de achtergrondkleur en de kleur van de iconen + en − instellen, evenals de vierkante of afgeronde stijl. Het hovereffect wordt automatisch afgeleid van de achtergrondkleur.

Is de module compatibel met PrestaShop 9?

Ja, de module is compatibel met PrestaShop 1.7, 8.x en 9.x, zowel in single- als in multistore.