Ejemplo de tienda online en html
Código
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Venta de Bovinos</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.producto {
background: white;
border-radius: 10px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
width: 220px;
padding: 10px;
text-align: center;
}
.producto img {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 8px;
}
.producto button {
margin-top: 10px;
background-color: #28a745;
color: white;
border: none;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
}
.producto button:hover {
background-color: #218838;
}
#carrito {
margin-top: 40px;
background: #fff;
padding: 20px;
border-radius: 10px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
footer {
text-align: center;
margin-top: 50px;
font-size: 14px;
color: #666;
}
footer a {
color: #007bff;
text-decoration: none;
}
</style>
</head>
<body>
<h1>Venta de Bovinos</h1>
<div class="container" id="productos">
<!-- Productos generados por JS -->
</div>
<div id="carrito">
<h2>🛒 Carrito de compras</h2>
<ul id="lista-carrito"></ul>
<p><strong>Total:</strong> $<span id="total">0</span></p>
</div>
<footer>
Design by <a href="https://ariapsa.com" target="_blank">Ariapsa</a>
</footer>
<script>
const bovinos = [
{ id: 1, nombre: "Toro Charoláis", precio: 18000, imagen: "https://via.placeholder.com/220x150?text=Charol%C3%A1is" },
{ id: 2, nombre: "Vaca Holstein", precio: 15000, imagen: "https://via.placeholder.com/220x150?text=Holstein" },
{ id: 3, nombre: "Becerro Brahman", precio: 10000, imagen: "https://via.placeholder.com/220x150?text=Brahman" },
{ id: 4, nombre: "Toro Angus", precio: 20000, imagen: "https://via.placeholder.com/220x150?text=Angus" },
{ id: 5, nombre: "Vaca Hereford", precio: 16000, imagen: "https://via.placeholder.com/220x150?text=Hereford" },
];
const productosDiv = document.getElementById("productos");
const listaCarrito = document.getElementById("lista-carrito");
const totalSpan = document.getElementById("total");
let carrito = [];
bovinos.forEach(bovino => {
const div = document.createElement("div");
div.className = "producto";
div.innerHTML = `
<img src="${bovino.imagen}" alt="${bovino.nombre}">
<h3>${bovino.nombre}</h3>
<p>Precio: $${bovino.precio}</p>
<button onclick="agregarAlCarrito(${bovino.id})">Agregar al carrito</button>
`;
productosDiv.appendChild(div);
});
function agregarAlCarrito(id) {
const producto = bovinos.find(b => b.id === id);
carrito.push(producto);
actualizarCarrito();
}
function actualizarCarrito() {
listaCarrito.innerHTML = "";
let total = 0;
carrito.forEach((item) => {
total += item.precio;
const li = document.createElement("li");
li.textContent = `${item.nombre} - $${item.precio}`;
listaCarrito.appendChild(li);
});
totalSpan.textContent = total;
}
</script>
</body>
</html>