Calendario de reservas
- Selector de rango (retiro y entrega)
- Bloqueo de días ya reservados vía API
- Precio total estimado en vivo
- Validación de días mínimos por producto
Caso de éxito · E-commerce headless
La Mesa de Nora
E-commerce headless de arriendos: SPA en Vue 3 sobre PrestaShop
Klevo diseñó y desarrolló desde cero la tienda online de La Mesa de Nora, empresa chilena de arriendo de vajilla, mobiliario y decoración para eventos. Toda la experiencia corre sobre una SPA Vue 3 a medida, mientras PrestaShop opera como motor de catálogo, inventario y pagos.
- 15+
- vistas a medida
- 20+
- componentes Vue
- Headless
- SPA + PrestaShop
- MP
- pago en línea + garantía
lamesadenora.cl
El desafío
Arriendos por días en un rubro donde la presentación lo es todo
Una tienda de eventos no puede sentirse como cualquier e-commerce. Pero detrás también necesita resolver disponibilidad por fechas, garantías y un backoffice donde la dueña pueda trabajar tranquila.
Arriendo, no venta
El precio depende del rango de fechas y cada producto tiene stock limitado por día reservado.
Garantía del 30%
Cada arriendo cobra un depósito reembolsable que debe reflejarse en carrito, checkout y pasarela.
Catálogo con identidad fuerte
Vajilla, mobiliario y decoración exigen storytelling visual, no la grilla genérica de un PrestaShop.
Gestión autónoma
La dueña necesita editar banners, colecciones y productos sin depender del desarrollador.
La solución
Arquitectura headless: lo mejor de los dos mundos
PrestaShop sigue siendo el cerebro: maneja productos, stock, órdenes y pasarela. Pero la dueña y el cliente final nunca lo ven: el frontend es una SPA Vue 3 pensada exclusivamente para arriendos de eventos.
- Frontend SPA Vue 3 totalmente desacoplado del backend.
- PrestaShop sigue manejando catálogo, órdenes y pagos.
- Stock sincronizado en vivo con la API de Defontana.
- Facturación o boleta electrónica emitida automáticamente según el estado del pedido.
- Cálculo de precios reactivo por días de arriendo + IVA + garantía.
- Módulo PHP a medida para que el cliente administre banners desde el admin.
Flujo de la plataforma
Cliente final · SPA Vue 3
API REST en Laravel (Bearer Token)
PrestaShop + módulo PHP propio
Mercado Pago (pago + garantía)
Funcionalidades
Lo que vive el cliente final, lo que administra el negocio
Cada módulo resuelve un proceso real del rubro: reservar por fechas, pagar con garantía, inspirarse y volver a comprar.
Carrito reactivo
- Subtotal por días de arriendo
- IVA 19% calculado en vivo
- Garantía 30% visible y reembolsable
- Sidebar persistente entre vistas
Checkout con Mercado Pago
- Resumen con desglose claro
- Callbacks success / pending / failure
- Seguimiento por número de orden
- Garantía integrada al monto a cobrar
Inspiración interactiva
- Hotspots clicables sobre imágenes
- "Compra el look" enlazado al catálogo
- Carruseles de destacados y novedades
- Tarjetas y grillas reutilizables
Catálogo y filtros
- Filtros laterales por categoría
- Selección automática de variación
- Rango de precios "desde $X"
- Búsqueda con Pinia store
Banners autogestionados
- Módulo PHP nativo en PrestaShop
- Hero del home y tarjetas de colección
- Targeting desktop / móvil / ambos
- CRUD completo con subida de imágenes
Lógica de precios
Carrito reactivo, consciente de fechas
El total no se calcula al final: se recalcula en vivo mientras el cliente arrastra fechas o cambia cantidades, y se sincroniza con la garantía que se envía a Mercado Pago.
- Días de arriendoretiro → entrega
- Subtotalprecio × cantidad × días
- IVAsubtotal × 19%
- Garantía reembolsable(subtotal + IVA) × 30%
- Totalsubtotal + IVA + garantía
Integraciones
Las piezas que sostienen la operación
PrestaShop
Motor de catálogo, inventario, órdenes y administración. Sigue siendo el backoffice del negocio.
Mercado Pago
Pago en línea con garantía incluida y manejo de los tres callbacks (éxito, pendiente, falla).
API REST a medida
Desarrollada en Laravel: catálogo, disponibilidad, banners y órdenes con autenticación Bearer Token.
Defontana
Stock en vivo desde el ERP del cliente: la tienda nunca vende lo que no hay disponible.
Facturación electrónica
Emisión automática de boleta o factura según el estado del pedido, sin intervención manual.
Arquitectura
Headless, pero sin reinventar la rueda
PrestaShop maneja lo que ya hace bien — inventario, órdenes, pagos — y el frontend se encarga de lo que un PrestaShop por defecto no resuelve: la experiencia.
Frontend SPA
Vue 3 + Vite 5 + Pinia + Vue Router
Backend
PrestaShop con módulo PHP propio para administración
API REST
Capa intermedia en Laravel con autenticación Bearer Token
Base de datos
MySQL como motor principal de la plataforma
Capacidades
Lo que la plataforma hoy resuelve
- Arquitectura headless
- Cálculo de precios por días
- Calendario de disponibilidad
- Garantía del 30% integrada
- Pasarela Mercado Pago
- Stock sincronizado con Defontana
- Boleta/factura electrónica automática
- Carrito persistente con Pinia
- Filtros y búsqueda en SPA
- SEO controlado por ruta
- JSON-LD Product + Breadcrumb
- Animaciones on-scroll propias
- Módulo PrestaShop a medida
- Apache .htaccess con fallback SPA
Resultados
Impacto en el negocio
Beneficios cualitativos observados tras el lanzamiento de la nueva plataforma.
UX moderna
Experiencia SPA fluida sobre un backend probado como PrestaShop.
Autonomía del cliente
La dueña administra banners y colecciones sin tocar código.
Operación sin fricción
Reservas, cobro y garantía resueltas en un solo flujo.
Stock siempre real
Sincronización con la API de Defontana evita sobreventas y errores de inventario.
Cero papeleo manual
Boleta o factura electrónica emitida automáticamente al confirmar el pedido.
SEO controlado
Meta tags, Open Graph y JSON-LD por ruta para indexar bien.
Listo para escalar
API headless preparada para app móvil o nuevos canales.
Stack
Tecnologías utilizadas
- Vue 3
- Vite 5
- Pinia
- Vue Router 4
- Tailwind CSS 3.4
- Axios
- PrestaShop
- PHP / Smarty
- Laravel
- MySQL
- Mercado Pago
- Defontana API
- Apache
- Bearer Token
El proyecto en detalle
Por qué construimos un e-commerce headless para arriendos en Chile
La Mesa de Nora opera en un rubro donde el detalle visual lo es todo: arriendo de vajilla, mobiliario y decoración para eventos en Chile. La tienda online no podía verse ni comportarse como un PrestaShop genérico, pero al mismo tiempo el negocio necesitaba mantener un backoffice probado para inventario, órdenes y pasarela de pago. La salida fue una arquitectura headless: PrestaShop sigue siendo el cerebro administrativo, y toda la experiencia del cliente final corre sobre una Single Page Application desarrollada en Vue 3.
El modelo de negocio agrega complejidad propia del arriendo: el precio depende de los días entre retiro y entrega, cada producto tiene disponibilidad limitada por fechas reservadas y cada arriendo cobra una garantía reembolsable del 30%. Resolverlo requirió modelar el carrito en Pinia como un store consciente de fechas, recalcular subtotal, IVA y garantía en vivo, y sincronizar el monto final con Mercado Pago de forma transparente para el cliente.
Sobre PrestaShop desarrollamos un módulo PHP a medida que le permite a la dueña administrar banners y colecciones desde el admin, sin tocar código. El stock se mantiene sincronizado con la API de Defontana — el ERP del cliente — para evitar sobreventas, y la facturación o boleta electrónica se emite automáticamente según el estado del pedido. El resultado: una experiencia premium para el cliente final, una operación sin fricción para el equipo, y una plataforma headless lista para crecer a app móvil o nuevos canales sin reescribirla.
Preguntas frecuentes
Lo que suelen preguntarnos sobre proyectos así
- ¿Se puede hacer un e-commerce de arriendo (no venta) con PrestaShop?
- Sí, pero no out-of-the-box. PrestaShop está pensado para venta, así que el modelo de arriendo por días, la disponibilidad por fecha y la garantía hay que construirlos. La arquitectura headless funcionó muy bien acá: dejamos a PrestaShop manejar productos, órdenes y pasarela, y construimos toda la lógica de fechas/precios en el frontend Vue 3 + una API Laravel.
- ¿Qué es un e-commerce headless y cuándo conviene?
- Headless significa separar el backend de la tienda (catálogo, órdenes, pagos) del frontend que ve el cliente. Conviene cuando necesitas una experiencia muy personalizada — calendarios, configuradores, animaciones, UX a medida — que no cabe en los temas estándar de PrestaShop, Shopify o WooCommerce. La curva técnica es más alta, pero permite vender de formas que el e-commerce genérico no soporta.
- ¿Cómo se integra Mercado Pago con cobro de garantía?
- En el caso de La Mesa de Nora la garantía es una garantía reembolsable del 30% sobre el subtotal + IVA, y se cobra junto con el arriendo en el mismo pago de Mercado Pago. El monto total se calcula en el frontend, se valida en el backend y se envía a Mercado Pago como un solo cargo. Después, al devolver el arriendo, la garantía se reembolsa por el mismo medio.
- ¿Se puede emitir boleta electrónica automática desde una tienda online en Chile?
- Sí. Hay que integrar con un proveedor de DTE autorizado por el SII (Defontana, Bsale, OpenFactura, Haulmer, etc.). En este proyecto la emisión de boleta o factura se dispara automáticamente al cambiar el estado del pedido a "pagado", sin intervención manual. El cliente recibe su documento tributario y la contabilidad queda al día.
- ¿Cuánto tarda desarrollar un e-commerce headless así en Chile?
- Depende del alcance. Un MVP funcional con catálogo, carrito, calendario de reservas y pasarela suele tomar entre 8 y 12 semanas. Si se agregan módulos PrestaShop a medida, integración con ERP (Defontana, Bsale, Softland), facturación electrónica y panel de banners, se mueve a 12-16 semanas. Lo cotizamos por hitos, sin sorpresas.
Otros proyectos
Más casos que podrían interesarte
¿Quieres un e-commerce que no se sienta como cualquier tienda?
En Klevo construimos experiencias headless sobre Vue, conectadas a Shopify, PrestaShop, WooCommerce o backends a medida. Si tu modelo de negocio no encaja en una plantilla, conversemos.