Lección: 35 🛒 VISTA DEL CARRITO | Resumen, Subtotal y Total Dinámico para el Usuario | Laravel 12 E-commerce

35 🛒 VISTA DEL CARRITO | Resumen, Subtotal y Total Dinámico para el Usuario | Laravel 12 E-commerce

Duración: 24 min

Módulo: 💳 Carrito, Checkout y Pasarela de Pagos 34-42 Lección 2 de 9

Descripción

Lección 35: 🛒 Vista del Carrito | Dinamismo de Subtotal y Total para el Usuario

Este capítulo se dedica a transformar la vista estática del carrito de compras en una interfaz dinámica, donde la información de los productos, precios y cálculos de totales se carga directamente desde la base de datos del usuario.

🎨 Diseño y Carga de Datos en la Vista

Se adapta la plantilla HTML con la lógica de Laravel para mostrar los productos que el usuario ha agregado a su carrito:

Integración de la Plantilla 🖥️: Se extiende el layout principal (layout.web) y se copia el diseño base de la plantilla de carrito para adaptarlo [00:35].
Listado Dinámico de Ítems 🛍️:
- Se utiliza un bucle @foreach sobre la variable $carritos (que contiene los productos agregados) para renderizar dinámicamente cada ítem [06:29].
- Se cargan los detalles del producto: imagen [07:33], nombre [09:04], precio unitario (con su divisa) [11:31] y la cantidad seleccionada [12:09].
Restricción de Cantidad Máxima ⏫: El campo de cantidad en el carrito se limita a un valor max igual al stock disponible del producto, evitando que el usuario solicite más de lo que hay en inventario [12:45].

🧮 Cálculo de Precios y Totales

Se implementa la lógica de cálculo en la vista para reflejar el costo total de los productos:

Subtotal por Producto: Dentro del bucle @foreach, se calcula el subtotal de cada ítem multiplicando el precio de venta del producto por la cantidad solicitada por el usuario [13:35].
- Fórmula: Precio de Venta x Cantidad
Cálculo del Total Acumulado ➕: Se declara una variable $total fuera del bucle para asegurar que se acumule correctamente [16:30]. Esta variable suma los subtotales de cada producto, mostrando el costo final del pedido en la sección de resumen [17:00].

🛒 Integración de Cantidad en la Página de Detalle

Se ajusta la funcionalidad Add to Cart desde la vista de detalle de producto:

Formulario en Detalle: Se envuelve el botón "Agregar al carrito" en la vista de detalle del producto dentro de un formulario POST [19:14].
Envío de Cantidad Variable: El campo de cantidad en esta vista ahora se envía explícitamente como el parámetro cantidad en lugar del valor predeterminado de 1 [21:45]. Esto permite al usuario agregar múltiples unidades de un producto directamente desde su página de detalle [22:07].

Hilari Web