Plantilla blogger con carrito en javascript puro 🤖 Kolectiva

Plantilla blogger con carrito en javascript puro

<?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>

Quieres algo más adaptado a la plataforma de blogger?

Revisa este enlace y mira el demo que hemos preparado: una tienda online hecha con JavaScript puro, sin jQuery. Tiene carga rápida y es muy versátil. https://cart-jspuro.blogspot.com/