Catálogo por etiqueta en Blogger
Catálogo por etiqueta en Blogger con NichoClean v2.0
En este tutorial aprenderás a usar la función de Catálogo por etiqueta incluida en la plantilla NichoClean v2.0. Esta característica te permite mostrar productos en tu tienda online de Blogger filtrados por categoría específica, de forma ordenada, atractiva y con datos optimizados para SEO gracias al uso de JSON-LD.
Con esta herramienta no necesitas conocimientos de programación: basta con colocar un pequeño código (shortcode) en tu página o entrada, y automáticamente se generará un listado de productos dinámico con imagen, precio, descripción, disponibilidad y botón de compra.
Ventajas de usar el catálogo por etiqueta
- Organización profesional: cada producto se muestra dentro de su categoría, lo que facilita la navegación al usuario.
- SEO optimizado: el sistema integra automáticamente datos estructurados
JSON-LDpara que Google reconozca tus productos. - Flexibilidad total: puedes insertar catálogos en la home, páginas estáticas o entradas de blog.
- Diseño responsive: todos los catálogos se adaptan al estilo limpio y minimalista de NichoClean v2.0.
- Fácil personalización: solo cambias la etiqueta o la cantidad de productos a mostrar.
Paso 1: Código base del catálogo
Para insertar un catálogo de productos en cualquier parte de tu blog, utiliza el siguiente shortcode:
<div class="nivel3" data-etiqueta="camiseta" data-cantidad="6"></div>Explicación de los parámetros:
data-etiqueta="camiseta"→ aquí defines la categoría o etiqueta de Blogger que quieres mostrar (por ejemplo:camiseta,zapatillas,accesorios).data-cantidad="6"→ aquí defines cuántos productos se mostrarán en el catálogo (ejemplo:3,6,9, etc.).
Ejemplo práctico:
Si quieres mostrar 4 productos de la etiqueta "zapatillas" en la portada, el código sería:
<div class="nivel3" data-etiqueta="zapatillas" data-cantidad="4"></div>Paso 2: El script que hace funcionar el catálogo
La plantilla NichoClean v2.0 ya trae integrado el script que se encarga de leer las entradas del feed de Blogger, filtrar los productos por etiqueta y generar el catálogo automáticamente.
Aquí te muestro la parte esencial del JavaScript para que entiendas qué sucede detrás (no necesitas modificarlo, ya está instalado en tu plantilla):
<!-- 16. Js CATALOGO DE PRODUCTO POR ETIQUETA con JSON-LD -->
<script>
//<![CDATA[
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll(".nivel3").forEach(block => {
const etiqueta = block.dataset.etiqueta || null;
const cantidadMaxima = parseInt(block.dataset.cantidad || 6);
const feedUrl = `/feeds/posts/default?alt=json&max-results=100`;
fetchWithCacheManager(feedUrl) // usa la duración del gadget #config-cache
.then(data => {
const entries = data.feed.entry || [];
// Filtra productos que tengan precio y opcionalmente etiqueta específica
const productosFiltrados = entries.filter(entry => {
const etiquetas = entry.category?.map(c => c.term) || [];
const tienePrecio = etiquetas.some(t => /^\$\d+(\.\d{2})?$/.test(t));
if (etiqueta) {
return etiquetas.includes(etiqueta) && tienePrecio;
}
return tienePrecio;
});
if (productosFiltrados.length === 0) {
block.innerHTML = "<p>No se encontraron productos.</p>";
return;
}
// Selección aleatoria
const seleccionados = productosFiltrados
.sort(() => 0.5 - Math.random())
.slice(0, cantidadMaxima);
let html = `<div class="nivel3-grid">`;
// Array para almacenar todos los productos 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 || "";
// -----------------------------
// DETECCIÓN DE DISPONIBILIDAD
// -----------------------------
const tempDiv = document.createElement("div");
tempDiv.innerHTML = content;
let disponibilidadTexto = "En stock";
let disponibilidadSchema = "https://schema.org/InStock";
const spanDisponibilidad = tempDiv.querySelector("span.disponibilidad");
if (spanDisponibilidad) {
if (spanDisponibilidad.classList.contains("agotado")) {
disponibilidadTexto = "Agotado";
disponibilidadSchema = "https://schema.org/OutOfStock";
} else {
disponibilidadTexto = spanDisponibilidad.textContent.trim();
disponibilidadSchema = "https://schema.org/InStock";
}
}
// -----------------------------
// Contenido limpio y precio
// -----------------------------
const cleanText = content.replace(/<[^>]+>/g, '').substring(0, 120) + "...";
const imgMatch = content.match(/<img[^>]+src="([^">]+)"/);
const img = imgMatch ? imgMatch[1] : "https://placehold.co/300x200?text=Producto";
const etiquetas = entry.category?.map(c => c.term) || [];
const precioEntry = etiquetas.find(t => /^\$\d+(\.\d{2})?$/.test(t)) || "N/A";
// -----------------------------
// HTML final del producto
// -----------------------------
html += `
<div class="nivel3-item" itemscope itemtype="https://schema.org/Product">
<div class="img">
<a href="${link}" target="_blank">
<img src="${img}" alt="Imagen del artículo: ${title}" loading="lazy" itemprop="image">
</a>
</div>
<div class="info">
<h3 class="titulo-producto" itemprop="name">
<a href="${link}" target="_blank">${title}</a>
</h3>
<p class="descripcion" itemprop="description">${cleanText}</p>
<div class="meta ficha-precio" itemprop="offers" itemscope itemtype="https://schema.org/Offer">
<span itemprop="priceCurrency" content="USD"></span>
<span class="precio" itemprop="price" content="${precioEntry.replace('$','')}">${precioEntry}</span>
<link itemprop="availability" href="${disponibilidadSchema}">
<span class="disponibilidad${disponibilidadTexto === "Agotado" ? " agotado" : ""}">${disponibilidadTexto}</span>
</div>
<a href="${link}" class="boton ficha-boton" target="_blank" rel="nofollow">Ver producto</a>
</div>
</div>
`;
// -----------------------------
// Agregar producto al array JSON-LD
// -----------------------------
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": disponibilidadSchema
}
});
});
html += `</div>`;
block.innerHTML = html;
// -----------------------------
// Insertar JSON-LD dinámicamente
// -----------------------------
if(jsonLDArray.length > 0){
const scriptLD = document.createElement("script");
scriptLD.type = "application/ld+json";
scriptLD.textContent = JSON.stringify(jsonLDArray, null, 2);
block.appendChild(scriptLD);
}
})
.catch(err => {
block.innerHTML = "<p>Error al cargar productos.</p>";
console.error("Error en feed:", err);
});
});
});
//]]>
</script>Paso 3: Dónde colocar el catálogo
Puedes añadir el catálogo en tres lugares de tu tienda Blogger:
- En la portada → perfecto para destacar categorías principales como “Ropa”, “Calzado” o “Accesorios”.
- En una página estática → ideal para mostrar un catálogo de una sola categoría, como una “Landing Page” de camisetas.
- Dentro de una entrada → útil para hacer posts de review y al final listar productos relacionados de esa categoría.
Solo copia el shortcode y pégalo en el editor de Blogger (en modo HTML).
Recomendaciones importantes
- Etiqueta correcta: asegúrate de usar exactamente el mismo nombre de etiqueta que asignaste a tus productos en Blogger.
- Precio obligatorio: los productos deben tener una etiqueta con formato
$00.00para que aparezcan en el catálogo. - Imágenes optimizadas: usa imágenes de calidad pero comprimidas para mantener la velocidad de carga.
- Disponibilidad: puedes añadir un
<span class="disponibilidad agotado">dentro del contenido del producto si quieres marcarlo como agotado.
El Catálogo por etiqueta de NichoClean v2.0 es una herramienta poderosa para organizar y mostrar tus productos de forma profesional en Blogger. Con unos simples shortcodes puedes crear páginas completas de categorías, listas dinámicas y catálogos optimizados para SEO sin necesidad de conocimientos técnicos.
Si estás construyendo una tienda en Blogger, aprovecha esta función para ofrecer a tus usuarios una experiencia de compra clara, ordenada y persuasiva. Recuerda: la clave está en organizar bien tus etiquetas y mantener tu catálogo siempre actualizado.
Aún no hay comentarios, sé el primero en comentar.
Publicar un comentario