Note: pour mettre en place l’upload d’image, nous allons installer l’extension magento2-widget-parameters. Je vous invite à consulter le billet de blog suivant pour la démarche à suivre: [Magento 2] Ajouter un sélecteur d’image ou un champ WYSIWYG dans un widget custom.
Convention: on part du principe qu’on crée un widget pour le vendor Sodifrance et le module Pdv.
Une fois l’extension magento2-widget-parameters installée, nous allons créer les fichiers suivants:
app/code/Sodifrance/Pdv/etc/widget.xml
Le champ « Clé d’URL de la page de destination » est en required="false" car l’utilisateur n’est pas obligé d’associer un lien pointant vers une autre page à ce widget. Nous verrons avec le code de la vue PHTML comment nous gérons ça en PHP par le biais d’une condition if/else.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd"> <widget class="Sodifrance\Pdv\Block\Widget\TwoColsDynamic" id="twocolumnsdynamic_widget"> <label>2 columns dynamic Widget</label> <description>2 columns dynamic Widget for Magento 2</description> <parameters> <parameter name="block_link" xsi:type="text" required="false" visible="true" sort_order="10"> <label>Clé d'URL de la page de destination</label> </parameter> <parameter name="left_col_title" xsi:type="text" required="false" visible="true" sort_order="10"> <label>Left column title</label> </parameter> <parameter name="left_col_tagline" xsi:type="text" required="false" visible="true" sort_order="10"> <label>Left column tagline</label> </parameter> <parameter name="right_col_image" xsi:type="block" required="false" visible="true" sort_order="10"> <label translate="true">Right column image</label> <block class="Dmatthew\WidgetParameters\Block\Adminhtml\Widget\Type\ImageChooser"> <data> <item name="button" xsi:type="array"> <item name="open" xsi:type="string">Choose Image...</item> </item> </data> </block> </parameter> <parameter name="right_col_text" xsi:type="block" required="false" visible="true" sort_order="10"> <label translate="true">Right column text</label> <block class="Dmatthew\WidgetParameters\Block\Adminhtml\Widget\Type\Wysiwyg" /> </parameter> </parameters> </widget> </widgets> |
app/code/Sodifrance/Pdv/Block/Widget/TwoColsDynamic.php
Ici, on crée 2 fonctions publiques:
getWidgetMediaUrl()qui récupère l’URL de base du site, lui ajoute le chemin vers l’endroit où reposent les médias de contenu éditorial dans Magento 2 et le libellé et le format de l’image uploadée via le widget en BO.getWidgetTargetPageUrl()qui récupère l’URL de base du site et lui ajoute la clé d’URL de la page cible, telle que renseignée via le widget en BO.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<?php namespace Sodifrance\Pdv\Block\Widget; use Magento\Framework\View\Element\Template; use Magento\Widget\Block\BlockInterface; class TwoColsDynamic extends Template implements BlockInterface { protected $_template = "widget/twocolsdynamic.phtml"; /** * @var \Magento\Cms\Helper\Wysiwyg\Images $helper */ protected $helper; /** * @var \Magento\Framework\UrlInterface $urlInterface */ protected $urlInterface; // Alt + Inser public function __construct(Template\Context $context, \Magento\Cms\Helper\Wysiwyg\Images $helper, \Magento\Framework\UrlInterface $urlInterface, array $data = []) { $this->helper = $helper; $this->urlInterface = $urlInterface; parent::__construct($context, $data); } public function getWidgetMediaUrl() { return $this->helper->getBaseUrl() . $this->getData('right_col_image'); } public function getWidgetTargetPageUrl() { return $this->urlInterface->getBaseUrl() . $this->getData('block_link'); } } |
Note: dans l’IDE PHP Storm, il est possible de ne taper que les lignes suivantes:
|
1 2 3 4 5 6 7 8 |
/** * @var \Magento\Cms\Helper\Wysiwyg\Images $helper */ protected $helper; /** * @var \Magento\Framework\UrlInterface $urlInterface */ protected $urlInterface; |
Ensuite, placez le curseur sous ces lignes et faites le raccourci Alt + Inser. Vous aurez accès à une liste de bouts de code que l’IDE se propose d’écrire pour vous! Si vous choisissez « constructor » et que vous sélectionnez ensuite les 2 entrées $helper et $urlInterface (placez le curseur sur la première, puis Maj + flèche du bas), le constructeur sera généré automatiquement.
app/code/Sodifrance/Pdv/view/frontend/templates/widget/twocolsdynamic.phtml
Dans le template PHTML, on ajoute une condition <?php if (!empty($block->getData('block_link'))): ?> qui vérifie si le champ URL est rempli en BO et génère du HTML en fonction.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<?php /** \Sodifrance\Pdv\Block\Widget\TwoColsDynamic $block */ ?> <div class="widget widget-twoColsDynamic"> <div class="widget-twoColsDynamic-left"> <div class="cms-blockHeading-2"> <h2 class="heading"> <?= $block->escapeHtml($block->getData('left_col_title')) ?> </h2> </div> <p><?= $block->escapeHtml($block->getData('left_col_tagline')) ?></p> </div> <div class="widget-twoColsDynamic-right"> <?php if (!empty($block->getData('block_link'))): ?> <a class="widget-twoColsDynamic-right-content" href="<?= $block->getWidgetTargetPageUrl() ?>" target="_blank"> <div class="widget-twoColsDynamic-left"> <img src="<?= $block->getWidgetMediaUrl() ?>" alt="*" class="img-fluid widget-twoColsDynamic-image" /> </div> <div class="widget-twoColsDynamic-right"> <?= $block->getData('right_col_text') ?> </div> </a> <?php else: ?> <div class="widget-twoColsDynamic-right-content"> <div class="widget-twoColsDynamic-left"> <img src="<?= $block->getWidgetMediaUrl() ?>" alt="*" class="img-fluid widget-twoColsDynamic-image" /> </div> <div class="widget-twoColsDynamic-right"> <?= $block->getData('right_col_text') ?> </div> </div> <?php endif; ?> </div> </div> |
Flushez vos caches; le widget devrait être disponible en backoffice!