29 Carrito de Compras en Laravel Sistema de Órdenes de Compra con JavaScript Dinámico en el sistema

Duración: 14 min
Módulo: Módulo Compras Lección 6 de 16
Anterior
28 Listado de Órdenes de Compra en Laravel 13: Vista, Tabla y Modelo CompraTmp 📋🛒Sistema de Farmacia
Siguiente
30 Confirmar Orden de Compra en Laravel 13: Transacciones y Guardado en la BD Sistema de Farmacia

Descripción

🚀 Lección 29: Construcción del Carrito de Compras Dinámico con JavaScript y Ajax para nuestro Sistema Farmacéutico

En este capítulo nos sumergimos de lleno en la interactividad del sistema, transformando una vista estática en una experiencia de usuario sumamente ágil y profesional, ideal para el ritmo de trabajo real en una farmacia.

🎯 El Objetivo Central

El propósito de esta lección es estructurar el formulario de creación para las órdenes de compra. Creamos un "carrito temporal" que permite gestionar los productos que se solicitarán a los proveedores, logrando que cada acción se procese de forma interna en el servidor sin que el navegador tenga que recargar la pantalla ni una sola vez.

🛠️ Lo que Desarrollamos en el Controlador

Para dar soporte a esta interfaz dinámica, expandimos la lógica del backend agregando funciones clave envueltas en sistemas de control de errores para garantizar la estabilidad del software:

⚡ Carga Inteligente de Datos: Preparamos la vista enviando el listado de sucursales, proveedores y el catálogo de productos. Optimizamos la consulta para traer al mismo tiempo las categorías, laboratorios, formas farmacéuticas y presentaciones de cada medicamento.

➕ Función para Agregar Ítems: Un nuevo método que recibe la información del producto seleccionado e inicializa su registro en la tabla de compras temporales.

🔄 Función para Actualizar Ítems: La lógica encargada de modificar en tiempo real la cantidad, el precio de compra o el precio de venta a medida que el usuario edita la información.

❌ Función para Remover Ítems: Un proceso limpio para dar de baja un producto específico del listado temporal si el usuario cambia de opinión.

🧹 Función para Limpiar el Carrito: El mecanismo para vaciar por completo la orden en desarrollo y empezar desde cero con un solo clic.

🎨 La Magia en la Interfaz y la Experiencia de Usuario

La vista de esta lección cobra vida propia gracias a un robusto script de JavaScript que maneja más de mil líneas de lógica en el frontend, logrando un comportamiento fluido:

🛑 Validación del Flujo de Trabajo: El sistema guía al usuario obligándolo a seleccionar primero la sucursal de destino. Si intenta agregar un producto antes de este paso, una alerta detiene la acción para evitar registros huérfanos.

📊 Cálculo de Utilidades en Tiempo Real: Implementamos una lógica bidireccional en caliente. Si el usuario digita el precio de compra y el de venta, el sistema muestra instantáneamente el porcentaje de ganancia. Si prefiere ingresar directamente el porcentaje de ganancia deseado, el sistema calcula de inmediato el precio de venta sugerido.

⌨️ Fluidez con Lector de Barras y Teclado: Optimizamos la navegación para que al presionar la tecla Enter o Tab, el foco del cursor salte automáticamente al siguiente campo de edición. Esto permite un trabajo continuo con pistolas de código de barras, agilizando la carga en el mostrador.

🗑️ Gestión de Registros Temporales: Toda esta información se almacena de forma aislada en una tabla temporal vinculada al usuario en sesión. De este modo, los inventarios generales y los lotes permanecen intactos hasta que la orden sea confirmada formalmente.

Al terminar este capítulo, el sistema cuenta con una pantalla moderna, interactiva y de alta velocidad, dejando el escenario perfectamente preparado para la consolidación de la compra y el envío automatizado por correo electrónico al proveedor en los próximos videos.

$10.00
Iniciar sesión para inscribirse

Lecciones

Módulo Instalación y Configuración
Lección 1. 01 🏥 Sistema de Farmacia en Laravel 💊 Presentación del Curso: ¿Qué Construiremos? 🚀 9 min
Lección 2. 02 Instalación de Laravel 13 desde cero: Hola Mundo, Autenticación y Conexión a Base de Datos 🚀🔐 16 min
Lección 3. 03 Como Instalar Mazer Admin en Laravel 13: Instalación del Template y Adaptación del Login 🎨🔐 20 min
Lección 4. 04 Controlador Admin, Layout Principal y Ajustes Globales en Laravel 13 🏗️⚙️ 20 min
Módulos Ajustes y Roles
Lección 1. 05 Módulo de Ajustes Globales⚙️ en Laravel 13: Configuración del Sistema con Validación y Logo 🏢 23 min
Lección 2. 06 Módulo de Gestión de Roles con Spatie Permission en Laravel 13: CRUD Completo y Seguro 👥🔐 28 min
Módulos Usuarios y Sucursales
Lección 1. 07 Módulo Usuarios en Laravel 13 con Spatie: Búsqueda, Roles y Protección 👥🔐con Asignación de Rol 33 min
Lección 2. 08 Módulo de Sucursales en Laravel 13: CRUD, Búsqueda y Estado Activo/Inactivo 🏢📍Validación y otros 25 min
Módulo Empleados
Lección 1. 09 Módulo de Empleados 👥 Laravel 13: CRUD con Usuarios, Roles y Avatar con las Tablas Relacionadas 37 min
Lección 2. 10 Código Fuente del Sistema de Farmacia y Ajustes del Sistema 🚀📦 con Laravel 13 21 min
Módulo Categorías, Laboratorios, Formas Farmacéuticas y Presentaciones
Lección 1. 11 Módulo de Categorías en Laravel 13: CRUD para Clasificar Productos 📁🏷️ Sistema de Farmacia 23 min
Lección 2. 12 Módulo de Productos y Laboratorios en Laravel 13: Migraciones y Relaciones 💊🏭 Sistema de Farmacia 21 min
Lección 3. 13 Módulo Laboratorios 💊 CRUD de Laboratorios en Gestión de Fabricantes 🏭 Sistema de farmacia 24 min
Lección 4. 14 Módulo Formas Farmacéuticas en Laravel CRUD Completo para tu Sistema de Farmacia 💊📋 16 min
Lección 5. 15 Módulo de Presentaciones en Laravel CRUD para Empaques y Formatos En el sistema de farmacia📦💊 8 min
Módulo Productos
Lección 1. 16 Listado de Productos en Laravel Tabla, Búsqueda y Paginación Profesional 📋💊 Sistema de Farmacia 19 min
Lección 2. 17 Formulario de Productos en Laravel: Selects Dinámicos, Validación y Vista Previa de Imagen 📝💊 20 min
Lección 3. 18 Vista de Detalle de Productos en Laravel Diseño Profesional con Relaciones 📋💊Sistema de Farmacia 18 min
Lección 4. 19 Edición de Productos en Laravel Formulario Completo con Validación y Actualización de Imagen 📝✏️ 10 min
Lección 5. 20 Eliminación de Productos en Laravel Modal de Confirmación y Limpieza de Imagen Sistema Farmacia 8 min
Lección 6. 21 Compartiendo el Código Fuente Sistema de Farmacia en Laravel 📦💊 y Módulo Proveedores 16 min
Módulo Lotes y Clientes
Lección 1. 22 Módulo de Lotes en Laravel Trazabilidad de Productos Farmacéuticos 📦🔢 Sistema de Farmacia 14 min
Lección 2. 23 Módulo de Clientes en Laravel CRUD Completo con CI/NIT y Búsqueda Múltiple 👥 Sistema de Farmacia 14 min
Módulo Compras
Lección 1. 24 Módulo de Compras en Laravel Migración y Relaciones para Gestión de Inventario Sistema deFarmacia 13 min
Lección 2. 25 Módulo de Inventarios en Laravel Control de Stock, Precios y Ubicaciones 📊📦Sistema de Farmacia 18 min
Lección 3. 26 Construcción de estructura Tablas Compra, Detalle y Temporal con Índices 🛒📋Sistema de Farmacia 11 min
Lección 4. 27 Rutas y Navegación para Módulo de Compras en Laravel Menú Activo y Submenús🧭🛒 Sistema de Farmacia 14 min
Lección 5. 28 Listado de Órdenes de Compra en Laravel 13: Vista, Tabla y Modelo CompraTmp 📋🛒Sistema de Farmacia 21 min
Lección 6. 29 Carrito de Compras en Laravel Sistema de Órdenes de Compra con JavaScript Dinámico en el sistema 14 min
Lección 7. 30 Confirmar Orden de Compra en Laravel 13: Transacciones y Guardado en la BD Sistema de Farmacia 14 min
Lección 8. 31 Vista de Detalle de Orden de Compra en Laravel Diseño Profesional en el Sistema de Farmacia 14 min
Lección 9. 32 Edición de Órdenes de Compra en Laravel Carrito Dinámico y Buscador Avanzado 🛒Sistema de Farmacia 18 min
Lección 10. 33 Eliminación de Órdenes de Compra en Laravel Modal de Confirmación y 🗑️🛒 Sistema de Farmacia 11 min
Lección 11. 34 Envío de Órdenes de Compra por Email y WhatsApp en Laravel en el Sistema Farmacia Módulo Compras 14 min
Lección 12. 35 Procesamiento de Órdenes de Compra en Laravel Validación, Transacciones e Inventario de Farmacia 13 min
Lección 13. 36 Detalle de Compra Completada en Laravel Vista Profesional con Métricas y Productos 📋✅ Farmacia 8 min
Lección 14. 37 Edición de Compras en Laravel Método Reutilizable con Transacciones e Inventario 🔄✏️ Sis Farmacia 7 min
Lección 15. 38 Eliminación Inteligente de Compras en Laravel Limpieza de Inventario y Lotes Huérfanos🗑️Farmacia 12 min
Lección 16. 39 Compartiendo el Código Fuente Sistema de Farmacia en Laravel + Descarga directa 7 min
Módulo Inventario
Lección 1. 40 Dashboard de Inventario en Laravel Métricas, KPIs y Módulos Especializados 📊Sistema de Farmacia 13 min
Lección 2. 41 Resumen de Inventario en Laravel Completo con KPIs, Gráficas y Alertas Inteligentes📊Sis Farmacia 9 min
Módulo Cajas y Arqueos
Lección 1. 42 Módulo de Cajas y Arqueos en Laravel Gestión Financiera Profesional 💰📋 Sistema de Farmacia 16 min
Lección 2. 43 CRUD de Cajas en Laravel Gestión de Puntos de Venta por Sucursal 💰📋 Sistema de Farmacia 9 min
Lección 3. 44 Arqueos de Caja en Laravel Apertura, Cierre y Gestión de Movimientos Profesional 💰📊 Sis Farmacia 11 min
Módulo Ventas
Lección 1. 45 Módulo de Ventas en Laravel Estructura Profesional con Carrito, Historial y Trazabilidad 🛒📊 19 min
Lección 2. 46 Carrito de Ventas en Laravel Búsqueda Inteligente, Tabla de Productos y Gestión en Tiempo Real 🛒🔍 18 min
Lección 3. 47 Carrito de Ventas Profesional en Laravel Persistencia, Validaciones y Checkout Completo 🛒💾 11 min
Lección 4. 48 Checkout de Ventas en Laravel Confirmación, Cliente con Select2 y Cálculo de Cambio🛒💳Sis Farmacia 19 min
Lección 5. 49 Detalle de Venta en Laravel Vista Profesional con Métricas y Tabla de Productos 📋✅ Sis Farmacia 10 min
Lección 6. 50 Cancelación de Ventas en Laravel Reversión de Stock, Arqueo y Estado 🗑️🔄 Sistema de Farmacia 10 min
Lección 7. 51 Comprobante de Venta en PDF con Laravel Diseño Profesional y Código QR 📄✅ Sistema de Farmacia 6 min
Lección 8. 52 Ticket de Venta Térmico en Laravel Formato 80mm, Número a Letras y CódigoQR🧾🖨️Sistema de Farmacia 10 min
Lección 9. 53 Vista Previa e Impresión de PDF en Laravel Modal Interactivo para Tickets de Venta🖨️📄Sis Farmacia 9 min
Lección 10. 54 Historial de Ventas en Laravel Auditoría Inmutable con Snapshot y Filtros Avanzados📜🔍Sis Farmacia 6 min
Lección 11. 55 Sistema de Reportes de Ventas en Laravel 7 Tipos de Análisis para Business Intelligence 📊📈 7 min
Módulo Inventario y sus acciones
Lección 1. 56 Existencias por Producto en Laravel Consulta de Stock con Filtros por Sucursal y Búsqueda 📦🔍 9 min
Lección 2. 57 Movimientos y Ajustes de Inventario en Laravel Entradas, Salidas y Reversión Automática de Stock📦 9 min
Lección 3. 58 Formulario de Ajustes de Inventario en Laravel Entradas con Nuevo Lote y Salidas de Stock 📦✏️ 12 min
Lección 4. 59 Kardex y Control de Lotes en Laravel Trazabilidad de Inventario y Control Sanitario📊💊Sis Farmacia 7 min
Lección 5. 60 Traslados de Inventario entre Sucursales en Laravel Transferencia de Stock y Control de Recepción 12 min
Lección 6. 61 Reportes y Exportaciones de Inventario en Laravel Stock, Movimientos y Vencimientos 📊Sis Farmacia 5 min
Ultimos ajustes del sistema
Lección 1. 62 Perfil de Usuario en Laravel Edición de Datos Personales y Cambio de Contraseña 👤🔐 Sis Farmacia 6 min
Lección 2. 63 Sistema de Roles y Permisos en Laravel Control de Acceso con Spatie Permission 🔐👥 Sis Farmacia 12 min
Lección 3. 64 Gestión Visual de Permisos por Rol en Laravel Switches Dinámicos y Feedback en Tiempo Real SisFar 9 min
Lección 4. 65 Menú Dinámico con Permisos en Laravel Protección de Navegación con Spatie 🔐🧭 Sistema de Farmacia 8 min
Lección 5. 66 Seguridad y UX en Laravel Ocultar Registro, Recuperar Contraseña y Páginas de Error Personalizada 9 min
Lección 6. 67 Eliminación Segura en Laravel Validación de Relaciones y Protección de Datos 🛡️🗑️ Sis Farmacia 14 min
Lección 7. 68 Despliegue a Producción en Laravel Sube tu Proyecto y Base de Datos a un Servidor Real 🚀🌐 10 min

Apoya este proyecto

Si te gusta nuestro contenido, ¡apóyanos con una donación!

Donar por Airtm Donar por Binance

¡Gracias por tu apoyo! ❤️

Volver al curso