← Volver a proyectos
TPV Proyecto académico 2026

TPV NORD & CO

Punto de venta headless desarrollado a medida para una tienda de moda multisegmento. Conectado en tiempo real a WooCommerce mediante su REST API, permite a los empleados gestionar ventas, aplicar descuentos y generar tickets imprimibles sin depender de ningún plugin de terceros.

PHP 8 WooCommerce REST API JS Vanilla Tailwind CSS WordPress Headless
Panel principal del TPV NORD & CO con catálogo y ticket de venta
EL PROYECTO

Un TPV propio, sin plugins, conectado al catálogo real

El reto era construir una aplicación de punto de venta completamente independiente del panel de administración de WordPress, que consumiera el catálogo de WooCommerce en tiempo real y permitiera a los vendedores operar desde cualquier dispositivo con navegador. Sin instalaciones, sin licencias de software de caja, sin depender de la conexión al panel de WP.

El frontend es una SPA construida en JavaScript vanilla que se comunica con WordPress exclusivamente a través de su REST API, usando un proxy PHP intermedio para evitar problemas de CORS y centralizar la autenticación.

ACCESO

Autenticación con sesión PHP

Pantalla de login del TPV NORD & CO en modo oscuro

Login con credenciales de WordPress

El acceso se gestiona mediante un formulario que autentica al usuario directamente contra la API de WordPress. Si las credenciales son válidas, el servidor PHP guarda el token de autenticación en sesión y redirige al panel del TPV.

Cualquier intento de acceder al TPV sin sesión activa redirige automáticamente al login. La aplicación incluye modo claro y oscuro con persistencia en localStorage.

CATÁLOGO Y VENTA

Catálogo en tiempo real y ticket de venta

Catálogo de productos en tiempo real con filtros por categoría

Catálogo sincronizado con WooCommerce

Los productos se cargan directamente desde la REST API de WooCommerce, mostrando imagen, nombre, precio, precio de oferta y stock disponible. El catálogo se puede filtrar por categoría y buscar por nombre o SKU en tiempo real sin recargar la página.

El ticket de venta se actualiza al instante al añadir o quitar productos, mostrando subtotal, IVA (21%) y total. Los artículos sin stock se marcan visualmente y no se pueden añadir al ticket.

Modal de confirmación de pago con resumen del ticket y método de pago

Cobro y método de pago

Al cobrar se abre un modal con el resumen completo del ticket: líneas, descuentos aplicados, IVA y total final. El vendedor selecciona el método de pago (efectivo, tarjeta o Bizum), opcionalmente anota el nombre del cliente y confirma la venta.

La venta queda registrada como pedido en WooCommerce y se guarda en el historial local del día, accesible en cualquier momento para reimprimir o consultar el desglose de ingresos.

Ticket de venta listo para imprimir con descuento aplicado

Ticket imprimible

Cada venta genera un ticket numerado con todos los artículos, precios, descuentos, IVA, total y método de pago. El ticket está optimizado para impresión directa desde el navegador con estilos específicos para papel, sin cabeceras ni elementos de interfaz.

FUNCIONALIDADES

Todo lo que incluye

🔐

Autenticación segura

Login contra la API de WordPress con token en sesión PHP. Rutas protegidas sin sesión activa.

🛍️

Catálogo en tiempo real

Productos, precios, stock y categorías sincronizados con WooCommerce sin recargar.

🔍

Búsqueda y filtros

Búsqueda instantánea por nombre o SKU y filtrado por categoría.

🏷️

Descuentos con PIN

Sistema de descuentos protegido por código de empleado, con porcentajes predefinidos o personalizado.

🖨️

Ticket imprimible

Generación de ticket numerado con estilos de impresión optimizados para papel.

📋

Historial del día

Registro de todas las ventas de la jornada con total recaudado, método de pago y opción de reimpresión.

🎓

Proyecto Demo

Este proyecto nació como ejercicio académico, y lo hemos convertido en una demostración de lo que KromaDev puede construir: los datos son ficticios, pero el desarrollo es completamente real. Si quieres ver una demostración en vivo, escríbenos.