89 Pasar datos para agregar PRODUCTOS al CARRITO en el SISTEMA DE VENTAS (PHP y MySql) FullStack
Duración: 9 minDescripción
Lección 89: Transferencia de Datos al Carrito para Registrar Productos (FullStack) 💾
Este video resuelve el error de transferencia de datos del video anterior y completa la funcionalidad de selección de producto en el módulo de Ventas. El objetivo es que al seleccionar un producto del modal, su nombre, descripción y precio unitario se carguen automáticamente en los campos de input de la vista principal.
1. Corrección y Transferencia de Campos Automática ✅
El desarrollador identificó y corrigió los errores de nomenclatura entre la consulta de la base de datos y la variable en PHP/JavaScript:
| Campo de Base de Datos (Consulta) | Nombre de la Variable (PHP) | ID de Destino (HTML/JS) |
|---|---|---|
| nombre | $nombre_producto | $("#producto") |
| descripcion | $descripcion | $("#descripcion") |
| precio_venta | $precio_venta | $("#precio_unitario") |
- Corrección del Nombre: El campo en la base de datos era nombre (no producto), lo que impedía la transferencia inicial [00:16].
- Corrección de la Descripción: El campo en la base de datos era descripcion (no detalle), lo que también se corrigió en el script y en los ID de los inputs [01:16].
- Transferencia de Precio: Se agregó la lógica para transferir el precio unitario (precio_venta) del producto al campo correspondiente [03:01].
2. Configuración de Usabilidad y Enfoque (Focus) 🎯
Se implementaron mejoras de usabilidad en el formulario de ventas:
- Deshabilitación de Campos (Disable): Los campos Producto, Descripción y Precio Unitario se deshabilitaron (disabled) para evitar que el operador de ventas pueda modificarlos manualmente, ya que estos valores son fijos y provienen directamente del almacén [04:32].
- Enfoque Automático (Focus): Al seleccionar un producto, el focus del cursor se dirige automáticamente al campo Cantidad (ID_cantidad). Esto agiliza el flujo de trabajo, ya que el operador solo tiene que ingresar cuántas unidades se llevará el cliente sin usar el ratón [05:32].
3. Creación del Botón "Registrar" (Carrito) ➕
Se agregó un botón clave para formalizar la adición de productos al carrito temporal:
- Propósito: Al hacer clic en "Registrar", los datos de los cuatro inputs (ID del producto, Cantidad, Precio, etc.) se deben enviar al controlador para insertarse en la tabla tb_carrito [08:05].
- Diseño: Se implementó como un botón primario (btn-primary) con la etiqueta "Registrar" y se alineó a la derecha (float-right) de la sección [07:49].
- Modelo de Base de Datos: Los datos a registrar en tb_carrito son: ID_venta (automático), ID_producto (obtenido al seleccionar) y cantidad (ingresado manualmente) [08:34].
El próximo video se centrará en el controlador que ejecutará la acción de registro en la tabla tb_carrito [08:26].
Lecciones
Apoya este proyecto
Si te gusta nuestro contenido, ¡apóyanos con una donación!
Donar por Airtm Donar por Binance¡Gracias por tu apoyo! ❤️