<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b'>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
<title><data:blog.title/></title>
<b:skin><![CDATA[
/* CSS básico */
.producto { border: 1px solid #ccc; padding: 10px; margin: 10px; }
.carrito, .favoritos { border: 1px solid #333; padding: 10px; margin: 10px; }
.cantidad { display: inline-flex; align-items: center; gap: 5px; }
button { margin: 5px; cursor: pointer; }
]]></b:skin>
</head>
<body>
<b:section id='main-section' class='main-section' maxwidgets='1' showaddelement='yes'>
<div class="blog-posts hfeed">
<h1>Productos</h1>
<div id="productos"></div>
<h2>🛒 Carrito <span id="totalCarrito">0</span></h2>
<div class="carrito" id="carrito"></div>
<h2>⭐ Favoritos <span id="totalFavoritos">0</span></h2>
<div class="favoritos" id="favoritos"></div>
</div>
</b:section>
<script type='text/javascript'>
//<![CDATA[
// Productos de ejemplo
const productos = [
{ id: 1, nombre: "Producto A", precio: 10 },
{ id: 2, nombre: "Producto B", precio: 20 },
{ id: 3, nombre: "Producto C", precio: 15 }
];
const productosDiv = document.getElementById("productos");
const carritoDiv = document.getElementById("carrito");
const favoritosDiv = document.getElementById("favoritos");
function getLS(key) {
return JSON.parse(localStorage.getItem(key)) || [];
}
function setLS(key, data) {
localStorage.setItem(key, JSON.stringify(data));
}
function renderProductos() {
productosDiv.innerHTML = "";
productos.forEach(producto => {
const div = document.createElement("div");
div.className = "producto";
div.innerHTML = `
<strong>${producto.nombre}</strong><br/>
Precio: $${producto.precio}<br/>
<div class="cantidad">
<button onclick="cambiarCantidad(${producto.id}, -1)">-</button>
<span id="cantidad-${producto.id}">1</span>
<button onclick="cambiarCantidad(${producto.id}, 1)">+</button>
</div><br/>
<button onclick="agregarAlCarrito(${producto.id})">Añadir al carrito</button>
<button onclick="agregarAFavoritos(${producto.id})">⭐ Favorito</button>
`;
productosDiv.appendChild(div);
});
}
const cantidades = {};
function cambiarCantidad(id, delta) {
cantidades[id] = (cantidades[id] || 1) + delta;
if (cantidades[id] < 1) cantidades[id] = 1;
document.getElementById(`cantidad-${id}`).innerText = cantidades[id];
}
function agregarAlCarrito(id) {
const cantidad = cantidades[id] || 1;
let carrito = getLS("carrito");
const idx = carrito.findIndex(item => item.id === id);
if (idx > -1) {
carrito[idx].cantidad += cantidad;
} else {
const prod = productos.find(p => p.id === id);
carrito.push({ ...prod, cantidad });
}
setLS("carrito", carrito);
renderCarrito();
}
function agregarAFavoritos(id) {
let favoritos = getLS("favoritos");
if (!favoritos.some(f => f.id === id)) {
const prod = productos.find(p => p.id === id);
favoritos.push(prod);
setLS("favoritos", favoritos);
renderFavoritos();
}
}
function eliminarDelCarrito(id) {
let carrito = getLS("carrito").filter(item => item.id !== id);
setLS("carrito", carrito);
renderCarrito();
}
function eliminarDeFavoritos(id) {
let favoritos = getLS("favoritos").filter(item => item.id !== id);
setLS("favoritos", favoritos);
renderFavoritos();
}
function cambiarCantidadCarrito(id, delta) {
let carrito = getLS("carrito");
const idx = carrito.findIndex(item => item.id === id);
if (idx > -1) {
carrito[idx].cantidad += delta;
if (carrito[idx].cantidad < 1) carrito[idx].cantidad = 1;
setLS("carrito", carrito);
renderCarrito();
}
}
function renderCarrito() {
const carrito = getLS("carrito");
carritoDiv.innerHTML = carrito.map(item => `
<div>
${item.nombre} - $${item.precio} x ${item.cantidad}
<button onclick="cambiarCantidadCarrito(${item.id}, -1)">-</button>
<button onclick="cambiarCantidadCarrito(${item.id}, 1)">+</button>
<button onclick="eliminarDelCarrito(${item.id})">❌</button>
</div>
`).join("");
document.getElementById("totalCarrito").innerText = carrito.length;
}
function renderFavoritos() {
const favoritos = getLS("favoritos");
favoritosDiv.innerHTML = favoritos.map(item => `
<div>
${item.nombre} - $${item.precio}
<button onclick="eliminarDeFavoritos(${item.id})">❌</button>
</div>
`).join("");
document.getElementById("totalFavoritos").innerText = favoritos.length;
}
renderProductos();
renderCarrito();
renderFavoritos();
//]]>
</script>
<b:skin/>
</body>
</html>
×
Plantilla blogger con carrito en javascript puro
Publicado por:
Kolectiva - Agencia de marketing |
javascript