Własny widget

Widżet (ang. widget) to komponent z dodatkowymi funkcjonalnościami, który możemy wstawić do strony CMS lub bloku, np: lista produktów z danej kategorii, galeria.
Przycisk „Wstaw Widget” znajduje się w pasku narzędziowym edytora treści.

Po otwarciu panelu, do wyboru mamy kilka gotowych widżetów:

Aby dodać własny widżet do tej listy, musimy przygotować nowy moduł:
– utwórz plik registration.php i zarejestruj moduł
app/code/Geek/Example/registration.php:

<?php
/* app/code/Geek/Example/registration.php */
 
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Geek_Example',
    __DIR__
);

<?php

/* app/code/Geek/Example/registration.php */

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::MODULE,

'Geek_Example',

__DIR__

);

– utwórz plik konfiguracyjny module.xml
app/code/Geek/Example/etc/module.xml:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Geek_Example" setup_version="1.0.0" />
</config>

<?xml version="1.0"?>

</config>

A teraz rozszerzymy moduł dodając do niego konfigurację widżetu. W tym celu:
– utwórz plik widget.xml
app/code/Geek/Example/etc/widget.xml:

<?xml version="1.0" ?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget class="Geek\Example\Block\Widget\Test" id="geek_example_test">
        <label>Geek Test</label>
        <description>Test widget description ...</description>
            <parameters>
                <parameter name="title" sort_order="10" visible="true" xsi:type="text">
                    <label>Title</label>
                </parameter>
                <parameter name="content" sort_order="20" visible="true" xsi:type="textarea">
                    <label>Content</label>
                </parameter>
            </parameters>
    </widget>
</widgets>

<?xml version="1.0" ?>

<description>Test widget description ...</description>

<label>Title</label>

</parameter>

<label>Content</label>

</parameter>

</parameters>

</widget>

</widgets>

Wewnątrz znaczników <widget>…</widget> definiujemy podstawowe elementy widżetu, min:

<label>Geek Test</label> – nazwa, która wyświetli się w liście widżetów,
<description>… widget description …</description> – informacja z podpowiedzią, czego dotyczy widżet,
<parameters>…</parameters> – parametry:
– <parameter name=”title” xsi:type=”text”> – pole tekstowe xsi:type=”text” z podpisem <label> „Title” </label>
– <parameter name=”content” xsi:type=”textarea”> – obszar tekstowy xsi:type=”textarea” z podpisem <label> „Content” </label>.

Bezpośrednio w tagu <widget> definiujemy klasę np: Test, w której możemy dodawać własny kod:

<widget class="Geek\Example\Block\Widget\Test" id="geek_example_test">

1	<widget class="Geek\Example\Block\Widget\Test" id="geek_example_test">

– tak więc utwórz plik: Test.php i ustaw w nim szablon, który będzie wczytany na frontendzie:
app/code/Geek/Example/Block/Widget/Test.php

<?php

/* app/code/Geek/Example/Block/Widget/Test.php */

namespace Geek\Example\Block\Widget;
use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;

class Test extends Template implements BlockInterface
{
    protected $_template = "widget/test.phtml";
}

<?php

/* app/code/Geek/Example/Block/Widget/Test.php */

namespace Geek\Example\Block\Widget;

use Magento\Framework\View\Element\Template;

use Magento\Widget\Block\BlockInterface;

class Test extends Template implements BlockInterface

{

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

}

– utwórz plik szablonu test.phtml i wyświetl w nim pola title i content:
app/code/Geek/Example/view/frontend/templates/widget/test.phtml

<h3><?php echo $block->getData('title'); ?></h3>
<p><?php echo $block->getData('content'); ?></p>

1 2	<h3><?php echo $block->getData('title'); ?></h3> <p><?php echo $block->getData('content'); ?></p>

Z wiersza poleceń SSH wykonaj instrukcje:

$ php bin/magento setup:upgrade
$ php bin/magento cache:clean
$ php bin/magento cache:flush

$ php bin/magento setup:upgrade

$ php bin/magento cache:clean

$ php bin/magento cache:flush

Końcowy efekt powinien być taki 🙂 :

– backend:
Wprowadź testową zawartość do widżetu jak na obrazku poniżej.

– frontend:

#magento #Magento 2 #widget

KOMENTARZE