Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Tentativa de criação de Cookie

por Antônio Henrique Paiva Cezário
| 71.8k xp | 11 posts
Gerente

Olá boa noite tudo bem ? Estou criando um site e queria colocar um popup de cookie que nem as outras paginas que entramos possui como um desafio mas infelizmente não estou conseguindo criar um. Atualmente esta assim o codigo

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cookie Consent Popup</title>
<style>
    .box-cookie.hide {
        display: nome !important;
    }
</style>
</head>

<body>
    <div class='box-cookie hide' role="dialog"  >
              <h5 class="modal-title"> <h2>Nós utilizamos cookies</h2></h5>
                <span aria-hidden="true"></span>
              </button>
            </div>
            <div class="modal-body">
              <p><p>Nós utilizamos cookies para garantir uma melhor experiência, ao usar esse site você concorda com nossa <a
                href=>Política de Privacidade</a> e <a
                href=>Termos de Uso</a></p>
            </div>
              <button type="button" class="btn-cookie">Salvar mudanças</button>
            </div>

<script>
        if(localStorage.cookie){
            document.querySelector('box-cookie hide').classList.remove(hide);
        }

        const acceptCookies = () => {
        document.querySelector('box-cookie hide').classList.add(hide)
        localStorage.setItem('cookie','accept');
        }

        const btnCookie= document.querySelector('box-cookie hide')
        btnCookie.addEventListener('click', acceptCookies);
</script>
</body>

</html>
1 resposta
solução!
por Lorena Garcia
| 7933.2k xp | 11508 posts
Alura Scuba Team Suporte Educacional

Oi Antônio, tudo bem?

O código que você postou contém alguns errinhos de sintaxe e lógica. Aqui está uma versão corrigida com alguns comentários explicando as mudanças:

<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cookie Consent Popup</title>
  <style>
    .cookie-popup {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 10px;
      background-color: #f2f2f2;
      border-top: 1px solid #ccc;
      text-align: center;
      display: none;
    }
  </style>
</head>

<body>
  <div class="cookie-popup" id="cookie-popup">
    <p>Nós utilizamos cookies para garantir uma melhor experiência, ao usar esse site você concorda com nossa <a
                href=>Política de Privacidade</a> e <a
                href=>Termos de Uso</a></p>
    <button onclick="aceitarCookies()">Aceitar</button>
  </div>

  <script>
    function aceitarCookies() {
      // Define um cookie com a data de expiração em 30 dias
      var data = new Date();
      data.setTime(data.getTime() + (30 * 24 * 60 * 60 * 1000));
      var expires = "expires=" + data.toUTCString();
      document.cookie = "cookies_aceitos=true;" + expires + ";path=/";
      // Esconde o popup
      var popup = document.getElementById("cookie-popup");
      popup.style.display = "none";
    }
    // Verifica se o cookie de aceitação de cookies já foi definido
    function verificarCookies() {
      var cookies = document.cookie.split(';');
      for (var i = 0; i < cookies.length; i++) {
        var cookie = cookies[i].trim();
        if (cookie.startsWith("cookies_aceitos=")) {
          var valor = cookie.substring("cookies_aceitos=".length, cookie.length);
          if (valor === "true") {
            // Cookie já aceito, esconde o popup
            var popup = document.getElementById("cookie-popup");
            popup.style.display = "none";
          } else {
            // Cookie não aceito, mostra o popup
            var popup = document.getElementById("cookie-popup");
            popup.style.display = "block";
          }
        } else {
          // Cookie não aceito, mostra o popup
          var popup = document.getElementById("cookie-popup");
          popup.style.display = "block";
        }
      }
    }
    window.addEventListener("load", verificarCookies);
  </script>
</body>

</html>

Algumas das mudanças que fiz incluem:

  • Adicionar uma classe CSS .cookie-popup ao popup de cookies para que possa ser estilizado facilmente.
  • Remover o uso do localStorage e usar o cookie em vez disso.
  • Alterar o evento de clique do botão "Aceitar" para chamar a função aceitarCookies().
  • Adicionar uma função verificarCookies() que verifica se o cookie de aceitação de cookies já foi definido e mostra ou esconde o popup de acordo.

Você pode conferir o resultado aqui no codepen.

Uma nota importante: esse é apenas um exemplo simples de como criar um popup de cookie. Você pode personalizá-lo de acordo com as necessidades do seu site. Além disso, é importante garantir que o seu popup de cookie esteja em conformidade com as leis de privacidade e proteção de dados do seu país ou região.

Um abraço e bons estudos.