Fala pessoal! Beleza?
Estou precisando de ajuda :/ Eu não entendo absolutamente nada de JS e eu preciso que a minha div "#custom-social-proof" apareça apenas uma vez para o usuário que entrar no meu site. Caso ele dê reload "desconfiando que a div vai aparecer dnv" na página, essa div vai sumir.
Já procurei e percebi que o caminho pra solução é usando "localStorage" mas não faço ideia como faço isso.
Se tiverem como me ajudar.
Esse é o meu css:
<style type="text/css">
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600");
.custom-social-proof {
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 180s; /* Safari 4.0 - 8.0 */
-webkit-animation-iteration-count: 1; /* Safari 4.0 - 8.0*/
-webkit-animation-delay: 50s;
-webkit-animation-timing-function: linear;
animation-name: example;
animation-duration: 20s;
animation-iteration-count: 1;
animation-delay: 1s;
animation-timing-function: linear;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0% {background-color:white; left: 8px; bottom: 10px;}
100% {background-color:white; left: -320px; bottom: 10px;}
}
/* Standard syntax */
@keyframes example {
0% {background-color:white; left: 8px; bottom: 10px;}
100% {background-color:white; left: -320px; bottom: 10px;}
}
.custom-social-proof {
position: fixed;
bottom: -100px;
left: 8px;
z-index: 9999999999999 !important;
font-family: 'Open Sans', sans-serif;
}
.custom-social-proof .custom-notification {
width: 320px;
border: 0;
text-align: center;
z-index: 99999;
box-sizing: border-box;
font-weight: 400;
border-radius: 6px;
box-shadow: 2px 2px 10px 2px rgba(11, 10, 10, 0.2);
background-color: #fff;
position: relative;
}
.custom-social-proof .custom-notification .custom-notification-container {
display: flex !important;
align-items: center;
height: 80px;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-image-wrapper img {
max-height: 75px;
width: 90px;
overflow: hidden;
border-radius: 6px 0 0 6px;
object-fit: cover;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper {
margin: 0;
height: 100%;
color: gray;
padding-left: 20px;
padding-right: 20px;
border-radius: 0 6px 6px 0;
flex: 1;
display: flex !important;
flex-direction: column;
justify-content: center;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content {
font-family: 'Open Sans', sans-serif !important;
padding: 0 !important;
margin-bottom: 35px !important;
}
#link {
background-color: limegreen;
width: 210px;
height: 25px;
position: absolute;
bottom: 0px;
color: #fff;
border-bottom-right-radius: 6px;
text-decoration: none;
font-weight: bold;
}
#link:hover{
opacity: 0.6;
}
</style>
Essa é a minha div:
<div class="custom-social-proof" id="custom-social-proof">
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
<img src="https://surpriz.com.br/wp-content/uploads/2019/09/popup-da-escassez.png">
</div>
<div class="custom-notification-content-wrapper">
<p class="custom-notification-content">
<span style="font-size: 15px; line-height: 20px;">O DESCONTO VAI SUMIR! </span><br>
<span style="color:#980606; font-weight: bold; font-size: 14px; line-height: 17px;">Desconto de 10% por 3 min </span>
</p>
<a id="link" href="">CLIQUE AQUI</a>
</div>
</div>
</div>
</div>
Esse código de JS eu achei pesquisando pela internet, mas não resolveu meu problema. Não faço ideia do que tá fazendo esse código, eu simplesmente mudei as divs, porém, ainda não resolveu meu problema.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
document.onreadystatechange = function() {
var state = document.readyState
if (state == 'complete') {
setTimeout(function() {
document.getElementById('interactive');
document.getElementById('custom-social-proof').style.visibility = "hidden";
}, 5000);
window.onbeforeunload = refresh;
function refresh()
{
localStorage.refresh=1;
}
if(localStorage.refresh==1)
{
document.getElementById('custom-social-proof').style.visibility = "hidden";
localStorage.refresh=0;
}
}
</script>
<script>
window.onbeforeunload = function(event) {
event.returnValue = "Write something clever here..";
};
</script>
localStorage
,setInterval
,setTimeout
??