Magento2 给后台商品列表(Grid)添加列

2019年2月18日 浏览量 79 4 min read
Magento2 给后台商品列表(Grid)添加列

如果要在列中显示的值是产品属性,则可以轻松地将列添加到产品网格中。它们已存在于“列控件”下的“产品网格”工具栏中。您只需选中/取消选中要在网格中显示或删除的列。但是,如果您想显示数量和网站等非产品属性的值,该怎么办?在这篇博客中,您将学习如何将这样的值添加到产品网格中。

 

介绍

由于可以打开/关闭每个产品的库存管理,我们将向产品网格添加一个新列,如果库存管理已打开或关闭,将显示该列。
对于所有的代码示例,我创建了一个名为Magease_Custom的MaMeto 2模块。

重要的是Magento的Magento_Catalog模块在我们的模块之前加载,这就是我们将在module.xml文件中的序列标签下添加它的原因

app/code/Magease/Custom/etc/module.xml

<?xml version="1.0" encoding="utf-8" ?>
 
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Magease_Custom" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Catalog"/>
        </sequence>
    </module>
</config>

编辑module.xml后,我们需要使用console命令更新app/etc/config.php文件:

php bin/magento setup:upgrade

产品列表UI组件实例

为了呈现产品网格,Magneto 2使用名为product_listing的列表 UI组件实例和XML配置文件,它是Magento_Catalog/view/adminhtml/ui_component/product_listing.xml如果我们想要自定义它,我们需要在模块中创建一个具有相同路径和名称的文件。

app/code/Magease/Custom/view/adminhtml/ui_component/product_listing.xml

<?xml version="1.0" encoding="utf-8"?>
 
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <columns name="product_columns">
        <column name="manage_stock" component="Magento_Ui/js/grid/columns/select" sortOrder="76">
            <settings>
                <addField>true</addField>
                <options class="Magento\Config\Model\Config\Source\Yesno"/>
                <filter>select</filter>
                <dataType>select</dataType>
                <sortable>false</sortable>
                <label translate="true">Manage Stock</label>
            </settings>
        </column>
    </columns>
</listing>

要添加新列,我们需要从原始配置文件中引用名为product_columns的 UI组件,并将新列添加到其中。我们命名我们的专栏manage_stock与标签管理库存

运行此控制台命令以清除缓存:

php bin/magneto cache:clean config

在我们清理缓存之后,我们应该在产品网格中看到我们的新列但是没有数据,这是因为我们没有将库存管理数据添加到产品集合中。

产品列表数据提供商

将库存管理数据添加到产品集合的最佳位置是product_listing UI组件实例使用的数据提供程序类

Magento_Catalog/view/adminhtml/ui_component/product_listing.xml

<dataSource name="product_listing_data_source" component="Magento_Ui/js/grid/provider">
    <settings>
        <storageConfig>
            <param name="dataScope" xsi:type="string">filters.store_id</param>
        </storageConfig>
        <updateUrl path="mui/index/render"/>
    </settings>
    <aclResource>Magento_Catalog::products</aclResource>
    <dataProvider class="Magento\Catalog\Ui\DataProvider\Product\ProductDataProvider" name="product_listing_data_source">
        <settings>
            <requestFieldName>id</requestFieldName>
            <primaryFieldName>entity_id</primaryFieldName>
        </settings>
    </dataProvider>
</dataSource>

如果我们查看dataSource UI组件,我们将看到dataProvider类是Magento\Catalog\Ui\DataProvider\Product\ProductDataProvider.

如果我们查看这个数据提供程序类,我们将看到两个属性addFieldStrategiesaddFilterStrategies,它们都是数组。我们可以对特定列(字段)的集合执行其他策略,它们分别在数据提供者的addFieldaddFilter方法中调用,我们将为我们的库存管理专栏创建自己的策略。

管理库存领域战略

首先,我们将创建一个现场策略,将库存管理状态添加到产品集合中。

Magease\Custom\Ui\DataProvider\Product\AddManageStockFieldToCollection

<?php
namespace Magease\Custom\Ui\DataProvider\Product;
 
class AddManageStockFieldToCollection implements \Magento\Ui\DataProvider\AddFieldToCollectionInterface
{
    public function addField(\Magento\Framework\Data\Collection $collection, $field, $alias = null)
    {
        $collection->joinField(
            'manage_stock',
            'cataloginventory_stock_item',
            'manage_stock',
            'product_id=entity_id',
            null,
            'left'
        );
    }
}

AddManageStockFieldToCollection字段策略中,我们Magento\Ui\DataProvider\AddFieldToCollectionInterface接口实现了addField方法库存管理的状态来自该manage_stockcataloginventory_stock_item数据库表。我们使用此信息和Magento\Eav\Model\Entity\Collection\AbstractCollection::joinField方法将库存管理状态添加到产品集合中。

管理库存过滤策略

当有人想要通过库存管理状态过滤网格数据时,我们需要创建这种过滤策略。

Magease\自定义\ UI \ DataProvider的\产品\ AddManageStockFilterToCollection

<?php
namespace Magease\Custom\Ui\DataProvider\Product;
 
class AddManageStockFilterToCollection implements \Magento\Ui\DataProvider\AddFilterToCollectionInterface
{
    public function addFilter(\Magento\Framework\Data\Collection $collection, $field, $condition = null)
    {
        if (isset($condition['eq'])) {
            $collection->addFieldToFilter($field, $condition);
        }
    }
}

AddManageStockFilterToCollection过滤器策略中,我们Magento\Ui\DataProvider\AddFilterToCollectionInterface实现了addFilter方法如果网格被库存管理状态过滤,我们会将过滤器转换转发到Magento\Eav\Model\Entity\Collection\AbstractCollection::addFieldToFilter方法。

将策略添加到产品列表数据提供程序

如果我们想要使用刚刚创建的策略,我们需要将它们添加到product_listing数据提供程序。我们将在di.xml文件中执行  操作。

app/code/Magease/Custom/etc/adminhtml/di.xml

<?xml version="1.0" encoding="utf-8" ?>
 
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Catalog\Ui\DataProvider\Product\ProductDataProvider">
        <arguments>
            <argument name="addFieldStrategies" xsi:type="array">
                <item name="manage_stock" xsi:type="object">Magease\Custom\Ui\DataProvider\Product\AddManageStockFieldToCollection</item>
            </argument>
            <argument name="addFilterStrategies" xsi:type="array">
                <item name="manage_stock" xsi:type="object">Magease\Custom\Ui\DataProvider\Product\AddManageStockFilterToCollection</item>
            </argument>
        </arguments>
    </type>
</config>

运行此控制台命令以清除缓存:

php bin/magneto cache:clean config

清理缓存后,我们应该在产品网格中看到包含数据的新列

Previous article:
Next article:
Comments
发表评论,留下你的足迹
我们不会公开你的邮箱地址

是否允许我们在发布新内容或者进行促销活动向您发送消息?

Remind me later

Thank you! Please check your email inbox to confirm.

Oops! Notifications are disabled.

© 2014-2023 www.magease.com. All Rights Reserved. 寰云网络 版权所有    鲁ICP备 14014975号-1