Extensión Carousel
El diseño horizontal de carousel renderiza cada categoría como una fila que se puede deslizar. Es el más dinámico de los diseños de archivo y el que presenta la mayor superficie de integración, porque las filas se inicializan, actualizan y vuelven a sincronizar a medida que llega el contenido.
Qué produce el diseño
- Un carousel por término de categoría, renderizado dentro del contenedor de resultados del archivo.
- Una navegación de categorías que se mueve entre filas.
- Carga progresiva de más elementos dentro de una fila existente.
Los archivos divididos por término renderizan un carousel independiente por término, en lugar de un carousel principal que contenga todo.
Comportamientos que una extensión debe respetar
Los carousels permanecen inicializados durante las actualizaciones de resultados. Los archivos pueden actualizar sus resultados a través de varias vías: renderizado clásico, carga progresiva, paginación, desplazamiento infinito, un control de cargar más y resultados de búsqueda facetada. Un carousel debe permanecer inicializado y sincronizado a través de todas ellas, en lugar de reconstruirse cada vez.
Los elementos entrantes se preparan por etapas, no se añaden en bruto. Los nuevos elementos se preparan antes de la inserción para que el contenido parcialmente renderizado nunca aparezca debajo del carousel.
Los disparadores de carga viven dentro del carousel. El disparador que solicita el siguiente lote es una diapositiva dentro de la fila, de modo que llegar al final de la fila es lo que carga más.
Se conserva la identidad del DOM. El elemento de preparación se convierte en el primer resultado entrante en lugar de descartarse, lo que evita saltos posicionales durante la inserción.
El renderizado de la paginación no debe ser recursivo. El re-renderizado recursivo de la paginación provoca parpadeos e indicadores dinámicos inestables.
Implicaciones para el código personalizado
Si amplías o sustituyes el comportamiento del carousel:
- No vuelvas a inicializar en cada actualización. Reutiliza la instancia existente y actualízala.
- Inserta a través de la ruta de preparación, no añadiendo marcado directamente a la fila.
- Mantén la diapositiva disparadora dentro del carousel, o la carga infinita dejará de funcionar al final de la fila.
- No des por sentado un número fijo de diapositivas. Las filas crecen a medida que llegan los lotes.
- Deja el renderizado de la paginación como está a menos que lo sustituyas por completo.
Resultados facetados
Cuando hay una búsqueda facetada presente, sus contenedores de resultados deben sobrevivir a la conversión de un archivo en carousels por término. Una extensión que reconstruya el contenedor de resultados desde cero los eliminará.
Si tu integración renderiza resultados, conserva los contenedores existentes en lugar de sustituir el contenedor.
JSON progresivo
Los archivos progresivos compatibles pueden solicitar su JSON por separado de la página. Cuando un sitio también ejecuta POM Cache, ese JSON tiene su propia caché con sus propios controles de invalidación.
Los endpoints personalizados que devuelven datos de archivo deben comportarse de forma coherente con ese modelo: almacenables en caché, invalidados con el cambio de contenido e independientes de la caché HTML.
Probar una extensión
- Carga una categoría con más elementos que un lote y llega al final de la fila.
- Aplica un filtro de alérgenos y confirma que las filas se vuelven a renderizar correctamente.
- Usa la navegación de categorías para saltar entre filas.
- Carga el archivo en un teléfono y comprueba el comportamiento de deslizamiento.
- Confirma que no aparece contenido parcialmente renderizado debajo de una fila durante la carga.
- Confirma que los indicadores de paginación permanecen estables.