Skip to main content

​
Overview

Mis Compras provides multiple ways for buyers to discover products across various categories. The platform offers featured products, category-based browsing, and powerful search functionality to help you find exactly what you’re looking for. When you first visit Mis Compras, you’ll see a curated selection of featured products on the homepage at index.html.

​
Homepage Components

1

Hero Carousel

The homepage features a rotating carousel showcasing:
  • Hot sales and promotions (up to 35% off on technology)
  • Free shipping offers (on purchases over $100,000)
  • Seasonal promotions and new arrivals
2

Category Quick Access

Quick navigation buttons for popular categories:
  • Smartphones
  • Laptops
  • Fruits & Vegetables
  • Home & Decoration
  • Meats & Seafood
  • Fashion & Accessories
  • Beauty & Personal Care
3

Featured Products Section

Displays highlighted products with:
  • Product image
  • Product name
  • Price
  • “Ver más” (View more) button to see details
The homepage carousel auto-rotates through promotional slides. Use the arrow buttons (❮ ❯) or indicator dots to manually navigate between slides.

​
Browsing by Category

Products are organized into categories for easy browsing through the productos.html page.

​
Category Structure

The platform loads products dynamically using the productos.js script, which fetches from php/obtener_productos_por_categoria.php: 
// Categories are displayed with all their products
{
  "categoria": "Tecnología",
  "productos": [
    {
      "id_producto": 1,
      "nombre": "iPhone 15 Pro",
      "precio": 999,
      "imagen": "ipone15.jpg",
      "vendedor": "TechStore",
      "id_vendedor": 5
    }
  ]
}

​
Product Cards

Each product card displays:
  • Product Image - Visual preview with fallback to default image if unavailable
  • Product Name - Clear product title
  • Price - Formatted as $XX.XX
  • Seller Information - “Publicado por [Seller Name]” with clickable link to seller profile
  • View Button - Links to detailed product page
Product images that fail to load automatically show a default placeholder image located at imagenes/default-product.svg.

​
Search Functionality

The navigation bar includes a powerful search feature that helps you find products quickly.
1

Access Search

The search bar is located in the top navigation (navegacion.html):
<input type="text" id="buscador" placeholder="🔍 Buscar productos...">
2

Enter Search Query

Type your search term (product name, description, or even price)
3

View Results

Results appear in real-time in the resultados-busqueda dropdown

​
Search Algorithm

The search functionality (php/buscar_productos.php) searches across multiple fields:
  • Product Name - Matches product titles
  • Description - Searches product descriptions
  • Price - Can even search by price range
Search uses SQL LIKE matching, so partial matches will be returned. For example, searching “phone” will find “iPhone”, “Smartphone”, etc.

​
Filtering Products

​
Filter by Seller

On the products page (productos.html), you can filter to see only your own listed products:
1

Enable Filter

Check the “Mostrar solo mis productos” (Show only my products) checkbox
2

Login Required

You must be logged in to use this filter. If not logged in, you’ll see: “Inicia sesión para ver tus productos”
3

View Your Products

The page dynamically filters to show only products where you are the seller
// Filter implementation in productos.js
const filtradas = allData.map(cat => ({
  categoria: cat.categoria,
  productos: cat.productos.filter(p => 
    p.id_vendedor && String(p.id_vendedor) === String(idUsuario)
  )
})).filter(c => c.productos.length > 0);

​
Product Details Page

Click on any product’s “Ver” or “Ver más” button to access the detailed product page (producto.html).

​
Product Page Features

The product detail page displays comprehensive information:

Product Information

  • High-resolution product image
  • Full product name and description
  • Current price
  • Seller information with profile link
  • Action buttons (Add to Cart, Buy Now)

Reviews & Ratings

  • Average rating (⭐ X / 5)
  • Total number of reviews
  • Individual customer reviews with:
    • Reviewer name
    • Star rating
    • Written comment
    • Review date

​
Viewing Product Details

Product information is loaded via php/producto.php?id={id_producto}: 
{
  "exito": true,
  "producto": {
    "nombre": "iPhone 15 Pro",
    "precio": "999",
    "descripcion": "Latest iPhone with...",
    "imagen_url": "imagenes/ipone15.jpg",
    "vendedor": "TechStore",
    "id_vendedor": 5
  }
}

​
Seller Profiles

Click on any seller’s name to view their profile and all their listed products.
Seller profile pages (vendedor.html?id={id_vendedor}) show all products from a specific seller, helping you discover more items from trusted vendors.
1

Start with Categories

Use category buttons on the homepage or the Products dropdown menu to browse specific product types
2

Use Search for Specific Items

When you know what you want, use the search bar for the fastest results
3

Check Seller Profiles

Found a product you like? Check out the seller’s other products for similar items
4

Read Reviews

Always review product ratings and comments before making a purchase decision

Shopping Cart

Learn how to add products to your cart

Checkout Process

Complete your purchase securely

Build docs developers (and LLMs) love

Get started for freeTalk to us