Avant-propos: j’ai testé plusieurs pistes pour parvenir à mes fins. Si la méthode #2 décrite plus bas fonctionne avec de grosses limitations (je vous déconseille de la mettre en place), j’ai choisi de la consigner car elle m’a appris des choses sur Magento 2. Mais gardez à l’esprit que la seule méthode valide est la méthode #1.

Méthode #1

Pré-requis (2 profils d’utilisateurs Magento 2): vous devez avoir accès au code source de votre projet pour pouvoir déclarer chaque nouvelle création d’une page CMS custom (ces pages ne se référencent pas automatiquement dans Magento 2) ou vous avez défini, au moment de monter votre projet, le nombre et la nature des pages CMS custom dont vous aurez besoin et votre prestataire mettra en place le nécessaire pour vous.

Mes sources pour la première partie de ce billet:

Etendre un fichier page_types.xml dans un module spécifique

Convention: dans ce tuto, nous allons considérer que les Vendor/Module sont Sodifrance/Pdv.

Repérer le fichier vendor/magento/module-cms/etc/frontend/page_types.xml et l’étendre dans app/code/Sodifrance/Pdv/etc/frontend/page_types.xml. Ce fichier sert à lister les pages CMS qui seront disponibles depuis l’interface d’administration de Magento 2 pour y glisser des widgets (prononcer « widjets »). Par défaut, les pages CMS custom ne s’ajoutent pas automatiquement à cette liste. Nous n’allons pas introduire d’automatisme, mais un ajout manuel.

Vous pouvez supprimer tous les types existants dans le fichier de départ car l’ensemble des déclarations de types seront mergées par Magento 2 au moment venu de la compilation. Votre fichier d’extension va donc ressembler à ceci:

Trouver le handle d’une page CMS custom

Pour aller plus loin, il faut au préalable avoir créé au moins une page CMS custom.

Le handle est identifiant unique assigné de manière automatique par Magento 2 à chaque nouvelle création de page CMS (les pages « système » comme la page des catégories ou la page des produits en ont aussi un) sous le format cms_page_view_id_[clé_d'URL].

Logiquement, si on connaît le format et la clé d’URL (visible dans la colonne « Clé d’URL » du tableau qui liste les pages CMS dans l’interface d’admin (Contenu > [Eléments] Pages)), on n’a pas besoin de faire la manip’ qui suit mais je la décris quand-même à toutes fins utiles.

Pour trouver celui d’une page CMS custom, nous pouvons éditer provisoirement un fichier PHP du core de Magento 2. Rendez-vous dans le fichier vendor/magento/framework/View/Model/Layout/Merge.php et localisez la fonction addHandle(). De là, placez un echo $name; dans le foreach et un echo $handleName; dans le else. Voir ci-dessous:

Ainsi, par exemple, si vous avez créé une page CMS en backoffice avec comme clé d’URL page-de-test, le handle de cette page est: cms_page_view_id_page-de-test.

Ajouter le handle de votre page CMS custom dans le fichier étendu page_types.xml

Tout est dit dans le titre:

Il ne vous reste plus qu’à lancer un $ n98-magerun2 cache:clean et à vous rendre en admin. Depuis l’interface de création de widgets, ajoutez ou éditez un widget > [Encart de gauche WIDGET] > Propriétés du front office > Section Mise à jour d’agencements > champ « Display on », choisir « Pages génériques > Page spécifiée » > champ « Page », choisir « CMS page-de-test » > champ « Container », choisir une zone qui existe dans votre page CMS (en général « Main Content Top » est présente) > Enregistrez la configuration de votre widget et rendez-vous en front sur votre page CMS custom. Le widget s’affiche! Si il ne s’affiche pas, re-videz vos caches!

Méthode #2

ATTENTION: cette méthode ne fonctionne pas à 100%. Il reste déconseillé de l’utiliser avant d’avoir pris connaissances de ses limites (énoncées ci-dessous).

  • Les balises HTML saisies ou générées depuis un champ code/WYSIWYG du widget que l’on insère dans un bloc statique sont automatiquement échappées par Magento 2. Ceci signifie que lorsque vous allez saisir <h3>titre</h3>, votre saisie sera réinterprétée en &lt;h3&gt;titre&lt;/h3&gt; et affichée comme telle sur les pages de votre site.
    Cette « transformation » s’effectue à l’enregistrement du widget, lorsque celui-ci est créé via la création d’un bloc statique. Si vous êtes courageux, vous pouvez repasser sur le code échappé et ré-enregistrer votre bloc statique. Avec une repasse à la main, ça fonctionne. Faut juste en avoir envie…
  • Si vous voulez utiliser des classes sur vos éléments HTML (<h3 class="heading-three">titre</h3>), votre widget ne s’affichera pas. J’ai tenté en remplaçant les caractères "" par des '' mais sans plus de succès. Peut-être une piste de solution « programmatique » ici (html tags in widgets breaks edit mode), mais selon moi ça devient vraiment overkill de rentrer dans des trucs comme ça…

Créer un bloc statique

  1. Contenu > Blocs > Bouton « Ajouter un nouveau bloc ».
  2. On renseigne les champs obligatoires, puis dans le champ WYSIWYG on clique sur le bouton « Insérer un widget » (pour notre exemple, mettre « [test] static block » dans le champ « Titre du bloc » et « test_static_block » dans le champ « Identifiant »).
  3. De là, on choisit le type de widget qu’on souhaite insérer et on renseigne les paramètres de ce dernier selon nos besoins, puis on clique sur le bouton « Insérer un widget ».
  4. Puis, on clique sur le bouton « Enregistrer » pour enregistrer le bloc.
  5. Dans la liste des blocs, on note l’identifiant du bloc qu’on vient de créer (Bloc « [test] static block » dont l’ID est « test_static_block » dans notre exemple).

Voir ici pour résoudre le problème de conversion, par l’éditeur WYSIWYG, des tags en entités HTML (par exemple: <h3> est transformé en <h3>). Y’a pas de solution: passez votre chemin si les limitations observées ne vous permettent pas d’obtenir satisfaction en regard de vos besoins en matière d’exploitation CMS.

Insérer le bloc statique créé précédemment dans une page CMS custom

  1. Contenu > Blocs > Bouton « Ajouter une nouvelle page » ou Choisir > Modifier une page existante.
  2. Ouvrir le volet « Contenu » > si besoin on clique sur le bouton « Afficher/masquer l’éditeur » pour masquer les boutons d’édition du champ WYSIWYG (pour avoir accès à la vue « code »).
  3. Dans la vue code, placer ceci: {{block class="Magento\Cms\Block\Block" block_id="test_static_block"}} (où test_static_block est notre identifiant de bloc statique d’exemple).
  4. De là, on clique sur le bouton « Enregistrer » pour enregistrer le bloc.

A ce stade, notre bloc statique contenant un widget est visible en front sur notre page CMS custom de test (Choisir > Voir dans la liste des pages, au niveau de la page dans laquelle nous venons d’insérer le bloc statique).

Insérer le bloc statique créé précédemment dans une page référencée par Magento 2 (catégorie de produits, …)

Dans notre exemple, nous allons choisir d’afficher notre bloc statique dans une catégorie de produits.

  1. Contenu > Widgets > Bouton « Ajouter un widget ».
  2. Section « Paramètres » > Champ « Type » > choisir « Bloc CMS statique ».
  3. Remplir les autres champs obligatoires de cette section (mettre « [test] widget » dans « Titre du widget » pour suivre notre exemple) et cliquer sur « Continuer ».
  4. Section « Mise à jour d’agencements » > Champ « Display on » > choisir « Catégorie ancrée ».
  5. Champ « Catégories » > cocher le bouton radio « Spécifique à Catégories ».
  6. Champ « Container » > choisir « Main Content Top » (cette zone reste disponible dans à peu près tous les layouts proposés par défaut dans Magento 2, mais si vous utilisez un thème ou que vous travaillez sur un projet qui contient beaucoup de code custom, il vous faudra peut-être sélectionner une autre zone pour voir apparaître votre bloc statique en front).
  7. En-dessous, cliquer sur l’icône « Ouvrir le sélecteur » > cochez les catégories et sous-catégories dans lesquelles votre bloc statique doit apparaître.
  1. Dans l’encart de gauche (« Widget ») > cliquez sur « Options du widget ».
  2. Section « Options du widget » > champ « Bloc » > cliquez sur le bouton « Sélectionnez un bloc… ».
  3. Si vous avez suivi notre tuto à la lettre, le bloc que vous devez sélectionner est: « [test] static block ».
  4. De là, on clique sur le bouton « Enregistrer » pour enregistrer le widget.

A ce stade, notre bloc statique contenant un widget est visible en front sur les pages de catégories/sous-catégories que nous venons de cocher dans la configuration de notre widget.

Résoudre le problème de conversion, par l’éditeur WYSIWYG, des tags en entités HTML

Exemple de problème rencontré: <h3> est transformé en &lt;h3&gt;). Une balise <p> est également ajoutée autour de la déclaration du widget…

Autre exemple:

Une fois que le markup est repassé à la main, le problème de conversion ne se pose plus, mais il reste l’ajout de l’élément <p> autour du widget!