Category Showcase: documentación del carrusel de categorías PrestaShop

Instalación

En el back office, abra Módulos > Gestor de módulos, haga clic en «Subir un módulo» y envíe el archivo dfcategoryshowcase.zip. El módulo es compatible con PrestaShop 8.0 a 9.x.

Al instalarse, el módulo crea sus tablas, la carpeta /img/dfcategoryshowcase/ para las imágenes subidas, el hook displayDfCategoryShowcase y un escaparate de demostración: las subcategorías de la categoría Inicio, en carrusel, en la página de inicio. Abra su tienda para ver el resultado y después modifique o elimine este escaparate.

El módulo se gestiona desde Diseño > Category Showcase (el botón «Configurar» del módulo también lleva ahí).

Crear un escaparate

Haga clic en «Añadir un escaparate». La pestaña General contiene:

• Nombre interno: solo visible en el back office.
• Hook: la ubicación de visualización (ver más abajo).
• Disposición: carrusel, cuadrícula o mosaico.
• Preajuste de diseño: aplica un estilo completo al guardar (ver más abajo).
• Categorías mostradas: la fuente de las categorías.
• Título, subtítulo, texto y enlace «Ver todo»: por idioma.

Las tres fuentes

• Elegidas a mano: tras guardar, el módulo le lleva a la pantalla de categorías del escaparate. Añádalas una a una y reordénelas arrastrando y soltando.
• Subcategorías de una categoría padre: elija la categoría padre y, si hace falta, un número máximo. La lista sigue su catálogo.
• Subcategorías de la categoría que se está viendo: úsela con displayHeaderCategory o displayFooterCategory. Cada página de categoría muestra sus propias subcategorías. Una categoría sin subcategorías no muestra nada.

En los dos modos de subcategorías, añadir una categoría en la pantalla de categorías solo sirve para personalizarla. Desactivarla la oculta del escaparate.

Personalizar una categoría

En la lista de escaparates, haga clic en «Categorías» y añada o edite una categoría. Cada campo vacío toma el valor de la categoría de PrestaShop:

• Imagen personalizada: JPG, PNG, WebP o GIF. El módulo genera copias de 480 y 960 px, servidas automáticamente a las pantallas pequeñas.
• Imagen móvil: opcional, se muestra por debajo de 768 px. Útil para un recorte más ajustado.
• Nombre y descripción corta: se conservan los saltos de línea de la descripción.
• Insignia: por ejemplo Nuevo, Oferta o -30%.
• Texto del botón y enlace: el enlace puede apuntar a un listado filtrado o a una landing page. Solo se aceptan enlaces http(s), relativos, anclas, mailto: y tel:.
• Clase CSS: se añade a la tarjeta.

Una misma categoría solo puede añadirse una vez por escaparate.

Diseño

Preajustes

El campo «Preajuste de diseño» de la pestaña General ofrece Minimalista, Tarjetas, Superpuesto, Círculos y Banners. El preajuste sustituye las opciones que abarca (imagen, tarjeta, textos, botón, columnas) al guardar. Después el campo vuelve a «Mantener mis ajustes» y todas las opciones siguen siendo editables.

Pestañas de ajuste

• Disposición: filas (1 a 3), columnas en ordenador (1 a 8), tableta (1 a 6) y móvil (1 a 4), espaciado, límite de filas para la cuadrícula y el mosaico, estilo de mosaico, contenedor (columna del tema, encuadrado con ancho máximo, ancho completo), márgenes y fondo de la sección.
• Cabecera: mostrar el título, etiqueta (H2 recomendado en la página de inicio), alineación, colores y tamaños, posición y estilo del enlace «Ver todo».
• Imagen: formato de imagen de PrestaShop («Automático» elige el formato más nítido de al menos 400 px, si no la imagen original), proporción, recorte o imagen completa, forma redonda, fondo, carga diferida.
• Tarjeta: redondeo, borde, sombra, fondo, relleno interior, efecto al pasar el ratón, duración de la animación.
• Textos: posición (bajo la imagen, sobre la imagen arriba, en el centro o abajo, o sin texto), velo, tipografía del nombre, descripción, contador de productos.
• Botón e insignia, Carrusel, Visibilidad, Avanzado: ver las secciones siguientes.

Con la forma redonda, el texto va siempre bajo la imagen.

Carrusel

Las opciones de la pestaña Carrusel se aplican cuando la disposición es «Carrusel»: reproducción automática y retardo, pausa al pasar el ratón, bucle, columnas desplazadas por clic, flechas (sobre el carrusel, fuera en pantallas grandes o junto al título), colores, puntos de navegación, vista parcial de la categoría siguiente en móvil, arrastre con el ratón.

Con 2 o 3 filas, las categorías llenan cada columna de arriba abajo y después las filas se desplazan juntas. La reproducción automática se detiene al pasar el ratón, con el foco del teclado, al tocar, cuando la pestaña está oculta o cuando el carrusel sale de la pantalla. Se desactiva si el visitante ha pedido menos animaciones en su sistema.

Dónde mostrar un escaparate

• displayHome: página de inicio.
• displayHeaderCategory y displayFooterCategory: páginas de categoría, encima o debajo de los productos.
• displayDfCategoryShowcase: hook creado por el módulo, que puede llamar en cualquier lugar del tema con {hook h='displayDfCategoryShowcase'}.
• Hook personalizado: elija «Hook personalizado…» y escriba un nombre (letras, cifras, – y _). Un hook que no existe se crea y se registra automáticamente. Llámelo con {hook h='suHook'}. Un nombre de hook antiguo (alias) se guarda con su nombre real.
• Widget: {widget name='dfcategoryshowcase' id_showcase=1} muestra un escaparate concreto, sea cual sea su hook.

Varios escaparates pueden compartir un hook: se muestran en el orden de la lista, que se cambia arrastrando y soltando. El módulo se retira automáticamente de los hooks que ya no se usan.

Visibilidad

• Mostrar desde / hasta: fechas en formato AAAA-MM-DD HH:MM:SS. Vacío = sin límite.
• Grupos de clientes: el escaparate solo se muestra a los grupos marcados (Visitante, Invitado, Cliente o sus grupos B2B). Todos marcados = sin restricción.
• Ocultar en móvil / en ordenador (pestaña Avanzado): por debajo de 768 px o a partir de 1024 px.
• Tiendas: en multitienda, asocie cada escaparate a las tiendas deseadas.

Duplicar un escaparate

La acción «Duplicar» de la lista copia el escaparate con sus categorías, textos, tiendas e imágenes. La copia se crea desactivada: modifíquela y después actívela.

CSS personalizado

Cada escaparate se muestra en <section id="dfcs-ID">, donde ID es el número que aparece en la lista. El campo «CSS personalizado» de la pestaña Avanzado solo se imprime con ese escaparate. Ejemplo:

#dfcs-2 .dfcs-card__name { letter-spacing: .08em; }

Si el mismo escaparate aparece dos veces en una página (hook y widget), la segunda copia recibe el identificador dfcs-ID-2.

Caché y rendimiento

El resultado se guarda en la caché de Smarty por escaparate, idioma, tienda y grupo de clientes. La caché se vacía en cada guardado en el módulo, en cada cambio de categoría y en cada cambio de producto si un escaparate muestra el contador de productos. El CSS y el JavaScript del módulo solo se cargan si hay al menos un escaparate activo.

Preguntas frecuentes

El escaparate no aparece

Compruebe que el escaparate está activo, asociado a la tienda, dentro de su periodo de visualización y abierto al grupo del visitante. Después compruebe que su tema llama realmente al hook elegido. Para un hook personalizado, la etiqueta {hook h='...'} debe estar presente en una plantilla.

Las imágenes se ven borrosas

Deje el formato de imagen en «Automático» o suba una imagen personalizada. El formato category_default de PrestaShop 8 solo mide 141 x 180 px.

En mosaico, el orden no sigue la lectura de izquierda a derecha

Los estilos «alturas naturales» y «alturas alternas» llenan las columnas de arriba abajo. Si el orden de izquierda a derecha importa, use la cuadrícula o el estilo «primera categoría destacada».

Desinstalación

La desinstalación elimina las tablas del módulo, sus pestañas de administración y la carpeta /img/dfcategoryshowcase/ con las imágenes subidas.