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

本文概述

• Magento 2小部件
• Magento 2提供多种类型的小部件
• Magento 2自定义小部件的案例
• 如何在Magento 2中创建自定义小部件
• 小部件：全局的重要组成部分

小部件使Magento 2商店管理员可以向CMS页面和块添加静态/动态内容, 从而提供了许多功能和简单的实现。小部件是可重用的组件, 可以在Magento 2的任何CMS块中添加。

因此, 它们使Magento 2开发人员和商店管理员可以在前端添加交互式界面和功能, 而无需了解太多编程知识。当然, 他们仍然需要了解围绕Magento的方式来创建小部件。

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

Magento 2小部件

Magento 2是Magento的最新版本, 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管理页面, 然后转到内容>小部件

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

• 选择两个值之后, 我们必须继续执行第二步, 在此步骤中必须填充店面属性。现在, 我们必须设置窗口小部件标题和店面属性, 例如窗口小部件标题和商店视图。我们正在使用srcmini新产品列表和所有商店视图。

• 最重要的部分是”布局更新”部分, 它将告诉我们此小部件将在何处显示(例如, 首页, 列表页面, 结帐页面等)。也可以定义将在其中显示容器的区域, 例如在页眉下方, 页脚上方, 页脚等位置。

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

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

选择”指定页面”选项后, 就可以继续设置属性, 从而使我们可以在特定页面上显示小部件。在这里, 我们有页面下拉菜单, 它允许我们选择CMS主页。接下来, 我们需要选择用于在特定部分显示小部件的容器和模板。

最后, 我们转到最后一个选项卡, 其中包括小部件选项。在这里, 我们可以设置条件, 例如将要显示什么类型的产品, 或者包括对产品数量的限制等等。

如果我们选择”所有产品”, 则最新添加的产品将显示在此部分中。如果我们选择”新产品”, 则仅在本节中显示标记为”新”的产品。如果要让客户控制多个列表的导航, 则需要将”显示页面控件”设置为”是”。如果我们选择”是”, 则有必要在列表中输入产品数量。

在”要显示的产品数量”中, 我们可以定义”新产品”部分中可以显示多少产品。另外, 如有必要, 我们可以更改”缓存生存时间”设置。

现在我们必须保存此小部件并刷新Magento 2缓存。可以从admin或命令行完成。我们可以使用以下命令刷新缓存：

php bin / magento缓存：clean和php bin / magento缓存：flush

然后, 我们将能够在主页上看到新产品。

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

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

让我们从基础开始。我们都知道如何创建模块, 对吗？以防万一你不熟悉在Magento 2中创建自定义模块的情况, 我们提供了很棒的教程, 深入介绍了该过程。

现在, 让我们继续一步一步地在Magento 2中创建自定义小部件。

首先, 我们需要创建一个新模块, 它将需要名称空间和模块文件夹。在此示例中, 我们将使用srcmini作为名称空间, 并使用CustomWidget作为模块名称。因此, 让我们像往常一样从composer.json, registration.php和etc / module.xml开始。

app / code / srcmini / CustomWidget / composer.json

即使我们实际上并未在模块中使用Composer, 该文件也会在每次运行时由Composer加载。

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

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

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

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

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

app / code / srcmini / 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="srcmini\CustomWidget\Block\Widget\Samplewidget" id="srcmini_customwidget_samplewidget">
		<label>srcmini 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>

在上面的代码中, 我们将标题和内容作为参数显示在调用小部件的任何位置。 <widget>标记包含块类srcmini \ CustomWidget \ Block \ Widget \ Samplewidget。此类在Block / Widget / Samplewidget.php中减速。该类指示我们的小部件使用哪个模板。

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

应用程序/代码/ srcmini / CustomWidget /块/Widget/Samplewidget.php

<?php

namespace srcmini\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";

}

以上代码声明了srcmini \ CustomWidget \ Block \ Widge \ Samplewidget。在此文件中, 我们在$ _template变量内分配一个自定义模板文件。

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

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

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

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

$ this-> getData(‘widgettitle’);

和

$ this-> getData(‘widgetcontent’);

我们的最终结果是什么？让我向你展示Magento Admin中的外观：

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

你可以在此处下载此简单模块。它显然不是完整的Magento 2小部件模板, 但仍是一种学习辅助工具。如果你需要更多资源, 或者如果你不熟悉Magento, Magento 2官方文档显然是开始的地方。

最后, 我想提及一些我认为非常有用的个人开发博客。在学习Magento方面, 艾伦·斯托姆(Alan Storm)可能是最具说服力的内容, 我想你也应该查看艾伦·肯特(Alan Kent)的博客。

小部件：全局的重要组成部分

本文的目的是从Magento 2小部件开发和自定义小部件创建的基本逐步教程开始, 为Magento 2中的小部件创建提供指南。我显然是后者的粉丝, 因为自定义解决方案倾向于提供更多的灵活性和功能性。

Magento小部件提供了至关重要的前端功能, 因此可以说, 聪明的自定义小部件可以帮助将你的下一个Magento项目提升到一个新的水平。允许我们实现更多功能, 使用不同的小部件将不同类型的项目添加到主页, 最终, 它们只是为开发人员提供了更多的创作自由。

但这不只是改善用户体验和转换或进行外观精美设计的问题。所有客户显然都是优先考虑的事情, 但是收益却较小, 显而易见。例如, Magento小部件还可以节省大量时间和管理方面的麻烦, 并且每个客户都希望节省工时。

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