Skip to main content

​
Overview

The CompuTécnicos shopping cart provides a comprehensive interface for managing your product selections before checkout. It includes smart features like combo discounts, free shipping progress tracking, and intelligent product recommendations.
You must be logged in to add products to your cart and proceed to checkout.

​
Adding Products to Cart

​
From Product Catalog

  1. Browse the product catalog
  2. Click on a product card to view details
  3. Click “Agregar al Carrito” button
  4. Product is added to your cart immediately

​
From Product Detail Page

  1. View product details
  2. Adjust the quantity using the selector
  3. Click “Agregar al Carrito”
  4. Or use “Comprar Ahora” for direct checkout
The “Comprar Ahora” (Buy Now) button takes you directly to checkout with just that product, bypassing the cart page.

​
Cart Features

Quantity Management

Adjust quantities with +/- buttons or direct input

Combo Discounts

Automatic 10% discount on compatible product combinations

Free Shipping Progress

Visual progress bar showing how close you are to free shipping

Smart Recommendations

Suggested products based on your cart items

​
Cart Interface

​
Item Display

Each cart item shows:
  • Product image with offer badge if applicable
  • Category and product name
  • Brand information
  • Stock availability with quantity remaining
  • Quantity controls (+/- buttons and direct input)
  • Subtotal for that item
  • Remove button to delete the item

​
Quantity Controls

Manage product quantities easily:
Increment/Decrement Buttons:
  • Click the ”-” button to decrease quantity
  • Click the ”+” button to increase quantity
  • Cannot go below 1 unit
  • Cannot exceed available stock
Direct Input:
  • Click in the quantity field
  • Type the desired number
  • System auto-updates when you change the value
  • Invalid quantities are automatically corrected
If you try to add more units than available stock, the system will limit the quantity and show a warning message.

​
Pricing and Discounts

​
Subtotal Calculation

The cart calculates:
  • Subtotal: Sum of all items (quantity × unit price)
  • Combo Discount: Automatic discount for compatible products
  • Shipping: 10,000COPorFREE(over10,000 COP or FREE (over 50,000 COP)
  • Total: Final amount to pay

​
Combo Discounts

Get 10% off when combining compatible categories:
Category PairDiscount
CPU + RAM10% on both items
CPU + Storage10% on both items
GPU + Peripherals10% on both items
GPU + Storage10% on both items
Storage + RAM10% on both items
Storage + Peripherals10% on both items
Combo discounts apply to pairs automatically. If you have 2 CPUs and 2 RAM modules, you’ll get 2 combo discounts!
The system:
  1. Groups items by category (Procesadores, Memorias RAM, etc.)
  2. Identifies compatible pairs based on predefined rules
  3. Calculates 10% discount on the sum of each pair
  4. Applies discounts to the lowest-priced items first
  5. Shows total discount in the cart summary
Example:
  • CPU: $500,000 COP
  • RAM: $200,000 COP
  • Combo discount: (500,000 + 200,000) × 10% = $70,000 COP saved

​
Free Shipping

Track your progress toward free shipping:
  • Threshold: $50,000 COP
  • Default shipping: $10,000 COP
  • Progress bar shows percentage complete
  • Remaining amount displayed when below threshold

Below Threshold

Shows “Te faltan $X para envío gratis” with the remaining amount needed

Free Shipping Unlocked

Shows “¡Ya alcanzaste el envío gratis!” celebration message

​
Cart Summary Sidebar

The right sidebar displays your purchase summary:

​
Summary Details

  • Subtotal with item count
  • Shipping cost (or FREE indicator)
  • Free shipping progress bar
  • Combo discount (if applicable)
  • Delivery guarantee information
  • Final total in COP

​
Action Buttons

Proceder al Pago (Proceed to Payment):
  • Takes you to the checkout page
  • Only visible when logged in
  • Primary action button
Vaciar Carrito (Empty Cart):
  • Removes all items from cart
  • Shows confirmation modal
  • Cannot be undone

​
Delivery Guarantee

Every cart includes a delivery guarantee:
Entrega garantizada: If your order is delayed, you receive a $4,000 COP coupon for future purchases.
This ensures customer satisfaction and builds trust in the delivery process.

​
Smart Recommendations

The cart shows personalized product suggestions:

​
How Recommendations Work

  1. Category-based: Products from same categories as cart items
  2. Intelligent filtering: Excludes items already in cart
  3. Priority sorting: Offer items and newest products first
  4. Limited display: Shows up to 4 recommendations

​
Using Recommendations

  • View product image, name, and price
  • Click “Agregar” to add to cart
  • Automatically refreshes after adding
Recommendations help you complete your PC build or find compatible accessories!

​
Cart Actions

​
Removing Items

  1. Click the trash icon button on any cart item
  2. Confirm deletion in the modal dialog
  3. Item is removed immediately
  4. Cart totals update automatically

​
Emptying Cart

  1. Click “Vaciar Carrito” button in sidebar
  2. Confirm action in modal dialog
  3. All items are removed
  4. Cart becomes empty
Clearing your cart cannot be undone. Make sure you want to remove all items before confirming.

​
Continuing to Checkout

When ready to purchase:
  1. Review all items and quantities
  2. Verify the total amount
  3. Click “Proceder al Pago”
  4. You’ll be taken to the checkout page

​
Mobile Experience

The cart is fully responsive:
  • Stacked layout on mobile devices
  • Touch-optimized controls for quantity adjustment
  • Swipe-friendly item cards
  • Mobile-specific quantity inputs for better usability
  • Responsive sidebar moves below items on small screens

​
Cart Persistence

Your cart is stored in your session:
  • Persists during browsing across the site
  • Survives page refreshes while logged in
  • Cleared on logout for security
  • Not shared between devices
Log in before adding items to ensure your cart is saved throughout your shopping session.

​
Stock Validation

The cart includes real-time stock checking:
  • Available stock displayed for each item
  • Stock warnings if quantity exceeds availability
  • Automatic limitation to available stock
  • Out of stock items clearly marked
When updating quantities:
  1. System checks current available stock
  2. Compares with requested quantity
  3. If exceeding stock, limits to maximum available
  4. Shows warning toast notification
  5. Updates cart with corrected quantity
Example: If you try to add 10 units but only 5 are in stock, the cart will set quantity to 5 and notify you.

​
Error Handling

​
Common Scenarios

ScenarioSystem Response
Not logged inRedirects to login page
Out of stockPrevents adding, shows error
Invalid quantityAuto-corrects and notifies
Empty cart at checkoutShows empty cart message

​
Toast Notifications

The cart uses toast notifications for user feedback:
  • Success (green): Product added successfully
  • Warning (yellow): Stock limit reached
  • Error (red): Operation failed
Toasts appear in the top-right corner and auto-dismiss after 4 seconds.

​
Technical Details

​
AJAX Updates

Quantity updates use AJAX for seamless experience: 
// Updates happen without page reload
// Server validates and returns new totals
// Cart refreshes automatically

​
Session Storage

Cart data is stored in PHP sessions:
  • Secure server-side storage
  • Not exposed to client manipulation
  • Validated on every operation

​
Tips for Best Experience

Check Stock First

View product stock on detail pages before adding large quantities

Use Combos

Build complete PC setups to maximize combo discounts

Track Free Shipping

Add items to reach the $50,000 threshold for free delivery

Review Before Checkout

Double-check quantities and total before proceeding to payment

Build docs developers (and LLMs) love

Get started for freeTalk to us