Personalización recomendada:
Cambia el número en https://wa.me/5491123456789 por el tuyo real.
Para Mercado Pago real, deberías integrar MercadoPago SDK.
Puedes cargar productos dinámicamente desde una base de datos o archivo JSON si
expandes el sitio.
¿Te gustaría que lo prepare como una plantilla descargable o convertirlo en un
sitio multisección con login y base de datos?
Dijiste:
indicame los paso para poder cargar productos dinámicamente desde una base de datos
o archivo JSON si expandes el sitio.
ChatGPT dijo:
Para cargar productos dinámicamente desde una base de datos o archivo JSON, puedes
seguir uno de estos dos caminos según el alcance que desees:
✅ OPCIÓN 1: Usar un archivo JSON (ideal para sitios estáticos simples)
📁 Paso 1: Crea el archivo productos.json
json
Copiar
Editar
[
{
"nombre": "Remera Oversize",
"precio": 5990,
"imagen": "https://images.unsplash.com/photo-1618354691419-458b27f65c3c"
},
{
"nombre": "Campera Urban",
"precio": 12500,
"imagen": "https://images.unsplash.com/photo-1593032457864-271b4c1e2ed3"
},
{
"nombre": "Jeans Slim",
"precio": 8700,
"imagen": "https://images.unsplash.com/photo-1622449309384-0ad5a2f66d02"
}
]
🧩 Paso 2: Carga los productos con JavaScript en tu HTML
Agrega este bloque en tu <script> después del DOMContentLoaded:
javascript
Copiar
Editar
document.addEventListener("DOMContentLoaded", () => {
fetch('productos.json')
.then(response => response.json())
.then(data => {
const contenedor = document.getElementById("productos-lista");
contenedor.innerHTML = "";
data.forEach(producto => {
const card = document.createElement("div");
card.className = "col-md-4 mb-4";
card.innerHTML = `
<div class="card" data-aos="zoom-in">
<img src="${producto.imagen}" class="card-img-top" alt="$
{producto.nombre}">
<div class="card-body text-center">
<h5 class="card-title">${producto.nombre}</h5>
<p class="card-text">$${producto.precio}</p>
<button class="btn btn-dark" onclick="agregarAlCarrito('$
{producto.nombre}', ${producto.precio})">Agregar</button>
</div>
</div>
`;
contenedor.appendChild(card);
});
});
});
⚠️ Nota:
Para que funcione correctamente en local, abre tu sitio con un servidor local (por
ejemplo, con Live Server en VS Code) porque fetch() no funciona con file://
directamente.
✅ OPCIÓN 2: Usar una base de datos con backend (ej. PHP + MySQL o Node.js +
MongoDB)
🔧 Paso 1: Crea la base de datos y tabla (MySQL)
sql
Copiar
Editar
CREATE DATABASE tienda;
CREATE TABLE productos (
id INT AUTO_INCREMENT PRIMARY KEY,
nombre VARCHAR(100),
precio DECIMAL(10,2),
imagen TEXT
);
🛠 Paso 2: Crear una API (por ejemplo con PHP)
Archivo productos.php:
php
Copiar
Editar
<?php
header('Content-Type: application/json');
$conn = new mysqli("localhost", "usuario", "clave", "tienda");
$result = $conn->query("SELECT * FROM productos");
$productos = [];
while($row = $result->fetch_assoc()) {
$productos[] = $row;
}
echo json_encode($productos);
?>
🔁 Paso 3: Consumir los datos con fetch() desde el HTML
javascript
Copiar
Editar
fetch('productos.php')
.then(res => res.json())
.then(data => {
// Igual que en la opción JSON
});
🧩 Alternativas modernas:
Firebase (fácil, sin servidor propio)
Node.js + Express + MongoDB
Strapi (CMS headless) si querés panel para administrar productos
