1

Hola buenas tenia un problema con mi web y es que estoy empezando con esto del diseño web html y css y estoy empezando de 0 con JS y dentro de muy pocos días voy a publicar mi web y la verdad que no se como hacer el banner de la nueva política de cookies... estado buscando un montón de videos o en foros y no encontrado a nadie que lo haya hecho ya o alguna especia de api o script que ya lo haga y no se que hacer...

2 respuestas 2

0

Imagino que te escribirás tu propia política de Cookies, si no, puedes usar una por defecto, hay diferentes formas de gestionarlo, pero lo que quieres principalmente supongo que es el "Cartel" que te diga la información y si la aceptas o no.

Para hacer eso puedes usar una librería de "Js" que se llama 'SweetAlert2', y usarla es bastante fácil, incluyes esta línea al final de tu fichero html.

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Luego desde tu fichero de JavaScript puedes crear la alerta, para cuando una persona entre por primera vez en tu web, y que cuando ese event suceda, lanzas el cartel de Cookies de la siguiente manera,

Swal.fire(
  'Política de Cookies',
  'bla bla bla bla',
  'Aceptas?'
)

De todas formas te dejo el enlace para que puedas buscar más información y así te haces la idea de cómo construirlo, espero te sirva :)

https://sweetalert2.github.io

1
  • Muchas gracias por la respuesta, el problema que tengo es que ahora las cookies han cambiado y tienes que poner otro boton para que el usuario pueda elegir las preferencias y quitar o poner las cookies Commented el 5 may. 2022 a las 17:33
0

Espero te sirva

const btnCookie = document.getElementById("btnCookie");
btnCookie.addEventListener("click", (e) => {
    btnCookie.parentElement.remove();
});
.banner {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;

    box-shadow: 0px 0px 3px black;
    width: 80%;
    margin: 0 auto;
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding: 0.5rem 0;
    z-index: 100;
    align-items: center;
}

.banner p {
    text-align: center;
    margin: 0 0.4rem;
}

.banner button {
    /* display: block; */
    border: none;
    background-color: black;
    color: white;
    padding: 1rem 2.5rem;
    cursor: pointer;
    /* width: 20px; */
    height: 30px;
    display: flex;
    align-items: center;
    margin: 0 2rem;
}

@media (max-width: 850px) {
    .banner {
        width: 90%;
    }
}
@media (max-width: 650px) {
    .banner p {
        font-size: 0.9rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
}
<div class="banner">
          <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry. Lorem Ipsum has been the industry's standard dummy
          </p>
     <button id="btnCookie">Accept</button>
</div>

1
  • Muchas gracias por la respuesta, el problema que tengo es que ahora las cookies han cambiado y tienes que poner otro boton para que el usuario pueda elegir las preferencias y quitar o poner las cookies Commented el 5 may. 2022 a las 17:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.