Utiliser Stimulus dans un template wordpress
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.