image upload – devfrontend.info

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

Étiquette : image upload

[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…