PrestaShop Design & navigatie

DataFirefly SideCart: Zijwinkelwagen voor PrestaShop 8

De winkelwagen die de productpagina niet meer verlaat.

Weg met de doorverwijzing naar de winkelwagenpagina die de koopimpuls onderbreekt. SideCart laat een winkelwagenpaneel vanaf de zijkant van het scherm inschuiven zodra er een product wordt toegevoegd. De klant ziet wat hij zojuist heeft toegevoegd, het subtotaal wordt in real time bijgewerkt, en hij kan gewoon verder door uw winkel bladeren zonder dat de pagina herlaadt. De gebruikelijke ervaring van moderne webshops, in vijf minuten geïnstalleerd op uw PrestaShop 8.

PrestaShop 8.0+ PHP 8.0+ Zonder herladen Volledig instelbaar Mobile first Werkt met elk thema
  • 30 dagen geld terug
  • 12 maanden updates
  • Support binnen 24 uur
www.datafirefly.com/nl/
Panier latéral coulissant sur une boutique PrestaShop 8
v1.0.0 · bijgewerkt 2024-12-19
Wat het doet

De korte versie.

01

Opent meteen bij het toevoegen

Het paneel schuift vanaf de rand in zodra een product aan de winkelwagen wordt toegevoegd, zonder herladen en zonder dat de klant zijn plek kwijtraakt. Hij blijft gewoon op de productpagina.

02

Alles is in te stellen

De positie (links of rechts), de hoofdkleur, de verduisterende overlay, het automatisch openen bij het toevoegen, het automatisch sluiten met een instelbare wachttijd, en het tonen van het subtotaal, de btw en de verzendkosten.

03

Werkt met uw thema

Haakt in op de gewone PrestaShop 8-hooks (displayHeader, actionCartUpdateQuantityBefore en displayAfterBodyOpeningTag). Werkt met Classic, met Hummingbird en met de meeste commerciële thema's.

04

Native snelheid

Geminificeerde CSS en JavaScript, alleen in de storefront geladen. Geen externe afhankelijkheid en geen zwaar framework. Geen enkele invloed op de Core Web Vitals.

De lange versie

Alles wat u wilt weten voordat u installeert.

Een gedetailleerde blik op hoe DataFirefly SideCart: Zijwinkelwagen voor PrestaShop 8 werkt, waarom we het zo gebouwd hebben en de gedachte achter de bovenstaande functies.

§ 01

Waarom een winkelwagen in een zijpaneel?

Van de bezoekers die op Toevoegen aan winkelwagen klikken haakt een deel af zodra ze op de winkelwagenpagina belanden. Die doorverwijzing onderbreekt juist het moment waarop de koopimpuls het sterkst is. SideCart lost dat op: de klant ziet zijn winkelwagen vollopen zonder de productpagina te verlaten, en kan daarna kiezen tussen verder winkelen of met één klik afrekenen. Het is de gebruikelijke werkwijze van de grote marktplaatsen en van elke webshop die conversie serieus neemt.

§ 02

Wat de klant ziet

Een paneel van 380 px dat vanaf de rechterkant inschuift (links is in te stellen), met een vloeiende animatie. Daarin staat de lijst met producten, met afbeelding, naam, combinatie, stukprijs en een aantalregeling. Onderaan het subtotaal dat in real time wordt bijgewerkt, en optioneel de btw en de geschatte verzendkosten. Er zijn twee knoppen: de winkelwagen in detail bekijken of rechtstreeks afrekenen. Op de overlay achter het paneel kan worden geklikt om te sluiten.

§ 03

In 5 minuten ingesteld

Installeer de ZIP via de modulebeheerder van PrestaShop en ga daarna naar Modules, DataFirefly SideCart en Configureren. Er is één instellingenpagina met: aan- of uitzetten, de positie (links of rechts), automatisch openen bij het toevoegen (ja of nee), de overlay (ja of nee), automatisch sluiten (ja of nee) met een wachttijd in seconden, de hoofdkleur (met een kleurkiezer) en drie vakjes om het subtotaal, de btw en de verzendkosten te tonen. Opslaan en het staat live.

§ 04

Architectuur en prestaties

De module gebruikt de native PrestaShop 8-hooks (displayHeader voor de bestanden, actionCartUpdateQuantityBefore om toevoegingen op te merken, en displayAfterBodyOpeningTag om het paneel in te voegen). De CSS blijft onder 10 kB gzipped en het JavaScript onder 8 kB. Er is geen enkele externe afhankelijkheid: jQuery is niet vereist en er komt geen framework aan te pas. De invloed op de Core Web Vitals is nul of positief, want het wegvallen van de doorverwijzing naar de winkelwagenpagina verbetert de ervaren laadtijd.

§ 05

Geschikt voor multishop

Volledig geschikt voor multishop in PrestaShop: elke subwinkel kan een eigen configuratie hebben (een andere kleur, een andere positie, hooks wel of niet actief). De configuratievariabelen worden bewaard via Configuration::updateValue, met de gewone multishop-context.

§ 06

Mobiel en toegankelijkheid

Op mobiel (onder 768 px) opent het paneel schermvullend, voor maximale leesbaarheid. Sluiten kan met de Escape-toets, met de sluitknop in de hoek, met een klik op de overlay, of met een veegbeweging waar het apparaat dat ondersteunt. Alle interactieve elementen hebben ARIA-labels en de focus blijft binnen het paneel zolang het open staat.