Magento widgets系统是一个图形界面，您可以在其中配置前端的块。对于每个小部件，都有一个配置页面，您可以在其中设置该小部件所需的值。使用Magento小部件，您可以配置布局说明以在前端的不同位置显示小部件。
该小部件在Magento 2中提供了强大的功能，用于向存储页面添加动态或静态内容，并使用一组高级配置选项进行设计。
我们可以用Widget做什么？
1、用于通过Magento管理员面板提供信息和营销内容
2、小工具可以从站点上的任何位置“调用”它们
3、还允许管理员在Magento前端添加交互式界面和功能
一 、创建widget.xml
首先，我们将声明小部件。etc目录中的xml文件创建一个文件app/code/Magenest/CustomWidget/etc/widget。包含以下内容的xml：
<?xml version="1.0" ?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:codetheatres:Magento_Widget:etc/widget.xsd">
<widget class="Magenest\CustomWidget\Block\Widget\ShowProduct" id="magenest_show_product_slider_on_home_page">
<label>Magenest Show Product Slider On Home Page</label>
<description>Magenest Show Product On Slider Home Page</description>
<parameters>
<parameter name="Title" xsi:type="text" required="false" visible="true" sort_order="40">
<label translate="true">Title </label>
</parameter>
<parameter name="product_id" xsi:type="block" visible="true" required="true" sort_order="30">
<label translate="true">Product</label>
<block class="Magento\Catalog\Block\Adminhtml\Product\Widget\Chooser">
<data>
<item name="button" xsi:type="array">
<item name="open" xsi:type="string">Select Product...</item>
</item>
</data>
</block>
</parameter>
</parameters>
</widget>
</widgets>
class=“Magenest\CustomWidget\Block\Widget\ShowProduct”具有重要功能，它将处理逻辑并返回前端的结果
<description>..</description>和<label>..</label>显示小部件说明的标记
二、创建 Block
其次，我们创建一个块类。用这个类负责为模板提供数据
创建块文件：app/code/Magenest\Magenest_CustomWidget\block\Widget\ShowProduct.php
<?php
namespace Magenest\CustomWidget\Block\Widget;
use Magento\Catalog\Api\CategoryRepositoryInterface;
use Magento\Catalog\Block\Product\Context;
use Magento\Catalog\Block\Product\ListProduct;
use Magento\Catalog\Model\Layer\Resolver;
use Magento\Catalog\Model\ProductFactory;
use Magento\Framework\Data\Helper\PostHelper;
use Magento\Framework\Url\Helper\Data;
use Magento\Widget\Block\BlockInterface;
class ShowProduct extends ListProduct implements BlockInterface
{
protected $_productFactory;
public function __construct(Context $context,
PostHelper $postDataHelper,
Resolver $layerResolver,
ProductFactory $productFactory,
CategoryRepositoryInterface $categoryRepository,
Data $urlHelper, array $data = [])
{
$this->_productFactory = $productFactory;
parent::__construct($context, $postDataHelper, $layerResolver,
$categoryRepository, $urlHelper, $data);
$this->setTemplate("Magenest_CustomWidget::widget/product.phtml");
}
public function getProductInformation(){
$productId = $this->getProduct_id();
if ($productId){
$productId = str_replace('product/','',$productId);
}
$product = $this->_productFactory->create()->load($productId);
return $product;
}
}
三、创建template file
此模板将显示上面产品使用块的数据。
文件：app/code/Magenest/CustomWidget/view/widget/product.phtml
<?php
/**
* Copyright © 2019 Magenest. All rights reserved.
* See COPYING.txt for license details.
*
* Magenest_magento233_dev extension
* NOTICE OF LICENSE
*
* @category Magenest
* @package Magenest_magento233_dev
*/
/** @var $block Magenest\CustomWidget\Block\Widget\ShowProduct*/
$product = $block->getProductInformation();
$titleWidget = $block->getTitle();
?>
<div>
<h2><?=$titleWidget?></h2>
<p>This is sample widget show information product.</p>
<h3>Product name: <?=$product->getName()?></h3>
<h3>Price : <?=$product->getFormattedPrice()?></h3>
</div>
四、刷新缓存
php bin/magento c:c
后台管理 admin panel > Content > Pages > Home page > Edit
image.png
添加刚才制作的widget
image.png
五、打开 Home Page
image.png
