Skip to main content

​
Overview

The Mis Compras shopping cart system allows you to collect multiple products before completing your purchase. Your cart is stored locally in your browser, so items persist even if you navigate away or close the tab.

​
Adding Items to Cart

​
From Product Pages

On any product detail page (producto.html), you’ll find action buttons to add items to your cart.
1

View Product Details

Navigate to a product page by clicking “Ver” or “Ver más” on any product card
2

Click Add to Cart

Click the red “Agregar al carrito” (Add to Cart) button
3

Confirmation

The button text changes to “Añadido ✓” for 900ms to confirm the action

​
Quick Add from Category Pages

You can also add products directly from category listing pages using the “Agregar al carrito” button on product cards. 
// Cart button implementation from carrito.js
document.addEventListener('click', (e) => {
  const btn = e.target.closest('.agregar-carrito');
  if (!btn) return;
  
  const { id, nombre, precio, imagen } = btn.dataset;
  window.carrito.addItem({ id, nombre, precio, imagen });
  btn.textContent = 'Añadido ✓';
  setTimeout(() => (btn.textContent = 'Agregar al Carrito'), 900);
});
Items added to your cart include: product ID, name, price, image URL, quantity, and calculated subtotal.

​
Viewing Your Cart

​
Accessing the Cart Page

Navigate to your shopping cart by clicking “Carrito” in the main navigation menu, which takes you to carrito de compras.html.

​
Cart Display

Your cart page shows:

Cart Item Information

  • Product Image - Visual reference with error handling
  • Product Name - Full product title
  • Unit Price - Individual item price ($XX.XX)
  • Quantity - Number of items added
  • Subtotal - Calculated as quantity × price
  • Remove Button - × icon to delete item

​
Cart Layout

<div class="carrito-item">
  <img class="carrito-imagen" src="[imagen]" alt="[nombre]">
  <div class="carrito-info">
    <h3>[Producto]</h3>
    <p>$[precio]</p>
    <p>Cantidad: <span class="cantidad">[X]</span></p>
    <p>Subtotal: $[subtotal]</p>
  </div>
  <div class="carrito-acciones">
    <button class="carrito-eliminar" data-id="[id]">&times;</button>
  </div>
</div>

​
Cart Storage System

​
LocalStorage Implementation

The cart uses browser localStorage for persistence with the key miTienda_carrito_v1: 
// Cart storage structure
const STORAGE_KEY = 'miTienda_carrito_v1';

// Example cart data
[
  {
    "id": "1",
    "nombre": "iPhone 15 Pro",
    "precio": 999,
    "imagen": "imagenes/ipone15.jpg",
    "cantidad": 2,
    "subtotal": 1998
  }
]

​
Cart Data Management

The cart system (carrito.js) provides a global API: 
window.carrito.addItem({
  id: '1',
  nombre: 'iPhone 15 Pro',
  precio: 999,
  imagen: 'imagenes/ipone15.jpg'
});

​
Managing Cart Items

​
Updating Quantities

When you add the same product multiple times, the cart automatically:
  1. Detects duplicate - Searches for existing item by ID
  2. Increments quantity - Adds 1 to the existing quantity
  3. Recalculates subtotal - Updates subtotal = quantity × price
  4. Saves changes - Persists to localStorage
// Quantity management in carrito.js:70-78
if (idx > -1) {
  cart[idx].cantidad += 1;
  cart[idx].subtotal = +(cart[idx].cantidad * cart[idx].precio).toFixed(2);
} else {
  cart.push({
    id: String(product.id),
    nombre: product.nombre,
    // ... other fields
  });
}
Currently, quantities automatically increment by 1 with each “Add to Cart” action. To adjust quantities, you need to remove and re-add items.

​
Removing Items

1

Click Remove Button

Click the × button on any cart item
2

Confirm Deletion

A browser confirmation dialog appears: “¿Eliminar este producto del carrito?”
3

Item Removed

Upon confirmation, the item is removed and the cart refreshes automatically
// Remove item implementation from carrito.js:177-188
document.addEventListener('click', (e) => {
  const btn = e.target.closest('.carrito-eliminar');
  if (!btn) return;
  
  const id = btn.dataset.id;
  if (confirm('¿Eliminar este producto del carrito?')) {
    window.carrito.removeItem(id);
  }
});

​
Cart Totals

​
Price Calculation

The cart automatically calculates your total:
  • Item Subtotals - Each item shows quantity × unit price
  • Cart Total - Sum of all subtotals displayed at bottom
  • Formatted Display - All prices shown as $X,XXX.XX
// Total calculation from carrito.js:65-67
getTotal() {
  return getCart().reduce((sum, i) => sum + i.subtotal, 0).toFixed(2);
}

​
Total Display

The cart footer shows: 
<div class="carrito-total">
  <p>Total: <span>$1,998.00</span></p>
  <button class="carrito-btn">Finalizar Compra</button>
</div>

​
Empty Cart State

When your cart is empty, you’ll see: 
<p>Tu carrito está vacío.</p>
And the total displays: $0.00
The cart page automatically renders on page load via the renderCart() function in carrito.js:143-175.

​
Cart Persistence

​
Session Continuity

Your cart data persists across:
  • Page Navigation - Items remain when browsing the site
  • Browser Refresh - Cart survives page reloads
  • Tab Closure - Items saved until browser data is cleared

​
Data Cleanup

Your cart is automatically cleared when:
  • You complete a successful checkout
  • You manually clear browser localStorage
  • You call window.carrito.clear()
If you clear your browser’s localStorage or cookies, your cart will be emptied. Make sure to complete purchases before clearing browser data.

​
Cart Limitations

​
Current Constraints

Quantity Management

  • No manual quantity input field
  • Must add items multiple times to increase quantity
  • To reduce quantity, remove item and re-add desired number of times

Stock Validation

  • No real-time stock checking
  • Inventory validation happens at checkout
  • May see stock errors during final purchase

​
Best Practices

1

Review Before Checkout

Always review your cart items, quantities, and total before proceeding to checkout
2

Check Sellers

Note which sellers you’re purchasing from, as orders may be fulfilled separately
3

Remove Unwanted Items

Clean up your cart periodically to avoid confusion during checkout
4

Complete Purchase Promptly

Items aren’t reserved while in your cart - complete checkout to secure your order

​
Technical Details

​
Error Handling

The cart system includes robust error handling: 
function getCart() {
  const raw = localStorage.getItem(STORAGE_KEY);
  try {
    return raw ? JSON.parse(raw) : [];
  } catch (e) {
    console.error('Error parseando carrito:', e);
    return [];
  }
}

​
Price Parsing

Prices are normalized to handle various formats: 
function parsePrice(v) {
  const n = Number(String(v).replace(/[^0-9.-]+/g, ''));
  return isNaN(n) ? 0 : n;
}

​
Next Steps

Checkout Process

Complete your purchase

Order Tracking

Track your orders after purchase
  • See carrito.js:1-196 for complete cart implementation
  • View carrito de compras.html for cart page structure
  • Check carrito diseño.css for cart styling

Build docs developers (and LLMs) love

Get started for freeTalk to us