Countdown para TYPO3

Extensões de countdown resolvem um problema de comunicação que textos puros não conseguem

Quando uma feira começa em 23 dias, quando a oferta de early bird expira à meia-noite ou quando a nova loja entra no ar em 1 de maio, um texto como “Faltam poucos dias” não basta. Usuários reagem muito mais fortemente a relógios em contagem do que a datas estáticas, e em uma página TYPO3, a variante mais simples é inserir um timer de countdown visível. Várias extensões TYPO3 do TER oferecem essa funcionalidade, a mais conhecida é simplesmente “countdown”. Para todo site corporativo com anúncios de evento, lançamentos de produto ou ações por tempo limitado, essa é uma exigência recorrente que sem extensão costuma acabar em JavaScript individual. A escolha entre extensão e solução própria raramente depende da técnica, mas da pergunta de quem, na redação, deve conseguir manter o countdown.

Cenários típicos vão de feiras a ações de e-commerce

O primeiro cenário são feiras e congressos. Uma associação anuncia seu congresso anual com seis meses de antecedência e quer tornar visível o tempo restante, idealmente com dias, horas, minutos e segundos. O countdown roda na landing page, ajusta-se nas últimas 24 horas e desaparece automaticamente após o encerramento do evento, sem que um redator precise ajustar a página. Isso economiza não só esforço de manutenção como também evita situações constrangedoras, como um counter que continua mostrando valor negativo depois do evento.

Um segundo cenário são lançamentos de produto e janelas de pré-venda. Projetos e-commerce baseados em aimeos ou lojas externas usam countdowns em landing pages para vincular clientes à data de início. Em pré-vendas, o countdown serve como sinal de urgência e comprovadamente aumenta a conversão.

Um terceiro cenário são prazos de candidatura e solicitação. Universidades brasileiras mostram na página de inscrição um countdown até o fim do prazo, associações usam para preços early bird, instituições públicas para prazos de submissão em editais. Aqui não se trata de marketing, mas de serviço: os visitantes devem reconhecer de relance quanto tempo lhes resta. Para portais de candidatura em pesquisa científica, isso é praticamente padrão, porque editais de fomento trabalham com deadline fixa e cut-off rígido.

Arquitetura técnica combina template Fluid e JavaScript mínimo

Extensões de countdown clássicas no TYPO3 consistem em duas partes. A parte backend é um content element ou plugin no qual o redator mantém data alvo, hora alvo, fuso horário, label e, opcionalmente, uma mensagem de encerramento. A parte frontend renderiza esses dados em um template Fluid e anexa um pequeno JavaScript que calcula a diferença para o momento atual e atualiza no DOM.

A maioria das extensões traz também uma configuração para a renderização: número de casas (dias, horas, minutos, segundos), apresentação como gráfico circular ou flip clock, cores e animação. O JavaScript roda tipicamente com um setInterval de 1000 ms e calcula no cliente, de modo que o server cache permanece intocado. É importante que o timer não termine em valor negativo, mas mostre via event uma mensagem “Evento começou” ou “Oferta encerrada”.

Para projetos críticos quanto à LGPD, vale um olhar nas dependências JavaScript. Algumas extensões carregam jQuery ou MomentJS, o que gera render path adicional. Variantes modernas se satisfazem com poucas linhas de vanilla JS e um CSS grid, que funciona inclusive sem extensão.

Problemas frequentes envolvem fusos horários, caching e SEO

O tema de suporte mais frequente é o fuso horário. O redator registra uma data no backend, o servidor está em UTC, o visitante vive em BRT, e o countdown mostra uma hora a mais ou a menos. A extensão precisa distinguir claramente entre hora do servidor, hora de edição no backend e hora do navegador. Recomendamos sempre passar a data alvo em ISO-8601 com fuso explícito (“2026-05-01T12:00:00-03:00”) para o JavaScript.

O segundo problema é o page cache. Se a página HTML renderizada está cacheada por uma hora, o countdown não pode conter um “23 dias 7 horas” calculado no servidor, porque o cache hit congela esse valor. A solução: a parte Fluid renderiza apenas a data alvo como data attribute, o cálculo da diferença roda exclusivamente no navegador.

Em terceiro, SEO é um ponto. Um countdown puramente JavaScript não mostra ao Google nem a data alvo nem o motivo. Para mecanismos de busca, um JSON-LD schema:Event deve entrar na página, com startDate, endDate e name, para que resultados do Google exibam o evento como rich snippet. Quem instala a extensão deve, portanto, passar a data alvo não só para o timer, mas também escrevê-la como dados estruturados no header da página. Sem essa marcação, o countdown fica invisível para o Google e perde seu efeito de marketing já no resultado de busca.

TYPO3 v12 e v13: extensão ou construção alternativa enxuta

Se uma extensão de countdown em TYPO3 v12 e v13 ainda faz sentido depende da envergadura do projeto. Em uma única página de evento, basta um content element pequeno com um data attribute e 30 linhas de JavaScript, sem overhead de extensão. Para redações com muitos eventos que querem manter o timer elas mesmas, a extensão se justifica porque redatores precisam de um elemento de UI conhecido no backend.

A Gosign constrói, na prática, os dois: para lançamentos únicos, entregamos um content element enxuto sem extensão, formado apenas por um template Fluid e mini JS. Para casos de uso recorrentes, integramos uma extensão mantida e sobrescrevemos o template Fluid para adaptar o design ao restante do projeto. No upgrade de extensões countdown antigas, quase sempre faz sentido mudar para a variante vanilla, porque versões antigas baseadas em jQuery não acompanham o TYPO3 v12 nem os budgets modernos de performance.