89 Pasar datos para agregar PRODUCTOS al CARRITO en el SISTEMA DE VENTAS (PHP y MySql) FullStack

Duración: 9 min
Módulo: 🛒 Lógica del Carrito y Clientes Dinámicos Lección 2 de 16

Descripció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].