Alles wat u wilt weten voordat u installeert.
Een gedetailleerde blik op hoe Vastgezette knop Toevoegen aan Winkelwagen voor PrestaShop werkt, waarom we het zo gebouwd hebben en de gedachte achter de bovenstaande functies.
Waarom een vastgezette koopknop
Op mobiel scrollt een groot deel van de bezoekers voorbij de koopknop zonder erop te klikken. Op desktop gebeurt vrijwel hetzelfde bij lange productpagina's met een uitgebreide beschrijving, klantbeoordelingen en gekoppelde producten. Een vastgezette balk die met de bezoeker meebeweegt vangt die koopintentie op precies het moment dat ze dreigt te verdwijnen. Grote marktplaatsen, met Amazon voorop, hebben dit al jaren als standaardfunctie.
Een werkwijze die bij elk schermformaat past
Op mobiel (onder 992 pixels breed) komt er een compacte balk onderaan het scherm, met respect voor de safe area van iPhones met een notch. Op desktop kunt u in de backoffice uit twee modi kiezen: een zwevende zijbalk rechts die met een ingetogen animatie in beeld schuift, of een gecentreerde balk onderaan zoals op mobiel. U kiest wat bij uw ontwerp en bij uw type productpagina past.
Een slimme compacte variantkiezer
De compacte kiezer toont alle beschikbare combinaties met hun prijs en beschikbaarheid. Wisselt de klant in de vastgezette balk van variant, dan stemt de module de variantweergave op de hoofdpagina daar automatisch op af (keuzerondjes of keuzelijsten), waarmee de native combinatiemotor van PrestaShop in gang wordt gezet: de prijs wordt opnieuw berekend, de voorraad gecontroleerd en de afbeelding bijgewerkt, precies alsof de klant in de productpagina zelf had geklikt.
Een nette integratie, zonder verrassingen
De module gebruikt de officiële PrestaShop-hooks en blijft buiten de DOM-structuur van uw thema. Een klik op de koopknop in de vastgezette balk activeert programmatisch de oorspronkelijke knop, waardoor het bevestigingsvenster, de updateCart-gebeurtenissen, de succesmeldingen en elke aanpassing die al in uw thema of in uw andere modules zit gewoon blijven werken.
Verzorgde prestaties
Geen framework en geen externe afhankelijkheden. De CSS weegt ongeveer 7 kB en het JavaScript ongeveer 12 kB, gzip inbegrepen. De bestanden worden alleen op de productpagina's geladen, nooit op de homepage, de catalogus of het afrekenproces. De zichtbaarheid van de balk wordt geregeld door de native IntersectionObserver, wat veel efficiënter is dan een doorlopende scroll-listener.
Aanpassen vanuit de backoffice
Alles stelt u in vanuit de PrestaShop-interface, zonder de code aan te raken: algemeen aan of uit, weergave per apparaat (mobiel, desktop of beide), de desktopmodus (zwevende zijbalk of balk onderaan), de afstand tot de bovenkant voor thema's met een vastgezette header, het al dan niet tonen van de miniatuur, van de variantkiezer en van de aantalkiezer, en een volledig kleurenpalet (achtergrond, knop, tekst van de knop, algemene tekstkleur en kleur van de prijs).
Toegankelijkheid en goede praktijken
De vastgezette balk volgt de ARIA-aanbevelingen: een rol region, duidelijke labels bij elk element, aria-live-meldingen bij prijswijzigingen, een zichtbare focus op alle knoppen en volledige toetsenbordbediening. De media query prefers-reduced-motion schakelt de overgangen uit voor gebruikers die gevoelig zijn voor animaties. Alle teksten zijn vertaalbaar.
Er zijn nog geen beoordelingen.