Utiliser le Tour de Drupal en front

Par Le Barman - Mardi 12 février 2019
Tags
Tour
JQuery
Joyride

Le 'Tour' est une fonctionnalité bien utile sympathique de Drupal 8 utilisant JoyRide. Pour rappel, elle offre la possibilité de déclencher une petite visite guidée d'une page ou d'un ensemble de fonctionnalités.

Multi step tour
Multi step tour, exemple issu de drupal.org/docs/8/api/tour-api/overview

Seulement voila; les tours ne fonctionnent qu'avec la barre d'admin de Drupal. De ce fait, si vous souhaitez proposer ça à des users anonymes ou avec un rôle intermédiaire ne disposant pas des droits suffisants concernant la barre d'admin c'est peine perdue.

Alors on a ouvert le capot du module et voila ce qu'on a trouvé: du JS.
En gros, dès que vous affichez une page, le module charge toutes les visites guidées déclarées (entités de type Tour) pour celle-ci, puis les met en forme et les ajoute de façon cachée (class='hidden') en bas de page de Drupal (via hook_page_bottom), juste avant les divers scripts JS à charger en fin de page.
C'est ensuite le script (tour.js) qui prend le relai. Celui-ci va ainsi chercher dans le DOM un élément portant l'id toolbar-tab-tour et transformer ce dernier en déclencheur. Si aucun tour n'est déclaré pour la page, le script ajoutera la classe 'hidden' à ce déclencheur.

Il suffit donc de placer un élément avec l'id toolbar-tab-tour !

Dans notre cas nous sommes passés par un bloc dédié:

namespace Drupal\my_module\Plugin\Block;

use Drupal\Core\Block\BlockBase;

/**
 * Provides a 'StudentTourBlock' block.
 *
 * @Block(
 *  id = "student_tour_block",
 *  admin_label = @Translation("Student tour block"),
 * )
 */
class StudentTourBlock extends BlockBase {

  /**
   * {@inheritdoc}
   */
  public function build() {
    
    #Si l'utilisateur n'utilise pas la toolbar (plutot dédiée à l'admin) alors on ajoute un bouton custom.
    if (\Drupal::currentUser()->hasPermission('access tour') && !\Drupal::currentUser()->hasPermission('access toolbar')) {

      $build = [
        'tour_button' => [
          '#type' => 'html_tag',
          '#tag' => 'button',
          '#value' => '<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> ' . $this->t('Help'),
          '#attributes' => [
            'id' => 'toolbar-tab-tour',
            'class' => ['btn btn-success btn-xs hidden-sm hidden-xs']
          ],
          '#cache' => [
            'contexts' => [
              'user.permissions'
            ]
          ],
          '#attached' => [
            'library' => [
              'tour/tour',
            ],
          ],
        ]
      ];
      return $build;
    }
    else
      return [];
  }

}

On check bien la permission histoire de ne pas avoir 2 déclencheurs pour les admins (barre d'admin + notre bouton custom).
On obtient ainsi un petit bouton déclencheur custom dédié aux utilisateurs de notre front:

Declencheur de tours accessible en front

Et sans faire de code ?

Alors nous n'avons pas testé mais en théorie il est tout à fait possible de créer un custom block via l'admin Drupal, créer le bouton comme il vous plaît avec son id toolbar-tab-tour puis trifouiller à votre convenance les permissions d'affichage de ce bloc. Le problème viendra peut-être de la librairie js 'tour/tour' qui ne sera peut-être pas chargée... À voir !

Allez, à la votre!

Le Barman

Ajouter un commentaire

L'e-mail est obligatoire mais restera privé.