56 PASANDO DATOS DEL PRODUCTO en el SISTEMA DE VENTAS(PHP y MySql) FullStack
Duración: 12 minDescripción
Lección 56: Transferencia de Datos del Producto (Completa) y Estructura de Compra 🖼️🛒
Este video finaliza el proceso de transferencia automática de datos del producto desde el modal de búsqueda al formulario principal de registro de compra, e inicia la creación de los campos específicos de la compra.
1. 💾 Finalización de la Transferencia de Campos
El video comienza completando la lógica de transferencia de datos de la lección anterior, asegurando que todos los campos del producto sean pasados correctamente a los inputs del formulario [00:00]:
- Se verifica la correcta asignación de las variables y los IDs de los inputs para:
- Ocultar Modal: Una vez que se selecciona un producto, el modal de búsqueda se configura para que se oculte automáticamente (propiedad .modal('hide') de jQuery) [03:34].
2. 🖼️ Transferencia y Estilizado de la Imagen
El paso más importante de esta lección es implementar la transferencia de la imagen del producto, la cual no puede pasarse con un simple .val():
- ID de Destino: Se asigna un ID (img_producto) al elemento <img> en el formulario principal [04:16].
- Construcción de la Ruta: Se recupera el nombre del archivo de la imagen desde el modal de la fila seleccionada y se utiliza para construir la ruta completa del archivo en el servidor, concatenándolo con la base URL de la aplicación y la carpeta de imágenes (almacen/img_productos/) [00:05:27 - 00:06:28].
- Actualización del Atributo: Se usa el método .attr() de jQuery para actualizar el atributo src de la etiqueta <img> con la nueva ruta de la imagen [06:39].
- Estilizado: Se aplica estilo CSS a la fila de información del producto para reducir el tamaño de fuente a 12px y se ajusta el ancho de la imagen a 50% para un mejor ajuste visual en el formulario [00:10:49 - 00:11:30].
3. 📝 Estructura de los Datos de Compra
Finalmente, se crea la estructura de la segunda parte del formulario, donde se registrarán los detalles de la compra:
- Número de la Compra: Campo de texto (autogenerado, se asumirá más adelante) [08:34].
- Fecha de la Compra: Campo de tipo date [09:25].
El próximo video se centrará en la implementación de la búsqueda y selección del proveedor, siguiendo la misma lógica de modal y transferencia de datos utilizada para los productos [11:41].
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! ❤️