Catálogo de Productos por Etiqueta ($) Precio

Cómo usar el Catálogo de Productos en la plantilla NichoClean v2.0

El Catálogo de Productos es una de las funciones más potentes de la plantilla NichoClean v2.0. Con este módulo puedes generar listados completos de productos en tu tienda online de Blogger de manera automática, usando únicamente etiquetas (labels). Esto permite organizar, mostrar y actualizar tu inventario sin esfuerzo técnico, mejorando la experiencia de usuario y el SEO de tu sitio.

¿Qué es el Catálogo de Productos?

El catálogo es un bloque dinámico que toma la información directamente del feed de tu blog en Blogger, y la transforma en un listado atractivo de productos con:

  • Imagen destacada.
  • Título del producto con enlace.
  • Descripción corta (excerpt).
  • Precio extraído de la etiqueta $ que definas en cada entrada.
  • Botón de acción para ver más detalles.

Además, el catálogo genera automáticamente datos estructurados en formato JSON-LD, lo que mejora tu posicionamiento en Google al mostrar tus productos en los resultados enriquecidos (rich snippets).

Ventajas de usar este sistema

  • Automático: no necesitas maquetar manualmente cada listado, todo se alimenta de tus entradas.
  • Escalable: muestra desde 3 hasta 50 productos en una sola llamada.
  • SEO optimizado: el sistema añade datos estructurados de productos y precios.
  • Flexible: puedes insertarlo en la home, páginas de categoría, subcategorías o incluso dentro de un post.
  • Diseño limpio: mantiene la estética minimalista y profesional de NichoClean v2.0.

Cómo insertar el catálogo de productos

Para mostrar un catálogo en cualquier parte de tu tienda Blogger, solo necesitas añadir el siguiente shortcode HTML:

<div class="feed-catalogo" data-max="3"></div>

Explicación del código:

  • class="feed-catalogo": activa el módulo de catálogo de la plantilla.
  • data-max="3": define cuántos productos se mostrarán (puedes cambiar 3 por 6, 9, 12, etc.).

Ejemplo mostrando 6 productos:

<div class="feed-catalogo" data-max="6"></div>

Cómo se detectan los precios

El sistema reconoce el precio de cada producto a través de las etiquetas que configures en la entrada. Solo necesitas añadir una etiqueta con el formato $XX (por ejemplo: $29 o $14.99).

Ejemplo de etiquetas en un producto:

  • store
  • camisetas-hombre
  • $19.90

De esta forma, el sistema detecta automáticamente el valor y lo muestra en el catálogo.

Cómo funciona el script

La plantilla ya incluye el script optimizado que conecta el feed de Blogger con el catálogo. Este es el núcleo que hace posible la conversión automática:

<!-- 17. Js CATALOGO STORE con JSON-LD -->
<script>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".feed-catalogo").forEach(function (container) {
    const max = parseInt(container.dataset.max, 10) || 6;
    const feedUrl = '/feeds/posts/default?alt=json&max-results=50';

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

        const productos = entries
          .map(entry => {
            const title = entry.title.$t;
            const link = entry.link.find(l => l.rel === 'alternate').href;
            const content = (entry.content && entry.content.$t) || "";
            const tags = (entry.category || []).map(cat => cat.term);
            const priceTag = tags.find(t => /^\$\d+(\.\d{1,2})?$/.test(t));

            if (!priceTag) return null;

            // Imagen destacada
            const imgMatch = content.match(/<img[^>]+src="([^"]+)"/);
            const img = imgMatch ? imgMatch[1] : "https://placehold.co/300x200?text=Producto";

            // Descripción sin etiquetas
            const temp = document.createElement("div");
            temp.innerHTML = content;
            const text = temp.textContent || temp.innerText || "";
            const excerpt = text.substring(0, 120).trim() + "...";

            return { title, link, img, excerpt, price: priceTag };
          })
          .filter(Boolean)
          .sort(() => Math.random() - 0.5)
          .slice(0, max);

        if (productos.length === 0) {
          container.innerHTML = "<p>No se encontraron productos.</p>";
          return;
        }

        // Insertar HTML de productos
        container.innerHTML = productos.map(p => `
          <div class="item-producto">
            <div class="img"><a href="${p.link}"><img src="${p.img}" loading="lazy" alt="Imagen del artículo: ${p.title}"></a></div>
            <div class="info">
              <h3><a href="${p.link}">${p.title}</a></h3>
              <p class="descripcion">${p.excerpt}</p>
              <div class="meta">
                <span class="precio">${p.price}</span>
                <a href="${p.link}" class="boton">Ver producto</a>
              </div>
            </div>
          </div>
        `).join('');

        // -----------------------------
        // JSON-LD por producto
        // -----------------------------
        const jsonLD = productos.map(p => ({
          "@context": "https://schema.org",
          "@type": "Product",
          "name": p.title,
          "image": p.img,
          "description": p.excerpt,
          "offers": {
            "@type": "Offer",
            "url": p.link,
            "priceCurrency": "USD",
            "price": p.price.replace('$',''),
            "availability": "https://schema.org/InStock"
          }
        }));

        const script = document.createElement("script");
        script.type = "application/ld+json";
        script.textContent = JSON.stringify(jsonLD, null, 2);
        container.appendChild(script);

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

Recomendaciones prácticas

  • Usa etiquetas organizadas: define categorías y subcategorías claras (ejemplo: camisetas, mujer, $19.90).
  • No repitas precios en diferentes formatos: siempre usa el signo $ seguido del número.
  • Optimiza tus imágenes: sube fotos en buena calidad, pero con peso reducido para mantener la velocidad de carga.
  • Inserta el catálogo en páginas estratégicas: home de categoría, portada de subcategoría o en posts destacados.

El Catálogo de Productos en NichoClean v2.0 es una herramienta clave para transformar tu blog en una tienda online profesional dentro de Blogger. Con unos simples shortcodes y etiquetas bien organizadas, tendrás un sistema automático, escalable y optimizado para SEO.

Empieza hoy a usarlo en tu tienda y haz que tus productos destaquen en Google con un diseño limpio, datos estructurados y un catálogo dinámico que atraerá más visitas y conversiones.