El Módulo Tour - Cree su propio Tour para un tema personalizado en Drupal 9

Publicado: 2021-09-28

¿Qué puede ser mejor que una visita guiada cuando estás en un lugar desconocido?

La experiencia del usuario se está convirtiendo lentamente en el punto focal de cada negocio. Ofrecer una experiencia que ayude a orientar a su usuario en la dirección correcta a través de las interacciones de la interfaz de usuario puede cambiar las reglas del juego para cualquier negocio. En este artículo vamos a explorar el módulo Tour para Drupal 9. Con el módulo Tour, no solo puede realizar un recorrido guiado prediseñado de una vista existente, sino que también puede integrar el módulo Tour en su tema personalizado (que se explicará en detalle más adelante).

Módulo de recorrido

El módulo de recorrido de Drupal 9

Le gustaría implementar el módulo Drupal 9 Tour cuando desee que su usuario se concentre más en ciertos componentes de su sitio que pasan desapercibidos fácilmente. También es excelente cuando desea llevar a su usuario a través de un flujo de trabajo guiado. El módulo Tour está incluido en el núcleo de Drupal desde Drupal 8.

Cuando habilita el módulo, ofrece visitas guiadas a la interfaz del sitio web con la ayuda de información sobre herramientas. Para realizar un recorrido, puede editar una vista existente en

 /admin/structure/views

y haga clic en el enlace "? Recorrido" en la esquina superior derecha de la barra de herramientas de administración. También puedes visitar

 /admin/structure/views/view/frontpage?tour=1

para iniciar automáticamente el recorrido de Vistas.

Ver configuración

En Drupal 8, el módulo Tour se basa en el complemento Joyride jQuery, que está obsoleto en Drupal 9.2 con Shepherd.js.

Tenemos otro método para agregar un recorrido por los módulos y la interfaz de administración a través del archivo YML. Aquí, estoy agregando un recorrido en un tema personalizado.

¿Qué es Shepherd.js?

Shepherd es una biblioteca de JavaScript que le permite crear fácilmente visitas guiadas de su aplicación o sitio web. Aprovecha Popper.js, otra biblioteca de código abierto, para generar cuadros de diálogo para cada "paso" del recorrido.

Integración del módulo Tour en un tema personalizado

En Drupal 9, tenemos múltiples tipos de páginas de contenido para integrar:

  1. Recorrido por la página
  2. Recorrido por el nodo
  3. Ver recorrido, etc

Supongamos que tenemos una página de tablero que tiene varias tarjetas para mostrar con todos los gráficos y valores, como en la imagen que se muestra a continuación. Aquí, el recorrido facilitará guiar a los usuarios a través de las tarjetas y mostrar algunos detalles.

Diseño de tablero

Créditos de la imagen: diseño del tablero

Creación de una biblioteca de recorridos del panel

Requisitos de la gira:

Se requiere una visita guiada para los siguientes artículos/tarjetas

  1. Actividad física
  2. Nuevos cursos
  3. Crear nuevo
  4. Ganancia de hoy
  5. Miembro activo
  6. Revisión mensual
  7. Puntos
  8. Pagar ahora (botón de acción)

Ahora, tenemos un total de 8 pasos. En este ejemplo, crearé algunos pasos para comenzar y se continuará con el mismo patrón para el resto de las tarjetas.

Empecemos.

Paso 1: Cree una biblioteca de recorridos en THEME.libraries.yml

Estoy creando una biblioteca personalizada para un recorrido por el tablero, de modo que podamos incluir esto en la página/plantilla del tablero. es decir tablero.html.twig

Bibliotecas temáticas

TEMA.bibliotecas.yml

Paso 2: Incluya la biblioteca de recorridos del tablero en la página del tablero personalizado o en la plantilla de nodo

 {# In a Twig template we attach the library. #}
 {{ attach_library('THEME/dashboard-tour') }}​

Ahora, hemos incluido las dependencias del recorrido en nuestro tema.

Paso 3: Primeros pasos con Shepherd.js

Para un inicio rápido, puede obtener un código de ejemplo aquí https://shepherdjs.dev/

Inicializando a Shepherd

En dashboard.js, agregue el código de inicialización como se muestra a continuación

 const tour = new Shepherd.Tour({ defaultStepOptions: { cancelIcon: { enabled: true }, classes: 'shadow-md bg-purple-dark', scrollTo: { behavior: 'smooth', block: 'center' } }, useModalOverlay: true, });

tablero.js

La opción defaultStepOptions le permite especificar cualquier opción que deba aplicarse a todos los pasos de este recorrido de forma predeterminada.

useModalOverlay es otra opción que puede agregar. Puedes consultar más opciones de Tour aquí.

Creación de pasos de introducción

 tour.addStep({ id: 'introduction', text: 'Welcome to Our Dashboard', classes: 'example-step-extra-class', buttons: [ { classes: 'btn btn-primary', text: 'Next', action: tour.next } ] });​

tablero.js

Esta es una ventana emergente de recorrido de bienvenida, por lo que no estamos asignando ningún objetivo de elemento (como una clase o una identificación). Esto aparecerá como un mensaje emergente de bienvenida en el centro de la página.

Tenemos más métodos de recorrido que profundizarán en el siguiente paso.

Creando el segundo paso - Actividad física

 tour.addStep( { id: 'activity', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.', attachTo: { element: '.class-activity', on: 'bottom' }, classes: 'example-step-extra-class', buttons: [ { action() { return this.back(); }, classes: 'btn btn-primary', text: 'Back' }, { action() { return this.next(); }, classes: 'btn btn-primary', text: 'Next' } ] });

Tour Proporciona muchos métodos. Avancemos un poco más en algunas OPCIONES DE PASO básicas

  • id: la cadena que se usará como id para el paso. Si no se pasa una identificación, se generará una.
  • texto: El texto en el cuerpo del paso. Puede ser de tres tipos:

◦ Cadena HTML
◦ Objeto HTMLElement
◦ Función a ejecutar cuando se construye el paso. Debe devolver una de las dos opciones anteriores.

  • title: El título del paso. Se convierte en h3 en la parte superior del escalón.
  • adjuntar a: el elemento al que se debe adjuntar el paso en la página. Un objeto con elemento de propiedades y encendido.

◦ elemento: una cadena selectora de elementos o un elemento DOM.
◦ activado : la dirección opcional para colocar la información sobre herramientas Popper en relación con el elemento.

  • Posibles valores de cadena: 'auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end ', 'derecha', 'inicio derecho', 'extremo derecho', 'izquierda', 'inicio izquierdo', 'extremo izquierdo'
Adjuntar a

Si no especifica un archivo adjunto , el elemento aparecerá en el medio de la pantalla.

  • cancelIcon Opciones para el icono de cancelar

◦ habilitado ¿Debería mostrarse una cancelación “✕” en el encabezado del paso?
◦ etiqueta La etiqueta que se agregará para aria-label

  • clases: una cadena de clases adicionales para agregar al elemento de contenido del paso.
  • botones: una matriz de botones para agregar al paso. Estos se representarán en un pie de página debajo del texto del cuerpo principal. Cada botón de la matriz es un objeto del formato:

◦ texto: el texto HTML del botón
◦ clases: Clases adicionales para aplicar al <a>
◦ acción: una función que se ejecuta cuando se hace clic en el botón. Se vincula automáticamente al recorrido con el que está asociado el paso, por lo que cosas como this.next funcionarán dentro de la acción.

esto siguiente

Creando el Tercer Paso: Nuevos Cursos

Para mantener este artículo breve, no estoy agregando los pasos adicionales aquí. Podemos seguir los pasos anteriores, para crear tantos pasos requeridos aquí. Después de crear todos los pasos, finalmente comenzaremos el recorrido.

Para comenzar el recorrido, simplemente llame a start en su instancia de Tour:

 tour.start();

¡¡Salud!! Ahora hemos agregado un recorrido para el tablero.

Nota: Revise y siga todos los métodos, eventos y opciones disponibles para obtener un Shepherd Tour más interactivo.