Checkout Simple & Élégant (dfsimplecheckout) — Guide complet

Présentation

DataFirefly Simple Checkout remplace le checkout 5 étapes natif de PrestaShop par un tunnel d’achat one-page moderne, inspiré des checkouts Shopify et Stripe. Le module monte son contrôleur au runtime via le hook actionDispatcher — aucun fichier override n’est écrit sur disque, et vos overrides tiers existants sur OrderController sont hérités proprement.

Fonctionnalités principales : layout deux colonnes avec récapitulatif permanent, connexion sociale Google et Facebook, auto-complétion d’adresse Google Places, formulaire d’adresse adaptatif par pays, code promo AJAX, trois couleurs personnalisables, mode distraction-free.

Installation

1. Dans votre back-office PrestaShop, allez dans Modules → Gestionnaire de modules → Installer un module.
2. Sélectionnez le fichier dfsimplecheckout.zip téléchargé depuis votre compte DataFirefly.
3. Cliquez sur Installer puis sur Configurer.
4. Videz le cache PrestaShop (Paramètres avancés → Performance → Vider le cache).
5. Visitez la page /order de votre boutique avec un produit au panier : le nouveau checkout s’affiche immédiatement.

Configuration générale

Couleurs

Trois couleurs sont configurables dans l’onglet réglages du module :

• Couleur principale — boutons, liens, états actifs, radios sélectionnées (défaut #1a73e8).
• Couleur hover des boutons — état survol des boutons primaires « Continuer », « Commander » (défaut #1559b8).
• Couleur accent / succès — indicateurs d’étape complétée, pill de code promo appliqué, label « Gratuit » du transporteur, messages de succès (défaut #008060).

Les trois valeurs sont injectées comme variables CSS (--dfsc-primary, --dfsc-primary-hover, --dfsc-success) et validées par regex hexadécimal strict.

Logo

Renseignez l’URL d’un logo personnalisé pour l’en-tête du checkout ; à défaut, le logo de la boutique est utilisé. Dimensions rendues : 190×42 px maximum.

Mode distraction-free

L’option Masquer le header et le footer du thème (activée par défaut) supprime l’en-tête complet du thème (menu, recherche, panier) et son pied de page sur la page /order uniquement. L’implémentation surcharge les blocs Smarty header et footer dans notre template : sur un thème qui n’utilise pas ces blocs standards, l’option est simplement sans effet — jamais de page blanche.

Autres options

• Champ note vendeur (on/off)
• Champ code promo (on/off)
• Badges de confiance — HTML libre affiché sous le récapitulatif
• Liens légaux en pied de checkout (CGV, confidentialité, retours — détectés via les rôles CMS natifs)

Connexion sociale Google

Créer les identifiants

1. Rendez-vous sur Google Cloud Console et créez (ou sélectionnez) un projet.
2. Dans APIs & Services → Credentials, créez un OAuth client ID de type Web application.
3. Dans Authorized JavaScript origins, ajoutez l’URL de votre boutique (ex. https://www.maboutique.fr) — sans chemin, avec le protocole https.
4. Copiez le Client ID généré (se termine par .apps.googleusercontent.com).

Configurer le module

1. Dans les réglages du module, activez Google Sign-In et collez le Client ID.
2. Enregistrez puis videz le cache.
3. Sur /order, le bouton Google apparaît au-dessus des onglets « Je suis un nouveau client / J’ai déjà un compte ».

Le flux : le client clique, sélectionne son compte Google, le module reçoit un jeton JWT qu’il valide côté serveur via le endpoint officiel tokeninfo (vérification de l’audience, de l’émetteur, de l’expiration et de l’email vérifié). Si un compte client existe avec cet email, il est connecté ; sinon un compte est créé automatiquement avec le nom et prénom du profil Google.

Connexion sociale Facebook

Créer l’application

1. Sur Meta for Developers, créez une application de type Consumer.
2. Ajoutez le produit Facebook Login et déclarez votre domaine dans les paramètres.
3. Récupérez l’App ID et l’App Secret dans Settings → Basic.

Configurer le module

Activez Facebook Login dans les réglages, collez App ID et App Secret, enregistrez. La validation serveur est en deux étapes : debug_token (vérifie que le jeton appartient bien à votre application) puis récupération du profil avec signature appsecret_proof (HMAC-SHA256). L’App Secret ne quitte jamais votre serveur.

Auto-complétion d’adresse Google Places

1. Dans Google Cloud Console, activez les APIs Places API et Maps JavaScript API.
2. Créez une clé API et restreignez-la à votre domaine (recommandé).
3. Dans le module, activez Auto-complétion d’adresse et collez la clé.

Le champ « Adresse » du formulaire propose alors des suggestions pendant la frappe. La sélection d’une suggestion pré-remplit rue, complément, ville, code postal, pays et région le cas échéant. Les suggestions sont limitées aux pays actifs de votre boutique (jusqu’à 5 pays — limite de l’API Google).

Formulaire d’adresse adaptatif par pays

Le formulaire d’adresse s’adapte automatiquement au pays sélectionné :

• Le pays par défaut du dropdown est celui configuré dans International → Localisation de votre back-office (et non le premier pays alphabétique).
• Le champ État/Région n’apparaît que pour les pays qui en comportent (USA, Espagne, Italie…) et son dropdown liste uniquement les régions actives du pays sélectionné.
• Le champ DNI apparaît pour les pays qui l’exigent (Espagne).
• La validation du code postal utilise le format du pays.
• Au changement de pays, la page se recharge avec le formulaire restructuré pour le nouveau pays.

Édition d’adresse

Chaque adresse enregistrée affiche une icône crayon. Le clic ouvre le formulaire inline pré-rempli avec toutes les valeurs de l’adresse (chargées côté serveur avec contrôle de propriété — un client ne peut jamais consulter l’adresse d’un autre). La sauvegarde met à jour l’adresse existante, sans créer de doublon.

Code promo

Le champ code promo (activable) fonctionne en AJAX : application et suppression sans rechargement, mise à jour instantanée du récapitulatif. Les opérations sont déléguées au contrôleur natif CartController de PrestaShop, donc toutes les règles panier (dates, montant minimum, restrictions transporteur, cumul) sont respectées à l’identique. Les messages d’erreur natifs (« Ce code a expiré », « Montant minimum non atteint »…) sont restitués tels quels.

Compatibilité transporteurs et Colissimo

Le contenu extra des transporteurs (carte de points relais Colissimo, widget Mondial Relay…) est rendu via {$carrier.extraContent} comme dans le template natif. Pour Colissimo Points Relais, le module injecte automatiquement les informations du point sélectionné (identifiant, téléphone mobile) dans les requêtes de validation, ce qui élimine le faux message « Veuillez sélectionner un point de retrait » que le module Colissimo pouvait afficher sur les checkouts one-page.

Hooks développeur

• displayDfsimplecheckoutExpress — slot en haut du checkout pour les paiements express (Apple Pay, Google Pay, PayPal Express).
• displayDfsimplecheckoutSidebarTop / displayDfsimplecheckoutSidebarBottom — zones d’injection dans la colonne récapitulatif.
• actionDfscSocialLogin — déclenché après une connexion sociale réussie, avec les paramètres customer et dfsc_social_provider (google ou facebook). Utile pour du tagging CRM.

Dépannage

Le bouton Google ne s’affiche pas

• Vérifiez que le Client ID est bien renseigné et l’option activée.
• Vérifiez dans la console navigateur qu’il n’y a pas d’erreur « origin not allowed » — dans ce cas, ajoutez l’URL exacte de votre boutique (avec https, sans slash final) dans les Authorized JavaScript origins de Google Cloud Console.

La connexion sociale ne persiste pas

Videz le cache PrestaShop et le cache navigateur. Si le problème persiste, vérifiez qu’aucun module de sécurité tiers n’invalide les cookies de session après login.

Le champ État affiche les mauvaises régions

Assurez-vous d’utiliser la version 1.2.20 ou supérieure du module, qui résout la structure du formulaire côté serveur pour chaque pays.

Page blanche sur /order

Activez le mode debug PrestaShop (_PS_MODE_DEV_) pour afficher l’erreur, ou consultez var/logs. Vérifiez qu’aucun autre module de checkout one-page n’est actif simultanément.

Désinstallation

Désinstallez le module depuis le Gestionnaire de modules. L’environnement runtime est libéré immédiatement et le checkout natif 5 étapes est restauré. Aucun fichier résiduel, aucune donnée orpheline.