87 Tabla para agregar CARRITO de PRODUCTOS en el SISTEMA DE VENTAS (PHP y MySql) FullStack
Duraci贸n: 10 minDescripci贸n
Lecci贸n 87: Dise帽o de la Tabla para el Carrito de Productos (FullStack) 馃洅
Este video completa la estructura del formulario de ventas (create.php) centr谩ndose en el dise帽o visual de la tabla del carrito que alojar谩 temporalmente los productos seleccionados para la venta. El objetivo es que esta tabla se llene autom谩ticamente despu茅s de que un usuario busque y seleccione un producto del inventario.
1. Estructura de la Tabla del Carrito 馃搹
Se defini贸 la estructura de la tabla temporal del carrito dentro del formulario, utilizando clases de Bootstrap como table-sm, table-hover y table-striped para mejorar la apariencia y usabilidad [00:39].
| Columna | Prop贸sito | Icono Elegante |
|---|---|---|
| N煤mero | 脥ndice consecutivo del producto agregado [00:22]. | fa-hashtag |
| Producto | Nombre del producto [00:30]. | fa-box-open |
| Detalle | Descripci贸n o caracter铆sticas adicionales del producto [01:09]. | fa-info-circle |
| Cantidad | Cantidad que el cliente desea comprar [01:19]. | fa-sort-numeric-up |
| Precio Unitario | Precio individual del producto, consultado desde tb_almacen [01:26]. | fa-tag |
| Subtotal | Resultado de Cantidad * Precio Unitario [01:41]. | fa-dollar-sign |
| Acci贸n | Bot贸n para eliminar un producto espec铆fico del carrito en caso de error [07:02]. | fa-trash-alt |
2. Secciones de Totalizaci贸n y Funcionalidad 馃М
Se dise帽贸 la parte inferior de la tabla para totalizar la informaci贸n y se incluy贸 un bot贸n de acci贸n:
- Fila de Totales: Se utiliza la funci贸n colspan para combinar varias celdas y dejar un espacio para mostrar el texto "Total" alineado a la derecha [04:41].
- Esta fila mostrar谩 autom谩ticamente la cantidad total de 铆tems y el monto total a pagar (sumatoria de subtotales) [06:43].
- Bot贸n de Eliminaci贸n (Acci贸n):
- Se incluy贸 un bot贸n con el icono del cesto de basura (fa-trash-alt) para permitir a los usuarios borrar un producto individual del carrito si se equivocan al seleccionar [07:56].
3. Flujo de Venta Anticipado 鉃★笍
El desarrollador anticipa el flujo de trabajo final, que se implementar谩 en el pr贸ximo video con JavaScript y PHP:
- Buscar Producto: El usuario hace clic en el bot贸n "Buscar Producto" y selecciona un 铆tem del modal.
- Cargar Carrito: El producto seleccionado se carga autom谩ticamente en la Tabla del Carrito y se actualizan los subtotales.
- Registro de Cliente: Una vez que se han agregado todos los productos al carrito, se procede a ingresar o buscar los "Datos del Cliente" [08:50].
- Finalizar Venta: Se presiona el bot贸n "Guardar Venta" (pendiente de creaci贸n) para registrar la transacci贸n final e imprimir la factura gen茅rica [09:07].
El pr贸ximo video se centrar谩 en el controlador necesario para hacer que estas funcionalidades manuales sean autom谩ticas [09: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! 鉂わ笍