El Dynamic Repeater es un widget de diseño basado en colecciones que te permite crear de forma rápida y sencilla diseños repetitivos y estructurados en los que el diseño es el mismo para cada elemento, pero el contenido varía; como, por ejemplo, listas de productos, eventos o servicios.
El contenido que se muestra en el Repeater se gestiona desde una colección interna. Para familiarizarte con las colecciones internas y su funcionamiento, consulta Contenido dinámico: colecciones internas.
El contenedor (también denominado «marco») del widget «Repeater» es el contenedor de los elementos de la colección. En la imagen siguiente se muestran tres elementos de la colección.
Cada elemento de la colección muestra el contenido de una fila de la colección interna conectada. Esto es posible gracias a la conexión de los widgets con las columnas de la colección interna.
Por ejemplo, en una página web dedicada a la adopción de perros hay una colección interna en la que se enumeran los perros disponibles para adopción. A continuación puedes ver una imagen de dicha colección.
Para mostrar los perros en el Dynamic Repeater, las columnas y los widgets se conectan de la siguiente manera:
-
La columna «Imagen» está vinculada a un widget de imagen.
-
La columna «Nombre del perro» está vinculada a un widget de «Título pequeño».
-
La columna «Descripción del perro» está vinculada a un widget de texto.
Al añadir el Dynamic Repeater al lienzo, se crea una colección interna de ejemplo que se vincula al Dynamic Repeater. Puedes modificar esta colección de ejemplo o crear una nueva para vincularla al Dynamic Repeater.
Para añadir un widget Dynamic Repeater:
-
En la sección Elementos de diseño del panel Widgets, busca Repetidor dinámico y arrástralo al lienzo. Ten en cuenta que, al añadir el repetidor al lienzo, se crea una colección interna de ejemplo con cuatro elementos (filas de la colección) que se muestran en el Repetidor dinámico. Esto te ayudará a visualizar el diseño antes de añadir tu propio contenido.
-
Si lo deseas, puedes añadir y eliminar widgets del Dynamic Repeater según tus necesidades. No importa qué elemento de la colección modifiques, los cambios se aplicarán automáticamente al resto de elementos de la colección. Ten en cuenta que los nuevos widgets deberán conectarse manualmente a una columna específica de la colección. Esto se llevará a cabo en un paso posterior.
Puedes modificar el diseño del contenedor del Dynamic Repeater o los elementos de la colección que contiene. Ten en cuenta que los cambios de diseño que se realicen en un elemento de la colección se aplicarán a todos los demás. Esto te permite ahorrar tiempo, ya que te evita tener que aplicar manualmente los cambios de diseño a cada elemento de la colección por separado y correr el riesgo de cometer errores.
Para modificar el diseño del contenedor, haz clic en el widget Dynamic Repeater para abrir el menú flotante y selecciona Editar diseño. En la sección Contenedor del panel de diseño puedes configurar lo siguiente:
-
Diseño del contenedor. Puedes definir el color de fondo, la alineación, el tamaño, la animación, la posición (fija o anclada) y el espacio entre los elementos de la colección dentro del Dynamic Repeater.
Para obtener más información sobre las secciones del panel de diseño y sobre cómo configurar cada opción de diseño, consulta Diseño con la tecnología Flexbox.
Para obtener más información sobre lo que significan los términos «fijo» o «anclado» en relación con la posición de los widgets, consulta «Posición de los widgets: fijo y anclado».
Para definir cómo se muestran los elementos de la colección en el Dynamic Repeater, haz clic en el widget Dynamic Repeater para abrir el menú flotante y selecciona Editar diseño. En la sección Diseño del panel de diseño puedes configurar lo siguiente:
-
Elementos por fila. Selecciona cuántos elementos de la colección quieres que se muestren por fila. Máximo de 10 elementos por fila.
-
Los artículos se ajustan. Selecciona Ancho fijo o Ajustar al tamaño.
Para activar la paginación o la opción Cargar más, abre la sección Navegación del panel de diseño y activa el interruptor Habilitar navegación . Una vez habilitada la navegación, configura lo siguiente:
-
Paginación o Cargar más. La paginación divide los elementos de la colección en páginas por las que los visitantes del sitio pueden navegar. La opción Cargar más muestra un número determinado de elementos de la colección y, con cada clic, se carga un conjunto adicional de elementos de la colección.
-
Elementos por página. Define cuántos elementos de la colección se mostrarán por página o antes de que se carguen más resultados.
Para realizar cambios de diseño en los widgets de un elemento de la colección, haz clic en un elemento concreto de la colección para abrir el menú flotante y selecciona Editar diseño. Todos los cambios de diseño se aplicarán a cada elemento del Repeater. En la sección Diseño del panel de diseño puedes configurar lo siguiente:
-
Alineación del contenido. Define la alineación horizontal y vertical del contenido dentro del elemento de la colección.
-
Dirección de apilamiento. Selecciona si los widgets del interior del Repeater se apilan en horizontal o en vertical.
-
Ajustes de ajuste de línea y alineación de filas. Si lo deseas, puedes activar la opción para que los widgets de cada elemento de la colección pasen a otra fila. Si eliges esta opción, también deberás definir la alineación de las filas.
Es importante tener en cuenta que no se puede modificar la anchura ni la altura de los elementos de la colección en el Dynamic Repeater. El elemento de la colección se ajusta para ocupar el 100 % del contenedor, lo que significa que su altura y anchura vienen determinadas por la altura y la anchura del contenedor del Dynamic Repeater. La altura y la anchura del Dynamic Repeater se pueden definir en la sección Tamaño del panel de diseño.
Al añadir el Dynamic Repeater al lienzo, se crea una colección interna de ejemplo que se vincula al Dynamic Repeater y a los widgets predeterminados que contiene. Puedes modificar esta colección de ejemplo o crear una nueva colección interna para vincularla al Dynamic Repeater. Si añades nuevos widgets al Dynamic Repeater, deberás conectarlos a una columna de la colección.
Nota
Actualmente, el repetidor dinámico solo se puede conectar a una colección interna o a una colección de imágenes. En el futuro, tenemos previsto que sea compatible con todos los tipos de colecciones.
Para conectar un repetidor dinámico a una colección:
-
Haz clic en el widget Dynamic Repeater para abrir el menú flotante.
-
Haz clic en el icono de los tres puntos del menú flotante y, a continuación, selecciona Reemplazar colección.
-
En la ventana modal, utiliza el menú desplegable para seleccionar la colección que desees.
-
Haz clic en Reemplazar.
-
A continuación, debes conectar los widgets a las columnas de la colección. Haz clic en un widget del Dynamic Repeater para abrir el menú flotante; a continuación, haz clic en el icono de los tres puntos y selecciona Conectar a los datos.
-
En la ventana modal, utiliza el menú desplegable para seleccionar la columna de la colección que se conectará al widget. Ten en cuenta que solo se mostrarán las columnas compatibles. Por ejemplo, los widgets de imagen solo se pueden conectar a una columna de la colección cuyo tipo de campo sea Imagen . Haz clic en Conectar. Repite este proceso para cada widget del Dynamic Repeater.
Utiliza los filtros y la ordenación para controlar qué elementos de la colección se muestran, en qué orden y en qué condiciones.
A continuación se ofrece una descripción de cada opción:
-
La función Ordenar te permite ordenar los elementos de una colección por una columna de la misma, en orden alfabético ascendente o descendente. Por ejemplo, para mostrar una lista de los miembros de un equipo en orden alfabético según su nombre, puedes ordenar por la columna Nombre de la colección conectada y seleccionar ascendente como orden de visualización de los resultados. Se puede utilizar en páginas normales y dinámicas.
-
Los filtros fijos te permiten mostrar elementos de una colección con valores específicos. Por ejemplo, para mostrar una lista de miembros del equipo con áreas de especialización en negocios o tecnología, crea un filtro fijo que requiera que la columna de la colección «Áreas de especialización » contenga los valores «negocios» o «tecnología». Se puede utilizar en páginas normales y dinámicas.
-
Los filtros dinámicos te permiten vincular campos coincidentes de dos colecciones distintas: una de la colección asociada a la página dinámica actual y otra de la colección vinculada al widget Dynamic Repeater. Esto te permite mostrar únicamente el contenido relevante para una página dinámica específica. Por ejemplo, los filtros dinámicos se pueden utilizar para mostrar entradas de blog de la misma categoría que la página dinámica actual.
Para configurar el filtrado y la ordenación:
-
Haz clic en el Dynamic Repeater para abrir la barra flotante. Haz clic en Colección y selecciona Ordenar y filtrar.
-
En la sección Visualización, utiliza el menú desplegable Número de elementos para seleccionar cuántos elementos se mostrarán en el widget.
-
En la pestaña Filtrar y ordenar de la ventana emergente, activa la opción Ordenar por .
-
Utiliza el menú desplegable Ordenar por para seleccionar la columna de la colección por la que deseas ordenar. Utiliza las flechas arriba y abajo situadas junto al menú desplegable para ordenar los elementos de la colección en orden alfabético ascendente o descendente.
-
En Filtros fijos, haz clic en +Añadir filtro. Utiliza el menú desplegable para seleccionar la columna de la colección por la que deseas filtrar e introduce el valor o valores exactos que deben cumplirse para que se muestren los elementos de la colección deseados.
-
Haz clic en Hecho.
Para configurar filtros dinámicos en páginas dinámicas:
-
Haz clic en el Dynamic Repeater para abrir la barra flotante. Haz clic en Colección y selecciona Ordenar y filtrar.
-
En Filtros dinámicos, haz clic en +Añadir filtro.
-
Utiliza el menú desplegable Colección de servicios para seleccionar un campo de la colección de la página dinámica actual.
-
Utiliza el menú desplegable Colección del repetidor para seleccionar un campo de la colección conectada al repetidor dinámico que coincida con el campo seleccionado en el menú desplegable Colección del servicio en el paso anterior.
-
Haz clic en Hecho.
Para añadir un elemento de la colección al Dynamic Repeater, debes añadir una nueva fila a la colección. La fila debe contener contenido para que se muestre en el Dynamic Repeater.
Para eliminar un elemento de la colección, borra la fila correspondiente de la colección.
Para añadir un widget, abre el panel de widgets y arrastra y suelta el widget deseado en el Dynamic Repeater. El widget se añade automáticamente a todos los demás elementos de la colección.
Cuando estés listo para conectar el widget a la colección, haz clic en el widget para abrir el menú flotante. Haz clic en el icono de los tres puntos y selecciona Conectar a los datos. En la ventana emergente, selecciona la columna a la que deseas conectar el widget. Ten en cuenta que solo se mostrarán las columnas compatibles, lo que significa que los widgets de imagen solo se pueden conectar a columnas de la colección cuyo tipo de campo sea Imagen . Haz clic en Conectar.
Para cambiar la conexión del widget, haz clic en él para abrir el menú flotante. Haz clic en el icono de los tres puntos y selecciona Cambiar conexión. Utiliza el menú desplegable de la ventana emergente para seleccionar otra columna de la colección. Haz clic en Conectar.
Para editar el contenido de un elemento del Dynamic Repeater, haz clic en el widget y realiza los cambios que desees. Dado que el Dynamic Repeater admite la edición en línea, los cambios que realices se aplicarán también a la colección vinculada.
También puedes editar el contenido de un elemento de la colección directamente desde la propia colección.
Para aumentar o reducir el espaciado entre los elementos de la colección, haz clic en el Dynamic Repeater para abrir el menú flotante y selecciona Editar diseño. En la sección Espaciado del panel de diseño, utiliza el ajuste Espaciado entre elementos para definir el espacio entre los elementos de la colección.
Cada imagen del Dynamic Repeater puede tener su propio texto alternativo único.
Para añadir texto alternativo a las imágenes del Dynamic Repeater:
-
Abre la colección que está conectada al repetidor dinámico.
-
En la tabla de recopilación, haz clic en el icono de más (+) para añadir una nueva columna o campo.
-
Introduce Texto alternativo como nombre del campo y selecciona Texto sin formato como tipo de campo.
-
Vuelve al Dynamic Repeater y haz clic para seleccionar uno de los widgets de imagen.
-
En la barra flotante, haz clic en el icono de los tres puntos y, a continuación, en Gestionar conexión; después, selecciona Cambiar conexión.
-
En la ventana emergente, utiliza el menú desplegable Conectar texto alternativo a para seleccionar la columna de colección creada en el paso 3.
-
Haz clic en Conectar.