Magento 2.2.2重写Adminhtml Widget floating-header.js失败求助

I’ve run into this exact issue with Magento 2.2.x admin JS rewrites before—let’s walk through the common mistakes that might be blocking your custom script from loading, and fix them one by one:

1. Correct Your requirejs-config.js Path Mapping #

Your current map entry is missing the module namespace prefix, which Magento needs to resolve the file correctly. Update your app/code/Vendor/Module/view/adminhtml/requirejs-config.js to:

var config = {
    map: {
        '*': {
            'mage/backend/floating-header': 'Vendor_Module/js/floating-header-custom'
        }
    }
};

Magento uses the Vendor_Module prefix to locate files in your module’s web directory, so omitting this will cause it to look for the file in the wrong place.

2. Verify Your Custom JS File Structure #

Make sure your floating-header-custom.js uses the correct Magento widget inheritance pattern. It should wrap the widget definition in a define call that depends on the original component:

define([
    'jquery',
    'mage/backend/floating-header'
], function($) {
    'use strict';

    // Extend the original floating header widget
    $.widget('vendor.floatingHeaderCustom', $.mage.floatingHeader, {
        _create: function() {
            // Add your custom logic here
            console.log('Custom floating header loaded successfully!');
            
            // Uncomment below if you want to retain the original functionality
            // this._super();
        }
    });

    return $.vendor.floatingHeaderCustom;
});

Note the unique widget name (vendor.floatingHeaderCustom)—this avoids conflicts with the original mage.floatingHeader widget.

3. Clear Caches and Deploy Static Content #

Magento 2.2.x aggressively caches admin static files, so even if your code is correct, old cached files might be blocking your script. Run these commands from your Magento root:

# Clean and flush all caches
php bin/magento cache:clean
php bin/magento cache:flush

# Force deploy adminhtml static content (critical for 2.2.x)
php bin/magento setup:static-content:deploy -f

The -f flag ensures static files are overwritten, which is often necessary for admin scripts that don’t auto-generate on first load.

4. Validate Module and Mapping Status #

• First, confirm your module is enabled:

  php bin/magento module:status Vendor_Module
  

  If it’s disabled, enable it with php bin/magento module:enable Vendor_Module followed by php bin/magento setup:upgrade.

• To check if your requirejs mapping is active, open your browser’s developer console (F12) on an admin page and run:

  require.s.contexts._.config.map['*']['mage/backend/floating-header']
  

  If this returns Vendor_Module/js/floating-header-custom, your mapping is working—if not, double-check your requirejs-config.js syntax and file path.

5. Check for Conflicting Rewrites #

If another module is also rewriting mage/backend/floating-header, it might be overriding your changes. You can check for conflicting modules by running:

grep -r "mage/backend/floating-header" app/code/ vendor/

This will show all modules that map or modify this component. If you find conflicts, you’ll need to adjust your module’s load order (via module.xml dependencies) to ensure yours loads last.

After going through these steps, refresh your admin page and check the Network tab—your floating-header-custom.js should now load, and your custom _create method should execute.

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