Checkout Simple y Elegante (dfsimplecheckout) — Guía completa

Presentación

DataFirefly Simple Checkout reemplaza el checkout nativo de 5 pasos de PrestaShop por un proceso de compra one-page moderno, inspirado en los checkouts de Shopify y Stripe. El módulo monta su controlador en runtime mediante el hook actionDispatcher: no se escribe ningún archivo override en disco, y los overrides de terceros existentes sobre OrderController se heredan limpiamente.

Funcionalidades principales: diseño de dos columnas con resumen permanente, inicio de sesión social Google y Facebook, autocompletado de dirección Google Places, formulario de dirección adaptativo por país, código de descuento AJAX, tres colores personalizables, modo sin distracciones.

Instalación

1. En tu back-office de PrestaShop, ve a Módulos → Gestor de módulos → Subir un módulo.
2. Selecciona el archivo dfsimplecheckout.zip descargado desde tu cuenta DataFirefly.
3. Haz clic en Instalar y luego en Configurar.
4. Vacía la caché de PrestaShop (Parámetros avanzados → Rendimiento → Vaciar caché).
5. Visita la página /order de tu tienda con un producto en el carrito: el nuevo checkout se muestra de inmediato.

Configuración general

Colores

Tres colores son configurables en los ajustes del módulo:

• Color principal — botones, enlaces, estados activos, radios seleccionados (por defecto #1a73e8).
• Color hover de botones — estado hover de los botones primarios «Continuar», «Realizar pedido» (por defecto #1559b8).
• Color acento / éxito — indicadores de paso completado, pill de descuento aplicado, etiqueta «Gratis» del transportista, mensajes de éxito (por defecto #008060).

Los tres valores se inyectan como variables CSS (--dfsc-primary, --dfsc-primary-hover, --dfsc-success) y se validan mediante regex hexadecimal estricto.

Logo

Indica la URL de un logo personalizado para la cabecera del checkout; en su defecto se usa el logo de la tienda. Dimensiones renderizadas: máximo 190×42 px.

Modo sin distracciones

La opción Ocultar header y footer del tema (activada por defecto) elimina la cabecera completa del tema (menú, búsqueda, carrito) y su pie de página solo en la página /order. La implementación sobrescribe los bloques Smarty header y footer en nuestra plantilla: en un tema que no use estos bloques estándar, la opción simplemente no tiene efecto — nunca una página en blanco.

Otras opciones

• Campo de nota para el vendedor (on/off)
• Campo de código de descuento (on/off)
• Badges de confianza — HTML libre mostrado bajo el resumen
• Enlaces legales en el pie del checkout (CGV, privacidad, devoluciones — detectados mediante los roles CMS nativos)

Inicio de sesión social Google

Crear las credenciales

1. Ve a Google Cloud Console y crea (o selecciona) un proyecto.
2. En APIs & Services → Credentials, crea un OAuth client ID de tipo Web application.
3. En Authorized JavaScript origins, añade la URL de tu tienda (ej. https://www.mitienda.es) — sin ruta, con protocolo https.
4. Copia el Client ID generado (termina en .apps.googleusercontent.com).

Configurar el módulo

1. En los ajustes del módulo, activa Google Sign-In y pega el Client ID.
2. Guarda y vacía la caché.
3. En /order, el botón de Google aparece sobre las pestañas «Soy un cliente nuevo / Ya tengo una cuenta».

El flujo: el cliente hace clic, selecciona su cuenta de Google, y el módulo recibe un JWT que valida en servidor mediante el endpoint oficial tokeninfo (verificación de audiencia, emisor, expiración y email verificado). Si existe una cuenta de cliente con ese email, se conecta; en caso contrario se crea automáticamente una cuenta con el nombre y apellido del perfil de Google.

Inicio de sesión social Facebook

Crear la aplicación

1. En Meta for Developers, crea una aplicación de tipo Consumer.
2. Añade el producto Facebook Login y declara tu dominio en los ajustes.
3. Recupera el App ID y el App Secret en Settings → Basic.

Configurar el módulo

Activa Facebook Login en los ajustes, pega App ID y App Secret, guarda. La validación en servidor es en dos pasos: debug_token (verifica que el token pertenece a tu aplicación) y luego recuperación del perfil con firma appsecret_proof (HMAC-SHA256). El App Secret nunca sale de tu servidor.

Autocompletado de dirección Google Places

1. En Google Cloud Console, activa las APIs Places API y Maps JavaScript API.
2. Crea una API key y restríngela a tu dominio (recomendado).
3. En el módulo, activa Autocompletado de dirección y pega la clave.

El campo «Dirección» del formulario ofrece entonces sugerencias mientras se escribe. Al seleccionar una sugerencia se rellenan calle, complemento, ciudad, código postal, país y región si aplica. Las sugerencias se limitan a los países activos de tu tienda (hasta 5 países — límite de la API de Google).

Formulario de dirección adaptativo por país

El formulario de dirección se adapta automáticamente al país seleccionado:

• El país por defecto del dropdown es el configurado en Internacional → Localización de tu back-office (y no el primer país alfabético).
• El campo Estado/Región solo aparece para los países que los tienen (EE. UU., España, Italia…) y su dropdown lista únicamente las regiones activas del país seleccionado.
• El campo DNI aparece para los países que lo requieren (España).
• La validación del código postal usa el formato del país.
• Al cambiar de país, la página se recarga con el formulario reestructurado para el nuevo país.

Edición de dirección

Cada dirección guardada muestra un icono de lápiz. El clic abre el formulario inline prerelleno con todos los valores de la dirección (cargados en servidor con control de propiedad — un cliente nunca puede consultar la dirección de otro). Guardar actualiza la dirección existente, sin crear duplicados.

Código de descuento

El campo de código de descuento (activable) funciona con AJAX: aplicación y eliminación sin recargar, actualización instantánea del resumen. Las operaciones se delegan al controlador nativo CartController de PrestaShop, por lo que todas las reglas del carrito (fechas, importe mínimo, restricciones de transportista, acumulación) se respetan de forma idéntica. Los mensajes de error nativos («Este cupón ha caducado», «Importe mínimo no alcanzado»…) se muestran tal cual.

Compatibilidad con transportistas y Colissimo

El contenido extra de los transportistas (mapa de puntos de recogida Colissimo, widget Mondial Relay…) se renderiza mediante {$carrier.extraContent} como en la plantilla nativa. Para Colissimo Puntos de Recogida, el módulo inyecta automáticamente los datos del punto seleccionado (identificador, teléfono móvil) en las peticiones de validación, lo que elimina el falso mensaje «Seleccione un punto de recogida» que el módulo Colissimo podía mostrar en los checkouts one-page.

Hooks para desarrolladores

• displayDfsimplecheckoutExpress — slot en la parte superior del checkout para pagos express (Apple Pay, Google Pay, PayPal Express).
• displayDfsimplecheckoutSidebarTop / displayDfsimplecheckoutSidebarBottom — zonas de inyección en la columna del resumen.
• actionDfscSocialLogin — se dispara tras un inicio de sesión social exitoso, con los parámetros customer y dfsc_social_provider (google o facebook). Útil para tagging CRM.

Resolución de problemas

El botón de Google no se muestra

• Verifica que el Client ID está indicado y la opción activada.
• Comprueba en la consola del navegador que no hay error «origin not allowed» — en ese caso, añade la URL exacta de tu tienda (con https, sin barra final) en los Authorized JavaScript origins de Google Cloud Console.

El inicio de sesión social no persiste

Vacía la caché de PrestaShop y la del navegador. Si el problema persiste, verifica que ningún módulo de seguridad de terceros invalida las cookies de sesión tras el login.

El campo Estado muestra las regiones equivocadas

Asegúrate de usar la versión 1.2.20 o superior del módulo, que resuelve la estructura del formulario en servidor para cada país.

Página en blanco en /order

Activa el modo debug de PrestaShop (_PS_MODE_DEV_) para mostrar el error, o consulta var/logs. Verifica que ningún otro módulo de checkout one-page está activo simultáneamente.

Desinstalación

Desinstala el módulo desde el Gestor de módulos. El entorno runtime se libera de inmediato y el checkout nativo de 5 pasos se restaura. Sin archivos residuales, sin datos huérfanos.