How to override filters.js in to custom theme?

Question

How to override vendor/magento/module-ui/view/base/web/js/grid/filters/filters.js into custom theme?

Answer 1

I got the solution of this, you need to create the module for the same. follow steps.

1. Create requirejs-config.js under <Namespace>\<Module>\view\base\requirejs-config.js with below code.

   var config = {
     "map": {
       "*": {
         "Magento_Ui/js/grid/filters/filters": 
             "<Namespace>_<Module>/js/grid/filters/filters"
       }
     }
    };
   

2. override filter.js to below path.

   <Namespace>\<Module>\view\base\web\js\grid\filters\filters.js
   

Done the overriding :)

Answer 2

In your theme folder create

Magento_Ui/web/js/grid/filters/

and add your new filters.js to that dir.

Answer 3

Seeing the logic in the path above, the custom theme path would be something like:

app/design/frontend/CustomVendor/theme-custom/Magento_Ui/web/js/grid/filters/filters.js

the base folder can be overwritten just like the frontend folder in your custom theme but becouse your custom theme is already a pure frontend theme we skip the view/base/ part

Answer 4

You can do it via a module. Assume it's called Example. Now you can follow these steps :

1 Create requirejs-config.js under Test/Example/view/frontend/requirejs-config.js add this

var config = {
map: {
    '*': {
        'Magento_Ui/view/base/web/js/grid/filters/filters':'Test_Example/view/base/web/js/grid/filters/filters'
    }
}

};

2 create the file Test/Example/view/base/web/js/grid/filters/filters.js with your content. For testing you can add a console.log in your new file filters.js. Don't forget to clean the cache and to regenerate public resources.

Good luck !!! Happy Coding !!!