Mostramos como añadir más iconos sin la necesidad de añadir más sets de SVGs, usando la fuente denominada "vanilla" y con la particularidad de que vamos a poder usarlos de manera global en todo nuestro sitio o solo en aquellas páginas o entradas en las que sea necesario.
La diferencia entre usarlos de manera global en todo el sitio o solo en aquellas páginas está en que en la primera manera cargaremos los kb de la fuente, en este caso 79Kb de manera innecesaria en aquellas páginas o entradas donde no requiramos el uso de estos iconos.
Tomado como referencia un video manual de Youtube del equipo de Oxygen, en que hacían una barra de notificación usando un modal.
Aunque esa solución no nos pareció la más ideal, puesto que bloquea toda la ventana limitando y coaccionando la acción del usuario, haciendo que la experiencia de este sea un tanto molesta.
El vídeo de youtube al que en principio tomamos como referencia se puede ver en este enlace, y en el que Louis Reingold moldea hábilmente un modal para hacer una notificación del tipo "sticky bar" .
Nosotros optamos por usar un elemento de sección, dentro del cual añadimos texto, un botón de enlace para ir a una página, en nuestro caso la página de contratación, y un enlace para ocultar ese anuncio.
Además, incluimos el efecto de desvanecimiento, usando la propiedad opacity, para que una vez llegado al extremo inferior de la página no oculte parte de la información incluida en el footer, en nuestro caso estaría tapando los enlaces legales (Política de Cookies, Aviso Legal y Política de Privacidad)
Como particularidades, tendremos que esta sección, como arriba se dijo, se ocultará una vez alcanzado el scroll máximo inferior para que no tape enlaces y evitar posibles problemas legales. También dispondremos de un botón o enlace "call to action" que hará que, mediante el manejo de cookies, esta sección se oculte y no se vuelva a mostrar durante un periodo de tiempo después de que el usuario haya hecho click en ese enlace.
Para todo esto echaremos mano de un script de javascript que será el que se encargue de las acciones pertinentes.
Elementos y pasos Básicos
- Un elemento sección
- Un elemento text-link o un botón.
- Añadir una clase denominada "ocultaAnuncio"
Elementos Opcionales
- Se puede incluir dentro de esta sección todo lo que se necesite para amoldar a tu estética.
Elaboración
La elaboración depende de tus necesidades, por lo que todo se basa en añadir un elemento sección, dentro de este elemento incluir todo lo que se necesite y dar la estética requerida, solo es obligatorio, además de añadir el código javascript, la inclusión de un elemento text-link o un botón que será el manejador de la cookie.
Tan solo tienes que tener en cuenta que deberás anotar o recordar los ids del elemento sección y del elemento (botón o text-link) de acción y añadir una clase, bien sea por selector o por código css, la clase se llamará ocultaAnuncio
La clase ocultaAnuncio será:
.ocultaAnuncio{
opacity:0;
}
Añadimos el código JS propuesto aquí abajo, ya bien sea con un elemento Code-Block o un plugin de snippets como por el ejemplo WPCodeBox, y en el que tendremos en consideración los siguientes puntos:
En la primera línea: const btnCierraBanner = document.getElementById("btn-cerrar-banner");
Cambiar btnCierraBanner por el id de nuestro botón de acción.
En la segunda línea: const seccionBanner = document.getElementById("seccion-banner");
Cambiar seccionBanner por el id de nuestro elemento sección.
En la línea 37: setCookie("ocultadoAnuncio", true, 1);
Cambiar el 1 por el número de días en los que el banner permanecerá oculto al usuario.
document.addEventListener("DOMContentLoaded", () => {
const btnCierraBanner = document.getElementById("btn-cerrar-banner");
const seccionBanner = document.getElementById("seccion-banner");
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 + "=" + value + expires + "; path=/";
};
getCookie = (name) => {
var nameEQ = name + "=";
var cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i];
while (cookie.charAt(0) === " ") {
cookie = cookie.substring(1, cookie.length);
}
if (cookie.indexOf(nameEQ) === 0) {
return cookie.substring(nameEQ.length, cookie.length);
}
}
return null;
};
let ocultadoBanneracion = getCookie("ocultadoAnuncio");
if (ocultadoBanneracion) seccionBanner.style.display = "none";
btnCierraBanner.addEventListener("click", (e) => {
e.preventDefault();
seccionBanner.style.display = "none";
setCookie("ocultadoAnuncio", true, 1);
});
detectarBottom = () => {
const alturaTotal = document.documentElement.scrollHeight;
const alturaVisible = window.innerHeight;
const desplazamientoVertical =
window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
if (alturaTotal - alturaVisible - desplazamientoVertical <= 0) {
seccionBanner.classList.add("ocultaAnuncio");
} else {
seccionBanner.classList.remove("ocultaAnuncio");
}
};
window.addEventListener("scroll", detectarBottom);
});
Como siempre esperamos tus comentarios y por supuesto si tienes alguna duda o necesitas ayuda puedes contactar por nuestro grupo de Telegram o dejando un comentario.
Nos vemos en la próxima. 👌