Skip to main content

​
Overview

Publishing products on Mis Compras is a straightforward process designed to get your items listed quickly. The platform provides an intuitive form where you can add all necessary product details, images, and pricing information.

​
Accessing the Publishing Form

1

Navigate to Your Profile

Log in and go to your profile page (perfil.html)
2

Click Publish Button

Click the “Publicar nuevo producto” button at the bottom of your profile. This redirects you to publicar_producto.html.
You must be logged in to publish products. The platform verifies your authentication status via localStorage before allowing product submissions.

​
Product Publishing Form

The product publishing interface (publicar_producto.html) contains the following fields:

​
Required Fields

​
nombre
text
required
Product NameThe title of your product. Make it descriptive and search-friendly.Example: “Samsung Galaxy S23 Ultra 256GB”
​
descripcion
textarea
required
Product DescriptionDetailed description of your product. Include features, specifications, condition, and any other relevant details.Minimum height: 140px text area for comprehensive descriptions
​
precio
number
required
PriceProduct price in USD. Supports decimal values for cents.Example: 999.99
​
imagen
file
required
Product ImageUpload a product photo. Accepted formats: image files (JPG, PNG, GIF, etc.)The form includes: accept="image/*"
​
categoria
select
required
CategorySelect the appropriate category for your product. Categories are dynamically loaded from the database via php/obtener_categorias.php.Available categories include: Electronics, Laptops, Smartphones, and more.

​
Publishing Workflow

1

Fill Out Product Information

Complete all required fields in the form. The form validates that all fields are filled before submission.
<form id="form-producto" action="php/vender.php" method="POST" enctype="multipart/form-data">
  <input type="text" name="nombre" placeholder="Nombre del producto" required>
  <textarea name="descripcion" placeholder="Descripción" required></textarea>
  <input type="number" name="precio" placeholder="Precio" required>
  <input type="file" name="imagen" accept="image/*" required>
  <select name="categoria" id="select-categoria" required>
    <option value="">Seleccionar categoría</option>
  </select>
  <button type="submit" class="boton-publicar">Publicar</button>
</form>
2

Submit the Form

Click the “Publicar” button. The form data is sent to the backend as multipart/form-data to support image uploads.Backend Endpoint: php/vender.phpThe submission includes:
  • All form field data
  • User ID (id_vendedor) from localStorage
  • Product image file
3

Success Confirmation

Upon successful publication, a React-based success animation displays:
  • Green checkmark animation
  • “¡Producto publicado!” message
  • Automatic redirect to your profile after 2 seconds
The animation uses React 18 with Babel for in-browser JSX transformation.

​
Technical Implementation

​
Form Submission Handler

document.getElementById("form-producto").addEventListener("submit", async (e) => {
    e.preventDefault();

    const id = localStorage.getItem("id_usuario");
    if (!id) {
        alert("⚠️ Debes iniciar sesión para publicar productos.");
        return;
    }

    const form = new FormData(e.target);
    form.append("id_vendedor", id);

    const resp = await fetch("php/vender.php", {
        method: "POST",
        body: form
    });

    const data = await resp.json();

    if (data.exito || data.success) {
        // Show success animation and redirect
        ReactDOM.createRoot(document.getElementById("react-success"))
            .render(<SuccessAnimation onFinish={() => {
                window.location.href = "perfil.html";
            }} />);
    } else {
        alert(data.mensaje || data.message || "Error al publicar producto");
    }
});

​
Category Loading

Categories are dynamically loaded when the page loads: 
async function cargarCategoriasSelect() {
    const resp = await fetch("php/obtener_categorias.php");
    const data = await resp.json();
    const select = document.getElementById("select-categoria");

    data.categorias.forEach(cat => {
        select.innerHTML += `
            <option value="${cat.id_categoria}">${cat.nombre}</option>
        `;
    });
}
cargarCategoriasSelect();

​
Success Animation Component

The platform uses React to display a polished success animation: 
function SuccessAnimation({ onFinish }) {
    React.useEffect(() => {
        const timer = setTimeout(() => {
            onFinish();
        }, 2000);
        return () => clearTimeout(timer);
    }, []);

    return (
        <div style={{
            position: "fixed",
            top: 0, left: 0,
            width: "100%", height: "100%",
            background: "rgba(0,0,0,0.6)",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            zIndex: 9999
        }}>
            <div style={{
                background: "#fff",
                padding: "40px 60px",
                borderRadius: "20px",
                textAlign: "center",
                boxShadow: "0 10px 25px rgba(0,0,0,0.2)",
                animation: "scaleUp .4s ease"
            }}>
                <div style={{
                    fontSize: "70px",
                    color: "#22c55e",
                    animation: "pop .4s forwards"
                }}>✔</div>
                <h2>¡Producto publicado!</h2>
                <p>Redirigiendo...</p>
            </div>
        </div>
    );
}

​
Best Practices for Product Listings

Write Clear Titles

Use descriptive, keyword-rich titles that accurately represent your product

Detailed Descriptions

Include specifications, condition, features, and any defects or issues

Quality Images

Use high-resolution, well-lit photos showing the product from multiple angles

Competitive Pricing

Research similar products to set competitive prices

​
Troubleshooting

Issue: “⚠️ Debes iniciar sesión para publicar productos.”Solution: Ensure you’re logged in. Check that localStorage.id_usuario contains a valid user ID. Log out and log back in if necessary.
Issue: Product publishes but image doesn’t displaySolution:
  • Verify the image file format is supported (JPG, PNG, GIF)
  • Check file size isn’t too large
  • Ensure proper permissions on the server’s image upload directory
Issue: Category dropdown shows only “Seleccionar categoría”Solution:
  • Check browser console for API errors
  • Verify php/obtener_categorias.php is accessible
  • Ensure database connection is working
Issue: Can’t submit the formSolution:
  • Fill out all required fields
  • Ensure price is a valid number
  • Select a category from the dropdown
  • Choose an image file

​
What Happens After Publishing?

Once your product is published:
  1. Immediate Visibility: Your product appears in the marketplace and category listings
  2. Profile Update: The product is added to your seller profile’s product grid
  3. Statistics Tracking: View tracking begins immediately for analytics
  4. Search Integration: Your product becomes searchable by title and category
After publishing, you can edit or delete your product from your profile page. See the Managing Listings guide for details.

​
Next Steps

Learn to Manage Your Products

Discover how to edit, update, and optimize your product listings

Build docs developers (and LLMs) love

Get started for freeTalk to us