如何创建自定义 Magento 2 小部件

已发表: 2022-03-11

小部件允许 Magento 2 商店管理员向 CMS 页面和块添加静态/动态内容，提供大量功能和简单的实现。 小部件是可重用的组件，可以添加到 Magento 2 的任何 CMS 块中。

因此，它们允许 Magento 2 开发人员和商店管理员在前端添加交互式界面和功能，而无需了解太多编程知识。 当然，他们仍然需要知道如何使用 Magento 来创建小部件。

本文的目的是演示如何在 Magento 2 中创建小部件，重点是自定义小部件。

Magento 2 小部件

Magento 2 是 Magento 的最新版本，是当今领先的电子商务平台之一。 小部件在 Magento 2 中扮演着重要的角色，尤其是从功能的角度来看。 除了提供更多用户端功能外，Magento 小部件还可以帮助管理员将静态或动态内容添加到 CMS 页面和块中。

但是，从技术角度来看……什么是 Magento 小部件？

Magento 2 小部件本质上是一个 Magento 扩展，设计有一组高级配置选项。 由于更大的灵活性和控制力，它们用于通过 Magento 管理员面板提供信息和营销内容。 Magento 2 小部件的优点之一是您可以从站点上的任何位置“调用”它们。

小部件还允许管理员在 Magento 前端添加交互式界面和功能，而无需编写代码（实际上，甚至不知道如何编写代码）。

Magento 2 提供多种类型的小部件

在我们继续实施之前，让我们仔细看看 Magento 2 支持的标准小部件范围：

  • 最近比较的产品——您一定在浏览您最喜欢的电子商务网站上的产品时观察到了这个小部件。 此小部件用于在目录页面的侧栏中显示最近查看或比较的产品。 根据主题，它们也可能出现在您的商店中。 关键点之一是可以配置每个块中列出的产品数量。
  • 订单和退货- 每当您在线购买产品时，都有一个必备的小部件可以快速访问订单和退货。 如果用户想要查看已订购或退回的产品，他们可以填写必要的详细信息，例如订单 ID、结算最后日期、查找订单依据、电子邮件等。
  • 目录产品列表——这是另一个广泛使用的小部件； 每个人都熟悉电子商务网站上的“特色产品”部分，因为几乎每个网站都有一个。 特色产品通常放置在主页上，以进行产品推广。 特定产品会显示简要详细信息，例如价格、功能和添加到购物车、添加到愿望清单和添加到比较功能等选项。
  • 目录产品链接——目录产品链接小部件的主要目的是允许管理员管理产品链接，包括相关产品、交叉销售、追加销售和分组产品。 当您访问目录产品链接页面时，您将看到以介绍开头的不同目录类别。 在那里，您会找到带有各种子链接的目录产品链接，例如目录产品链接分配、目录产品链接属性、目录产品链接删除、目录产品链接类型等等。
  • 目录类别链接——在电子商务网站，尤其是基于产品的网站中，您会发现不乏目录类别链接小部件。
  • 自定义块小部件- 可以组合块、小部件和自定义页面来显示部分目录或客户可能认为有用的其他信息。

这些可用于改善用户体验并为商店添加功能。 块和小部件是大多数电子商务网站的重要元素。 它们允许用户快速生成和控制内容，并可用于执行以下操作：

  • 在侧边栏中添加动态/信息块
  • 在 CMS 页面中添加横幅
  • 添加自定义菜单
  • 添加交互式用户界面

Magento 2 自定义小部件的案例

任何网站或网页都需要大量功能才能顺利运行并吸引更多访问者，而在电子商务中创造引人入胜的用户体验是必须的。 这就是自定义 Magento 2 小部件发挥作用的地方，这就是它们应该做的事情。

小部件是我们可以添加到商店的更小的代码集。 使用指向动态代码的简单链接，小部件可以显示为帮助访问者和改善他们的体验而量身定制的各种有用数据。 使用低开销、可重复使用的小部件来提高参与度的能力显然意义重大，但有时不仅仅是选择和添加现成的小部件的问题。

使用 Magento 2 中的自定义小部件功能，我们可以创建自己的小部件模板。 自定义小部件有时可以提供更好的方式在 CMS 块或页面内编辑或添加高质量内容。

但是，在我们继续自定义小部件之前，我们需要检查 Magento 2 中小部件的标准用例。让我们看一些基本且广泛使用的东西，例如：

如何使用小部件将新产品列表添加到主页

这个简单的小部件允许我们在网站上任何需要的地方添加新产品列表，并且可以通过多种方式在 Magento 2 中列出新产品。

要将 Magento 产品列表添加到主页，您只需要遵循一个简单的过程：

  • 登录 Magento 2 管理页面并转到 Content > Widget

内容 > 小部件菜单树的图像

  • 单击添加小部件按钮。 之后，我们将被重定向到“设置”选项卡，我们必须在其中选择“类型”和“设计”选项和主题。

  • 我们可以看到下面的屏幕截图，其中我们已经选择了我们将在前端显示的目录新产品列表。

类型菜单中的 Magento 新产品列表选项的图像

  • 我们选择 LUMA 作为设计主题选项。

设计主题菜单中的 Magento Luma 主题选择的图像

  • 选择这两个值后，我们必须继续第二步，我们必须填写店面属性。 现在我们要设置Widget Title和Storefront Properties ，例如Widget Title和Store View 。 我们正在使用Toptal 新产品列表和所有商店视图。

Magento 店面属性选项卡的图像

  • 最重要的部分是布局更新部分，它将告诉我们这个小部件将出现在哪里（例如，主页、列表页面、结帐页面等）。 还可以定义容器将出现的区域——例如，在页眉下方、页脚上方、页脚等。

布局更新设置为您提供以下选项：

  • 显示在：指定页面或所有页面。
  • 页面： CMS主页
  • 容器：主要内容区
  • 模板：在这里，您可以选择您希望以哪种样式显示新产品网格模式或列表模式

Magento 2 中“布局更新”选项卡的图像

一旦我们选择了指定页面选项，我们就可以继续设置属性，允许我们在特定页面上显示小部件。 这里我们有Page下拉菜单，它允许我们选择CMS Home Page 。 接下来，我们需要选择将用于在特定部分显示小部件的容器和模板。

最后，我们移至最后一个选项卡，其中包括小部件选项。 在这里，我们可以设置Condition ，例如要展示什么类型的产品，或者包括对产品数量的限制等等。

如果我们选择All Products ，那么最近添加的产品将显示在此部分中。 如果我们选择新产品，那么只有那些我们标记为“新”的产品才会显示在这个部分。 如果我们想让我们的客户控制多个列表的导航，我们需要将显示页面控制设置为“是”。 如果我们选择了“是”，则需要在列表中输入产品数量。

在Number of Products to Display中，我们可以定义在New Products部分可以显示多少产品。 此外，如有必要，我们可以更改Cache Lifetime设置。

现在我们必须保存这个小部件并刷新 Magento 2 缓存。 这可以从管理员或命令行完成。 我们可以使用以下命令来刷新缓存：

php bin/magento cache:clean and php bin/magento cache:flush

用于设置 Magento 2 Widget 参数的 Widget Options 部分

然后我们就可以在首页看到新品了。

Magento 2 新产品展示，来自上一张图片的选择

如何在 Magento 2 中创建自定义小部件

现在，我们将学习如何为 Magento 2 创建自定义小部件。自定义小部件提供了在 CMS 块或页面中添加和编辑内容的最佳方式，因为它们可以根据您的要求进行定制。

Magento 2 自定义 CSS 和自定义模块提供了一系列可能性

让我们从基础开始。 我们都知道如何创建一个模块，对吧？ 万一您不熟悉在 Magento 2 中创建自定义模块，我们提供了一个很好的教程，深入介绍了该过程。

现在，让我们继续在 Magento 2 中创建自定义小部件的分步过程。

首先，我们需要创建一个需要命名空间和模块文件夹的新模块。 对于这个例子，我们将使用Toptal作为命名空间，使用CustomWidget作为模块名称。 所以，让我们像往常一样从composer.json 、 registration.php和etc/module.xml 。

app/code/Toptal/CustomWidget/composer.json

每次我们运行这个文件时 Composer 都会加载它，即使我们实际上并没有在我们的模块中使用 Composer。

现在我们需要向 Magento 注册我们的模块，因此我们需要在以下位置创建register.php ： app/code/Toptal/CustomWidget/registration.php 。

 <?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Toptal_CustomWidget', __DIR__ );

现在，我们将创建最后一个注册文件module.xml 。

app/code/Toptal/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="Toptal_CustomWidget" setup_version="1.0.0"/> </config>

完成注册步骤后，接下来我们创建widget.xml配置文件。

app/code/Toptal/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="Toptal\CustomWidget\Block\Widget\Samplewidget"> <label>Toptal 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="textarea"> <label>Content</label> </parameter> </parameters> </widget> </widgets>

在上面的代码中，我们将Title和Content作为参数，在调用小部件的任何地方显示。 <widget>标签包含块类Toptal\CustomWidget\Block\Widget\Samplewidget 。 此类在Block/Widget/Samplewidget.php中减速。 该类指示我们的小部件使用哪个模板。

在 Magento 2 Type 菜单中选择的 Toptal Sample Widget

下一段代码展示了如何为小部件定义一个块； 我们将在这里设置我们的模板。 让我们看看它的外观。

app/code/Toptal/CustomWidget/Block/Widget/Samplewidget.php

 <?php namespace Toptal\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"; }

Toptal\CustomWidget\Block\Widge\Samplewidget在上面的代码中声明。 在这个文件中，我们在$_template变量中分配了一个自定义模板文件。

接下来，我们将看到包含我们的小部件模板的内容。

app/code/Toptal/CustomWidget/Block/view/frontend/templates/widget/samplewidget.phtml

 <?php if($block->getData('widgettitle')): ?> <h2 class='toptal-title'><?php echo $block->getData('widgettitle'); ?></h2> <?php endif; ?> <?php if($block->getData('widgetcontent')): ?> <h2 class='toptal-content'><?php echo $block->getData('widgetcontent'); ?></h2> <?php endif; ?>

在这里，我们可以看到如何从小部件参数中获取值。 这很简单：

$this->getData('widgettitle');

和

$this->getData('widgetcontent');

我们的最终结果是什么？ 让我向您展示它在 Magento Admin 中的样子：

Magento 2 Widget 参数，如 Magento 2 Admin 中所示

Magento 2 小部件选项中的 Toptal 自定义标题和 Toptal 自定义内容输入

现在我们必须保存这个小部件并刷新缓存。 如前所述，这可以从管理员或命令行使用php bin/magento cache:clean和php bin/magento cache:flush完成

Magento 2 中带有自定义标题和内容的 Toptal 主页图像

你可以在这里下载这个简单的模块。 它显然不是一个完整的 Magento 2 小部件模板，但它仍然是一个学习辅助工具。 如果您需要更多资源，或者您对 Magento 比较陌生，那么 Magento 2 官方文档是显而易见的起点。

最后，我想提几个我觉得非常有用的个人开发博客。 在学习 Magento 方面，Alan Storm 可能是最具教育意义的内容，我认为您也应该查看 Alan Kent 的博客。

小部件：大图的关键部分

本文的目的是提供一个在 Magento 2 中创建小部件的指南，从涵盖 Magento 2 小部件开发和自定义小部件创建的基本分步教程开始。 我显然是后者的粉丝，因为定制解决方案往往提供更多的灵活性和功能。

Magento 小部件提供了关键的前端功能，因此可以毫不夸张地说，聪明的自定义小部件可以帮助您的下一个 Magento 项目更上一层楼。 这允许我们实现更多功能，使用不同的小部件将不同类型的项目添加到主页，最终，它们只是为开发人员提供了更多的创作自由。

自定义小部件、Magento 2 网络表单和联系表单可以改善用户体验并促进转化

但这不仅仅是改善用户体验和转换，或做出令人敬畏的设计的问题。 显然，所有这些都是任何客户的优先事项，但也有较小的、不太明显的收益。 例如，Magento 小部件也可以节省大量时间和管理方面的麻烦，并且每个客户都希望节省工时。

但是，这超出了本文的范围。 我的目的是提供一个快速的技术概述，一个易于遵循的 Magento 2 小部件教程，而不是讨论投资回报率和营销。