Pedido CMS: janelas dinâmicas

Pedido de recurso|Estamos coletando votos para esse recurso
No momento, não é possível fazer com que janelas sejam dinâmicas ao conectá-las a coleções do CMS. No entanto, você pode conectar os elementos anexados a uma janela ao conteúdo da coleção do CMS para fazer com que os elementos sejam dinâmicos (por exemplo: texto, imagens, botões).  
Estamos sempre trabalhando para atualizar e melhorar nossos produtos, e seu feedback é muito importante. 

Solução alternativa

Usando o Velo, você pode criar uma janela que abre a partir de uma página dinâmica de item e exibe o mesmo item mostrado na página em que a janela foi aberta.

Por exemplo, se você tiver páginas dinâmicas de item que exibem os serviços que você oferece, você pode vincular um botão na página a uma janela. Na janela, você pode conectar elementos como texto, imagens e botões a um conjunto de dados que se conecta à mesma coleção. Como resultado, quando os visitantes clicam no botão na página dinâmica de item, uma janela é aberta com mais informações sobre o mesmo item exibido na página. 
Antes de começar:
Certifique-se de que seu site tenha os seguintes itens: 
Editor Wix
Editor do Wix Studio
  1. Vá para o seu editor.
  2. Vá para a página dinâmica de item relevante. 
  3. Ative o modo avançado do Velo: 
    1. Clique em Avançado na parte superior do Editor. 
    2. Clique em Ativar modo avançado
  4. Copie o trecho de código abaixo e cole-o na parte superior do código da sua página:
1import wixWindowFrontend from 'wix-window-frontend';
Uma captura de tela de um trecho de código sendo adicionado à parte superior do código de uma página dinâmica de item.
  1. Copie o trecho de código abaixo e cole-o depois de: $w.onReady(function () {
1$w('#openLightbox').onClick(async () => { const item = await $w('#dynamicDataset').getCurrentItem(); const id = item._id; wixWindowFrontend.openLightbox("Dynamic Lightbox", id); })
2
Uma captura de tela de um segundo trecho de código sendo colado no código da página dinâmica de item.
  1. No código de amostra que você colou, substitua os IDs mostrados abaixo pelos usados pelo seu site:
    • openLightbox: substitua pelo ID do botão que abre a janela. 
    • dynamic Dataset: substitua pelo ID do conjunto de dados da página dinâmica de item.
    • Janela dinâmica: substitua pelo nome da janela. 
Uma captura de tela mostrando os IDs e o nome da janela que precisam ser substituídos no código.
  1. No seu editor, vá para a janela. 
  2. Adicione um conjunto de dados e conecte-o à mesma coleção que sua página dinâmica de item:
    1. Clique em CMS  no lado esquerdo do Editor.
    2. Clique em Adicionar elementos de conteúdo
    3. Clique em Conjunto de dados.
    4. Clique no dropdown Escolha uma coleção e selecione a mesma coleção que está conectada á sua página dinâmica de item. 
    5. Clique em Criar
  3. Clique no campo Máximo de itens exibidos nas configurações do conjunto de dados e digite o número 1.
  4. Conecte os elementos na sua janela (por exemplo: texto, imagens, botões) ao conjunto de dados:
    1. Clique no elemento relevante na janela. 
    2. Clique no ícone Conectar ao CMS .
    3. Clique nos dropdowns abaixo de Conexões e selecione os campos de coleção ou ações do conjunto de dados relevantes. 
    4. Repita esses passos para cada elemento da sua janela que você deseja conectar. 
  5. Copie o trecho de código abaixo e cole-o na parte superior do código da sua janela: 
1import wixWindowFrontend from 'wix-window-frontend'; import wixData from 'wix-data';
Uma captura de tela de um trecho de código sendo colado na parte superior do código da janela.
  1. Copie o trecho de código abaixo e cole-o depois de: $w.onReady(function () {
1const getData = async () => { const id = await wixWindowFrontend.lightbox.getContext(); $w('#dataset1').setFilter(wixData.filter().eq('_id', id)); } getData();
Uma captura de tela de um trecho de código sendo adicionado acima do código da janela.
  1. No código de amostra em que você clicou, substitua dataset1 pelo ID do conjunto de dados da sua janela. 
  2. Visualize seu site para testar a funcionalidade. 
  3. Quando estiver tudo pronto, publique seu site.