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.
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.
Estilos de Popover
Se puede dar estilo al fondo de la página o al propio elemento que se esté mostrando. Utiliza estos selectores:
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.
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.
También te comparto mi CSS para que tengas una idea de las cosas que se pueden hacer:
¿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.
