Magento 2.4.x后台：基于自定义属性控制商品属性显隐

我已通过Setup->InstallData.php创建了商品自定义属性，代码如下：

class InstallData implements InstallDataInterface
{
    private $eavSetupFactory;

    public function __construct(EavSetupFactory $eavSetupFactory)
    {
        $this->eavSetupFactory = $eavSetupFactory;
    }

    public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
    {
        $setup->startSetup();
        $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);
        $eavSetup->addAttribute(
            \Magento\Catalog\Model\Product::ENTITY,
            'inquiry_attribute_enable',
            [
                'group' => 'Product Inquiry',
                'type' => 'int',
                'backend' => '',
                'frontend' => '',
                'label' => 'Enable',
                'input' => 'boolean',
                'class' => '',
                'source' => \Magento\Eav\Model\Entity\Attribute\Source\Boolean::class,
                'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_GLOBAL,
                'visible' => true,
                'required' => false,
                'user_defined' => false,
                'default' => '',
                'searchable' => false,
                'filterable' => false,
                'comparable' => false,
                'visible_on_front' => false,
                'used_in_product_listing' => true,
                'unique' => false,
                'apply_to' => '',
                'sort_order' => 10
            ]
        );

        $eavSetup->addAttribute(
            \Magento\Catalog\Model\Product::ENTITY,
            'inquiry_attribute_label',
            [
                'group' => 'Product Inquiry',
                'type' => 'text',
                'backend' => '',
                'frontend' => '',
                'label' => 'Label',
                'input' => 'text',
                'class' => '',
                'source' => '',
                'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_GLOBAL,
                'visible' => true,
                'required' => false,
                'user_defined' => false,
                'default' => '',
                'searchable' => false,
                'filterable' => false,
                'comparable' => false,
                'visible_on_front' => false,
                'used_in_product_listing' => true,
                'unique' => false,
                'apply_to' => '',
                'note' => 'Leave label as blank if you just want to hide price without having any inquiry button.',
                'sort_order' => 20
            ]
        );

        $eavSetup->addAttribute(
            \Magento\Catalog\Model\Product::ENTITY,
            'inquiry_attribute_allow_cart',
            [
                'group' => 'Product Inquiry',
                'type' => 'int',
                'backend' => '',
                'frontend' => '',
                'label' => 'Allow Add To Cart',
                'input' => 'boolean',
                'class' => '',
                'source' => \Magento\Eav\Model\Entity\Attribute\Source\Boolean::class,
                'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_GLOBAL,
                'visible' => true,
                'required' => false,
                'user_defined' => false,
                'default' => '',
                'searchable' => false,
                'filterable' => false,
                'comparable' => false,
                'visible_on_front' => false,
                'used_in_product_listing' => true,
                'unique' => false,
                'apply_to' => '',
                'sort_order' => 30
            ]
        );

        $eavSetup->addAttribute(
            \Magento\Catalog\Model\Product::ENTITY,
            'inquiry_attribute_disclose_price',
            [
                'group' => 'Product Inquiry',
                'type' => 'int',
                'backend' => '',
                'frontend' => '',
                'label' => 'Disclose Product Price',
                'input' => 'boolean',
                'class' => '',
                'source' => \Magento\Eav\Model\Entity\Attribute\Source\Boolean::class,
                'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_GLOBAL,
                'visible' => true,
                'required' => false,
                'user_defined' => false,
                'default' => '',
                'searchable' => false,
                'filterable' => false,
                'comparable' => false,
                'visible_on_front' => false,
                'used_in_product_listing' => true,
                'unique' => false,
                'apply_to' => '',
                'sort_order' => 40
            ]
        );

        // 获取默认属性集ID
        $attributeSetId = $eavSetup->getDefaultAttributeSetId(\Magento\Catalog\Model\Product::ENTITY);
        $attributeGroupName = 'Product Inquiry';

        // 添加自定义属性组
        $eavSetup->addAttributeGroup(
            \Magento\Catalog\Model\Product::ENTITY,
            $attributeSetId,
            $attributeGroupName,
            100
        );

        // 将属性添加到属性组
        $eavSetup->addAttributeToGroup(
            \Magento\Catalog\Model\Product::ENTITY,
            $attributeSetId,
            $attributeGroupName,
            'inquiry_attribute_enable', // 属性代码
            10
        );

        $eavSetup->addAttributeToGroup(
            \Magento\Catalog\Model\Product::ENTITY,
            $attributeSetId,
            $attributeGroupName, // 属性组
            'inquiry_attribute_label',
            20
        );

        $eavSetup->addAttributeToGroup(
            \Magento\Catalog\Model\Product::ENTITY,
            $attributeSetId,
            $attributeGroupName,
            'inquiry_attribute_allow_cart',
            30
        );

        $eavSetup->addAttributeToGroup(
            \Magento\Catalog\Model\Product::ENTITY,
            $attributeSetId,
            $attributeGroupName,
            'inquiry_attribute_disclose_price',
            40
        );

        $setup->endSetup();
    }
}

现在需要实现：点击inquiry_attribute_enable开关时，控制Label、Allow Add To Cart和Disclose Product Price字段的显示与隐藏。

解决方案 #

通过前端JS监听开关状态，控制对应属性字段的显隐，具体步骤如下：

1. 创建自定义JS组件 #

在你的模块目录下创建文件app/code/[Vendor]/[Module]/view/adminhtml/web/js/product/inquiry-attribute-toggle.js：

define([
    'jquery',
    'mage/adminhtml/form'
], function ($) {
    'use strict';

    return function (config) {
        const enableToggle = $('#' + config.enableAttributeId);
        const dependentAttributes = config.dependentAttributeIds;

        // 初始化时根据开关状态设置属性显隐
        toggleDependentAttributes(enableToggle.is(':checked'));

        // 监听开关变化事件
        enableToggle.on('change', function () {
            toggleDependentAttributes($(this).is(':checked'));
        });

        // 控制属性显隐的函数
        function toggleDependentAttributes(isEnabled) {
            dependentAttributes.forEach(function (attrId) {
                const attrField = $('#' + attrId).closest('.field');
                isEnabled ? attrField.show() : attrField.hide();
            });
        }
    };
});

2. 配置布局加载JS #

创建/修改布局文件app/code/[Vendor]/[Module]/view/adminhtml/layout/catalog_product_edit.xml：

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Backend\Block\Template" name="inquiry.attribute.toggle" template="[Vendor]_[Module]::product/inquiry-attribute-toggle.phtml" />
        </referenceContainer>
    </body>
</page>

3. 创建模板传递参数 #

创建模板文件app/code/[Vendor]/[Module]/view/adminhtml/templates/product/inquiry-attribute-toggle.phtml：

<?php
/** @var \Magento\Backend\Block\Template $block */
$enableAttributeCode = 'inquiry_attribute_enable';
$dependentAttributeCodes = [
    'inquiry_attribute_label',
    'inquiry_attribute_allow_cart',
    'inquiry_attribute_disclose_price'
];

// 生成Magento admin中属性字段的ID（格式为product_form_product_form_属性代码）
$enableAttributeId = 'product_form_product_form_' . $enableAttributeCode;
$dependentAttributeIds = array_map(function ($code) {
    return 'product_form_product_form_' . $code;
}, $dependentAttributeCodes);
?>

<script type="text/x-magento-init">
    {
        "*": {
            "[Vendor]_[Module]/js/product/inquiry-attribute-toggle": {
                "enableAttributeId": "<?= $block->escapeJs($enableAttributeId) ?>",
                "dependentAttributeIds": <?= json_encode($dependentAttributeIds) ?>
            }
        }
    }
</script>

4. 清理缓存并测试 #

执行以下命令清理缓存后，进入商品编辑页面测试开关功能：

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

注意事项 #

• 替换代码中的[Vendor]和[Module]为你实际的模块厂商名和模块名
• JS会在页面加载时自动根据开关初始状态设置属性显隐，避免状态不一致

内容的提问来源于stack exchange，提问作者Nihal Shantha