Skip to main content

​
Overview

Once you’ve published products on Mis Compras, you’ll need to manage them over time. The platform provides intuitive tools to view, edit, and delete your listings directly from your seller profile.

​
Viewing Your Products

All your published products are displayed in your seller profile (perfil.html) in a responsive grid layout.

​
Product Display

Each product card shows:
  • Product Image: Thumbnail with hover scale effect
  • Product Name: Clear, bold title
  • Price: Prominently displayed in blue
  • Description: Truncated preview (first 100 characters)
  • Metadata: Views count and publication date
  • Action Buttons: Quick access to view, edit, and delete
Products are loaded dynamically via the php/mis_productos.php API endpoint, which filters products by your user ID.

​
Product Grid Layout

async function cargarMisProductos() {
    const id = localStorage.getItem("id_usuario");
    
    try {
        const resp = await fetch("php/mis_productos.php?id=" + id);
        const data = await resp.json();

        if (!data.exito || data.productos.length === 0) {
            // Display "no products" message
            return;
        }

        // Render products in grid
        data.productos.forEach(p => {
            // Generate product card HTML
        });
    } catch (error) {
        // Handle errors
    }
}

​
Editing Products

1

Access Edit Mode

From your profile, locate the product you want to edit and click the green “Edit” button (pencil icon).This redirects you to: editar_producto.html?id={product_id}
2

Modify Product Details

The edit form loads with your current product information pre-filled:
  • Product name
  • Price
  • Description
  • Current product image (with preview)
Make your desired changes in the form fields.
3

Change Product Image (Optional)

Click the “Cambiar imagen” button to upload a new product photo. The preview updates immediately to show your new selection.
4

Save Changes

Click “Guardar cambios” to submit your updates. Upon success, you’re redirected back to your profile.

​
Edit Form Interface

The edit page (editar_producto.html) features a modern, dark-themed interface with a split layout: Left Panel (Form Fields):
  • Product name input
  • Price input (supports decimals)
  • Description textarea (minimum 140px height)
Right Panel (Image Management):
  • Current product image preview (280x280px)
  • “Cambiar imagen” button for uploading new images
  • Live preview when selecting a new file

​
Technical Implementation

​
Loading Product Data

const params = new URLSearchParams(window.location.search);
const idProducto = params.get("id");

// Fetch current product data
fetch(`php/obtener_producto.php?id=${idProducto}`)
  .then(res => res.json())
  .then(data => {
    if (!data.exito) {
      alert("Error al cargar producto");
      return;
    }

    // Populate form fields
    idInput.value = data.producto.id_producto;
    nombre.value = data.producto.nombre;
    precio.value = data.producto.precio;
    descripcion.value = data.producto.descripcion;
    preview.src = "imagenes/" + data.producto.imagen;
  });

​
Image Preview

imagen.addEventListener("change", e => {
  const file = e.target.files[0];
  if (file) preview.src = URL.createObjectURL(file);
});

​
Submitting Updates

form.addEventListener("submit", e => {
  e.preventDefault();

  const formData = new FormData(form);

  fetch("php/actualizar_producto.php", {
    method: "POST",
    body: formData
  })
  .then(res => res.json())
  .then(data => {
    if (data.exito) {
      alert("Producto actualizado");
      window.location.href = "perfil.html";
    } else {
      alert(data.mensaje);
    }
  });
});

​
Deleting Products

Deleting a product is permanent and cannot be undone. Always confirm before deletion.
1

Locate the Product

Find the product you want to remove in your profile’s product grid.
2

Click Delete Button

Click the red trash icon button on the product card.
3

Confirm Deletion

A browser confirmation dialog appears: “¿Eliminar este producto?”Click OK to proceed or Cancel to abort.
4

Product Removed

Upon confirmation, the product is deleted from the database and immediately removed from your product grid.

​
Delete Implementation

async function eliminarProducto(id) {
    if (!confirm("¿Eliminar este producto?")) return;

    try {
        const resp = await fetch("php/eliminar_producto.php", {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ id_producto: id })
        });

        const data = await resp.json();

        if (data && data.exito) {
            alert(data.mensaje || "Producto eliminado");
            cargarMisProductos(); // Refresh the product list
        } else {
            alert(data && data.mensaje ? data.mensaje : "Error al eliminar");
        }
    } catch (error) {
        console.error('Error eliminando producto:', error);
        alert("Error de conexión");
    }
}

​
Product Actions Overview

View Product

Opens the public product detail pageLink: producto.html?id={product_id}

Edit Product

Opens the edit form with current dataLink: editar_producto.html?id={product_id}

Delete Product

Permanently removes the productEndpoint: php/eliminar_producto.php

​
Product Statistics

Each product card displays real-time statistics:

​
View Counter

  • Icon: Eye icon (fa-eye)
  • Data: Number of times the product page has been viewed
  • Source: p.vistas from database

​
Publication Date

  • Icon: Calendar icon (fa-calendar)
  • Data: Date when the product was first published
  • Format: Human-readable date or “Reciente” for new listings

​
Empty State

When you have no published products, the profile displays an encouraging message: 
<div class="sin-productos">
    <i class="fas fa-box-open"></i>
    <h3>No tienes productos publicados</h3>
    <p>Comienza a vender publicando tu primer producto</p>
</div>
This empty state includes:
  • Large icon (box-open)
  • Helpful headline
  • Call-to-action message
  • Prominent “Publicar nuevo producto” button below

​
Product Counter

Your profile header displays a dynamic counter showing your total published products: 
document.getElementById("contador-productos").textContent = 
    `${data.productos.length} producto${data.productos.length !== 1 ? 's' : ''}`;
Example outputs:
  • “0 productos”
  • “1 producto”
  • “5 productos”

​
Best Practices for Managing Listings

Keep your listings fresh
  • Update prices to remain competitive
  • Refresh product descriptions with new details
  • Replace images with better quality photos
  • Adjust inventory availability
Track your product metrics
  • Check view counts regularly
  • Identify low-performing products
  • Update or remove items with no views
  • Replicate successful listing strategies
Ensure listing accuracy
  • Verify all information is current
  • Remove sold-out items promptly
  • Update product conditions
  • Respond to any customer questions

​
Product Card UI Components

​
Visual Design

The product cards feature a clean, modern design: 
.producto-minimal {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.producto-minimal:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
Features:
  • White background with subtle shadow
  • 12px border radius for rounded corners
  • Smooth hover animation (lifts 4px)
  • Enhanced shadow on hover

​
Action Buttons

Three distinct button styles provide clear visual hierarchy:
Color: Blue (#3b82f6)Background: Light blue (#eff6ff)Icon: External linkOpens the public-facing product detail page

​
Responsive Design

The product grid automatically adjusts to screen size: 
.productos-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

@media (max-width: 768px) {
    .productos-lista {
        grid-template-columns: 1fr;
    }
}
  • Desktop: Multiple columns (minimum 300px per card)
  • Mobile: Single column layout
  • Gap: 20px spacing between cards

​
Troubleshooting

Symptoms: Spinner shows indefinitely or error message appearsSolutions:
  • Verify you’re logged in (check localStorage.id_usuario)
  • Check browser console for API errors
  • Ensure php/mis_productos.php is accessible
  • Verify database connection
Symptoms: Clicking edit doesn’t redirect to edit pageSolutions:
  • Check JavaScript console for errors
  • Verify product ID is being passed correctly
  • Ensure editar_producto.html exists
  • Test the editarProducto() function
Symptoms: Product deletes without confirmationSolutions:
  • Check browser settings for blocked dialogs
  • Verify the confirm() function is not being bypassed
  • Test in a different browser
Symptoms: New image doesn’t show in previewSolutions:
  • Check file input change event listener
  • Verify URL.createObjectURL() is working
  • Try a different image file
  • Clear browser cache

​
Next Steps

Optimize Your Profile

Learn about profile features and statistics tracking

Publish More Products

Expand your product catalog with new listings

Build docs developers (and LLMs) love

Get started for freeTalk to us