Skip to main content
The Sales & POS (Point of Sale) system provides a streamlined interface for processing customer transactions with real-time cart management, automatic tax calculation, and multiple payment methods.

​
Interface Layout

The POS interface uses a split-screen design optimized for fast checkout:

Product Catalog (Left)

Searchable grid of available products with click-to-add functionality

Shopping Cart (Right)

Real-time cart summary with quantity controls, pricing breakdown, and payment options

​
Product Catalog

The left panel displays your product inventory in an easy-to-scan grid format.

​
Search and Filter

🔍 Buscar por nombre o SKU...
Search functionality:
  • Product names
  • SKU codes
  • Real-time filtering as you type
Category filter dropdown:
  • Todas las categorías
  • Audio
  • Electrónica
  • Periféricos
  • Accesorios

​
Product Cards

Each product displays as a clickable card showing: 
🎧 Audífonos Bluetooth Pro
$89.99
Stock: 42
Card Components:
  • Icon/Emoji - Visual product identifier
  • Product Name - Full product title
  • Price - Sale price in bold
  • Stock Level - Current availability
Click any card to instantly add one unit to the cart.

​
Available Products in Catalog

In-Stock Products (click to add):
  • 🎧 Audífonos Bluetooth Pro - $89.99 (Stock: 42)
  • 🔌 Cable USB-C 2m - $12.50 (Stock: 4)
  • ⌨️ Teclado Mecánico RGB - $149.00 (Stock: 78)
  • 🖱️ Mouse Inalámbrico - $45.00 (Stock: 63)
  • 🔋 Hub USB 4 Puertos - $24.99 (Stock: 115)
  • 🎮 Control Gamepad - $35.00 (Stock: 29)
  • 💡 Lámpara LED - $28.00 (Stock: 51)
Out-of-Stock Products (disabled):
  • 🖥️ Monitor 27” 144Hz - $399.00 - Sin stock
    • Displayed with 50% opacity
    • Cursor shows “not-allowed”
    • Cannot be added to cart

​
Add to Cart Implementation

Products are added via JavaScript click handlers (nueva-venta.js:37): 
window.agregar = (id, nombre, emo, precio) => {
  const p = carrito.find(x => x.id === id);
  p ? p.qty++ : carrito.push({ id, nombre, emo, precio, qty: 1 });
  render();
};
Behavior:
  • If product already in cart → increment quantity
  • If new product → add with quantity of 1
  • Automatically updates cart display

​
Shopping Cart Panel

The right panel shows the current transaction details.

​
Cart Header

🛒 Ticket de Venta # Auto
Displays cart icon and automatic ticket numbering.

​
Customer Information

Cliente (opcional)
[Nombre o buscar cliente...]
Customer information is optional for transactions. You can:
  • Enter customer name manually
  • Search existing customer database
  • Leave blank for anonymous sales

​
Cart Items Display

When empty, the cart shows: 
· Agrega productos desde el catálogo ·
Once products are added, each line item displays: 
🎧 Audífonos Bluetooth Pro
[−] 2 [+]  $179.98
Cart Item Components:
  • Product emoji and name
  • Quantity controls (− and + buttons)
  • Line total (price × quantity)

​
Quantity Controls

Implemented in nueva-venta.js:43: 
window.cambiar = (id, d) => {
  const p = carrito.find(x => x.id === id);
  if (!p) return;
  p.qty += d;
  if (p.qty <= 0) carrito = carrito.filter(x => x.id !== id);
  render();
};

Increase Quantity [+]

Adds one unit to the cart. Updates line total and overall pricing automatically.

Decrease Quantity [−]

Removes one unit. If quantity reaches zero, the item is removed from the cart entirely.

​
Price Calculation

The cart summary shows a detailed pricing breakdown:

​
Subtotal

Subtotal: $0.00
Sum of all line items before taxes and discounts.

​
Discount

Descuento: — $0.00
Currently displays as placeholder. Can be implemented for promotional pricing.

​
Tax Calculation (IVA)

IVA (16%): $0.00
Automatic value-added tax calculation at 16% rate. Implementation (nueva-venta.js:2): 
const IVA = 0.16;

function actualizar(sub) {
  const iva = sub * IVA, total = sub + iva;
  lblSub.textContent   = `$${sub.toFixed(2)}`;
  lblIva.textContent   = `$${iva.toFixed(2)}`;
  lblTotal.textContent = `$${total.toFixed(2)}`;
  btnCobrar.textContent = `✅ Cobrar $${total.toFixed(2)}`;
}
Tax Calculation Example:
  • Subtotal: $100.00
  • IVA (16%): $16.00
  • Total: $116.00
All prices update in real-time as products are added or quantities change.

​
Total Amount

TOTAL: $0.00
Displayed in large, bold text showing the final amount due (subtotal + tax - discounts).

​
Payment Processing

​
Payment Method Selection

Método de pago
[Dropdown menu]
  • 💵 Efectivo - Cash payment
  • 💳 Tarjeta de Crédito - Credit card
  • 💳 Tarjeta de Débito - Debit card
  • 📱 Transferencia / QR - Bank transfer or QR code payment

​
Charge Button

✅ Cobrar $0.00
The primary action button that:
  • Shows the exact amount to charge
  • Updates dynamically with cart total
  • Processes the transaction when clicked
  • Full width, prominent design for easy access
Implementation (nueva-venta.js:53): 
btnCobrar.addEventListener('click', () => {
  if (!carrito.length) { 
    alert('El carrito está vacío.'); 
    return; 
  }
  // TODO: integrar con Firebase
  alert('Venta registrada.');
  carrito = []; 
  render();
});
Current Behavior:
  1. Validates cart is not empty
  2. Displays confirmation message
  3. Clears cart after successful sale
  4. Resets display to empty state
Firebase integration pending for permanent transaction storage.

​
Clear Cart Button

🗑️ Limpiar carrito
Secondary action button that removes all items from the cart: 
document.getElementById('btn-limpiar').addEventListener('click', () => { 
  carrito = []; 
  render(); 
});
Useful for:
  • Canceling a transaction
  • Starting a new sale
  • Correcting mistakes
Use the clear cart button instead of removing items one-by-one when a customer changes their mind about the entire purchase.

​
Real-Time Cart Updates

The cart rendering system (nueva-venta.js:11) ensures the display stays synchronized: 
function render() {
  if (!carrito.length) {
    itemsEl.innerHTML = '<p>· Agrega productos desde el catálogo ·</p>';
    actualizar(0); 
    return;
  }
  itemsEl.innerHTML = carrito.map(p => `
    <div class="cart-item">
      <span class="cart-item-name">${p.emo} ${p.nombre}</span>
      <div class="cart-qty">
        <button class="q-btn" onclick="cambiar('${p.id}',-1)">−</button>
        <span>${p.qty}</span>
        <button class="q-btn" onclick="cambiar('${p.id}',1)">+</button>
      </div>
      <span class="cart-price">$${(p.precio * p.qty).toFixed(2)}</span>
    </div>`).join('');
  actualizar(carrito.reduce((s, p) => s + p.precio * p.qty, 0));
}
Render function:
  • Checks if cart is empty
  • Generates HTML for each cart item
  • Calculates subtotal from all items
  • Updates all pricing displays
  • Called after every cart modification

​
Transaction Workflow

Typical POS transaction flow:
  1. Search/Browse products in left panel
  2. Click products to add to cart
  3. Adjust quantities using +/− buttons
  4. Enter customer name (optional)
  5. Select payment method
  6. Review total amount
  7. Click Cobrar to complete sale
  8. Cart clears automatically for next customer

​
Stock Validation

The system prevents selling out-of-stock items:
  • Products with zero stock are visually disabled
  • Card opacity reduced to 50%
  • Cursor shows “not-allowed” icon
  • Click events are not attached
  • Stock levels display in red: “Sin stock”
Stock Tracking: After a sale is completed, the system should decrement product quantities in inventory (Firebase integration pending).

​
Cart Data Structure

The cart is maintained as a JavaScript array of product objects: 
let carrito = [];

// Each item structure:
{
  id: 'AUD-001',           // Product SKU
  nombre: 'Audífonos Bluetooth Pro',
  emo: '🎧',               // Display emoji
  precio: 89.99,           // Unit price
  qty: 2                   // Quantity in cart
}

​
Quick Access

From the POS page header:
  • 🔔 Notifications - System alerts
  • ❓ Help - Support resources
  • Cerrar Sesión - Logout securely
Multiple entry points throughout StockPro:
  • Dashboard: ”+ Nueva Venta” button in header
  • Sidebar: “Nueva Venta” under Ventas section
  • Sales History: ”+ Nueva Venta” button
Keyboard Shortcuts: For faster checkout, consider implementing keyboard shortcuts for common actions like adding products, adjusting quantities, and completing sales.

Build docs developers (and LLMs) love

Get started for freeTalk to us