Magento后台产品编辑页保存按钮触发JS函数的位置咨询

我来帮你捋清楚这个问题，其实不用盲目尝试各种模板文件，按照Magento的开发规范来做才靠谱，而且不会在系统升级时丢失修改：

最优方案：通过自定义模块注入JS（推荐） #

这种方式是Magento官方推荐的，不会修改核心文件，安全性更高：

1. 创建布局文件绑定JS到产品编辑页
   在你的自定义模块中（如果还没有自定义模块，建议先创建一个），新建布局文件：
   app/code/YourVendor/YourModule/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">
    <head>
        <script src="YourVendor_YourModule::js/product-save-handler.js"/>
    </head>
</page>

这个文件的作用是把我们的自定义JS注入到产品编辑页面的头部。

2. 编写自定义JS文件
   在模块的adminhtml web目录下新建JS文件：
   app/code/YourVendor/YourModule/view/adminhtml/web/js/product-save-handler.js
   内容如下：

require(['jquery', 'mage/adminhtml/form'], function($){
    $(document).ready(function() {
        // 监听保存按钮的点击事件
        $('.save-button').on('click', function() {
            myFunction(); // 调用你的自定义函数
        });

        // 额外监听表单提交（防止用户用回车键触发保存）
        $('form#product_edit_form').on('submit', function() {
            myFunction();
            return true; // 允许表单正常提交
        });
    });

    // 你的自定义函数
    function myFunction() {
        console.log('保存按钮已触发！');
        // 在这里编写你的业务逻辑
    }
});

这里用require加载jQuery和Magento的表单组件，确保依赖正确；同时监听了按钮点击和表单提交两种触发保存的场景，覆盖更全面。

3. 生效模块
   执行以下命令让模块生效：

bin/magento setup:upgrade
bin/magento setup:static-content:deploy -f
bin/magento cache:clean

临时测试方案（不推荐用于生产环境） #

如果只是临时测试，不想创建模块，可以直接修改产品编辑的核心模板文件（但升级Magento时会被覆盖）：
找到vendor/magento/module-catalog/view/adminhtml/templates/product/edit.phtml，在文件末尾添加以下代码：

<script>
require(['jquery'], function($){
    $(document).ready(function() {
        $('.save-button').click(function(){
            myFunction();
        });

        function myFunction() {
            console.log('保存按钮触发！');
            // 你的逻辑
        }
    });
});
</script>

核心要点：不要把函数随便丢到无关模板里，必须确保JS代码加载在产品编辑页面，并且依赖的jQuery已经就绪，用requirejs的方式管理依赖是Magento后台的标准做法。

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