How to add custom JavaScript and mixins in Magento 2 with RequireJS – Today we will see how to add custom javascript file and a mixin file to same RequireJS file in custom module. I recently faced a practical issue to add a javascript and a mixin file to RequireJs file to one of my custom checkout module.
We can simply add an external file to RequireJs file like below.
|
1 2 3 4 5 6 7 |
var config = { map: { '*': { 'fileupload': 'Ayakil_CheckoutCustomField/js/fileupload' } } }; |
And also we can add a mixin file like below.
|
1 2 3 4 5 6 7 8 9 |
var config = { config: { mixins: { 'Magento_Checkout/js/action/set-shipping-information': { 'Ayakil_CheckoutCustomField/js/action/set-shipping-information-mixin': true } } } }; |
Here is the sample module directory structure which contains custom javascript file and mixin file.
But i want to add both JavaScript file and mixin to one RequiJs file. So we can add both in requirejs-config.js file like below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var config = { map: { '*': { 'fileupload': 'Ayakil_CheckoutCustomField/js/fileupload' } }, config: { mixins: { 'Magento_Checkout/js/action/set-shipping-information': { 'Ayakil_CheckoutCustomField/js/action/set-shipping-information-mixin': true } } } }; |
Like this we can add javascript file and mixin file in requirejs-config.js file. Hope this will help you in your magento custom development.
You can read more interesting articles on create graphql module in magento 2.
Read and share your thought + share this article too 🙂 .