Skip to main content

​
Overview

The shopping cart allows customers to review selected products, adjust quantities, and proceed to order confirmation. It provides a clear summary of the order including subtotal, tax calculations, and total amount.
The cart is accessible at /carrito and displays all items added from the catalog.

​
Key Features

Quantity Management

Increase or decrease item quantities with plus/minus controls

Item Removal

Remove unwanted items from the cart with a single click

Real-time Totals

Automatic calculation of subtotals, tax, and grand total

Order Summary

Clear breakdown of all costs before order confirmation

​
Cart Implementation

​
Route Definition

The cart route is defined in routes/web.php:21-23: 
Route::get('/carrito', function () {
    return view('carrito.carrito');
})->name('carrito');

​
Cart View Structure

The cart view extends the base layout and is located at resources/views/carrito/carrito.blade.php:1-2: 
@extends('layouts.app')
@section('content')
<div class="cart-page">
    <!-- Cart content -->
</div>
@endsection

​
Page Header

The cart page includes navigation back to the catalog (resources/views/carrito/carrito.blade.php:5-24): 
<header class="header">
    <div class="header-container">
        <div class="header-left">
            <a href="{{ route('catalogo') }}" class="back-link-header">
                <i class="fas fa-arrow-left"></i> Volver al Catálogo
            </a>
            <a href="{{ route('catalogo') }}" class="logo">MACUIN</a>
        </div>
        <div class="header-right">
            <a href="{{ route('pedidos') }}" class="nav-link">Mis Pedidos</a>
            <a href="{{ route('carrito') }}" class="cart-link active">
                <i class="fas fa-shopping-cart"></i>
                <span class="cart-count">2</span>
            </a>
            <a href="{{ route('login') }}" class="user-link">
                <i class="fas fa-user-circle"></i>
            </a>
        </div>
    </div>
</header>
The page title “Crear Pedido” (Create Order) indicates that the cart is the first step in the order creation workflow.

​
Cart Item Display

Each cart item shows product details and quantity controls (resources/views/carrito/carrito.blade.php:37-55): 
<div class="cart-item">
    <div class="cart-item-info">
        <h3 class="cart-item-name">Filtro de Aceite</h3>
        <span class="cart-item-price">$15</span>
    </div>
    <div class="cart-item-controls">
        <button class="qty-btn minus">
            <i class="fas fa-minus"></i>
        </button>
        <span class="qty-value">2</span>
        <button class="qty-btn plus">
            <i class="fas fa-plus"></i>
        </button>
        <span class="cart-item-total">$30</span>
        <button class="btn-remove">
            <i class="fas fa-trash-alt"></i>
        </button>
    </div>
</div>

​
Quantity Management

Customers can adjust product quantities using the increment/decrement buttons:

Increase Quantity

Click the plus button to add more units of the product

Decrease Quantity

Click the minus button to reduce the quantity (minimum 1)

​
Quantity Controls

The quantity control interface provides intuitive buttons: 
<button class="qty-btn minus">
    <i class="fas fa-minus"></i>
</button>
<span class="qty-value">2</span>
<button class="qty-btn plus">
    <i class="fas fa-plus"></i>
</button>
The item total updates automatically when quantity changes are made.

​
Order Summary

The cart includes a comprehensive order summary panel (resources/views/carrito/carrito.blade.php:79-98): 
<div class="cart-summary-section">
    <div class="cart-summary-card">
        <h3 class="summary-title">Resumen del Pedido</h3>
        <div class="summary-rows">
            <div class="summary-row">
                <span class="summary-label">Subtotal</span>
                <span class="summary-value">$1,190</span>
            </div>
            <div class="summary-row">
                <span class="summary-label">IVA (16%)</span>
                <span class="summary-value">$190.40</span>
            </div>
            <div class="summary-row total">
                <span class="summary-label">Total</span>
                <span class="summary-value total-price">$1,380.40</span>
            </div>
        </div>
        <button class="btn-confirm-order">Confirmar Pedido</button>
    </div>
</div>

​
Tax Calculation

The system automatically calculates 16% IVA (Value Added Tax) on the subtotal:
ComponentAmount
Subtotal$1,190.00
IVA (16%)$190.40
Total$1,380.40
The 16% IVA rate is the standard value-added tax applied in Mexico for most goods and services.

​
Cart Layout Structure

The cart uses a two-column layout (resources/views/carrito/carrito.blade.php:34-99): 
<div class="cart-layout">
    <!-- Left column: Cart items -->
    <div class="cart-items-section">
        <!-- Individual cart items -->
    </div>
    
    <!-- Right column: Order summary -->
    <div class="cart-summary-section">
        <!-- Summary card -->
    </div>
</div>

​
Example Cart Contents

A typical cart might contain: 
<!-- Item 1 -->
<div class="cart-item">
    <div class="cart-item-info">
        <h3 class="cart-item-name">Filtro de Aceite</h3>
        <span class="cart-item-price">$15</span>
    </div>
    <div class="cart-item-controls">
        <!-- Quantity: 2, Total: $30 -->
    </div>
</div>

<!-- Item 2 -->
<div class="cart-item">
    <div class="cart-item-info">
        <h3 class="cart-item-name">Pastillas de Freno</h3>
        <span class="cart-item-price">$89</span>
    </div>
    <div class="cart-item-controls">
        <!-- Quantity: 1, Total: $89 -->
    </div>
</div>

​
User Journey

  1. Customer adds products from /catalogo to the cart
  2. Navigate to /carrito by clicking the cart icon in the header
  3. Review all items in the cart with their quantities and prices
  4. Adjust quantities using the plus/minus buttons as needed
  5. Remove unwanted items using the trash icon
  6. Review the order summary including subtotal, IVA, and total
  7. Click “Confirmar Pedido” to proceed with the order

​
Item Removal

Each cart item includes a remove button for quick deletion (resources/views/carrito/carrito.blade.php:51-53): 
<button class="btn-remove">
    <i class="fas fa-trash-alt"></i>
</button>
Removing an item from the cart immediately updates the order summary totals.

​
Order Confirmation

The cart page includes a prominent confirmation button: 
<button class="btn-confirm-order">Confirmar Pedido</button>
Clicking this button finalizes the cart contents and creates an order that can be tracked in /pedidos.

Build docs developers (and LLMs) love

Get started for freeTalk to us