Bloque de Anuncio - Oxygenados La comunidad
Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
Menu
post oxygen builder
img-4

Bloque de Anuncio

Listado de Guías

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. 👌

0 0 votos
Puntuación
Suscribir
Notificar de
guest
0 Comentarios
Viejos
Nuevos Más votados
Comentarios en línea
Ver todos los comentarios

OTRAS GUIAS

CookieConsent v3

La nueva versión de CoockieConsent de Orest Bida, en este caso la V3, que ofrece mayores funcionalidades y mayor capacidad de personalización.

Leer más
Lighthouse: 5 consejos sencillos

Google Lighthouse es una herramienta gratuita que ayuda a analizar la calidad de las páginas web. Audita la accesibilidad, el rendimiento y el SEO, además de recomendar cambios para su mejora.

Leer más
Mostrar categorías principales de WooCommerce

Actualmente, el elemento Lista de categorías de Oxygen no puede mostrar solo las categorías principales de WooCommerce. Sin embargo, hay una solución simple que utiliza el elemento Code Block de Oxygen

Leer más