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 knop om toe te voegen aan de winkelwagen zonder erop te klikken. Op desktop gebeurt hetzelfde bij lange productpagina's met een uitgebreide beschrijving, klantbeoordelingen en verwante producten. Een vastgezette balk die met de bezoeker meereist, pakt die koopintentie op precies het moment dat ze zou verdwijnen. De grote marktplaatsen, met Amazon voorop, hebben er al jaren een standaardfunctie van gemaakt.
Een aanpak die past bij elk schermformaat
Op mobiel (smaller dan 992 pixels) komt een compacte balk onderaan het scherm te staan, met respect voor de safe area van iPhones met een notch. Op desktop hebt u twee mogelijkheden, in te stellen vanuit de backoffice: een zwevende zijbalk rechts die met een ingetogen animatie op zijn plaats schuift, of een gecentreerde balk onderaan zoals op mobiel. U kiest wat bij uw ontwerp en uw type productpagina past.
Een slimme compacte variantkiezer
De compacte kiezer toont alle beschikbare combinaties met hun prijs en beschikbaarheid. Wisselt de klant van variant in de vastgezette balk, dan stemt de module automatisch de variantweergave op de hoofdpagina af (keuzerondjes of keuzelijsten), waarmee de native combinatiemotor van PrestaShop in gang wordt gezet: de prijs wordt herberekend, de voorraad gecontroleerd en de afbeelding bijgewerkt, precies alsof de klant in de productpagina zelf had geklikt.
Nette integratie, zonder verrassingen
De module gebruikt de officiële PrestaShop-hooks en blijft buiten de hoofd-DOM van uw thema. Een klik op de knop 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, die veel efficiënter is dan een doorlopende scrolllistener.
Aanpassen vanuit de backoffice
Alles wordt vanuit de PrestaShop-interface ingesteld, zonder de code aan te raken: algemeen aan- en uitzetten, weergave per apparaat (mobiel en of desktop), de desktopmodus (zwevende zijbalk of balk onderaan), een bovenmarge 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, tekstkleur en kleur van de prijs).
Toegankelijkheid en goede praktijken
De vastgezette balk volgt de ARIA-aanbevelingen: de rol region, duidelijke labels bij elk bedieningselement, aria-live-meldingen bij prijswijzigingen, 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 te vertalen.
Er zijn nog geen beoordelingen.