Trasteando con la API Popover de HTML

Necesito desarrollar un componente modal o ventana emergente para mostrar una información que solo verá el usuario cuando haga click en un botón específico.

En este tutorial veremos como solucionar un problema que me encontré en el transcurso del desarrollo de un proyecto web con reservas y en el que nos hemos visto obligados a lanzar las páginas pero sin tener aún el sistema de reservas online configurado y funcionando. El Objetivo de este es ofrecer al cliente todos los servicios disponibles y mientras se perfecciona la herramienta y se instruye al equipo con el manejo del sistema de reservas. Necesitamos que cuando los usuarios le den al botón «Reserva Online» le aparezca un aviso de ¡Próximamente!

API de Popover

En HTML existe un nuevo estándar consistente y flexible para crear «Elementos emergentes». Aparecen un conjunto de APIs de HTML declarativas con una de ellas a la cabeza, la API Popover.

Funciona utilizando el atributo «popover» dentro de cualquier HTML existente para mostrar un contenido al usuario por encima del resto del contenido de la web. Una manera muy atractiva de llamar la atención de tus usuarios.

El descarte automático, también conocido como «light dismiss», es el comportamiento predeterminado de los popover. Cuando no se especifica ningún valor para el atributo popover se establece en «auto», el popover se cerrará automáticamente si se hace clic en cualquier parte de la página fuera del popover o se presiona la tecla de escape mientras el popover está abierto.

Por otro lado, al establecer el parámetro en «manual», el popover no se cerrará automáticamente. Esta opción es útil si deseamos controlarlo exclusivamente mediante HTML o si preferimos gestionarlo con JavaScript.

Por defecto el elemento se posicionará en el centro de la pantalla, pudiendose manipular su posición y estilo con CSS.

Se necesita un contenedor <div> con un «id» para identificar y manipular la ventana emergente. Le he puesto una «class» para darle los estilos correspondientes de la web.

* En los elementos <div> el contenido es siempre visibles por los usuarios, sin embargo cuando se le añade el atributo popover la cosa cambia y el contenedor entero se convierte en un elemento oculto.

<div id="mensaje-aplicacion-reservas" class="popover__info__reservas" popover="auto">
    <!-- Contenido que vá dentro de la ventana -->
</div>

Para controlar que el contenido sea visible o se oculte lo manipularemos con un elemento como puede ser <button> o <input> para lo cual la API nos proporcionará 2 nuevos atributos a utilizar:

  • popovertarget para indicarle el id del elemento contenedor que vamos a mostrar
  • popovertargetaction con 3 opciones de acción (show, hide o toggle). Según lo que necesites puedes usar una u otra. Para Show y hide una vez accionados necesitarás Javascript para volver a manipularlos.

<button popovertarget="mensaje-aplicacion-reservas" popovertargetaction="toggle">Reserva Online</button>

Estilos de Popover

Se puede dar estilo al fondo de la página o al propio elemento que se esté mostrando. Utiliza estos selectores:

[popover] {

  /* Estilos generales para cualquier elemento popover */  

}

[popover]::backdrop {

  /* Estilos del fondo de la página cuando se muestra el popover */
  
}

[popover]:popover-open {

  /* Estilos del popover que está actualmente visible */

}

Funciones de la API de Popover

Si necesitas manipular con Javascript el comportamiento de Popover puedes utilizar estas funciones ya preparadas:

  • HTMLElement.hidePopover() => Para ocultar el contenido del elemento con atributo popover.
  • HTMLElement.showPopover() => Para hacer visible el contenido del elemento con el atributo popover.
  • HTMLElement.togglePopover() => Para alternar entre visible y oculto.

¿Cómo lo integro en WordPress?

Primero: Modificar el HTML de los botones de la web añadiendo los atributos correspondientes. Se puede hacer editando el html del botón, input o texto utilizado. En mi caso lo haré directamente en los bloques de ACF que he creado a medida.

<div  class="bloque__seccion__about__botonera">
    <?php $enlace_cta_bloque_about = get_field( 'enlace_cta_bloque_about' ); ?>
    <?php if ( $enlace_cta_bloque_about ) : ?>
        <a popovertarget="mensaje-aplicacion-reservas" popovertargetaction="toggle" class="bloque__seccion__about-cta" href="<?php echo esc_url( $enlace_cta_bloque_about); ?>"><?php echo wp_kses_post( $cta_boton ); ?></a>
    <?php endif; ?>
</div>

Segundo: Mediante un hook de WordPress voy a insertar el componente popover en todas las páginas que desee, porque se necesita tener muchas llamadas a la acción de «Reservar» y puedo reutilizar el mismo componente las veces que quiera por página. Utilizaré esté snippet de código en el functions.php de mi tema hijo o lo añadiré en mi plugin de personalizaciones.

* Importante: Utiliza los condicionales de página que te ofrece WordPress como if is_page(); para limitar aún mas donde se introduce el componente.

<?php
function spirit_agregar_html_wp_footer() { ?>

    <div id="mensaje-aplicacion-reservas" class="popover__info__reservas" popover>
        <h4 id="">¡Pronto llega nuestra nueva experiencia de reserva en línea para clases y aventuras en la nieve!</h4>
        
        <p>Estamos emocionados de poder presentarte nuestra próxima aplicación que simplificará tus reservas de clases de esquí, snowboard, excursiones con raquetas de nieve, aventuras en bicicleta de montaña y alquiler de equipo deportivo</p>
        <p><strong>¡Mantente atento para descubrir cómo esta nueva herramienta hará que planificar tus aventuras en la nieve sea más fácil que nunca!</strong></p>
        <p>Nos ponemos totalmente a tu disposición si utilizas uno de los muchos canales de contacto de los que dispone la web. WhatsApp, Contacto, Teléfono o email directo.</p>
        <p>Muchas Gracias</p>
    </div>
    
<?php }

add_action('wp_footer', 'spirit_agregar_html_wp_footer');
Así ha quedado mi primer popover

También te comparto mi CSS para que tengas una idea de las cosas que se pueden hacer:

[popover] {
    background: #002838;
    color: white;
    padding: 2rem;
    max-width:600px;
}

[popover]::backdrop {
  background: #000a;
  backdrop-filter: blur(2px);
}

[popover]:popover-open {
  color: white;
}

.popover__info__reservas h4 {
    color: white;
    margin-bottom: 2rem;
}

¿Dónde utilizar el componente Popover?

  • Menús con submenus.
  • Sugerencias de activación.
  • Vista previa de fichas de producto o servicio.
  • Guía de tallas en ficha de producto.
  • más Información
  • Múltiples popovers anidados.
  • Diálogos mejorados.
  • Avisos
  • Interfaces de usuario más avanzadas.
  • Notificaciones Personalizadas.
  • Formularios.

Más Opciones interesantes:

  • Puedes incluir en tu ventana emergente información de la base de datos de WordPress mediante sus funciones PHP.
  • Con ACF puedes crear una página de opciones con campos personalizados para luego mostrar en estas ventanas emergentes. Tienes multiples opciones para maquetar lo que necesites.

Enlaces de referencia

Sobre el autor

Deja un comentario

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