MAGENTO 2 · WINKELWAGEN · PRODUCTAANTAL · AJAX
Kowal Plus/Minus Quantity Buttons
Voeg plus- en minknoppen toe naast de aantalvelden van de standaard winkelwagen. Na een wijziging worden het formulier, de mini-cart en het bedragoverzicht vernieuwd via de AJAX-mechanismen van Magento.
Plus en min · Bedragen vernieuwen · Knoppen opnieuw initialiseren
HOE HET IN DE PRAKTIJK WERKT
01 · De klant wijzigt het aantal
Gebruikt de knoppen of bewerkt het qty-veld.
02 · De winkelwagen verstuurt een update
Een korte vertraging bundelt snelle wijzigingen in één verzoek.
03 · De gegevens worden vernieuwd
Het formulier, de mini-cart en het overzicht tonen de nieuwe waarden.
Ontdek de functies, toepassingen en instellingen van de module.
Deze module breidt de standaard Magento 2-winkelwagen uit met intuïtieve bediening van productaantallen:
Knoppen + / − naast qty – de gebruiker hoeft niet op een klein veld te klikken en het aantal handmatig in te voeren.
Automatische AJAX-herberekeningen na wijziging van het aantal:
vernieuwing van het winkelwagenformulier,
vernieuwing van de mini-cart (customerData),
vernieuwing van de samenvatting / totals (getTotalsAction),
alles zonder pagina-reload.
Stabiliteit na DOM-vernieuwing – nadat de HTML van de winkelwagen is vervangen, worden de knoppen opnieuw geïnitialiseerd.
Moderne pilvormige uitstraling – de bediening ziet eruit als één samenhangend element (min | aantal | plus) en past bij de meeste thema's.
Doel: gemakkelijker aantallen wijzigen en de winkelwagen vernieuwen zonder de pagina handmatig te herladen. De invloed op het afronden van aankopen hangt af van de implementatie en moet worden gemeten.
Stel in Stores → Configuration → Kowal → Update Cart After Qty Change → Settings de optie Enable in. Het mechanisme start op de standaard winkelwagenpagina en omvat zowel de knoppen als de handmatige wijziging van het aantalveld.
De update gebruikt het form-validate-formulier, de customerData cart-sectie en getTotalsAction. Nadat het formulier is vervangen, worden de knoppen opnieuw geïnitialiseerd zonder dubbele bedieningselementen.
De knoppen wijzigen het aantal met 1. Het script leest de min- en max-waarden van het veld uit, gebruikt standaard minimaal 1 en rondt het resultaat af naar een geheel getal. Verkoop in fracties of met een aangepaste stap vereist aanpassing.
Een korte debounce van 150 ms beperkt het aantal verzoeken bij snelle wijzigingen. Voorraadstatus, toegestane aantallen en overige bestelvoorwaarden worden nog steeds door Magento gevalideerd.
De module is gebaseerd op RequireJS, jQuery en de standaard HTML van de winkelwagen. Controleer de weergave van de bediening en de formulierselectors in uw thema. In de repository is geen afzonderlijke Hyvä-adapter voor dit pakket aanwezig.
De knoppen gelden voor velden van de standaard winkelwagen; het vernieuwen van de mini-cart betekent niet dat daar dezelfde bediening wordt toegevoegd. De herberekeningstijd is afhankelijk van de respons van de webshop en het netwerk.
Pakket kowal/module-updatecartafterqtychange, module Kowal_UpdateCartAfterQtyChange. Nadat u toegang tot de Kowal-repository hebt geconfigureerd, installeert u het pakket, schakelt u de module in, werkt u Magento bij en leegt u de cache. Houd in productie rekening met compilatie en de uitrol van statische content volgens het proces van de webshop.
1. De klant wijzigt het aantal
Gebruikt de knoppen of bewerkt het qty-veld.
2. De winkelwagen verstuurt een update
Een korte vertraging bundelt snelle wijzigingen in één verzoek.
3. De gegevens worden vernieuwd
Het formulier, de mini-cart en het overzicht tonen de nieuwe waarden.
De klant drukt op plus bij een product. De module verhoogt het aantal en start de update van de winkelwagen, waarna de bedragen en de mini-cart worden vernieuwd.
De klant hoeft de pagina niet handmatig te herladen. De uiteindelijke goedkeuring van het aantal en de beschikbaarheid van het product blijven afhankelijk van de regels van Magento.
Wilt u de module afstemmen op uw webshop? Vraag naar de implementatie van Kowal Plus/Minus Quantity Buttons en bespreek de configuratie of benodigde uitbreidingen.
| Overeenstemming met sjabloon | Luma / Blank, Smid |
|---|
De toegangsgegevens voor de Composer-repository (e-mailadres van de klant en licentietoken) ontvangt u na aankoop per e-mail. Ze zijn ook beschikbaar in het klantenpaneel na inloggen op kowal.store. Vervang TWOJ_EMAIL_KLIENTA door het e-mailadres van uw account en TWOJ_TOKEN door de ontvangen token. Voer de opdrachten uit in de hoofdmap van Magento.
composer config repositories.kowal composer https://repo.kowal.storecomposer config http-basic.repo.kowal.store 'TWOJ_EMAIL_KLIENTA' 'TWOJ_TOKEN'composer require kowal/module-updatecartafterqtychangeVoer na installatie van het pakket de Magento-update uit en leeg de cache:
php bin/magento setup:upgradephp bin/magento cache:flushVoer in een productieomgeving ook DI-compilatie en de uitrol van statische bestanden uit volgens het deploymentproces van de webshop.
Op toursport.pl hebben we een hoeveelheidsbediening + / − in de winkelwagen geïmplementeerd, omdat gebruikers vaak aantallen wijzigden (bijv. bij kleding/maten, accessoires, sets) en het handmatig invoeren van waarden het proces vertraagde.
Probleem:
klanten pasten aantallen in meerdere stappen aan,
sommige mobiele gebruikers hadden moeite om precies in het qty-veld te klikken,
na wijziging van het aantal verwachtten zij een onmiddellijke herberekening van totals en de mini-cart.
Oplossing:
we hebben intuïtieve +/−-knoppen in pilvorm toegevoegd,
we hebben AJAX-herberekeningen zonder paginavernieuwing ingeschakeld (totals + mini-cart),
we hebben de stijl afgestemd op de layout van de winkelwagen, zodat de bediening eruitziet als een native onderdeel van het thema.
Zakelijk effect (praktisch):
sneller bewerken van de winkelwagen,
minder frustratie op mobiel,
een meer “app-achtige” winkelwagen → een betere winkelervaring.
