-3

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>
4
  • O que você já tentou fazer na parte de JavaScript? localStorage, setInterval, setTimeout ?? Commented 16/09/2019 às 6:11
  • eu acabei de descobrir que tem a ver com essa parte de localstorage. Mas, sim, eu já procurei até no stackoverflow em inglês e nenhum problema parece com o meu. Basicamente o que eu quero é "manter a div escondida depois de um refresh". Eu já vi várias soluções semelhantes, mas não dão certo pra mim. Não sei mais o que fazer. Commented 16/09/2019 às 7:26
  • Se você escreve o código em PHP, pq não gerencia isto no lado do servidor? é bem mais seguro. Commented 16/09/2019 às 11:56
  • Pq eu não entendo php. Eu comecei agora e sei o básico de css e um pouco mais de HTML. Commented 16/09/2019 às 16:59

1 Resposta 1

1

Você pode usar cookies também, assim dessa forma consegue controlar quando o usuário poderá voltar a ver a div novamente. Exemplo:

<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Exemplo</title>

    <style type="text/css">
    ...
    </style>

    <script>
    // Define cookie
    function setCookie(name, value, days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days*24*60*60*1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (encodeURIComponent(value) || "")  + expires + "; path=/";
    };

    // Obtêm cookie
    function getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)===' '){ c = c.substring(1,c.length); }
            if (c.indexOf(nameEQ) === 0){ return decodeURIComponent(c.substring(nameEQ.length,c.length)); }
        }
        return null;
    };

    // Apaga cookie
    function eraseCookie(name) {
        document.cookie = name+'=; Max-Age=-99999999;'; 
    };

    // Exibe div uma única vez
    function cspCheck(){

        // Obtêmos a div #custom-social-proof
        var csp = document.getElementById('custom-social-proof')

        // Escondemos a div #custom-social-proof ao chamar a função cspCheck()
        csp.style.display = "none";

        // Se tiver um cookie definido / se a div já foi exibida uma vez
        if(getCookie('csp')){

            // Escondemos a div
            csp.style.display = "none";

        // Se NÃO tiver um cookie definido / se a div nunca foi exibida
        } else {

            // Exibimos a div
            csp.style.display = "block";

            // Definimos um prazo em dias para o cookie ser deletado (para div voltar à aparecer)
            var cookiesExpireIn = 1; // dia(s)

            // Definimos o cookie indicando que a div já foi exibida uma vez
            setCookie('csp','1',cookiesExpireIn);

        }

    }

    // Chamamos a função ao carregar a página
    window.onload = function() {
        cspCheck();
    };
    </script>

</head>

<body>
    <div class="custom-social-proof" id="custom-social-proof">
     ...
    </div>
</body>

</html>
11
  • Eu não entendo nada de JS, mas pelos comments que você deixou no código parece que vai me ajudar, vou testar e te retorno. Commented 16/09/2019 às 17:02
  • CARACA, IRMÃO! FUNCIONOU MUITO BEM! PQP! VOCÊ F*@#! IRMÃO! Valeu demais! Commented 16/09/2019 às 17:48
  • Caramba, funcionou quando teste aqui no meu navegador, mas quando botei no site online não pegou. O que você acha que pode ser? Commented 16/09/2019 às 18:16
  • Sem ver o site em questão fica difícil dizer o que pode ter dado errado... mas quiser postar o link do site, posso dar uma olhada pra ver se consigo ajudar. Commented 16/09/2019 às 18:28
  • surpriz.com.br/landing-page-exemplo O elemento que quero fazer sumir é o do canto esquerdo em baixo. Commented 16/09/2019 às 18:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .