Built on WIX Headless

Docs Widgets Widget Dynamic Page

Widget Dynamic Page

Mostre um item de coleção CMS por URL com layouts e SEO por item no Wix Harmony.

O widget Dynamic Page mostra um item da coleção por URL (por exemplo /fruits/apple). A URL decide qual item preenche o layout.

Crie a página como uma página dinâmica nativa do Wix. O widget Dynamic Page e os links de Repeater, Table, Slideshow, Media Gallery e Calendar abrem essas URLs.

Create the page

  1. Abra a coleção.
  2. Escolha More actions → Add collection page.
  3. O Wix adiciona uma página dinâmica nativa. Anote o caminho — a parte antes do slug do item. Uma coleção Fruits pode usar fruits para URLs como /fruits/apple.

O Wix guarda o slug de cada item no campo Item slug.

Passo a passo: Como configurar Dynamic Pages.

Conectar a uma página dinâmica nativa do Wix

No widget Dynamic Page, e em qualquer Repeater, Table, Slideshow, Media Gallery ou Calendar que deva abrir essas URLs:

  1. Conecte a mesma coleção.
  2. Defina Page path como o caminho nativo (fruits no exemplo). Sem barra no início.
  3. Defina Page link field como Item slug — o campo de slug do Wix. Uma coleção configurada para uma página /item mais antiga também pode ter um campo Dynamic page slug; deixe-o desmarcado em uma página nativa nova.

Page path no caminho nativo e Page link field em Item slug

Use o mesmo Page path e Page link field no widget Dynamic Page e em cada widget que aponta para essa página. Coloque o widget Dynamic Page na collection page nativa quando essa página deve mostrar o item.

Uma página /item já no site

  1. Defina Page path como o prefixo dessa página — item para /item/jane-doe, ou item-1 / item-2 para uma página adicionada em uma versão anterior.
  2. Defina Page link field como Dynamic page slug.
  3. Opcionalmente escolha um Preview item. Páginas ao vivo sempre usam o slug da URL.

Make dynamic foi removido, então o app não cria nem edita mais o campo Dynamic page slug. O campo continua na coleção e o Wix continua preenchendo-o para novos itens. Para mudar como os slugs são gerados, migre a coleção para uma collection page nativa.

Layouts

Escolha um Mode de layout:

  • Preset — disposições Hero, Split, Stack ou Minimal
  • Custom — arraste campos em uma grade (Arrange fields), como cards personalizados do Repeater
  • HTML / CSS — marcação e estilos totalmente personalizados

Campos

Conecte quaisquer campos de coleção exibíveis, incluindo imagens, vídeos, galerias, links, referências, Address e Color.

Campos Date & time

Em Formatting, ative Show timezone para acrescentar a abreviação do fuso horário local do visitante (por exemplo EST ou GMT+2).

Payments

Com pagamentos de catálogo ativados na coleção (Pro), ligue Show payment actions para Add to cart / Buy now na página do item.

Campos Address

Em Formatting, defina Display as:

  • Text — linha de endereço formatada
  • Map — pin interativo do OpenStreetMap (precisa de coordenadas no valor)
  • Text and map — ambos

Você também pode definir a altura do mapa. Se o modo mapa estiver selecionado mas faltarem coordenadas, o widget volta para texto quando disponível.

Campos Video

Para campos Video (e vídeos dentro de galerias), defina Video playback para abrir em um modal, reproduzir inline ao clicar, ou autoplay sem som.

Campos Color

Em Formatting, defina Display as como Swatch, Hex ou Swatch and hex, e opcionalmente ajuste o tamanho do swatch.

Campos Reference

Para campos Reference / Multi-reference, escolha um Display field da coleção relacionada para o rótulo mostrado na página.

Data refresh

Em Data refresh, ative Show refresh button e/ou Auto-refresh para que visitantes recarreguem o item atual sem sair da página. Auto-refresh pausa quando a aba está oculta. Um Form na mesma página com Update displays on this page também pode recarregar este widget após o envio quando usa a mesma coleção.

SEO por item

Mapeie título, descrição e imagem de compartilhamento a partir dos campos da coleção para que cada item possa ter sua própria prévia de busca e redes sociais.

Configuração

Os widgets, inclusive Dynamic Page, são adicionados em Add → Elements → Installed Apps — veja Adicionar widgets. Coloque Dynamic Page na página de coleção nativa.

Use AI setup no painel para um começo em linguagem simples e depois refine no Manual. Detalhes: AI setup.

  1. Crie uma página dinâmica nativa para a coleção (More actions → Add collection page).
  2. Nessa página, adicione Dynamic Page e abra Settings.
  3. Conecte a coleção e escolha campos / layout.
  4. Defina Page path e Page link field como em Conectar a uma página dinâmica nativa do Wix.
  5. Opcionalmente ative Data refresh.
  6. Mapeie os campos de SEO (recomendado).

Outra coleção

Cada coleção recebe a própria página dinâmica nativa: More actions → Add collection page, adicione Dynamic Page e defina Page path como o caminho dessa página.

Em Repeater, Table, Slideshow, Media Gallery ou Calendar, ative Link to item page (mesma coleção e Page path que o Dynamic Page) para que os cliques abram a URL desse item no template.