*Esta página utiliza links afiliados. Por gentileza, leia a política de divulgação.

Horário de atendimento dinâmico no WordPress
Andre Esteves Perrone

Horário de atendimento dinâmico no WordPress

Neste tutorial você aprenderá como criar um horário de atendimento dinâmico no WordPress. Eu me desafiei a criar uma forma automática de mostrar aos usuários dos meus sites se a empresa está aberta ou não dependendo do dia da semana e do horário.

Eu sabia que isso era possível com jQuery, então comecei a estudar e realizar testes.

Até que encontrei uma postagem no Stack Overflow a respeito do assunto e resolvi tentar entender o código. Confira ela clicando aqui.

Depois de erros e acertos – cheguei no código que solucionou o meu problema.

Vou compartilhar com você logo abaixo.

Pronto para começar? Vamos lá!

Como criar um horário de atendimento dinâmico no WordPress

Neste tutorial, eu utilizei o WordPress com a ajuda do Elementor, mas você só precisa inserir algumas linhas de jQuery para ativar esta funcionalidade.

Fiz um vídeo explicando como editar o código e alterar os dias de semana e horários de atendimento de forma customizada para o seu projeto.

O vídeo tem menos de 05 minutos, vale a pena conferir:

Copie e cole o código abaixo em seu site:

<script>
jQuery(document).ready(function($){

var now = new Date();
var currentDay = now.getDay();

// Aberto
var openingTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 11, 00);

// Fechado
var closingTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 18, 30);
var open = (now.getTime() > openingTime.getTime() && now.getTime() < closingTime.getTime());

// Domingo 0
// Segunda 1
// Terça 2
// Quarta 3
// Quinta 4
// Sexta 5
// Sábado 6
if (currentDay !== 0 && currentDay !== 6 && open) {
$('#aberto').delay(2000).slideDown();
$('#horario-aberto').delay(2500).slideDown();
} else {
$('#fechado').delay(2000).slideDown();
$('#horario-fechado').delay(2500).slideDown();
}

});
</script>

Importante: um ponto que faltou falar no vídeo é que o elemento que será animado tem que estar escondido para que a animação com jQuery .slideDown() funcione.

Então, dê uma classe ao elemento que será animado e adicione o seguinte CSS:

.classe {
display: none;
}

Pronto, agora é só começar a configurar o código para os horários específicos do seu projeto.

Logo abaixo do comentário Aberto, altere a hora que começa o atendimento da sua empresa.

Depois do comentário Fechado, altere a hora que termina.

Altere o horário de funcionamento
Altere o horário de funcionamento

Lembre-se, utilize a forma de 24h. Cinco da manhã é 05, 00 e cinco da tarde é 17, 00.

Para alterar os dias da semana que a empresa está aberta, você precisa colocar no código os dias que a empresa não abrirá.

Domingo é representado pelo número 0. A sequência crescente é mantida até chegar no sábado representado pelo número 6.

Altere os dias em que não haverá atendimento
Altere os dias em que não haverá atendimento

Caso queira adicionar um dia da semana que a empresa é fechada, como por exemplo, na sexta-feira, adicione o código abaixo:

&& currentDay !== 5

Horário de atendimento dinâmico com Elementor

Caso você também utilize o Elementor na criação de seus sites, você pode criar esse horário dinâmico rapidamente. Vou apenas pontuar alguns detalhes importantes que mostrei no vídeo tutorial acima.

Lembre-se de clicar na coluna em que serão adicionados os widgets e configure o campo Espaço entre widgets (px) para 0. Assim, não haverá um espaço adicional no widget que ficou abaixo e ambos estarão na mesma altura na tela.

Esconda os elementos para que a animação jQuery funcione. Adicione o código abaixo no CSS customizado do widget:

selector {
display: none;
}

Ou, crie uma classe e insira ela em todos os widgets que serão animados com base no horário de atendimento.

Ah, caso tenha gostado do círculo verde e amarelo presente no widget de título, adicione o seguinte CSS customizado:

selector h2:before {
content: "";
display: inline-block;
height: 20px;
width: 20px;
border: 3px solid #61ce70;
border-radius: 30px;
margin: 0 5px 3px 0;
}

Caso queira adicionar em um elemento h1, por exemplo, altere no CSS o h2:before para h1:before.

Conclusão

O que você achou deste tutorial sobre como mostrar o horário de atendimento dinâmico em seu site?

É um detalhe que agrega valor ao projeto e tenho certeza que vários clientes vão gostar da novidade.

E você gostou do vídeo tutorial? O seu feedback é muito importante para mim.

Agradeço sua companhia até aqui.

Abraço!

Receba tutoriais e dicas sobre web design, WordPress e Elementor.

Compartilhe:

Compartilhar no facebook
Facebook
Compartilhar no twitter
Twitter
Compartilhar no whatsapp
WhatsApp
Compartilhar no email
Email

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Compartilhe:

Compartilhar no whatsapp
WhatsApp
Compartilhar no facebook
Facebook
Compartilhar no twitter
Twitter

Política de divulgação: por favor, note que os links acima são afiliados – sem nenhum custo adicional para você – eu ganho uma comissão caso decida comprar após clicar no link. Por gentileza, entenda que eu tenho experiência com todas as empresas e produtos citados e eu recomendo por serem bons e úteis, e não por causa da pequena comissão que faço caso decida comprar por um dos links. Por favor, não invista nesses produtos a não ser que possa precisar deles ou que eles possam ajudar você a atingir seus objetivos.