Tabla de productos en Blogger

La plantilla NichoClean v2.0 incorpora un sistema exclusivo para mostrar tablas comparativas de productos directamente en Blogger. Con este recurso podrás crear listados dinámicos con imagen, descripción, precio y un botón de compra, todo de manera automática usando las etiquetas de tus entradas.

Este módulo está optimizado para SEO gracias al uso de JSON-LD, lo que permite que Google interprete cada producto como un elemento de catálogo dentro de tu tienda. Además, puedes insertarlo en cualquier parte: entradas, páginas estáticas o incluso en el índice de categorías.

✅ Ventajas de la tabla comparativa

  • Automática: No necesitas armar manualmente la tabla. Solo usas etiquetas en tus productos y el sistema lo hace por ti.
  • SEO optimizado: Cada producto incluye datos estructurados con schema.org/Product.
  • Flexible: Puedes filtrar por temática, limitar la cantidad y hasta mostrar comparativas con precios diferentes o iguales.
  • Responsive: La tabla se adapta a móviles, tablets y pantallas grandes sin romper el diseño.
  • Botón de compra directo: Incluye un CTA estilizado que mejora el CTR.

🔧 Cómo insertar la tabla de productos

El sistema funciona con un shortcode en HTML. Solo debes añadir un bloque <div> con las propiedades necesarias y el script hace el resto.

Ejemplo básico (misma etiqueta, productos aleatorios)

<div class="tabla-productos" data-tema="camiseta" data-max="4"></div>

👉 En este caso:

  • data-tema="camiseta" → se mostrarán todos los productos que tengan la etiqueta camiseta.
  • data-max="4" → se mostrarán máximo 4 productos en la tabla.

Variante con precio fijo (misma etiqueta, mismo precio)

<div class="tabla-productos" data-tema="camiseta" data-precio="$59.99" data-max="3"></div>

👉 En este caso:

  • Se mostrarán solo los productos que tengan la etiqueta camiseta y la etiqueta $59.99.
  • Es ideal para comparar modelos iguales con el mismo precio.

Variante comparativa (misma etiqueta, diferente precio)

Si tienes varios productos bajo la misma categoría pero con precios distintos, basta con usar solo la etiqueta principal (ejemplo: camiseta) y dejar que el sistema recoja todos los precios asociados.

<div class="tabla-productos" data-tema="camiseta" data-max="4"></div>

👉 De este modo, la tabla mostrará productos con precios distintos dentro de la misma categoría, lo que permite una comparativa de valor muy atractiva para el usuario.

📜 El script que lo hace posible

El siguiente código ya viene integrado en NichoClean v2.0, pero si quieres personalizarlo, aquí tienes el fragmento clave:

<!-- 18. Js Tabla Comparativa de productos con JSON-LD -->
<script>
//<![CDATA[
document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".tabla-productos").forEach(block => {
    const tema = block.dataset.tema || "";
    const precio = block.dataset.precio || null;
    const cantidadMaxima = parseInt(block.dataset.max || 10);

    if (!tema) {
      block.innerHTML = "<p>Error: No se indicó la temática (data-tema).</p>";
      return;
    }

    const feedUrl = `/feeds/posts/default/-/${tema}?alt=json&max-results=100`;

    fetchWithCacheManager(feedUrl) // usa la duración del gadget #config-cache
      .then(data => {
        const entradas = data.feed.entry || [];

        const productosFiltrados = entradas.filter(entry => {
          const etiquetas = entry.category?.map(c => c.term) || [];
          if (precio) {
            return etiquetas.includes(precio) && etiquetas.includes(tema);
          }
          return etiquetas.includes(tema);
        });

        if (productosFiltrados.length === 0) {
          block.innerHTML = "<p>No se encontraron productos con esos filtros.</p>";
          return;
        }

        const seleccionados = productosFiltrados
          .sort(() => 0.5 - Math.random())
          .slice(0, cantidadMaxima);

        let html = `
          <table class="tabla-comparativa">
            <thead>
              <tr>
                <th>Imagen</th>
                <th>Producto</th>
                <th>Descripción</th>
                <th>Precio</th>
                <th>Comprar</th>
              </tr>
            </thead>
            <tbody>
        `;

        // Array para JSON-LD
        const jsonLDArray = [];

        seleccionados.forEach(entry => {
          const title = entry.title?.$t || "Producto";
          const link = entry.link.find(l => l.rel === "alternate").href;
          const content = entry.content?.$t || entry.summary?.$t || "";
          const cleanText = content.replace(/<[^>]+>/g, '').substring(0, 100) + "...";
          const imgMatch = content.match(/<img[^>]+src="([^">]+)"/);
          const img = imgMatch ? imgMatch[1] : "https://placehold.co/100x60?text=Sin+imagen";

          const etiquetas = entry.category?.map(c => c.term) || [];
          const precioEntry = etiquetas.find(t => /^\$\d+(\.\d{2})?$/.test(t)) || "N/A";

          html += `
            <tr>
              <td data-label="Imagen"><img src="${img}" alt="Imagen del artículo: ${title}" loading="lazy" width="80"></td>
              <td data-label="Producto"><a href="${link}" target="_blank">${title}</a></td>
              <td data-label="Descripción">${cleanText}</td>
              <td data-label="Precio">${precioEntry}</td>
              <td data-label="Comprar"><a href="${link}" class="boton-comprar" target="_blank">Comprar</a></td>
            </tr>
          `;

          // -----------------------------
          // Agregar JSON-LD por producto
          // -----------------------------
          jsonLDArray.push({
            "@context": "https://schema.org",
            "@type": "Product",
            "name": title,
            "image": img,
            "description": cleanText,
            "offers": {
              "@type": "Offer",
              "url": link,
              "priceCurrency": "USD",
              "price": precioEntry.replace('$',''),
              "availability": "https://schema.org/InStock"
            }
          });
        });

        html += "</tbody></table>";
        block.innerHTML = html;

        // Insertar JSON-LD
        const script = document.createElement("script");
        script.type = "application/ld+json";
        script.textContent = JSON.stringify(jsonLDArray, null, 2);
        block.appendChild(script);

      })
      .catch(err => {
        block.innerHTML = "<p>Error al cargar los productos.</p>";
        console.error("Error en feed:", err);
      });
  });
});
//]]>
</script>

⚠️ Recomendaciones importantes

  • Siempre etiqueta tus productos con la categoría principal (ejemplo: camiseta) y opcionalmente con el precio (ejemplo: $59.99).
  • El precio debe ir exactamente en el formato $00.00 para que el script lo detecte.
  • Si no hay coincidencias en las etiquetas, la tabla mostrará un mensaje de error.
  • Evita sobrecargar una página con demasiadas tablas: lo ideal es entre 1 y 3 por post.

La tabla de productos destacados de NichoClean v2.0 es una herramienta perfecta para transformar tu blog en un mini e-commerce sin necesidad de plugins externos. Con ella puedes mostrar comparativas claras, mejorar la experiencia de usuario y potenciar tu SEO en Google con datos estructurados.

Ahora que conoces cómo funciona y cómo configurarla, experimenta con tus etiquetas y precios para crear la mejor experiencia de compra posible dentro de tu blog. ¡El poder de un catálogo dinámico está en tus manos!