Sticky Add to Cart voor PrestaShop: volledige gids

Overzicht

DataFirefly Sticky Add to Cart toont een permanente balk “Toevoegen aan winkelwagen” op de productpagina’s van uw PrestaShop 8- of 9-winkel. Op mobiel wordt een compacte balk onderaan het scherm vastgezet. Op desktop schuift een zwevende zijbalk vanaf rechts in (of, naar keuze, een balk onderaan identiek aan mobiel). De balk bevat een mini-variantkiezer, een aantalkiezer en de in realtime bijgewerkte prijs.

Het toevoegen aan de winkelwagen gebeurt via een direct AJAX-verzoek naar de winkelwagencontroller van PrestaShop: de module raakt nooit het formulier of de native knop van uw thema aan, wat een conflictloze co-existentie garandeert.

Installatie

1. Open in uw PrestaShop back-office Modules > Modulebeheer.
2. Klik op Een module installeren en selecteer het bestand dfstickyaddtocart.zip.
3. Klik na de installatie op Configureren.
4. Leeg de PrestaShop-cache: Geavanceerde instellingen > Prestaties > Cache legen.

Configuratie

Alle instellingen bevinden zich in Modules > Modulebeheer > DataFirefly Sticky Add to Cart > Configureren.

Weergave

• Module inschakelen — globale schakelaar.
• Tonen op mobiel — activeert de balk onderaan op schermen smaller dan 992 px.
• Tonen op desktop — activeert de weergave op schermen van 992 px en breder.
• Desktopweergave — twee modi: Zwevende zijbalk (rechts), een kaart van 320 px die vanaf de rechterrand inschuift, of Balk onderaan, identiek aan de mobiele weergave maar gecentreerd op 1280 px.
• Bovenmarge desktop (px) — afstand tussen de bovenkant van het venster en de zwevende zijbalk. Verhoog deze waarde als uw thema een sticky header heeft (standaard 90 px).

Inhoud van de balk

• Productafbeelding tonen — miniatuur van de omslagafbeelding.
• Variantkiezer tonen — compacte keuzelijst met de varianten (automatisch verborgen als het product geen combinaties heeft).
• Aantalkiezer tonen — min-/plusknoppen (getoond op desktop; op mobiel blijft het aantal op 1 om compact te blijven).
• Verbergen wanneer de hoofdknop zichtbaar is — de balk verschijnt alleen wanneer de originele knop “Toevoegen aan winkelwagen” uit de viewport verdwijnt (aanbevolen). Schakel uit voor een permanent zichtbare balk.

Kleuren

• Achtergrondkleur — achtergrond van de balk (standaard wit).
• Knopkleur — knop voor het toevoegen aan de winkelwagen (standaard teal #2fb5d2).
• Tekstkleur van de knop — label van de knop.
• Tekstkleur — productnaam en labels.
• Prijskleur — optioneel; indien leeg wordt de knopkleur gebruikt.

Werking

Zichtbaarheidsdetectie

De module observeert het originele blok “Toevoegen aan winkelwagen” met de IntersectionObserver-API van de browser. Zodra dit blok uit de viewport verdwijnt (de gebruiker heeft gescrold), verschijnt de sticky balk met een schuifanimatie. Zodra het weer in beeld komt, verdwijnt de balk. Dit mechanisme is native aan de browser en voegt geen enkele prestatiekost aan het scrollen toe.

Variantkiezer

Bij producten met combinaties toont de minikiezer elke variant met zijn prijs en beschikbaarheid (uitverkochte varianten zijn uitgeschakeld). De selectie is lokaal aan de sticky balk: ze wijzigt de variantinterface van de hoofdpagina niet. Wanneer de klant vanaf de hoofdpagina van variant wisselt, synchroniseert de sticky balk automatisch via het PrestaShop-event updatedProduct.

Toevoegen aan de winkelwagen

Een klik op de sticky knop verstuurt een AJAX-POST-verzoek direct naar de winkelwagencontroller van PrestaShop (hetzelfde endpoint als het thema), met de in de balk gekozen variant en het gekozen aantal. Bij succes zendt de module het event updateCart uit: de winkelwagenteller in de header en de winkelwagenpreview van uw thema worden normaal bijgewerkt, en de sticky knop toont een bevestigingsvinkje.

Mobiele weergave

Op mobiel past de balk zich automatisch aan:

• Product zonder varianten — één regel: miniatuur, naam, prijs en knop. Onder 600 px maakt het knoplabel plaats voor het winkelwagenicoon; onder 380 px wordt de miniatuur verborgen.
• Product met varianten — twee regels: miniatuur, naam, prijs en knop op de eerste; variantkiezer over de volledige breedte op de tweede.

De balk respecteert de zone safe-area-inset-bottom van iPhones met notch en de voorkeur prefers-reduced-motion van gebruikers die gevoelig zijn voor animaties.

Themacompatibiliteit

De module richt zich op de standaard CSS-selectors van het Classic-thema en zijn afgeleiden: .product-add-to-cart, .add-to-cart, button[data-button-action="add-to-cart"], form#add-to-cart-or-refresh. De overgrote meerderheid van de thema’s op de markt volgt deze conventies.

Als uw thema andere classes gebruikt, staan er twee aan te passen functies bovenaan het bestand views/js/dfstickyaddtocart.js: getMainBtn() (selector van de native knop) en getMainForm() (selector van het productformulier). Dit zijn de enige twee contactpunten met uw thema.

Probleemoplossing

De balk verschijnt niet

1. Controleer of de module in haar configuratie is ingeschakeld en of de weergave actief is voor het geteste apparaat (mobiel / desktop).
2. Leeg de PrestaShop-cache (Geavanceerde instellingen > Prestaties) en herlaad de pagina met Ctrl+Shift+R.
3. Als de optie “Verbergen wanneer de hoofdknop zichtbaar is” actief is, verschijnt de balk pas na het voorbijscrollen van de originele knop — dat is het verwachte gedrag.
4. Controleer in de browserconsole of geen JavaScript-fout van een andere module de uitvoering van de pagina blokkeert.

Het toevoegen aan de winkelwagen werkt niet

1. Open de browserconsole: de module logt haar fouten met het voorvoegsel [dfsticky].
2. Controleer in het tabblad Netwerk het POST-verzoek naar de winkelwagencontroller: de HTTP-code en de responsbody geven de exacte oorzaak aan (uitverkocht, minimumhoeveelheid, enzovoort).
3. De module tolereert PHP-waarschuwingen in een ontwikkelomgeving (ze extraheert de JSON zelfs als er warnings aan voorafgaan), maar een schone productieomgeving blijft aanbevolen.

De zijbalk overlapt de header van het thema

Verhoog de waarde Bovenmarge desktop (px) in de configuratie tot de zijbalk zich onder uw sticky header positioneert.

Technische FAQ

Vertraagt de module de pagina’s?

Nee. De assets (ongeveer 7 kB CSS en 12 kB JavaScript) worden alleen geladen op de product-controller. Geen externe bibliotheek, geen scroll-listener: de zichtbaarheid wordt beheerd door IntersectionObserver.

Is de module compatibel met multistore?

Ja. Alle waarden worden opgeslagen via de Configuration-klasse van PrestaShop met de native multistore-context: elke winkel kan zijn eigen kleuren en instellingen hebben.

Welke hooks worden gebruikt?

actionFrontControllerSetMedia (registratie van de assets), displayFooterProduct (rendering van de markup) en displayHeader (kritieke micro-CSS tegen flitsen).

Zijn de teksten vertaalbaar?

Ja. Alle strings lopen via het vertaalsysteem van PrestaShop. De module wordt geleverd in het Frans, Engels, Spaans en Duits; voeg andere talen toe via Internationaal > Vertalingen.

Versiegeschiedenis

1.0.3

• Tolerante analyse van de antwoorden van de winkelwagencontroller: de JSON wordt correct geëxtraheerd, ook wanneer er PHP-waarschuwingen aan voorafgaan (ontwikkelomgevingen).
• Verzoekbody in URL-encoded formaat, identiek aan de native serialisatie van het thema, voor maximale compatibiliteit.
• Definitieve verwijdering van elke programmatische activering van de native knop: beide knoppen zijn voortaan volledig onafhankelijk.

1.0.2

• Verwijdering van de rendering van de bevestigingsmodaal die door de winkelwagencontroller wordt teruggegeven en op sommige pagina’s een onzichtbare overlay kon achterlaten die kliks blokkeerde. De bevestiging loopt via het event updateCart en het vinkje op de sticky knop.
• Defensieve opruiming van verweesde modalen bij het laden van de pagina.

1.0.1

• Overstap op toevoegen aan de winkelwagen via een direct AJAX-verzoek: de module wijzigt het productformulier niet meer en hangt niet meer af van de DOM-status van het thema.
• DOM-referenties worden ter plekke opgelost om bestand te zijn tegen vervanging van het formulier door de combinatie-engine.
• Veiligheidsreset van de laadindicator.

1.0.0

• Eerste versie: sticky balk voor mobiel en desktop, mini-variantkiezer, aantalkiezer, kleuraanpassing, ARIA-toegankelijkheid, multistore, FR/EN/ES/DE.