O Dynamic Repeater é um widget de design baseado em coleções que permite criar de forma rápida e fácil layouts estruturados e repetitivos em que o design é o mesmo para cada item, mas o conteúdo é diferente; como listas de produtos, eventos ou serviços.
O conteúdo exibido no repetidor é gerenciado a partir de uma coleção interna. Para se familiarizar com as coleções internas e como elas funcionam, consulte Conteúdo dinâmico: coleções internas.
O invólucro (também chamado de “moldura”) do widget Repeater é o contêiner para os itens da coleção. Na imagem abaixo, três itens da coleção são retratados
Cada item da coleção exibe o conteúdo de uma linha na coleção interna conectada. Isso é possível conectando widgets a colunas na coleção interna
Por exemplo, em um site de adoção de cães, há uma coleção interna listando cães adotáveis. Veja uma imagem da coleção abaixo.
Para exibir os cães no Repetidor Dinâmico, as colunas e os widgets são conectados da seguinte forma:
-
A coluna “Imagem” está conectada a um widget de imagem.
-
A coluna “Nome do cachorro” está conectada a um widget de cabeçalho pequeno.
-
A coluna “Descrição do cachorro” está conectada a um widget de texto.
Quando você adiciona o Repetidor Dinâmico à tela, uma amostra de coleção interna é criada e vinculada ao Repetidor Dinâmico. Você pode modificar essa coleção de amostras ou criar uma nova coleção para vincular ao Repetidor Dinâmico
Para adicionar um widget de repetidor dinâmico:
-
Na Elementos de layout seção do painel Widget, localize Repetidor dinâmico e arraste-o para a tela. Observe que quando você adiciona o repetidor à tela, uma amostra de coleção interna é criada com 4 itens de coleção (linhas na coleção) que são preenchidos no repetidor dinâmico. Isso ajuda você a visualizar o design antes de adicionar seu próprio conteúdo
-
Se desejar, você pode adicionar e remover widgets do Repetidor Dinâmico para atender às suas necessidades. Não importa qual item de coleção você modifique, as alterações atualizarão automaticamente todos os outros itens de coleção. Observe que os novos widgets precisarão ser conectados manualmente a uma coluna de coleção específica. Isso será concluído em uma etapa posterior.
Você pode modificar o design do invólucro do Repetidor Dinâmico ou dos itens de coleção dentro do Repetidor Dinâmico. Observe que as alterações de design feitas em um item da coleção serão aplicadas a todos os outros. Isso permite que você economize tempo em vez de aplicar manualmente as alterações de design a cada item de coleção individual e correr o risco de cometer erros
Para modificar o design do invólucro, clique no widget Repetidor dinâmico para abrir o menu flutuante e clique em Editar design. Embalagem na seção do painel de design, você pode configurar o seguinte:
-
Design de embalagem. Você pode definir a cor de fundo, o alinhamento, o tamanho, a animação, a posição (fixa ou fixada) e o espaço entre os itens da coleção dentro do Repetidor Dinâmico.
Para saber mais sobre as seções do painel de design e como configurar cada opção de design, consulte Design com tecnologia Flexbox.
Para saber mais sobre o que significa “fixo” ou “fixado” em termos de posição do widget, consulte Posição do widget: fixa e fixada.
Para definir como os itens da coleção são exibidos no Repetidor Dinâmico, clique no widget Repetidor Dinâmico para abrir o menu flutuante e clique em Editar design. Layout na seção do painel de design, você pode configurar o seguinte:
-
Itens por linha. Selecione quantos itens de coleção serão exibidos por linha. Máximo de 10 itens por linha.
-
Itens adequados. Selecione qualquer um Largura fixa ou Estique para caber.
Para ativar a paginação ou a opção de carregar mais, abra o Navegação seção do painel de design e ligue o Ativar navegação alternar. Depois que a navegação estiver ativada, configure o seguinte:
-
Paginação ou Carregar mais. A paginação divide os itens da coleção em páginas pelas quais os visitantes do site navegam. Carregar mais exibe uma quantidade definida de itens de coleção e, em seguida, cada clique carrega um conjunto adicional de itens de coleção.
-
Itens por página. Defina quantos itens de coleção serão exibidos por página ou antes que mais resultados sejam carregados.
Para fazer alterações no design dos widgets dentro de um item de coleção, clique em um item de coleção individual para abrir o menu flutuante e clique em Editar design. Todas as alterações de design serão aplicadas a cada item no repetidor. Layout na seção do painel de design, você pode configurar o seguinte:
-
Alinhamento de conteúdo. Defina o alinhamento horizontal e vertical do conteúdo dentro do item da coleção
-
Direção de empilhamento. Selecione se os widgets dentro do repetidor estão empilhados horizontal ou verticalmente
-
Envoltório e alinhamento de linhas. Se desejar, você pode ativar os widgets de cada item da coleção para serem agrupados em outra linha. Se você optar por encapsular, também precisará definir o alinhamento da linha
É importante observar que a largura ou a altura dos itens da coleção no Repetidor Dinâmico não podem ser alteradas. O item de coleção é dimensionado para caber 100% da embalagem, o que significa que a altura e a largura do item de coleção são controladas pela altura e largura da embalagem do Repetidor Dinâmico. A altura e a largura do repetidor dinâmico podem ser definidas no Tamanho seção do painel de design.
Quando você adiciona o Repetidor Dinâmico à tela, uma amostra de coleção interna é criada e vinculada ao Repetidor Dinâmico e aos widgets padrão dentro dele. Você pode modificar essa coleção de amostras ou criar uma nova coleção interna para vincular ao Repetidor Dinâmico. Se você adicionar novos widgets ao Repetidor Dinâmico, eles precisarão estar conectados a uma coluna de coleção
Nota
Atualmente, o repetidor dinâmico só pode ser conectado a uma coleção interna ou de imagens. No futuro, planejamos oferecer suporte a todos os tipos de coleção.
Para conectar um repetidor dinâmico a uma coleção:
-
Clique no widget Repetidor dinâmico para abrir o menu flutuante.
-
Clique no ícone de três pontos no menu flutuante e selecione Substituir coleção.
-
No modal, use o menu suspenso para selecionar a coleção desejada.
-
Clique Substituir.
-
Em seguida, você precisa conectar os widgets às colunas da coleção. Clique em um widget no Repetidor dinâmico para abrir o menu flutuante, clique no ícone de três pontos Conecte-se aos dados.
-
No modal, use o menu suspenso para selecionar a coluna na coleção que será conectada ao widget. Observe que somente colunas compatíveis serão exibidas. Por exemplo, os widgets de imagem só podem ser conectados a uma coluna na coleção Imagem definido como o tipo de campo. Conectar. Repita o procedimento para cada widget no Repetidor Dinâmico
Use a filtragem e a classificação para controlar quais itens da coleção são exibidos, em que ordem e sob quais condições.
Veja a seguir uma descrição de cada opção:
-
Ordenar permite que você classifique os itens da coleção por coluna da coleção em ordem alfabética crescente ou decrescente. Por exemplo, para exibir uma lista de membros da equipe em ordem alfabética com base no primeiro nome, você pode Primeiro nome coluna na coleção conectada e selecione ascendente como a ordem em que os resultados são exibidos. Pode ser usado em páginas regulares e dinâmicas.
-
Filtros fixos permitem que você exiba itens de coleção com valores específicos. Por exemplo, para exibir uma lista de membros da equipe com áreas de especialização em negócios ou tecnologia, crie um filtro fixo que exija a Áreas de especialização coluna de coleção para conter os valores “negócios” ou “tecnologia”. Pode ser usado em páginas regulares e dinâmicas.
-
Filtros dinâmicos permitem vincular campos correspondentes de duas coleções separadas; uma da coleção associada à página dinâmica atual e outra da coleção conectada ao widget Repetidor Dinâmico. Isso permite que você exiba somente o conteúdo relevante para uma página dinâmica específica. Por exemplo, filtros dinâmicos podem ser usados para exibir postagens de blog da mesma categoria da página dinâmica atual.
Para configurar a filtragem e a classificação:
-
Clique no Repetidor dinâmico para abrir a barra flutuante. Coleção e selecione Classificar e filtrar.
-
Na Exibição seção, use o Número de itens menu suspenso para selecionar quantos itens serão exibidos no widget.
-
Na Filtrar e classificar guia do pop-up, habilite o Ordenar por alternar.
-
Use o Ordenar por menu suspenso para selecionar a coluna da coleção pela qual você deseja classificar. Use as setas para cima e para baixo ao lado do menu suspenso para organizar os itens da coleção em ordem alfabética crescente ou decrescente
-
Abaixo Filtros fixos, clique +Adicionar filtro. Use o menu suspenso para selecionar a coluna da coleção pela qual você deseja filtrar e inserir os valores exatos que precisam ser atendidos para que os itens da coleção desejados sejam exibidos
-
Clique Feito.
Para configurar filtros dinâmicos em páginas dinâmicas:
-
Clique no Repetidor dinâmico para abrir a barra flutuante. Coleção e selecione Classificar e filtrar.
-
Abaixo Filtros dinâmicos, clique +Adicionar filtro.
-
Use o Coleção de serviços menu suspenso para selecionar um campo da coleção da página dinâmica atual.
-
Use o Coleção Repeater menu suspenso para selecionar um campo da coleção conectada do Repetidor Dinâmico que corresponda ao campo selecionado no Coleção de serviços menu suspenso na etapa anterior.
-
Clique Feito.
Para adicionar um item de coleção ao Repetidor Dinâmico, você precisa adicionar uma nova linha na coleção. A linha deve ter conteúdo antes de ser preenchida no Repetidor Dinâmico
Para remover um item de coleção, exclua a linha correspondente na coleção.
Para adicionar um widget, abra o painel do widget e arraste e solte o widget desejado no Repetidor Dinâmico. O widget é adicionado automaticamente a todos os outros itens da coleção
Quando estiver pronto para conectar o widget à coleção, clique no widget para abrir o menu flutuante. Clique no ícone de três pontos e selecione Conecte-se aos dados. No pop-up, selecione a coluna à qual você deseja conectar o widget. Observe que somente colunas compatíveis serão exibidas, o que significa que os widgets de imagem só podem ser conectados à coluna da coleção Imagem definido como o tipo de campo. Conectar.
Para alterar a conexão do widget, clique no widget para abrir o menu flutuante. Clique no ícone de três pontos e selecione Alterar conexão. Use o menu suspenso no pop-up para selecionar uma coluna de coleção diferente. Conectar.
Para editar o conteúdo de um item no Repetidor Dinâmico, clique no widget e faça as atualizações desejadas. Como o repetidor dinâmico oferece suporte à edição em linha, suas alterações também serão atualizadas na coleção conectada
Você também pode editar o conteúdo de um item de coleção diretamente da coleção.
Para aumentar ou diminuir o espaçamento entre os itens da coleção, clique no Repetidor Dinâmico para abrir o menu flutuante e clique em Editar design. Espaçamento seção do painel de design, use o Espaçamento entre elementos configuração para definir o espaço entre os itens da coleção.
Cada imagem no repetidor dinâmico pode ter seu próprio texto alternativo exclusivo.
Para adicionar texto alternativo às imagens dentro do Repetidor Dinâmico:
-
Abra a coleção que está conectada ao Repetidor Dinâmico.
-
Na tabela de coleta, clique no ícone de adição (+) para adicionar uma nova coluna/campo.
-
Entrar Texto alternativo como nome do campo e selecione Texto simples como o tipo de campo.
-
Volte para o Repetidor Dinâmico e clique para selecionar um dos widgets de imagem.
-
Na barra flutuante, clique no ícone de três pontos e clique em Gerenciar conexão, em seguida, selecione Alterar conexão.
-
No pop-up, use o Conectar texto alternativo a menu suspenso para selecionar a coluna de coleção criada na etapa 3.
-
Clique Conectar.