Plantilla para Ventas de Productos de Amazon
Esta plantilla de página web proporciona una estructura fundamental para exhibir y vender productos de Amazon directamente desde tu propio sitio. Utilizando HTML, CSS y JavaScript, organiza la información del producto de manera clara y atractiva, permitiendo a los visitantes explorar los artículos disponibles.
 |
| Plantilla para Ventas de Productos de Amazon. |
Con la integración de enlaces directos a las páginas de productos en Amazon, facilita el proceso de compra, dirigiendo a los clientes hacia una experiencia de transacción segura y confiable en la plataforma de Amazon.
Código:
HTML (index.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tienda Amazon - Ejemplo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Mi Tienda Amazon</h1>
</header>
<main>
<section id="productos">
</section>
</main>
<script src="script.js"></script>
</body>
</html>
CSS (style.css)
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #f0c14b;
padding: 20px;
text-align: center;
}
#productos {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 20px;
}
.div-producto {
border: 1px solid #ddd;
margin: 10px;
padding: 20px;
width: 300px;
text-align: center;
}
.div-producto img {
max-width: 200px;
height: auto;
}
.div-producto button {
background-color: #f0c14b;
border: none;
padding: 10px 20px;
cursor: pointer;
}
JavaScript (script.js)
const productos = [
{
nombre: "Producto 1",
descripcion: "Descripción del producto 1.",
precio: 29.99,
imagen: "imagen1.jpg", // Reemplaza con la ruta de tu imagen
asin: "B012345678" // Reemplazar por código producto 1
},
{
nombre: "Producto 2",
descripcion: "Descripción del producto 2.",
precio: 49.99,
imagen: "imagen2.jpg", // Reemplaza con la ruta de tu imagen
asin: "B098765432" //Reemplazar por código producto 2
},
// Agrega más productos aquí
{
nombre: "Producto 3",
descripcion: "Descripción del producto 3.",
precio: 49.99,
imagen: "imagen2.jpg", // Reemplaza con la ruta de tu imagen
asin: "B098765432" //Reemplazar por código producto 3
},
{
nombre: "Producto 4",
descripcion: "Descripción del producto 4.",
precio: 49.99,
imagen: "imagen2.jpg", // Reemplaza con la ruta de tu imagen
asin: "B098765432" //Reemplazar por código producto 4
},
{
nombre: "Producto 5",
descripcion: "Descripción del producto 5.",
precio: 49.99,
imagen: "imagen2.jpg", // Reemplaza con la ruta de tu imagen
asin: "B098765432" //Reemplazar por código producto 5
},
{
nombre: "Producto 6",
descripcion: "Descripción del producto 6.",
precio: 49.99,
imagen: "imagen2.jpg", // Reemplaza con la ruta de tu imagen
asin: "B098765432" //Reemplazar por código producto 6
},
{
nombre: "Producto 7",
descripcion: "Descripción del producto 7.",
precio: 49.99,
imagen: "imagen2.jpg", // Reemplaza con la ruta de tu imagen
asin: "B098765432" //Reemplazar por código producto 7
},
{
nombre: "Producto 8",
descripcion: "Descripción del producto 8.",
precio: 49.99,
imagen: "imagen2.jpg", // Reemplaza con la ruta de tu imagen
asin: "B098765432" //Reemplazar por código producto 8
},
{
nombre: "Producto 9",
descripcion: "Descripción del producto 9.",
precio: 49.99,
imagen: "imagen2.jpg", // Reemplaza con la ruta de tu imagen
asin: "B098765432" //Reemplazar por código producto 9
},
{
nombre: "Producto 10",
descripcion: "Descripción del producto 10.",
precio: 49.99,
imagen: "imagen2.jpg", // Reemplaza con la ruta de tu imagen
asin: "B098765432" //Reemplazar por código producto 10
},
{
nombre: "Producto 11",
descripcion: "Descripción del producto 11.",
precio: 49.99,
imagen: "imagen2.jpg", // Reemplaza con la ruta de tu imagen
asin: "B098765432" //Reemplazar por código producto 11
},
{
nombre: "Producto 12",
descripcion: "Descripción del producto 12.",
precio: 49.99,
imagen: "imagen2.jpg", // Reemplaza con la ruta de tu imagen
asin: "B098765432" //Reemplazar por código producto 12
},
];
const productosSection = document.getElementById("productos");
productos.forEach(producto => {
const productoDiv = document.createElement("div");
productoDiv.classList.add("div-producto");
productoDiv.innerHTML = `
<img src="${producto.imagen}" alt="${producto.nombre}">
<h3>${producto.nombre}</h3>
<p>${producto.descripcion}</p>
<p>Precio: $${producto.precio}</p>
<<button onclick="comprar('${producto.asin}')">Comprar en Amazon</button>
`;
productosSection.appendChild(productoDiv);
});
function comprar(asin) {
window.open(`https://www.amazon.com/dp/${asin}?tag=XXXXXXXXXXX-20`, "_blank");
//Abre el producto de Amazon en una nueva ventana
//Se ha pasado la variable asin que es el código del producto
//Reemplazar constante XXXXXXXXXXX-20 que es código de afiliado
}
Explicación y cómo usar:
- HTML:
- Crea la estructura básica de la página.
- El
id="productos"en el<section>es donde se insertarán los productos con JavaScript.
- CSS:
- Da estilo a la página, centrándose en la presentación de los productos.
- Ajusta los estilos según tus preferencias.
- JavaScript:
- Define un array
productoscon la información de tus productos (nombre, descripción, precio, imagen, ASIN). - Itera sobre el array y crea elementos
divpara cada producto, insertándolos en la secciónproductos. - La función
comprar(asin)abre la página del producto en Amazon usando su ASIN.
- Define un array
- Imágenes:
- Reemplaza
"imagen1.jpg"y"imagen2.jpg"con las rutas reales de tus imágenes. - Coloca las imágenes en la misma carpeta que tu archivo HTML o ajusta las rutas en el código JavaScript.
- Reemplaza
- ASINs:
- Reemplaza los ASINs de ejemplo con los ASINs reales de tus productos de amazon.
- Cómo ejecutar:
- Guarda los tres archivos (index.html, style.css, script.js) en la misma carpeta.
- Abre
index.htmlen tu navegador.
Mejoras:
- Integración con la API de Amazon para obtener información de productos en tiempo real.
- Funcionalidad de carrito de compras.
- Filtrado y búsqueda de productos.
- Diseño responsivo para dispositivos móviles.
- Implementación de un backend para la gestion de usuarios, pagos, y la información de los productos.
- Uso de frameworks de javascript como React, Angular, o Vue para una mejor experiencia de usuario y una mejor organización del codigo.
No hay comentarios.
¡Muchísimas gracias a todos por sus comentarios! Cada uno de ustedes aporta algo único y valioso a la conversación. Nos llena de alegría saber que nuestro contenido les resulta interesante y útil. Sus opiniones y sugerencias nos motivan a seguir mejorando y a crear más artículos que les gusten. ¡Gracias por ser parte de nuestra comunidad! Esperamos seguir compartiendo ideas y aprendiendo juntos.
¡Nos vemos en el próximo post!