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.

8)

--

--

--

Entusiasta pelo estudo de novas tecnologias, por projetos open source e CSS Evangelista.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Henrique Melanda

Henrique Melanda

Entusiasta pelo estudo de novas tecnologias, por projetos open source e CSS Evangelista.

More from Medium

Declaring variables in Javascript: var, let, const

Data Structures and Algorithms in JavaScript: Intro & Big O Notation

CS371p Spring 2022: Week 14

Alogrithms: 2 pointers, Reverse words in a string