magento中文教程之如何创建一个小部件widget

 《magento企业级开发实战》

全面系统学习magento二次开发。

点击链接查看：

《magento企业级开发实战》

小部件是用于向 Magento 2 的 CMS 页面和块添加静态或动态内容的元素。因此，小部件是将内容插入或编辑到 CMS 页面块或页面以在您的商店中添加更多功能的更好工具。 小部件类似于创建功能并在任何页面或块上使用它，以便它们成为 Magento 2 的可重用组件。

在本文中，我们将创建一个自定义小部件，这将帮助您了解如何创建自定义小部件然后使用它，因此本文是对自定义小部件的介绍，我们一定会制作第 2 部分，其中 我们将为我们的自定义小部件添加更多功能。

所以，让我们从创建一个新模块开始，我们将学习在 Magento 2 中创建自定义小部件的分步过程。

步骤 1. 注册一个新模块； 在 app/code/Bizspice/CustomWidget/ 中创建 registration.php

<?php

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

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

            'Bizspice_CustomWidget',

            __DIR__

);

步骤 2. 现在在 app/code/Bizspice/CustomWidget/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="Bizspice_CustomWidget" setup_version="1.0.0"/>

</config>

现在，模块的基本文件已创建，因此我们现在将专注于创建小部件。

步骤 3. 通过在 app/code/Bizspice/CustomWidget/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="Bizspice\CustomWidget\Block\Widget\Samplewidget" id="customwidget_samplewidget">

    <label>Bizspice Sample Widget</label>

    <description></description>

             <parameters>

                         <parameter name="widgettitle" sort_order="10" visible="true" xsi:type="text">

                                     <label>Title</label>

                         </parameter>

                         <parameter name="widgetcontent" sort_order="20" visible="true" xsi:type="text">

                                     <label>Content</label>

                         </parameter>

             </parameters>

    </widget>

</widgets>

在这里，我们在 admin 中创建了 2 个文本框，分别命名为 widgettitle（带有标签 Title）和 widgetcontent（带有标签 Content）作为参数显示在调用小部件的任何地方（查看参数内的代码）。 现在我们的管理工作已经完成，您可以检查“内容”>“小工具”中列出的小工具，然后单击“添加小工具”，在“类型下拉菜单”中，您将找到 Bizspice 示例小工具，这是我们的自定义小工具。

我们列出的这两个字段将如下所示

此外，我们的 标签包含块类“Bizspice\CustomWidget\Block\Widget\Samplewidget”，它让小部件知道必须使用哪个模板文件。

第 4 步。在我们的 widget.xml 中，我们声明了块类，所以现在我们将创建块

在 app/code/Bizspice/CustomWidget/Block/Widget 中创建 Samplewidget.php

<?php

namespace Bizspice\CustomWidget\Block\Widget;

use Magento\Framework\View\Element\Template;

use Magento\Widget\Block\BlockInterface;

class Samplewidget extends Template implements BlockInterface

{

protected $_template = "widget/samplewidget.phtml"

}

在上面的代码中，我们在 samplewidget.phtml 中指定了一个名为 $_template 变量的自定义模板文件。 在 phtml 文件中，我们将定义应该在前端显示我们使用这个小部件的地方。

步骤 5. 在 app/code/Bizspice/CustomWidget/view/frontend/templates/widget 中创建 samplewidget.phtml

由于我们在小部件中创建了两个名为 widgettitle 和 widgetcontent 的字段，因此我们将它们称为前端。

<?php if($block->getData('widgettitle')): ?>

    <h2 class='title'><?php echo $block->getData('widgettitle'); ?></h2>

<?php endif; ?>

<?php if($block->getData('widgetcontent')): ?>

    <h2 class='content'><?php echo $block->getData('widgetcontent'); ?></h2>

<?php endif; ?>

完成，我们已经创建了我们的第一个自定义小部件，我们可以使用它了。

如何使用：我们可以通过两种方式使用widget

直接从 CMS 块或页面。
为此，请转到特定的块或页面。 在内容上单击插入小部件

然后从列表中选择您的小部件并将内容放在我们为小部件创建的组件（在本例中为文本框）上

通过从“内容”>“小工具”创建小工具，然后单击“添加小工具”并填充所有字段并选择我们必须使用小工具的站点部分。