Utiliser Stimulus dans un template wordpress

stimulus thème wordpress

Publié le 13 décembre 2022

Voilà un moment que je n'avais pas écrit ici et il était temps de s'y remettre et de continuer la série sur l'utilisation d'outils symfony dans des templates wordpress.

Aujourd'hui on met en place stimulus dans notre thème afin de faciliter certaines interactions avec les utilisateurs.

Pour ceux qui ne connaîtraient pas le petit frawework Stimulus, la doc est ici. Vous pouvez également y adjoindre la très pratique librairie "stimulus use".

Installation

Pour l'installation de stimulus dans votre projet, je vous renvoie à la documentation officielle. Si vous utilisez yarn ou npm :

yarn add @hotwired/stimulus

npm i @hotwired/stimulus

Dans notre projet (si vous n'aviez pas suivi les étapes précédentes, ça commence ici), dans le dossier "assets", nous allons ensuite ajouter un dossier "controllers".

Puis dans notre fichier app.js, nous ajoutons ces quelques lignes pour initialiser stimulus:

import { Application } from "@hotwired/stimulus"
import { definitionsFromContext } from "@hotwired/stimulus-webpack-helpers"

window.Stimulus = Application.start()
const context = require.context("./../controllers", true, /\.js$/) // Attention au chemin vers le dossier "controllers" qui peut varier selon votre projet
Stimulus.load(definitionsFromContext(context))

Et c'est tout.

Utilisation

Créer un premier contrôleur dans votre dossier assets->controllers nommé alert_controller.js

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    connect() {
        this.element.innerText = 'cliquer ici'
    }

    alertMe() {
       alert('c\'est une alert')
   }
}

Ensuite dans votre vue, ajoutez un bouton

<button data-controller="alert" data-action="click->alert#alertMe"></button>

Et voilà le travail. Pas bien compliqué et très utile dans bien des cas. Ca ne remplace pas un framework comme VueJs ou react, mais dans certains projets, l'utilisation de stimulus facilite la vie, notamment lorsqu'il est couplé à "Stimulus use" qui ajoute des événements très pratiques à l'usage.

La codonnerie