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

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

2017年4月28日发布 in 发展历程
Magento 2:动态商店配置字段
动态商店配置字段
2017年4月3日
如何通过关键字研究增加自然流量
2017年8月2日

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

It’在Magento 2中需要自定义窗口小部件并不常见。它们提供了相当多的精心制作且具有易于使用的自定义窗口小部件。但是,有时您需要更改窗口小部件的功能或增加自定义选项的选择,并且为此,您需要创建自己的窗口小部件。在本文中,我们将研究如何创建扩展核心小部件功能的小部件。我们将扩展“目录产品列表”小部件,以便我们可以更改产品的订购方式。

创建扩展

Before we can 创建 a 小部件, we need somewhere to put it. For this, we need a vendor folder 在 app\code and a 模组 folder 在 the vendor folder. For the sake of this 文章, I will be using app\code\ClassyLlama\SortedProductsWidget. In the 模组 folder we need two files: registration.php and etc\module.xml.

registration.php

的PHP
1
2
3
4
5
6
<?php
\Magento\构架\零件\零件Registrar ::寄存器(
    \Magento\构架\零件\零件Registrar ::模组,
    'ClassyLlama_SortedProductsWidget',
    __DIR__
);

etc\module.xml

XHTML
1
2
3
4
5
6
7
8
9
<?XML文件 ="1.0"?>
<config XML文件ns:si="http://www.w3.org/2001/XMLSchema-instance"
        si:noNamespaceSchemaLocation=“ urn:magento:framework:Module / etc / 模组.xsd”>
    <module 名称=“ 优雅的骆马_SortedProductsWidget” setup_version=“ 1.0.0” >
        <sequence>
            <module 名称=“ Magento_CatalogWidget”/>
        </sequence>
    </module>
</config>

As this is somewhat of an advanced tutorial, I assume that you know why these files need to be present and will not be going 在 -depth with their code. The 上ly thing I will mention is the <sequence> tag 在 etc\module.xml, which is basically telling Magento to load Magento_CatalogWidget before our extension.

客制化

布局

现在我们’ve 创建d the extension, we can start building the 小部件. In order to 创建 the layout of the 小部件, we must 创建 etc\widget.xml.

etc\module.xml

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<?XML文件 ="1.0" 编码方式=“ UTF-8”?>
<widgets XML文件ns:si="http://www.w3.org/2001/XMLSchema-instance"
      si:noNamespaceSchemaLocation=“ ur:magento:模块:Magento_Widget:etc / 小部件.xsd”>
<widget ID=“ 类yllama_products_list” =“ 优雅的骆马 \ SortedProductsWidget \ 块 \ 产品 \ 产品列表”
         placeholder_image=“ 优雅的骆马_SortedProductsWidget :: images / 类yllama_widget_block.png”>
     <label 翻译=“真正”>排序产品清单</label>
     <description>Sorted 目录产品列表</description>
     <parameters>
         <parameter 名称=“标题” si:类型=“文本” 需要=“假” 可见=“真正”>
             <label 翻译=“真正”>标题</label>
         </parameter>
         <parameter 名称=“ products_sort_by” si:类型=“选择” 可见=“真正”
                    source_model=“ 优雅的骆马 \ SortedProductsWidget \ 模型 \ 排序方式”>
             <label 翻译=“真正”>按产品分类</label>
         </parameter>
         <parameter 名称=“ products_sort_order” si:类型=“选择” 可见=“真正”
                    source_model=“ 优雅的骆马 \ SortedProductsWidget \ 模型 \ 排序”>
             <label 翻译=“真正”>排序产品订单</label></parameter>
         <parameter 名称=“ show_pager” si:类型=“选择” 可见=“真正”
                    source_model=“ Magento \ Config \ 模型 \ Config \ Source \ Yesno”>
             <label 翻译=“真正”>显示页面控制</label>
         </parameter>
         <parameter 名称=“ products_per_page” si:类型=“文本” 需要=“真正” 可见=“真正”>
             <label 翻译=“真正”>每页产品数</label>
             <depends>
                 <parameter 名称=“ show_pager” ="1" />
             </depends>
             <value>5</value>
         </parameter>
         <parameter 名称=“ products_count” si:类型=“文本” 需要=“真正” 可见=“真正”>
             <label 翻译=“真正”>产品展示数量</label>
             <value>10</value>
         </parameter>
         <parameter 名称=“模板” si:类型=“选择” 需要=“真正” 可见=“真正”>
             <label 翻译=“真正”>模板</label>
             <options>
                 <option 名称=“默认” =“ Magento_CatalogWidget :: product / 小部件 / content / grid.phtml” 已选=“真正”>
                     <label 翻译=“真正”>产品网格模板</label>
                 </option>
             </options>
         </parameter>
         <parameter 名称=“ cache_lifetime” si:类型=“文本” 可见=“真正”>
             <label 翻译=“真正”>缓存生存时间(秒)</label>
             <description 翻译=“真正”>如果未设置,则默认为86400。要立即刷新,请清除“阻止HTML输出”缓存。</description>
         </parameter>
         <parameter 名称=“健康)状况” si:类型=“条件” 可见=“真正” 需要=“真正” 排序="10"
                    =“ Magento \ CatalogWidget \ 块 \ 产品 \ Widget \ 条件”>
             <label 翻译=“真正”>条件</label>
         </parameter>
     </parameters>
</widget>
</widgets>

You can see that we 创建 a <widget> 在 side a <widgets> tag. The <widget> tag contains 参数 for our 小部件 配置uration. The ID for our 小部件 is a specific 名称 that you want to use for your 小部件. It can be anything, but for this tutorial we called it 类yllama_products_list. The is a block that we will 创建 soon; it controls how the 小部件 actually 功能s (we will be extending the 功能ality of the Magento\CatalogWidget\Block\Product\ProductsList block). The placeholder_image is just an image that shows 在 the WYSIWYG editor of the backend of Magento. It’没必要,但是在查看所见即所得时会增加很好的触感。

在小部件内,您可以看到我们’ve listed 参数, which are the 在 puts that we need from the WYSIWYG editor. Each of these 参数 having a 名称, 类型, 需要, and 可见 选项. The 名称 should be logical, as you will need to reference it 在 the 小部件 block. Since we are extending the base Magento block, we have used the same 名称s as the 上es 在 the core product list 小部件. The 类型 is simply what 类型 of 在 put you want to use 在 the backend when 配置uring the 小部件. 可见 controls the 选项’配置时在窗体中的可见性。在每个参数标签内,’s a <label> tag that sets a 标签 for the 选项. You’ll also notice that some 参数 have a <depends> tag. This states that the given 参数 will 上ly appear when the 参数 specified 在 the 依靠 tag has the 值 that is set 在 this tag. Some 参数 also have a <value> tag that sets the default 值 for the given 参数. Finally, the 参数 that have their 类型 as select (or anything that requires predetermined 选项) need 上e of two things. They need either a source_model defined like our products_sort_by and products_sort_order 参数 or an <options> tag like our template 参数.

创建块

现在我们 understand the 小部件.xml file, we can 创建 our ‘ProductsList.php’ file. This file should be located at 块\Product\ProductsList.php.

块\Product\ProductsList.php

的PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?php
命名空间 优雅的骆马\SortedProductsWidget\\产品;
产品列表 延伸 \Magento\CatalogWidget\\产品\产品列表
{
    const DEFAULT_SORT_BY = 'ID';
    
    const DEFAULT_SORT_ORDER = 'asc';
    
    上市 功能 创建Collection()
    {
        $收藏 = $ this->productCollectionFactory->创建();
        $收藏->setVisibility($ this->catalogProductVisibility->getVisibleInCatalogIds());
        
        $收藏 = $ this->_addProductAttributesAndPrices($收藏)
            ->addStoreFilter()
            ->setPageSize($ this->getPageSize())
            ->setCurPage($ this->getRequest()->getParam($ this->getData('page_var_name'), 1))
            ->setOrder($ this->getSortBy(), $ this->getSortOrder());
            
        $ conditions = $ this->getConditions();
        $ conditions->collectValidatedAttributes($收藏);
        $ this->sqlBuilder->attachConditionToCollection($收藏, $ conditions);
        
        返回 $收藏;
    }
    
    上市 功能 getSortBy()
    {
        如果 (!$ this->hasData(“ products_sort_by”)) {
            $ this->setData(“ products_sort_by”, ::DEFAULT_SORT_BY);
        }
        返回 $ this->getData(“ products_sort_by”);
    }
    
    上市 功能 getSortOrder()
    {
        如果 (!$ this->hasData(“ products_sort_order” )) {
            $ this->setData(“ products_sort_order” , ::DEFAULT_SORT_ORDER);
        }
        返回 $ this->getData(“ products_sort_order” );
    }
}

As I mentioned earlier, we are extending the \Magento\CatalogWidget\Block\Product\ProductsList.php file, so we don’t need to rewrite any methods that are already written for us. However, we did rewrite the 创建Collection() 功能 and added two new 功能s. The 创建Collection() 功能 didn’t change much, we just set the order of the collection using setOrder(). This 功能 takes two 参数: a string containing what you want to sort by, and a string containing the order 在 which you want to sort (ascending or descending).

如果您看一看我们的新功能,我们可以看到它们到底是什么’re doing.

的PHP
1
2
3
4
5
6
7
8
上市 功能 getSortBy()
    {
        如果 (!$ this->hasData(“ products_sort_by”)) {
            $ this->setData(“ products_sort_by”, ::DEFAULT_SORT_BY);
        }
        返回 $ this->getData(“ products_sort_by”);
    }
  

The first thing this method does is check whether the user has set the 小部件 参数 with the 名称 products_sort_by. If not, then it sets products_sort_by to the default 值 that we defined earlier 在 the code. Finally, it 返回s the data that is associated with products_sort_by.

创建模型

现在我们’创建了我们的小部件’s layout and its block, we can 创建 our models. These models are the files that are assigned as source_model for our 小部件 参数 在 the layout. These files are simple, their 上ly job being to 返回 an array of 选项. You will need to 创建 two model files for this tutorial: 模型\SortBy.php and 模型\SortOrder.php.

模型\SortBy.php

的PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
命名空间 优雅的骆马\SortedProductsWidget\模型;
排序方式 实施 \Magento\构架\选项\数组接口
{
    上市 功能 toOptionArray()
    {
        返回 [
            ['值' => 'ID', '标签' => __(“产品ID”)],
            ['值' => '名称', '标签' => __('名称')],
            ['值' => '价钱', '标签' => __('价钱')]
        ];
    }
}

模型\SortOrder.php

的PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
命名空间 优雅的骆马\SortedProductsWidget\模型;
排序 实施 \Magento\构架\选项\数组接口
{
    上市 功能 toOptionArray()
    {
        返回 [
            ['值' => 'asc', '标签' => __('上升')],
            ['值' => 'desc', '标签' => __(“降序”)]
        ];
    }
}

These files 上ly have 上e method each: toOptionArray(). This 返回s an array of the possible 选项 for your 小部件 参数. Each 选项 has a , which is what the 值 of an 选项 is, and a 标签, which is what the user sees when viewing the 选项.

测验

现在我们’创建了我们的小部件, we can test it and make sure everything works as it should. We’只是要将我们的窗口小部件添加到主页,因此浏览后端到该页面的所见即所得,然后添加一个窗口小部件。如您所见,我们’我们已经成功选择了我们的窗口小部件类型并设置了我们的选项。

小部件选项

现在我们’创建并配置了我们的扩展程序,让’s转到主页,看看它是否有效!

小部件显示

确实如此!恭喜你’我刚刚在Magento 2中创建了一个自定义小部件!

3 评论s

  1. 卫星 说:

    嗨,感谢您的指导。
    根据此示例,如何添加/显示左侧边栏和导航?

  2. 史密斯 说:

    Zach很有帮助!辛苦了
    我试图在我们的magento 2安装中实现此产品小部件。已成功配置。在商店的前端产品展示得很好。但是分页链接就像 http://my.store.com/?=2, http://my.store.com/?=3 等。分页似乎无法正常工作。您能帮忙解决这个问题吗?

  3. 罗希特(Rohit Jaiswal) 说:

    您添加了小部件的标题,在前端渲染时标题来自哪里?

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

该网站使用Akismet减少垃圾邮件。 了解如何处理您的评论数据.

最近的帖子查看全部
2020年10月22日
通过 阿什莉·科利弗 商业见解, 优雅的骆马 2020年10月22日
毫无疑问,2020年是历史性的一年。火灾,全球大流行,暴动,老虎王等’只是冰山一角。如 […]