Sencillo mensaje de aceptar cookies para tu web

Por la nueva ley en Europa. Debido en parte al miedo por las cookies. Ahora los desarrolladores nos vemos obligados a mostrar un mensaje de si el usuario acepta que usemos cookies.

Las cookies son simples ficheros de texto en plano que no contienen absolutamente ningún programa. No se ejecutan ni pueden infiltrarse en un ordenador pero ya puestos a hacer leyes no nos queda otra que obedecer.

Éstas cookies, o galletas en castellano, se usan para hacer carritos de compra en tiendas online, almacenando los productos que estas comprando. A veces se usan para asegurar una sesión, evitando gracias a ellas que otros usuarios suplanten la identidad de otros. Más que un peligro para el usuario, que no lo son, son una gran ayuda para todos. Dejemos el tema de momento aquí… 🙂

Vamos con el código

Con un par de funciones Javascript y un sencillo código HTML con estilo CSS podemos apañarnos:

<script>
    /* ésto comprueba la localStorage si ya tiene la variable 
    guardada */
    function compruebaAceptaCookies() {
        if(localStorage.aceptaCookies == ‘true’){
            cajacookies.style.display = ‘none’;
        }
    }
    

    /* aquí guardamos la variable de que se ha
    aceptado el uso de cookies así no mostraremos
    el mensaje de nuevo */
    function aceptarCookies() {
        localStorage.aceptaCookies = ‘true’;
        cajacookies.style.display = ‘none’;
    }
    

    /* ésto se ejecuta cuando la web está cargada */
    $(document).ready(function () {
        compruebaAceptaCookies();
    });

</script>

Ésto de aquí arriba lo ponemos donde queramos. Necesitaremos jQuery ya incluido en la cabecera de la web. Me remito a la página oficial para incluirlo si es que no lo tienes ya http://jquery.com/ puedes poner uno de los CDN para hacerlo más fácil desde la web https://code.jquery.com/ por ejemplo añadiendo en el HEAD lo siguiente:

<head>
<script src=”https://code.jquery.com/jquery-2.1.3.min.js”></script>
</head>

Ahora la caja donde se muestra el mensaje, la puedes poner donde quieras porque luego le daremos estilo y la pondremos fija arriba:

<div id=”cajacookies”>
    <p><button onclick=”aceptarCookies()” class=”pull-right”><i class=”fa fa-times”></i> Aceptar y cerrar éste mensaje</button>
    Éste sitio web usa cookies, si permanece aquí acepta su uso.
    Puede leer más sobre el uso de cookies en nuestra <a href=”politica.html”>política de privacidad</a>.
    </p>

</div>

Si buscamos por internet hay muchos ejemplos de estilo de cajas. Yo he necesitado darle estilo para un fondo negro. Aquí está el código:

#cajacookies {
    box-shadow: 0px 0px 5px 5px #808080;
    background-color: white;
    color: black;
    padding: 10px;
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 0px;
    position: fixed;
    top: 0px;
    width: 100%;
}

#cajacookies button {
    color: black;

Ya sólo queda poner los 3 códigos en cada sitio y tendremos una caja con el típico mensaje de aceptar el mensaje de cookies. Cópialo, pégalo, modifícalo, úsalo cuanto quieras. El aspecto aproximado del mensaje debe ser algo parecido a lo siguiente:

Saludos 🙂

Compartir..

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *