Skip to main content

​
Overview

PixelTech’s shopping cart provides a seamless purchase experience with real-time inventory monitoring, automatic price updates, and flexible checkout options including multiple payment methods and shipping configurations.

​
Shopping Cart Experience

​
Adding Products to Cart

1

Browse Products

Customer finds a product they want to purchase
2

Configure Variants

If product has colors/capacities, customer selects their preference
3

Add to Cart

Product is added with selected configuration (color, capacity, quantity)
4

Real-Time Sync Begins

System starts monitoring that product for price/stock changes

​
Cart Features

Live Stock Monitoring

Firebase connection tracks inventory in real-time

Automatic Price Updates

If product price changes, cart reflects new price

Variant Tracking

Each color/capacity combination tracked separately

Quantity Management

Increment/decrement with stock limit validation

​
How Real-Time Cart Sync Works

​
Intelligent Monitoring

The cart doesn’t just store static data - it actively watches Firebase: 
// For each unique product in cart
productIdsInCart.forEach(productId => {
  // Create real-time listener
  cartUnsubscribers[productId] = onSnapshot(doc(db, "products", productId), (snap) => {
    // Update price, stock, and availability instantly
    updateCartItemsFromCloud(productId, snap.data());
  });
});

​
What Gets Updated Automatically

When Admin Updates Price
  1. Firebase detects the change
  2. Cart receives update via onSnapshot
  3. Item price updates silently in cart
  4. Cart total recalculates automatically
  5. Customer sees new price on cart page
Cart items added before a price increase keep their original price until the customer refreshes or leaves the page.

​
Smart Cleanup

When customer removes items from cart:
  • Real-time listener for that product is immediately stopped
  • Reduces Firebase connection usage
  • Optimizes performance and costs

​
Cart Page Features

​
Cart Display

Each cart item shows:
  • Product image (from selected color variant if applicable)
  • Product name with full specifications
  • Selected variant (color and/or capacity badges)
  • Unit price (current price from Firebase)
  • Quantity controls (with +/- buttons)
  • Line total (price × quantity)
  • Remove button (instant deletion)
  • Discount indicators (if original price was higher)

​
Quick Actions

Quantity Adjustment

  • Click + to add one more unit (validates against stock)
  • Click - to remove one unit
  • If quantity reaches 0, item is removed from cart
  • System prevents exceeding available stock

Item Removal

  • Instant removal with confirmation
  • Cart total recalculates immediately
  • Cart badge updates in header
  • Empty cart shows “Continue Shopping” message

​
Cart Summary

┌─────────────────────────────────┐
│ Cart Summary                    │
├─────────────────────────────────┤
│ Subtotal:    $3,500,000 COP    │
│ Items:       4 products         │
│                                 │
│ [Continue to Checkout Button]   │
└─────────────────────────────────┘

​
Checkout Process

​
Checkout Page Flow

1

Authentication Check

Customer must be logged in. Guests are redirected to login page with redirect back to checkout.
2

Load Saved Data

System loads customer profile, saved addresses, and order history using real-time sync.
3

Shipping Configuration

Customer enters or selects delivery address.
4

Shipping Cost Calculation

System calculates shipping based on destination and cart value.
5

Payment Method Selection

Customer chooses payment method (varies by location).
6

Optional Invoice Data

If customer needs invoice, they provide tax information.
7

Order Confirmation

Final review and submission.

​
Shipping Information

​
Address Management

First Checkout
  • Enter full shipping details manually
  • Address is automatically saved as default
  • Creates foundation for future orders

​
Location Selection

Department & City Autocomplete Integration with Colombia API for accurate locations:
  1. Customer types department name (e.g., “Cundinamarca”)
  2. System shows matching departments
  3. Customer selects department
  4. Cities load for that department
  5. Customer types and selects city (e.g., “Bogotá”)
Payment methods and shipping costs vary by city. Some options only available in specific locations.

​
Shipping Cost Calculation

​
How Shipping is Calculated

Order Value Threshold
if (cartTotal >= shippingConfig.freeThreshold) {
  shippingCost = 0;
  // Display "FREE SHIPPING" badge
}
When cart value exceeds the threshold (configured by admin), shipping is free nationwide.

​
Real-Time Shipping Config Sync

Shipping configuration loads from Firebase with real-time monitoring:
  • Initial Load: From sessionStorage cache (instant)
  • Background Sync: onSnapshot listens for admin changes
  • Automatic Update: If admin changes shipping rates, customer sees new rates immediately
  • No Page Reload: Updates happen silently in background

​
Dispatch Time Indicator

Dynamic messaging based on cutoff time:
Same-Day Dispatch Available
⚡ Order in 2h 45m and we'll ship TODAY
Shows countdown to cutoff time (e.g., 2:00 PM). Creates urgency for same-day dispatch.

​
Payment Methods

​
Available Payment Options

MercadoPago

Online Payment Gateway
  • Credit/debit cards
  • Nequi
  • PSE (bank transfer)
  • Bancolombia
  • Available nationwide

Cash on Delivery (COD)

Pay When Receiving
  • Pay driver with cash/card
  • Only available in Bogotá
  • Automatically disabled for other cities

ADDI

Buy Now, Pay Later
  • Instant credit approval
  • Flexible installments
  • Requires valid ID and phone
  • Available nationwide

Sistecrédito

Credit Financing
  • Consumer credit platform
  • Multiple payment plans
  • Requires valid ID and phone
  • Available nationwide

​
Payment Method Validation

Location-Based Restrictions 
function validatePaymentMethods() {
  const city = selectedCity.toLowerCase();
  const isBogota = city.includes('bogot');
  
  if (!isBogota) {
    // Disable Cash on Delivery
    codInput.disabled = true;
    codContainer.classList.add('opacity-50', 'grayscale');
    showWarning("COD only available in Bogotá");
  }
}
Payment options dynamically enable/disable based on delivery city.

​
Payment Processing Flow

Online Gateway Flow
  1. Customer clicks “Pay with MercadoPago”
  2. System validates all form data
  3. Auto-saves address if first-time customer
  4. Calls Firebase Function createMercadoPagoPreference
  5. Function creates payment session in MercadoPago
  6. Customer redirected to MercadoPago checkout
  7. Customer completes payment
  8. MercadoPago webhook notifies backend
  9. Backend creates order in Firebase
  10. Customer redirected to success page

​
Submit Button States

Button text changes based on selected payment method: 
if (selectedPaymentMethod === 'ONLINE') {
  button.text = "Go to Pay with MercadoPago 🔒";
  button.color = "blue";
} else if (selectedPaymentMethod === 'COD') {
  button.text = "Confirm Cash on Delivery 🚚";
  button.color = "black";
} else if (selectedPaymentMethod === 'ADDI') {
  button.text = "Pay with ADDI →";
  button.color = "cyan";
} else if (selectedPaymentMethod === 'SISTECREDITO') {
  button.text = "Pay with Sistecrédito →";
  button.color = "green";
}

​
Invoice Options

​
Requesting an Invoice

1

Enable Invoice

Customer checks “I need an invoice” checkbox
2

Invoice Form Appears

Additional form section slides down
3

Enter Tax Information

  • Business name
  • Tax ID (NIT/RUT)
  • Billing address
  • Billing city
  • Email for invoice delivery
  • Phone number
4

Data Attached to Order

Invoice data saved in order’s billingData field
Invoice request is optional. Most customers order without requesting formal invoices.

​
Smart Profile Auto-Save

​
Automatic Profile Completion

The checkout process intelligently updates customer profiles: First-Time Buyers 
if (userAddresses.length === 0) {
  // Automatically save address as default
  shouldSaveAddress = true;
  isFirstAddress = true;
  
  await updateDoc(doc(db, "users", userId), {
    addresses: arrayUnion(newAddress),
    name: enteredName,
    phone: enteredPhone,
    document: enteredDocument
  });
}
Profile Gap Filling If customer profile is missing data (name, phone, document), checkout automatically fills it: 
let updates = {};
if (!userProfile.name) updates.name = checkoutFormName;
if (!userProfile.phone) updates.phone = checkoutFormPhone;
if (!userProfile.document) updates.document = checkoutFormDocument;

if (Object.keys(updates).length > 0) {
  await updateDoc(userRef, updates);
}
This ensures customer profiles are always complete without requiring separate profile setup steps.

​
Order Summary Display

​
Checkout Summary Panel

┌──────────────────────────────────────┐
│  Order Summary (4 Items)             │
├──────────────────────────────────────┤
│                                      │
│  [img] Product 1                     │
│         Color: Black | 128GB         │
│         Qty: 2        $1,200,000     │
│  -10% discount badge                 │
│                                      │
│  [img] Product 2                     │
│         Qty: 1        $800,000       │
│                                      │
├──────────────────────────────────────┤
│  Subtotal:           $2,000,000      │
│  Shipping:           $15,000         │
│  ─────────────────────────────       │
│  TOTAL:              $2,015,000      │
└──────────────────────────────────────┘
Summary updates in real-time as cart changes (via cartUpdated event listener).

Product Catalog

How customers discover and browse products

User Accounts

Profile and saved address management

Order Tracking

What happens after checkout

Build docs developers (and LLMs) love

Get started for freeTalk to us