[Magento 2] Ajouter un sélecteur d’image ou un champ WYSIWYG dans un widget custom

Pour ajouter un sélecteur d’image ou un champ WYSIWYG dans un widget custom dans Magento 2, nous allons utiliser l’extension suivante: Useful widget types for Magento 2 like image selector and wysiwyg text editor (un article de l’auteur ici: Using an Image Selector Parameter for Magento Widgets).

Code source zippé – magento2-widget-parameters-master.

Convention: on part du principe qu’on crée un widget pour le vendor Sodifrance et le module Pdv.

Installation de l’extension magento2-widget-parameters via Composer

Documentation officielle de Magento 2 sur comment installer une extension via composer.

Lancer la commande $ composer require dmatthew/magento2-widget-parameters:1.0.1 à la racine de votre projet Magento 2.
Des warnings vont probablement s’afficher. Ne pas en tenir compte.

./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Installing dmatthew/magento2-widget-parameters (1.0.1): Downloading (100%)
Package container-interop/container-interop is abandoned, you should avoid using it. Use psr/container instead.
Package moontoast/math is abandoned, you should avoid using it. Use brick/math instead.
Package phpunit/phpunit-mock-objects is abandoned, you should avoid using it. No replacement was suggested.
Package zendframework/zend-barcode is abandoned, you should avoid using it. Use laminas/laminas-barcode instead.
Package zendframework/zend-captcha is abandoned, you should avoid using it. Use laminas/laminas-captcha instead.
Package zendframework/zend-code is abandoned, you should avoid using it. Use laminas/laminas-code instead.
Package zendframework/zend-config is abandoned, you should avoid using it. Use laminas/laminas-config instead.
Package zendframework/zend-console is abandoned, you should avoid using it. Use laminas/laminas-console instead.
Package zendframework/zend-crypt is abandoned, you should avoid using it. Use laminas/laminas-crypt instead.
Package zendframework/zend-db is abandoned, you should avoid using it. Use laminas/laminas-db instead.
Package zendframework/zend-di is abandoned, you should avoid using it. Use laminas/laminas-di instead.
Package zendframework/zend-diactoros is abandoned, you should avoid using it. Use laminas/laminas-diactoros instead.
Package zendframework/zend-escaper is abandoned, you should avoid using it. Use laminas/laminas-escaper instead.
Package zendframework/zend-eventmanager is abandoned, you should avoid using it. Use laminas/laminas-eventmanager instead.
Package zendframework/zend-feed is abandoned, you should avoid using it. Use laminas/laminas-feed instead.
Package zendframework/zend-filter is abandoned, you should avoid using it. Use laminas/laminas-filter instead.
Package zendframework/zend-form is abandoned, you should avoid using it. Use laminas/laminas-form instead.
Package zendframework/zend-http is abandoned, you should avoid using it. Use laminas/laminas-http instead.
Package zendframework/zend-hydrator is abandoned, you should avoid using it. Use laminas/laminas-hydrator instead.
Package zendframework/zend-i18n is abandoned, you should avoid using it. Use laminas/laminas-i18n instead.
Package zendframework/zend-inputfilter is abandoned, you should avoid using it. Use laminas/laminas-inputfilter instead.
Package zendframework/zend-json is abandoned, you should avoid using it. Use laminas/laminas-json instead.
Package zendframework/zend-loader is abandoned, you should avoid using it. Use laminas/laminas-loader instead.
Package zendframework/zend-log is abandoned, you should avoid using it. Use laminas/laminas-log instead.
Package zendframework/zend-mail is abandoned, you should avoid using it. Use laminas/laminas-mail instead.
Package zendframework/zend-math is abandoned, you should avoid using it. Use laminas/laminas-math instead.
Package zendframework/zend-mime is abandoned, you should avoid using it. Use laminas/laminas-mime instead.
Package zendframework/zend-modulemanager is abandoned, you should avoid using it. Use laminas/laminas-modulemanager instead.
Package zendframework/zend-mvc is abandoned, you should avoid using it. Use laminas/laminas-mvc instead.
Package zendframework/zend-psr7bridge is abandoned, you should avoid using it. Use laminas/laminas-psr7bridge instead.
Package zendframework/zend-serializer is abandoned, you should avoid using it. Use laminas/laminas-serializer instead.
Package zendframework/zend-server is abandoned, you should avoid using it. Use laminas/laminas-server instead.
Package zendframework/zend-servicemanager is abandoned, you should avoid using it. Use laminas/laminas-servicemanager instead.
Package zendframework/zend-session is abandoned, you should avoid using it. Use laminas/laminas-session instead.
Package zendframework/zend-soap is abandoned, you should avoid using it. Use laminas/laminas-soap instead.
Package zendframework/zend-stdlib is abandoned, you should avoid using it. Use laminas/laminas-stdlib instead.
Package zendframework/zend-text is abandoned, you should avoid using it. Use laminas/laminas-text instead.
Package zendframework/zend-uri is abandoned, you should avoid using it. Use laminas/laminas-uri instead.
Package zendframework/zend-validator is abandoned, you should avoid using it. Use laminas/laminas-validator instead.
Package zendframework/zend-view is abandoned, you should avoid using it. Use laminas/laminas-view instead.
Writing lock file
Generating autoload files

./composer.json has been updated

Loading composer repositories with package information

Updating dependencies (including require-dev)

Package operations: 1 install, 0 updates, 0 removals

- Installing dmatthew/magento2-widget-parameters (1.0.1): Downloading (100%)

Package container-interop/container-interop is abandoned, you should avoid using it. Use psr/container instead.

Package moontoast/math is abandoned, you should avoid using it. Use brick/math instead.

Package phpunit/phpunit-mock-objects is abandoned, you should avoid using it. No replacement was suggested.

Package zendframework/zend-barcode is abandoned, you should avoid using it. Use laminas/laminas-barcode instead.

Package zendframework/zend-captcha is abandoned, you should avoid using it. Use laminas/laminas-captcha instead.

Package zendframework/zend-code is abandoned, you should avoid using it. Use laminas/laminas-code instead.

Package zendframework/zend-config is abandoned, you should avoid using it. Use laminas/laminas-config instead.

Package zendframework/zend-console is abandoned, you should avoid using it. Use laminas/laminas-console instead.

Package zendframework/zend-crypt is abandoned, you should avoid using it. Use laminas/laminas-crypt instead.

Package zendframework/zend-db is abandoned, you should avoid using it. Use laminas/laminas-db instead.

Package zendframework/zend-di is abandoned, you should avoid using it. Use laminas/laminas-di instead.

Package zendframework/zend-diactoros is abandoned, you should avoid using it. Use laminas/laminas-diactoros instead.

Package zendframework/zend-escaper is abandoned, you should avoid using it. Use laminas/laminas-escaper instead.

Package zendframework/zend-eventmanager is abandoned, you should avoid using it. Use laminas/laminas-eventmanager instead.

Package zendframework/zend-feed is abandoned, you should avoid using it. Use laminas/laminas-feed instead.

Package zendframework/zend-filter is abandoned, you should avoid using it. Use laminas/laminas-filter instead.

Package zendframework/zend-form is abandoned, you should avoid using it. Use laminas/laminas-form instead.

Package zendframework/zend-http is abandoned, you should avoid using it. Use laminas/laminas-http instead.

Package zendframework/zend-hydrator is abandoned, you should avoid using it. Use laminas/laminas-hydrator instead.

Package zendframework/zend-i18n is abandoned, you should avoid using it. Use laminas/laminas-i18n instead.

Package zendframework/zend-inputfilter is abandoned, you should avoid using it. Use laminas/laminas-inputfilter instead.

Package zendframework/zend-json is abandoned, you should avoid using it. Use laminas/laminas-json instead.

Package zendframework/zend-loader is abandoned, you should avoid using it. Use laminas/laminas-loader instead.

Package zendframework/zend-log is abandoned, you should avoid using it. Use laminas/laminas-log instead.

Package zendframework/zend-mail is abandoned, you should avoid using it. Use laminas/laminas-mail instead.

Package zendframework/zend-math is abandoned, you should avoid using it. Use laminas/laminas-math instead.

Package zendframework/zend-mime is abandoned, you should avoid using it. Use laminas/laminas-mime instead.

Package zendframework/zend-modulemanager is abandoned, you should avoid using it. Use laminas/laminas-modulemanager instead.

Package zendframework/zend-mvc is abandoned, you should avoid using it. Use laminas/laminas-mvc instead.

Package zendframework/zend-psr7bridge is abandoned, you should avoid using it. Use laminas/laminas-psr7bridge instead.

Package zendframework/zend-serializer is abandoned, you should avoid using it. Use laminas/laminas-serializer instead.

Package zendframework/zend-server is abandoned, you should avoid using it. Use laminas/laminas-server instead.

Package zendframework/zend-servicemanager is abandoned, you should avoid using it. Use laminas/laminas-servicemanager instead.

Package zendframework/zend-session is abandoned, you should avoid using it. Use laminas/laminas-session instead.

Package zendframework/zend-soap is abandoned, you should avoid using it. Use laminas/laminas-soap instead.

Package zendframework/zend-stdlib is abandoned, you should avoid using it. Use laminas/laminas-stdlib instead.

Package zendframework/zend-text is abandoned, you should avoid using it. Use laminas/laminas-text instead.

Package zendframework/zend-uri is abandoned, you should avoid using it. Use laminas/laminas-uri instead.

Package zendframework/zend-validator is abandoned, you should avoid using it. Use laminas/laminas-validator instead.

Package zendframework/zend-view is abandoned, you should avoid using it. Use laminas/laminas-view instead.

Writing lock file

Generating autoload files

app/code/Sodifrance/Pdv/etc/widget.xml

Nous allons déclarer un widget contenant 3 paramètres:

un titre
une image issue de la « médiathèque » de Magento 2
un champ WYSIWYG (qui permet d’utiliser du code HTML pour la mise en page, ou d’inclure un bloc statique)

<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\Tab" id="tab_widget">
        <label>Tab Widget</label>
        <description>Tab Widget for Magento 2</description>
        <parameters>
            <parameter name="title" xsi:type="text" required="true" visible="true" sort_order="10">
                <label>Label</label>
            </parameter>
            <parameter xsi:type="block" name="background_image" visible="true" sort_order="10">
                <label translate="true">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 xsi:type="block" name="body_text" visible="true" sort_order="10">
                <label translate="true">Body Text</label>
                <block class="Dmatthew\WidgetParameters\Block\Adminhtml\Widget\Type\Wysiwyg" />
            </parameter>
        </parameters>
    </widget>
</widgets>

<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">

<label>Tab Widget</label>

<description>Tab Widget for Magento 2</description>

<label>Label</label>

</parameter>

<label translate="true">Image</label>

<data>

<item name="open" xsi:type="string">Choose Image...</item>

</item>

</data>

</block>

</parameter>

</parameter>

</parameters>

</widget>

</widgets>

app/code/Sodifrance/Pdv/Block/Widget/Tab.php

Il a fallu créer une fonction pour permettre de récupérer l’URL de l’image uploadée.

<?php
namespace Sodifrance\Pdv\Block\Widget;

use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;

class Tab extends Template implements BlockInterface {

    protected $_template = "widget/tab.phtml";

    /**
     * @var \Magento\Cms\Helper\Wysiwyg\Images
     */
    protected $helper;

    public function __construct(Template\Context $context, \Magento\Cms\Helper\Wysiwyg\Images $helper, array $data = [])
    {
        $this->helper = $helper;
        parent::__construct($context, $data);
    }

    public function getTabWidgetMediaUrl()
    {
        return
            $this->helper->getBaseUrl() .
            $this->getData('background_image');
    }
}

<?php

namespace Sodifrance\Pdv\Block\Widget;

use Magento\Framework\View\Element\Template;

use Magento\Widget\Block\BlockInterface;

class Tab extends Template implements BlockInterface {

protected $_template = "widget/tab.phtml";

/**

* @var \Magento\Cms\Helper\Wysiwyg\Images

protected $helper;

public function __construct(Template\Context $context, \Magento\Cms\Helper\Wysiwyg\Images $helper, array $data = [])

{

$this->helper = $helper;

parent::__construct($context, $data);

}

public function getTabWidgetMediaUrl()

{

return

$this->helper->getBaseUrl() .

$this->getData('background_image');

}

app/code/Sodifrance/Pdv/view/frontend/templates/widget/tab.phtml

Le template PHTML.

<?php
/** \Sodifrance\Pdv\Block\Widget\Tab $block */
?>

<div class="widget widget-tab">
    <div class="widget-tab-label cms-blockHeading-2">
        <h2 class="heading">
            <?= $block->escapeHtml($block->getData('title')) ?>
        </h2>
    </div>
    <div class="widget-tab-content">
        <div class="widget-tab-left-col">
            <img src="<?= $block->getTabWidgetMediaUrl() ?>" alt="*" class="img-fluid widget-tab-image" />
        </div>
        <div class="widget-tab-right-col">
            <?= $block->getData('body_text') ?>
        </div>
    </div>
</div>

<?php

/** \Sodifrance\Pdv\Block\Widget\Tab $block */

<?= $block->escapeHtml($block->getData('title')) ?>

</h2>

</div>

<img src="<?= $block->getTabWidgetMediaUrl() ?>" alt="*" class="img-fluid widget-tab-image" />

</div>

<?= $block->getData('body_text') ?>

</div>

Flusher les caches:

$ n98-magerun2 cache:flush

1	$ n98-magerun2 cache:flush

Si problèmes…

Voir aussi: [Magento 2] Créer un widget custom et l’utiliser pour afficher un bloc statique dans une catégorie unique du catalogue.

Articles récents

Catégories

Archives

Méta

[Magento 2] Ajouter un sélecteur d’image ou un champ WYSIWYG dans un widget custom

Installation de l’extension magento2-widget-parameters via Composer

app/code/Sodifrance/Pdv/etc/widget.xml

app/code/Sodifrance/Pdv/Block/Widget/Tab.php

app/code/Sodifrance/Pdv/view/frontend/templates/widget/tab.phtml

Flusher les caches:

Si problèmes…