Central de Ajuda Wix
    Início
    Tutorial do Wix Blocks: criar um widget de contagem regressiva

Tutorial do Wix Blocks: criar um widget de contagem regressiva

21 min de leitura
O Wix Blocks está aberto a todos os usuários do Wix Studio. Para ter acesso ao Wix Blocks, junte-se ao Wix Studio.
Este tutorial mostra como criar um widget de contagem regressiva, que faz a contagem regressiva até uma determinada data. Ele também contém um widget de registro onde os visitantes do site podem se registrar e receber uma notificação por email no dia anterior ao do seu evento. Você também aprenderá a instalar seu widget de contagem regressiva em um site e a explorar todos os principais recursos do Blocks.
widget de contagem regressiva

O que você recebe no template

Para facilitar o processo, criamos um template para que você possa começar imediatamente.

O template contém:
  • Um widget de contagem regressiva. Você precisa completar o seu design e codificar suas funções e propriedades.
  • Um widget de registro que você precisa completar e adicionar ao seu widget de contagem regressiva.
  • Algumas utilidades públicas que você pode usar para implementar a funcionalidade do seu widget.
  • Um código de back-end que você pode usar para implementar as funções da sua notificação por email.

Obtenha o template

Etapa 1 | Complete o design do seu widget

Para criar esse widget, comece com este template e edite-o na sua conta Wix. O template foi deixado incompleto para que você possa aprender como adicionar elementos ao seu widget.
O widget foi criado com uma grade para que você possa alinhar e colocar facilmente os elementos.

  1. Abra o template. 
  2. Clique em Countdown (Contagem regressiva) em Widgets e design. 
  3. Clique em Elementos Add icon na barra superior.
  4. Selecione Texto. Arraste e solte uma caixa de Título de 48px no seu widget.
  5. Clique em Editar texto e altere o texto para SS.
  6. Altere a cor do texto para branco e centralize o texto usando o Inspetor . 
  7. Selecione a caixa de texto e mova-a para o quadrado da grade acima da etiqueta Seconds (Segundos) usando move elements icon.
  8. Redimensione-a usando stretch icon.

Etapa 2 | Adicione e defina as propriedades de API do seu widget

Você pode definir uma API para o seu widget, para que o criador de site que instala o widget possa interagir com ele por meio de código. A API pode conter propriedades, eventos e funções exportadas.

Esse widget usa duas propriedades:
  • endDate: define a data de término quando a contagem regressiva chega a zero. Usando essa propriedade, os criadores de site podem alterar a data de término para que o widget seja personalizado para seu site.
  • emailId: determina a mensagem de email que será enviada aos usuários quando eles se inscreverem para receber uma notificação.

Saiba mais sobre as propriedades da API do widget

Dê um ID aos elementos do widget

Primeiro, você precisa dar um ID aos elementos do seu widget para poder se referir facilmente a eles no código.
  1. Clique na caixa de texto.
  2. Dê um ID à caixa de texto no painel Propriedades e eventos properties icon. Neste exemplo, o ID é secondsTxt. Observe que os outros elementos já receberam IDs.

Defina as propriedades "endDate" e "emailId"

  1. Clique em Adicionar nova propriedade no painel API properties icon.
  2. Insira o nome da propriedade, endDate.
  3. Selecione o tipo de propriedade, neste caso, Data e horário (a data é exibida no formato mm/dd/aaaa).
  4. Selecione um valor padrão (o criador de site poderá alterá-lo quando instalar seu widget nos editores).
  5. Passe o mouse sobre Propriedades e clique no ícone add icon que aparece.
  6. Crie outra propriedade para o email acionado e chame-a de emailId. Essa é uma propriedade de tipo Texto sem valor padrão.

Etapa 3 | Adicione código para fazer seu widget funcionar


Para fazer a contagem regressiva do seu widget, precisamos criar uma função no código que calcule o tempo restante até a data de término. Para fazer isso, seu template vem com algumas utilidades pré-instaladas que você pode encontrar no menu Público e back-end public and backend icon.  

O Blocks usa uma nova variável global, $widget, e a propriedade, $widget.props, que contém todas as propriedades que você definiu para o seu widget.

O Blocks também usa o preenchimento automático do Velo, para que você possa escrever código com mais facilidade.

Saiba mais sobre a API do widget

Importe suas utilidades

  1. Clique no menu Público e back-end .
  2. Selecione dateUtils.js em Público. Isso abre o arquivo no painel de código.

Altere o código para considerar sua nova função

Crie uma função, updateTime(), para que seu widget de contagem regressiva atualize a contagem. Sua nova função deve ficar assim:

1$widget.onPropsChanged(function () {
2});
3    function updateTime() {
4    const {days, hours, minutes, seconds} = getRemainingTime (new Date($widget.props.endDate));
5    $w('#daysTxt').text = days.toString();
6    $w('#hoursTxt').text = hours.toString();
7    $w('#minutesTxt').text = minutes.toString();
8    $w('#secondsTxt').text = seconds.toString();
9 }

Você também precisa definir um intervalo para a frequência com que o widget atualiza o tempo restante.
Para fazer isso, adicione o seguinte código na sua função onReady(). Isso atualiza o widget a cada segundo.

1$w.onReady(function () {
2    updateTime();
3    if (wixWindow.viewMode !== "Editor") {
4        setInterval(updateTime, 1000);
5    }
6});
Editar condição de tempo
O código do Velo só é executado quando você clica em Visualizar ou quando você abre o site online. O código do Blocks onReady também é executado durante o tempo de edição, para que você possa vê-lo em ação enquanto trabalha no editor. Usamos a condição acima para que seu widget de contagem regressiva não faça a contagem regressiva durante o tempo de edição. 

Visualize seu widget e teste suas propriedades de API

Você já pode visualizar seu widget e suas propriedades de API.

  1. Clique em Executar. Seu widget deve fazer a contagem regressiva a cada segundo até a data de término.
  2. Clique em Testar propriedades de API. Um painel aparece com o valor padrão que você definiu anteriormente. 
  3. Altere a data para verificar se o widget responde e faz a contagem regressiva para a nova data.

Etapa 4 | Crie e codifique um painel personalizado

Você pode criar um painel de configurações personalizadas para que os criadores de sites possam alterar as configurações do seu widget quando o instalam em um site. Neste exemplo, o painel de configurações personalizadas permite que o criador do site altere a data de término e defina um ID de email que determina qual email será enviado aos usuários quando eles se registrarem para receber notificações.

Saiba mais sobre painéis

Crie um painel personalizado

  1. Clique na aba Painéis na barra superior.
  2. Clique em Criar painel.
  3. Dê um nome ao painel. Neste exemplo temos "Minhas configurações".
  4. Clique em Criar painel.
  5. Clique em + Adicionar elemento.
  6. Selecione Entrada de texto. Isso será para a data de término.
  7. Clique em Propriedades e eventos propeties icon. Dê um ID à entrada de texto endDateInput.
  8. Selecione o elemento de texto e clique em Configurações.
  9. Adicione o nome "Data de término" no campo Título do campo.
  10. Exclua o texto no campo Texto padrão.
  11. Defina o texto da variante para "Data de término".
  12. Adicione um separador de elemento.
  13. Clique em Configurações. Adicione um título no campo Título da seção. Neste exemplo, "Email acionado".
  14. Adicione outra Entrada de texto. Dê à entrada de texto um ID - emailIdInput.
  15. Selecione o elemento de texto e clique em Configurações.
  16. Adicione o nome "ID do email" no campo Título do campo.
  17. Exclua o texto no campo Texto padrão.
  18. Defina o texto da variante como "ID do email".
O design do seu painel personalizado está concluído. Agora você precisa implementá-lo ao adicionar código.

Adicione código ao seu painel personalizado


Seu painel personalizado deve exibir a data de término atual e o ID de email quando carregar. O criador de site usa o painel para alterar esses valores. Você precisa adicionar código ao painel para que, quando essas entradas forem alteradas, seu widget seja atualizado.

Para permitir que os elementos do painel interajam com seu widget e executem ações no editor, você pode usar o módulo wix-widget do Velo no seu código.

Para usar a API do widget, importe wixWidget do módulo wix-widget.

Insira o seguinte código antes da sua função onReady().

1import wixWidget from 'wix-widget';

Seu widget deve ser atualizado quando os valores mudarem, portanto você precisa registrar um evento onChange. Você também precisa adicionar async na sua função onReady (), pois você usará algumas funções assíncronas.

Sua função onReady() deve ficar assim:

1$w.onReady(async function () {
2    const { endDate, emailId } = await wixWidget.getProps();
3    $w('#endDateInput').value = endDate;
4    $w('#emailIdInput').value = emailId;
5
6    $w('#endDateInput').onChange(e => {
7        wixWidget.setProps({ endDate: e.target.value });
8    });
9
10    $w('#emailIdInput').onChange(e => {
11        wixWidget.setProps({ emailId: e.target.value });
12    });
13});
Clique em run icon Executar ou Visualizar para verificar seu código

Etapa 5 | Configure seu widget

Agora que seu painel foi criado e codificado, você precisa configurar seu widget para que ele se conecte a um dos botões da barra de ação do widget.

A aba Configurações permite que você controle como seu widget se comporta quando um criador de site o instala e o personaliza em um site. Você pode dar nomes de exibição ao widget e seus elementos, para que fique claro para os criadores de site o que seu widget faz. Você também pode fazer alterações nas barras de ação flutuantes que aparecem nos editores quando os criadores de site selecionam elementos no seu widget.

Saiba mais sobre configuração

Adicione seu painel personalizado à barra de ação flutuante do widget

  1. Clique em Configuração na barra superior. 
  2. Selecione seu widget de contagem regressiva. Uma barra de ação flutuante aparece.
  3. Clique em Configurações.
  4. Clique em settings icon Configurações do botão de ação. O painel Configurações da ação principal é exibido.
  5. Selecione My Settings (Minhas configurações) na lista dropdown para selecionar seu painel personalizado.

Etapa 6 | Adicione um segundo widget (interno) e implemente a lógica de registro

O template vem com um segundo widget chamado Registration (Registro). Você pode encontrá-lo em Widgets e design. 

Ao clicar em Camadas você pode ver que ele foi criado como uma caixa multiestado com três estados. Ele tem um botão Register (Registrar), que muda para Submit (Enviar) quando o visitante do site clica nele. Ele também tem uma caixa de campo onde os visitantes do site podem adicionar o endereço de email. Uma mensagem de agradecimento aparece quando um visitante do site se registra.

Esse widget também vem com uma predefinição de design que pode ser usada para a visualização mobile.

Saiba mais sobre predefinições de design

Adicione seu widget de registro ao widget de contagem regressiva

Agora você já pode adicionar seu widget de registro ao seu primeiro widget, o widget de contagem regressiva. No Blocks, você pode criar muitos widgets diferentes e adicioná-los a outros widgets. 

Saiba mais sobre como trabalhar com widgets dentro de widgets
  1. Na aba Design, selecione seu widget de contagem regressiva.
  2. Clique em Mais opções more options e selecione Adicionar widget.
  3. Selecione Registration. Seu widget interno aparece no meio do seu widget de contagem regressiva.
  4. Arraste e estique o widget interno para que ele caiba na seção inferior do widget de contagem regressiva.
  5. Altere seu ID para registration em Propriedades e eventos propeties icon.
Outra forma de adicionar um widget
Você também pode adicionar um widget interno clicando no menu Elementos add button. Selecione Meus widgets e arraste e solte o widget que deseja adicionar no primeiro widget.

Implemente a lógica de registro no código do widget principal

Você implementará o código para o registro do usuário no widget principal (contagem regressiva), usando a utilidade pré-instalada, contactUtils.js. Ela usa a API wix-crm para conectar seu contato à sua coleção.

Esse código direciona as informações para sua coleção. Ele usa a utilidade que você usará mais tarde ao criar uma coleção. Você pode ver getSubscriptionsCollectionName() no código.

  1. Crie uma nova função async.
  2. Chame-a de onSubmit. Ela usa a utilidade de criação de contato.

Seu código deve ficar assim:

1 async function onSubmit({ email }) {
2   const contact = await createContact(email);
3   wixData.insert(getSubscriptionsCollectionName(), {
4       endDate: new Date($widget.props.endDate),
5       emailId: $widget.props.emailId,
6       contactId: contact.contactId
7   });
8 }
9

Registre para o evento onSubmit

No seu onReady(), após a função updateTime(), adicione o seguinte código:

1$w('#registration').onSubmit(onSubmit);
O código de back-end já está incluído
O código de back-end já está implementado no seu template no Blocks. Ele inclui uma função de exportação, notify(), que usa as utilidades pré-instaladas. Ela verifica o tempo restante, aciona o email quando estiver pronto e atualiza a coleção. Você precisa chamá-la no editor, conforme explicado abaixo na Etapa 10.

Etapa 7 | Crie seu aplicativo e dê um namespace para ele

Agora você já pode compilar seu aplicativo pela primeira vez. Sua primeira compilação será uma compilação principal. Mais tarde, quando estiver trabalhando no seu aplicativo, você pode optar por fazer uma compilação menor ou uma compilação principal. Uma versão menor é atualizada automaticamente em todos os sites onde ele aparece. Você só precisa atualizar a página. Quando você faz uma compilação principal, o criador de site precisa atualizar seu aplicativo manualmente. Um círculo aparece ao lado do nome do painel Aplicativos instalados no Editor para que os criadores de site saibam que há uma nova versão disponível. 

Saiba mais sobre versões no Blocks

Quando você clica em compilar pela primeira vez, o Blocks solicita que você dê um namespace ao seu aplicativo. Esse namespace é usado para se referir à sua coleção no código do Velo nos editores e no código do aplicativo em Blocks.

Saiba mais sobre o namespace do aplicativo

Sua primeira compilação

  1. Clique em Criar.
  2. Insira um namespace para seu aplicativo e clique em Próximo.
  3. Selecione Versão principal e clique em Compilar.
  4. Você recebe uma mensagem informando que a versão 1.0 foi compilada. Clique em Entendi para continuar trabalhando no seu aplicativo.

Etapa 8 | Adicione uma coleção ao seu widget

Agora você precisa criar uma coleção para armazenar todas as assinaturas. Coleções no Blocks são placeholders vazios que você cria no próprio Blocks, que serão preenchidos com dados quando o aplicativo for instalado em um site. Saiba mais sobre coleções no Blocks

O template tem um recurso pré-instalado chamado getSubscriptionsCollectionName(), em collectionUtils.js em Público e back-end. Ele constrói o nome completo da coleção para que você não precise adicionar o namespace completo do seu aplicativo sempre que se referir a ele no código.

Configure a utilidade da sua coleção

  1. Clique em collectionUtils.js em Público e back-end.
  2. Adicione o namespace do seu aplicativo.
Seu código deve ficar assim, com seu próprio namespace.
1
2const NAMESPACE = '@mywixaccount/my-app-namespace';
3
4export function getSubscriptionsCollectionName() {
5    return `${NAMESPACE}/subscriptions`;
6}

Crie sua coleção

  1. Clique em Bancos de dados
  2. Clique em + Criar coleção
  3. Dê um nome significativo à sua coleção. Neste exemplo, Subscriptions (Assinaturas).
  4. Clique em Criar. 

Adicione campos à sua coleção

  1. Clique em add button para adicionar um campo à sua coleção.
  2. Selecione Data no dropdown Tipo de campo.
  3. Insira endDate no campo Nome do campo. Esta é a data até a qual as pessoas podem se registrar.
  4. Clique em Salvar.
  5. Agora adicione um campo do tipo Texto e chame-o de emailId para o email acionado.
  6. Adicione outro campo do tipo Texto e chame-o de contactId. Isso armazenará as informações de contato dos usuários registrados.
  7. Agora crie um campo do tipo booleano e chame-o de notified (notificado). Isso garante que os assinantes sejam notificados apenas uma vez.

Defina permissões para sua coleção

Recomendamos que qualquer visitante do site possa adicionar conteúdo à sua coleção ao se inscrever. 

  1. Clique em Mais opções more options icon para sua coleção no menu Bancos de dados.
  2. Selecione Permissões e privacidade. 
  3. Selecione o menu dropdown Pode adicionar conteúdo.
  4. Selecione Qualquer um.
  5. Clique em Salvar.

Etapa 9 | Instale seu aplicativo em um site no Editor Wix

Você pode instalar seu widget em qualquer um dos editores. O exemplo a seguir usa o Editor Wix. Antes de instalar seu aplicativo, você precisa criar seu aplicativo uma segunda vez. Ele será uma compilação principal porque você criou uma coleção.
  1. Depois de criar seu aplicativo, abra seu site.
  2. Clique em Aplicativos add apps icon. 
  3. Clique em Aplicativos personalizados. Uma lista de todos os seus aplicativos é exibida.
  4. Selecione seu aplicativo na lista Aplicativos disponíveis.
  5. Clique em Instalar aplicativo. 
  6. Clique em Elementos add elements icon.
  7. Selecione Meus widgets.
  8. Clique duas vezes no seu widget para adicioná-lo ao site. 

Seu widget é fluido e você pode selecionar seus elementos para personalizar o widget de acordo com o seu site. Você também pode abrir o painel de configurações e alterar a data de término padrão. 

Defina um ID de email

Os usuários podem se registrar para receber uma notificação por email. Você precisa criar o email que será enviado e obter um ID para ele para que a API do widget possa identificar qual email precisa ser enviado.
  1. Abra Painel de controle no menu Site na barra superior.
  2. Vá para Emails acionados em Ferramentas de desenvolvedor.
  3. Clique em Começar. 
  4. Insira um assunto.
  5. Crie o design do email usando as ferramentas do Editor.
  6. Clique em Salvar e publicar.
  7. Adicione os dados do remetente, o De (nome) e Responder para e clique em Salvar. 
  8. Clique em Ok.
  9. Clique em Salvar e publicar novamente. Você recebe um código de identificação gerado que vincula ao email que você criou para que seja enviado para qualquer pessoa que se registrar. 
  10. Insira esse código em seu painel personalizado no campo ID do email.

Use código de back-end no Editor Wix para notificar assinantes

O código de back-end está incluído com seu aplicativo no Blocks, mas você precisa chamar a notificação no editor.

Chame sua função de notificação

  1. Clique em Adicionar módulo web em Back-end em Público e Back-end no Editor Wix.
  2. Nomeie-o como backend.jsw.
  3. Importe a função de back-end na seção de código do seu site em backend.jsw.

Seu código deve ficar assim:

1import { notify } 'myWixId/my-application-name-backend';

Agora crie uma função de exportação invokeNotify em backend.jsw na seção de código do seu site.

Seu código deve ficar assim:

1export function invokeNotify() {
2     return notify ();
3}
Agora você precisa criar uma tarefa agendada. 

  1. Clique em Adicionar add icon em Back-end
  2. Clique em settings icon Adicionar tarefas agendadas. Adicione o seguinte código em jobs.config na seção de código do seu site. Neste exemplo, a função de notificação é chamada 10 minutos após a hora, a cada hora.

Seu código deve ficar assim:
1{
2   "jobs": [{
3       "functionLocation": "/backend.jsw",
4       "functionName": "invokeNotify",
5       "description": "",
6       "executionConfig": {
7           "cronExpression": "10 * * * *"
8       }
9   }]
10}

Etapa 10 | Teste seu aplicativo

Agora você já pode testar seu aplicativo. 

  1. Publique seu site 
  2. Registre-se para receber uma notificação por email. 
  3. Volte ao editor e verifique sua coleção. 
  4. Você pode ver que há um novo assinante. Quando o email de notificação for enviado, você também verá uma marca de seleção no campo de notificação.
Verifique seus emails acionados
Você também pode verificar em Emails acionados em Ferramentas de desenvolvedor no seu painel de controle para ver se o email foi enviado.

Esse artigo foi útil?

|

Neste artigo

  • O que você recebe no template
  • Etapa 1 | Complete o design do seu widget
  • Etapa 2 | Adicione e defina as propriedades de API do seu widget
  • Dê um ID aos elementos do widget
  • Defina as propriedades "endDate" e "emailId"
  • Etapa 3 | Adicione código para fazer seu widget funcionar
  • Importe suas utilidades
  • Altere o código para considerar sua nova função
  • Visualize seu widget e teste suas propriedades de API
  • Etapa 4 | Crie e codifique um painel personalizado
  • Crie um painel personalizado
  • Adicione código ao seu painel personalizado
  • Etapa 5 | Configure seu widget
  • Adicione seu painel personalizado à barra de ação flutuante do widget
  • Etapa 6 | Adicione um segundo widget (interno) e implemente a lógica de registro
  • Adicione seu widget de registro ao widget de contagem regressiva
  • Implemente a lógica de registro no código do widget principal
  • Registre para o evento onSubmit
  • Etapa 7 | Crie seu aplicativo e dê um namespace para ele
  • Sua primeira compilação
  • Etapa 8 | Adicione uma coleção ao seu widget
  • Configure a utilidade da sua coleção
  • Crie sua coleção
  • Adicione campos à sua coleção
  • Defina permissões para sua coleção
  • Etapa 9 | Instale seu aplicativo em um site no Editor Wix
  • Defina um ID de email
  • Use código de back-end no Editor Wix para notificar assinantes
  • Chame sua função de notificação
  • Etapa 10 | Teste seu aplicativo

Contrate um profissional

Encontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
Encontre um Parceiro