Exibindo promoção em uma determinada hora com JS Date()

Quem trabalha com e-commerce sabe que vira e mexe tem aquelas promoções relâmpago ou por alguns dias.

Algumas plataformas tem a opção para programar a exibição de um banner e a promoção, porém para a flag de desconto não.

Ai você pensa, e agora?

E se a plataforma não tem a função de programar a exibição do banner?

Com a ajuda com Date() você pode fazer isso com javascript.

Primeiro vamos criar uma div que vai ter o texto da promoção e esconder ela no css.

<div class=”promotion”> <a href=”#”>Tudo por 50% Off</div></div>.promotion{
 display: none;
}

E vamos salvar essa div em uma variável.

const promotion = document.querySelector(‘.promotion’);

Agora vamos brincar com javascript, primeiro vamos criar uma variável com o date

const now = new Date();

Agora vamos criar um variável para guardar a hora

const hours = now.getHours();

No nosso exemplo vou mostrar a div entre 9h e 12h da manhã, mais você pode fazer a exibição durante X dias com o getDate().

Confira todas as opções do Date() no site da mozilla

Agora vamos fazer um if com a condição da promoção.

if( hours >= 9 & hours ≤= 12){
}

E para finalizar vamos mostrar a div quando essa condição for verdadeira.

if( hours >= 9 & hours ≤= 12){
 promotion.style.display = ‘block’
}

Confira o resultado final.

*Se o banner não aparecer mude a hora do if ou altere a hora da sua maquina para que a condição do if seja verdadeira.

*Essa solução pega o horário local da maquina do usuário, se estiver errado não vai funcionar direito.

Lembrando que essa não é a única solução que existe, mais resolveu meu problema quando precisei.

Obrigado por parar um tempo para ler. Se você conhece alguém que achou essa postagem útil, compartilhe e dê a esta postagem um coração verde.