Catálogo automático sin etiquetas
Catálogo automático sin etiquetas en NichoClean v2.0
Con la plantilla NichoClean v2.0 hemos incorporado un sistema inteligente de catálogo automático que permite mostrar productos sin necesidad de definir etiquetas manuales. Esto significa que tu tienda en Blogger podrá agrupar y listar productos de manera dinámica, detectando automáticamente aquellos que tienen precio, descripción e imagen, sin aplicar filtros previos. Una solución perfecta para quienes quieren simplificar la gestión de su catálogo sin complicaciones técnicas.
🚀 ¿Qué es el catálogo sin etiquetas?
El catálogo sin etiquetas es una funcionalidad que aprovecha el feed JSON de Blogger para detectar automáticamente las entradas que contienen productos. El sistema identifica los artículos que tienen un precio en sus etiquetas (por ejemplo, $25.00) y los organiza en un bloque visual atractivo y optimizado para SEO.
A diferencia del catálogo por etiqueta, aquí no es necesario crear etiquetas personalizadas para cada categoría. El sistema filtra y agrupa por sí solo, mostrándote siempre una lista de productos disponibles para tus visitantes.
✅ Ventajas de usar este sistema
- Ahorro de tiempo: no necesitas clasificar cada producto en etiquetas específicas.
- Automatización: basta con añadir el precio en forma de etiqueta (ejemplo:
$19.90) y el sistema hace el resto. - SEO optimizado: incluye marcado
JSON-LDpara Product y Offer, mejorando la visibilidad en Google Shopping. - Diseño responsivo: el catálogo se adapta automáticamente a cualquier pantalla gracias a los estilos minimalistas de NichoClean v2.0.
- Experiencia de usuario mejorada: las fichas muestran título, imagen, precio, disponibilidad y botón de compra.
🔧 Cómo instalar y configurar el catálogo
1. Inserta el script en tu plantilla
Primero, asegúrate de tener el siguiente código dentro de tu plantilla o en tu bloque de scripts personalizados. Este es el motor que hace posible el catálogo:
<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>2. Inserta la llamada (shortcode) en tu post o página
Ahora, coloca la siguiente llamada donde quieras mostrar tu catálogo:
<div class="nivel3" data-etiqueta="" data-cantidad="6"></div>🔄 ¿Qué puedes cambiar en el shortcode?
data-etiqueta: Opcional. Si quieres filtrar por una etiqueta específica (ejemplo:camiseta), el sistema solo mostrará productos con esa etiqueta. Si lo dejas vacío, mostrará todos los productos con precio detectado.data-cantidad: Define cuántos productos se mostrarán en el catálogo. Ejemplo:6,12o20.
⚠️ Recomendaciones importantes
- Asegúrate de que cada producto tenga una etiqueta con precio en formato
$00.00. - Incluye siempre una imagen destacada en la entrada del producto.
- Usa títulos descriptivos y claros para mejorar el SEO.
- Verifica que la disponibilidad se refleje con un
<span class="disponibilidad">dentro del contenido del producto.
El catálogo automático sin etiquetas de NichoClean v2.0 es la forma más sencilla y práctica de gestionar tu tienda en Blogger sin complicarte con clasificaciones manuales. Con solo publicar tus productos con su respectivo precio, el sistema se encarga de mostrarlos en bloques modernos, responsivos y optimizados para Google.
Empieza a usar esta función hoy mismo y ofrece a tus visitantes una experiencia de compra clara, rápida y atractiva. Tu catálogo crecerá solo, sin esfuerzo extra, y con la garantía de estar optimizado para SEO.
Aún no hay comentarios, sé el primero en comentar.
Publicar un comentario