Skip to main content

​
Overview

The shopping cart allows you to collect products, manage quantities, and proceed to checkout. Your cart is persisted in browser storage so items remain even after closing the browser.
You must be logged in to access cart functionality. Unauthenticated users will be redirected to the login page.

​
Adding Items to Cart

​
From Product Detail Page

Add products to your cart from the product detail page:
1

Navigate to Product

Click on any product from the catalog or featured section to view its details
2

Verify Authentication

Ensure you’re logged in. If not, you’ll see:
  • Message: “Inicia sesión para comprar este producto”
  • Button: “Iniciar Sesión para Comprar”
3

Check Stock Availability

Verify the product is in stock:
  • Available: Shows stock count (e.g., “5 unidades”)
  • Out of Stock: Shows “Agotado” in red - cannot be added
4

Select Quantity

Use the quantity input field to choose how many items to add:
  • Minimum: 1 unit
  • Maximum: Up to available stock
  • Controlled by a number input spinner
5

Add to Cart

Click the “Añadir al Carrito” button:
  • Button text changes to “¡Añadido!” briefly
  • Product is added to your cart with the specified quantity

​
Cart Context and Persistence

The cart uses React Context for state management with these features:
  • localStorage Persistence: Cart data is saved to browser storage
  • Auto-sync: Changes sync automatically between browser tabs
  • Session Recovery: Cart contents persist across browser sessions
If you add a product that’s already in your cart, the quantities are combined rather than creating duplicate entries.

​
Viewing Your Cart

Access your cart from the navigation menu:
1

Open Cart Page

Click on the Cart icon or link in the main navigation
2

Authentication Check

If not logged in, you’ll be automatically redirected to /login
3

View Cart Contents

The cart page displays:
  • List of all items in your cart
  • Product images and names
  • Category labels
  • Individual item prices
  • Quantity controls
  • Line totals (price × quantity)

​
Empty Cart State

If your cart is empty, you’ll see:
  • Message: “Tu carrito está vacío”
  • Button: “Ver Productos” - redirects to the product catalog

​
Managing Cart Contents

​
Updating Quantities

Adjust the quantity of items already in your cart:
1

Locate Quantity Controls

Each cart item has + and - buttons with the current quantity displayed between them
2

Increase Quantity

Click the + button to add one more unit
3

Decrease Quantity

Click the - button to remove one unit:
  • If quantity reaches 0, the item is removed from the cart
4

View Updated Total

The line total and cart total update automatically
The system does not enforce stock limits when updating cart quantities. Ensure you don’t exceed available stock to avoid issues during checkout.

​
Removing Items

Delete individual items from your cart:
1

Click Remove Button

Each cart item has an “Eliminar” button
2

Confirm Removal

A confirmation dialog appears: “¿Seguro que quieres eliminar este producto?”
3

Confirm or Cancel

  • Click OK to remove the item
  • Click Cancel to keep the item

​
Clearing the Entire Cart

The cart is automatically cleared when you complete checkout. You can also manually clear it by:
  • Removing items one by one
  • Completing the checkout process

​
Order Summary

The cart page includes a “Resumen del Pedido” (Order Summary) panel on the right side:

​
Summary Components

Subtotal

Sum of all item prices × quantities before shipping and taxes

Envío

Shipping cost - currently “Gratis” (Free) for all orders

Total

Final amount to be charged, displayed prominently in euros (€)

​
Price Calculations

The cart automatically calculates: 
// Line total per item
lineTotal = productPrice × quantity

// Cart subtotal
subtotal = sum of all line totals

// Total (with free shipping)
total = subtotal + 0
All prices are formatted with two decimal places and displayed in euros (€).

​
Checkout Process

​
Completing Your Purchase

Finalize your order from the cart page:
1

Review Cart Contents

Verify all items, quantities, and prices are correct
2

Check Order Summary

Review the subtotal, shipping (free), and total amount
3

Click Checkout Button

Click “Tramitar Pedido” at the bottom of the order summary
4

Order Confirmation

A mock confirmation appears: “¡Gracias por tu compra! (Funcionalidad de pago mock)”
5

Cart Cleared

Your cart is automatically emptied after checkout
6

Redirect to Homepage

You’re redirected to the homepage (/)
The current checkout is a mock implementation. In production, this would integrate with a payment gateway and create actual orders in the system.

​
Stock Validation

​
Client-Side Validation

The product detail page enforces stock limits:
  • Quantity input has max attribute set to available stock
  • Cannot select quantity higher than producto.stock

​
Out of Stock Products

When viewing a product with stock: 0:
  • “Agotado” message displayed in red
  • Quantity selector is hidden
  • “Añadir al Carrito” button is hidden
  • Only login redirect shown (if not authenticated)
Stock validation currently happens client-side. The backend should also validate stock availability when orders are processed.

​
Cart State Management

The CartContext provides these functions:

​
Available Functions

FunctionDescriptionParameters
addToCartAdd product to cart or increase quantityproduct: Producto, quantity: number
removeFromCartRemove item completely from cartproductId: number
updateQuantityChange quantity of existing itemproductId: number, quantity: number
clearCartEmpty entire cartNone

​
Cart Properties

PropertyTypeDescription
cartCartItem[]Array of cart items
totalnumberTotal price of all items
countnumberTotal number of items (sum of quantities)

​
Best Practices

Verify Stock Before Checkout

Always check product detail pages for current stock levels before completing large orders.

Save Your Cart

Your cart persists in browser storage, but clear browser data will erase it. Complete purchases promptly.

Review Before Checkout

Double-check quantities and items in the order summary before clicking “Tramitar Pedido”.

Authentication Required

Log in before shopping to ensure seamless cart access and checkout.

​
Troubleshooting

​
Cart Not Persisting

Problem: Cart empties when closing browser Solution: Check browser settings - localStorage must be enabled

​
Cannot Add to Cart

Problem: Add to cart button not working Solutions:
  • Verify you’re logged in
  • Check product has available stock
  • Ensure quantity is within stock limits

​
Redirect to Login

Problem: Automatically redirected when accessing cart Solution: This is expected behavior - log in to access cart functionality

Build docs developers (and LLMs) love

Get started for freeTalk to us