Eenvoudige & Elegante Checkout (dfsimplecheckout): volledige gids

Presentatie

DataFirefly Simple Checkout vervangt de native checkout in 5 stappen van PrestaShop door een moderne one-page checkout, geïnspireerd op de checkouts van Shopify en Stripe. De module koppelt haar controller at runtime via de hook actionDispatcher: er wordt geen enkel override-bestand naar schijf geschreven, en uw bestaande overrides van derden op OrderController worden netjes overgeërfd.

Belangrijkste functies: lay-out in twee kolommen met permanent besteloverzicht, sociale login via Google en Facebook, adresaanvulling met Google Places, adaptief adresformulier per land, AJAX-kortingscode, drie aanpasbare kleuren en een distraction-free modus.

Installatie

1. Ga in uw PrestaShop-backoffice naar Modules → Modulebeheer → Een module installeren.
2. Selecteer het bestand dfsimplecheckout.zip, gedownload vanuit uw DataFirefly-account.
3. Klik op Installeren en daarna op Configureren.
4. Leeg de PrestaShop-cache (Geavanceerde instellingen → Prestaties → Cache legen).
5. Bezoek de pagina /order van uw webshop met een product in de winkelwagen: de nieuwe checkout verschijnt meteen.

Algemene configuratie

Kleuren

In het instellingentabblad van de module zijn drie kleuren te configureren:

• Hoofdkleur: knoppen, links, actieve statussen, geselecteerde keuzerondjes (standaard #1a73e8).
• Hoverkleur van de knoppen: hoverstatus van de primaire knoppen “Doorgaan”, “Bestellen” (standaard #1559b8).
• Accent- / succeskleur: indicatoren van voltooide stappen, chip van een toegepaste kortingscode, label “Gratis” van de vervoerder, succesberichten (standaard #008060).

De drie waarden worden als CSS-variabelen geïnjecteerd (--dfsc-primary, --dfsc-primary-hover, --dfsc-success) en gevalideerd met een strikte hexadecimale regex.

Logo

Vul de URL van een eigen logo in voor de header van de checkout; zonder waarde wordt het logo van de webshop gebruikt. Weergegeven afmetingen: maximaal 190×42 px.

Distraction-free modus

De optie Header en footer van het thema verbergen (standaard actief) verwijdert de volledige header van het thema (menu, zoeken, winkelwagen) en de footer, uitsluitend op de pagina /order. De implementatie overschrijft de Smarty-blokken header en footer in onze template: bij een thema dat die standaardblokken niet gebruikt, heeft de optie gewoon geen effect en krijgt u nooit een witte pagina.

Andere opties

• Veld voor een notitie aan de verkoper (aan/uit)
• Kortingscodeveld (aan/uit)
• Vertrouwensbadges: vrije HTML onder het besteloverzicht
• Juridische links onderaan de checkout (algemene voorwaarden, privacy, retouren, gedetecteerd via de native CMS-rollen)

Sociale login met Google

De inloggegevens aanmaken

1. Ga naar de Google Cloud Console en maak (of selecteer) een project.
2. Maak in APIs & Services → Credentials een OAuth client ID aan van het type Web application.
3. Voeg bij Authorized JavaScript origins de URL van uw webshop toe (bijvoorbeeld https://www.mijnwebshop.nl), zonder pad en met het https-protocol.
4. Kopieer de gegenereerde Client ID (eindigt op .apps.googleusercontent.com).

De module instellen

1. Activeer in de module-instellingen Google Sign-In en plak de Client ID.
2. Sla op en leeg de cache.
3. Op /order verschijnt de Google-knop boven de tabbladen “Ik ben een nieuwe klant / Ik heb al een account”.

De flow: de klant klikt, kiest zijn Google-account, de module ontvangt een JWT-token en valideert dat aan serverzijde via het officiële endpoint tokeninfo (controle van audience, uitgever, vervaldatum en geverifieerd e-mailadres). Bestaat er een klantaccount met dat e-mailadres, dan wordt de klant ingelogd; zo niet, dan wordt automatisch een account aangemaakt met de voor- en achternaam uit het Google-profiel.

Sociale login met Facebook

De applicatie aanmaken

1. Maak op Meta for Developers een applicatie van het type Consumer aan.
2. Voeg het product Facebook Login toe en registreer uw domein in de instellingen.
3. Haal de App ID en de App Secret op in Settings → Basic.

De module instellen

Activeer Facebook Login in de instellingen, plak de App ID en de App Secret en sla op. De servervalidatie verloopt in twee stappen: debug_token (controleert dat het token wel degelijk bij uw applicatie hoort) en daarna het ophalen van het profiel met de handtekening appsecret_proof (HMAC-SHA256). De App Secret verlaat nooit uw server.

Adresaanvulling met Google Places

1. Activeer in de Google Cloud Console de API’s Places API en Maps JavaScript API.
2. Maak een API-sleutel aan en beperk die tot uw domein (aanbevolen).
3. Activeer in de module Adresaanvulling en plak de sleutel.

Het veld “Adres” van het formulier stelt dan al typend suggesties voor. Het kiezen van een suggestie vult straat, adrestoevoeging, plaats, postcode, land en waar nodig de regio vooraf in. De suggesties blijven beperkt tot de actieve landen van uw webshop (tot 5 landen, de limiet van de Google-API).

Adaptief adresformulier per land

Het adresformulier past zich automatisch aan het gekozen land aan:

• Het standaardland van de dropdown is het land dat in Internationaal → Lokalisatie van uw backoffice is ingesteld (en niet het eerste land op alfabet).
• Het veld Staat/Regio verschijnt alleen voor landen die er een hebben (VS, Spanje, Italië enzovoort) en de dropdown toont uitsluitend de actieve regio’s van het gekozen land.
• Het veld DNI verschijnt voor landen die het vereisen (Spanje).
• De postcodevalidatie gebruikt het formaat van het land.
• Bij een landwissel wordt de pagina herladen met het formulier, herschikt voor het nieuwe land.

Adres bewerken

Elk opgeslagen adres toont een potloodicoon. Een klik opent het inline formulier, vooraf ingevuld met alle waarden van het adres (aan serverzijde geladen met eigendomscontrole: een klant kan nooit het adres van een ander inzien). Het opslaan werkt het bestaande adres bij, zonder duplicaat aan te maken.

Kortingscode

Het (activeerbare) kortingscodeveld werkt via AJAX: toepassen en verwijderen zonder herladen, met onmiddellijke bijwerking van het overzicht. De bewerkingen worden gedelegeerd aan de native CartController van PrestaShop, dus alle winkelwagenregels (datums, minimumbedrag, vervoerdersbeperkingen, cumulatie) worden identiek gerespecteerd. De native foutberichten (“Deze code is vervallen”, “Minimumbedrag niet bereikt” enzovoort) worden ongewijzigd doorgegeven.

Compatibiliteit met vervoerders en Colissimo

De extra inhoud van de vervoerders (kaart met Colissimo-afhaalpunten, widget Mondial Relay enzovoort) wordt gerenderd via {$carrier.extraContent}, net als in de native template. Voor Colissimo-afhaalpunten injecteert de module automatisch de gegevens van het gekozen punt (identificatie, mobiel nummer) in de validatieverzoeken, wat het valse bericht “Selecteer een afhaalpunt” elimineert dat de Colissimo-module op one-page checkouts kon tonen.

Ontwikkelaarshooks

• displayDfsimplecheckoutExpress: slot bovenaan de checkout voor expressbetalingen (Apple Pay, Google Pay, PayPal Express).
• displayDfsimplecheckoutSidebarTop / displayDfsimplecheckoutSidebarBottom: injectiezones in de overzichtskolom.
• actionDfscSocialLogin: geactiveerd na een geslaagde sociale login, met de parameters customer en dfsc_social_provider (google of facebook). Handig voor CRM-tagging.

Probleemoplossing

De Google-knop verschijnt niet

• Controleer of de Client ID goed is ingevuld en de optie actief staat.
• Controleer in de browserconsole of er geen fout “origin not allowed” staat; voeg in dat geval de exacte URL van uw webshop (met https, zonder slash op het einde) toe aan de Authorized JavaScript origins in de Google Cloud Console.

De sociale login blijft niet behouden

Leeg de PrestaShop-cache en de browsercache. Blijft het probleem bestaan, controleer dan of geen enkele beveiligingsmodule van derden de sessiecookies na het inloggen ongeldig maakt.

Het veld Staat toont de verkeerde regio’s

Gebruik versie 1.2.20 of hoger van de module, die de structuur van het formulier per land aan serverzijde oplost.

Witte pagina op /order

Activeer de debugmodus van PrestaShop (_PS_MODE_DEV_) om de fout te tonen, of raadpleeg var/logs. Controleer of er niet tegelijk een andere one-page checkoutmodule actief is.

Verwijdering

Verwijder de module via het Modulebeheer. De runtime-omgeving wordt onmiddellijk vrijgegeven en de native checkout in 5 stappen wordt hersteld. Geen enkel achtergebleven bestand, geen enkel verweesd gegeven.