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 = 'block';
}
}
/* 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 {
display: none;
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 🙂
gracias por el aporte
No hay de que, un saludo Bolivar!
Genio, gracias, me salvaste la vida… solo una duda, a mi me aparece arriba en el top de la web el mensaje, que deberia cambiar para que aparezca abajo como en tu web, gracias, disculpas por mi ignorancia.
Hola Andrés!
Gracias por tu comentario! Con cambiar donde pone ‘top: 0px;’ por ‘bottom: 0px;’ en los estilos CSS, debería de ponerse la caja del mensaje abajo.
Un saludo.
gracias! Funciono perfecto cambiando a bottom, genio! un saludo
Estupendo Andrés! Me alegro de haberte ayudado.
Saludos.
Esto hay que ponerlo en cada una de las páginas de la web no?
Hola Núria! Así es, hay que ponerlo en todas las páginas de la web. Si estás usando una plantilla, un CMS como WordPress, Prestashop o Magento, puedes ponerlo en la cabecera o pie de página para que salga en todas las páginas poniéndolo sólo una vez.
Hay una nueva versión de éstos códigos aquí:
https://jnjsite.com/nueva-version-del-sencillo-mensaje-de-aceptar-cookies-para-tu-web/
Saludos!
Hola, me pasa que al clicar en aceptar el mensaje no se cierra… como podría corregir esto?
Hola Gianni!
Hice una nueva versión de estos códigos fuentes en este post:
https://jnjsite.com/nueva-version-del-sencillo-mensaje-de-aceptar-cookies-para-tu-web/
..si no te funciona con estos nuevos códigos podrías dejarme en un comentario lo que estas construyendo y lo probamos.
Gracias por comentar! Saludos.
Muchas gracias por tu aporte
De nada, a ti por dejar un comentario Aracely!
Hola buenos días, tengo una duda/problema 🙁
Tengo el mensaje de las cookies en mi web y me funciona perfectamente, lo único que una vez que la aceptas, si sigues navegando por la web y estás en otro apartado, en el momento que le das a volver, te aparecen las cookies unos segundos de nuevo y al momento desaparecen, un tanto molesto para el usuario!
No sé si me he explicado bien, si me podéis echar un cable os lo agradecería 🙂
Mi web es https://as-abraham.com/
Un saludo
Buenas tardes Abraham!
El problema es que el script carga con el display por defecto en la caja, que es ‘block’ si no me equivoco. Si lo cambias en el CSS el display de la caja a ‘none’:
#cajacookies {
display: none;
..
}
..entonces al cargar la web no se vería el mensaje de cookies. Lo que faltaría luego sería en el JavaScript cambiar la función compruebaAceptaCookies() así:
function compruebaAceptaCookies() {
if(localStorage.aceptaCookies != ‘true’){
cajacookies.style.display = ‘block’;
}
}
..así lo que conseguimos es que por defecto no se vea, y si no se han aceptado, cuando haya cargado la web, se muestre el mensaje si es necesario.
Espero que sirva. Gracias por dejar un mensaje.
Saludos.
Hola buenos días,
Antes de nada 1 millón de gracias por la rápida respuesta, con los nervios de intentar resolverlo he encendido el ordenador, he probado lo que me comentabas y…nada! :(, no sé si hay algún paso que me estoy saltando o cual puede ser el problema, a ver si me explico:
En la cabecera de mi pag. index tengo lo siguiente:
¿Aceptas nuestras Cookies?
Usamos cookies para mejorar tu experiencia en la web.
No
Si
y en mi css:
.cookies {
position: fixed;
z-index: 99999999999;
bottom: 0;
left: 0;
right: 0;
background: black;
color: white;
font-family: arial;
text-align: center;
}
.cookies__boton {
background: initial;
border: 2px solid white;
padding: 1rem;
font-size: 1rem;
margin-top: 1rem;
color: white;
width: 5rem;
text-align: center;
cursor: pointer;
}
¿Me tengo que crear un id #cajacookies {
display: none;
..
}?, por qué yo no tengo ese id en mi html.
Cuando me comentas cambiar la funcion: compruebaAceptaCookies(), la voy a cambiar pero veo que no tengo esa función en mi JavaScript, SOCORRO!, jejeje es broma ya te digo que muchísimas gracias por tú tiempo
Un saludo
? buenas tardes Abraham.
Si no me equivoco, te falta añadir en la clase esto:
.cookies {
display: none;
..
}
Y en el JavaScript que tienes, tienes una función nombrada iniciar(), tienes que cambiarla por esto:
function iniciar() {
// Comprueba si en el pasado el usuario ha marcado una opción
if (localStorage.getItem(‘cookie’) !== null) {
if(localStorage.getItem(‘cookie’) === ‘true’) {
// Aceptó
aceptarCookies();
} else {
// No aceptó
denegarCookies();
}
} else {
$(‘.cookies’).css(‘display’, ‘block’);
}
}
Saludos.
Hola buenos días,
lo dejo por imposible!!!, le pongo display:none a .cookies y directamente ni me aparece el mensaje y al borrar la función del script que me comentas y sustituirla por la que me pasas y no hace nada aparentemente, asi que mucho me temo que se va a quedar asi, junto con algún error más que hay x ahí!
Muchas gracias por tú tiempo
Un saludo
Hola buenas tardes, el mensaje para “aceptar el uso de cookies” solo almacena de manera local en el navegador que ya fue aceptado ¿cierto? No hay alguna cookie que se tenga que cambiar o alguna norma a nivel código que se tenga que cumplir?
Buenos días Code.
El mensaje de las cookies, no usa cookies, almacena el hecho de aceptar en una variable del Local Storage.
Por otro lado, sólo en el caso de que se haya aceptado, se podría usar códigos fuentes en tu web que usen Cookies para cumplir con la Ley.
Y además, si no me equivoco, por Ley, hay que poner una política de privacidad y/o aviso legal informando de todas las Cookies que uses en la web. Igualmente si no usas Cookies, hay que poner este aviso legal y/o política de privacidad en donde lo indique.
Saludos.
Va que va muchas gracias!!!!
De nada! Gracias por dejar comentarios!
Hola,
Tengo un problema al momento de que doy clic en acepto, al ir a otra página web de mi sitio hago la revisión y me siguen apareciendo mensajes error (inspeccionando la página)
Hola Ramiro.
Estoy viendo tu página, pero no localizo error en el JavaScript de las cookies.