Not able to override collapsible.js in magento 2

magento 2 mixin not working
magento 2 extend js
magento 2 override lib js file
magento 2 custom js not working
magento 2 js tutorial
magento 2 create javascript component
customize and create javascript magento 2
magento 2 create js widget

I'm working on Magento EE 2.1.1 and I need to extend activate method functionality which located in lib/web/mage/collapsible.js . but I can't find the right way with Magento documentation and googling, so here are my tries and what was the issue for each:

  1. try 1:

    • created following file:

namespace_module_dir/view/frontend/web/js/collapsible-mixin.js


define([
    'jquery'
], function ($) {
    'use strict';
    var mixin = {
        activate: function () {
            if (!this.options.disabled) {
                if (this.options.animate) {
                    this._animate(showProps);
                } else {

// my custom code goes here ...
                    this.content.show();
                }
                this._open();
            }
        }
    };

    return function (target) {
         return target.extend(mixin);
    };

});

  • created requirejs-config file

namespace_module_dir/view/frontend/requirejs-config.js


    var config = {
    config: {
        mixins: {
            'mage/collapsible': {
                '<namespace_module>/js/collapsible-mixin': true
            }
        }
    }
};

issue is:

  1. try 2:
    • created requirejs-config file

namespace_module_dir/view/frontend/requirejs-config.js


    var config = {
    map: {
        '*': {
            collapsible: '<namespace_module>/js/collapsible-map'
        }
    }
};

issue is: regardless what is the content of collapsible-map.js, it's not getting loaded (collapsible-map.js file is created) even thought I can see my requirejs-config.js content in the auto generated requirejs-config.js file by magento and the defalut magento collapsible.js file is loaded.

  1. try 3:
    • created following file:

namespace_module_dir/view/frontend/web/js/collapsible-map.js


    define([
    'jquery',
    'jquery/ui',
    'mage/collapsible'
], function ($) {
    "use strict";
    $.widget('<namespace_module>.collapsible', $.mage.collapsible, {
        activate: function () {
            if (!this.options.disabled) {
                if (this.options.animate) {
                    this._animate(showProps);
                } else {

                    // custome code goes here ...

                    this.content.show();
                }
                this._open();
            }
        }
    });
    return $.ctv.collapsible;
});
  • created requirejs-config file

namespace_module_dir/view/frontend/requirejs-config.js


var config = {
        map: {
            '*': {
                'mage/collapsible': '<namespace_module>/js/collapsible-mixin'
            }
        }
    };

issue is:

where with debugging found that typeof $.mage.collapsible = undefined

so please tell me what am I missing, and what's the best way to follow?? :(

thanks inadvance ...

To fix your try 3, change the 'mage/collapsible' to just 'collapsible' in the map:

var config = { map: { '*': { 'collapsible': '<namespace_module>/js/collapsible-map' } } };

I suppose the bug was caused by the circular reference: collapsible-map.js was referencing mage/collapsible while mage/collapsible was mapped again to collapsible-map. The alias 'collapsible' is used for mage/collapsible, it is configured in Theme\view\frontend\requirejs-config.js. So you can re-map this alias to your own file, while referencing the real mage/collapsible within your file.

The try 1 and 2 were wrong because mixins can be only applied to UI Components. Which means the component must be extendend from uiClass, uiElement, uiCollection or any other ui component. The collapsible.js is just jQuery widget.

Some useful links:

Exteding components or widgets (which are not the same!): http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/custom_js.html

jQuery widgets: https://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/

not able to override collapsible.js · Issue #7501 · magento/magento2 , created following file: namespace_module_dir/view/frontend/web/js/collapsible-​mixin.js. define([ 'jquery' ], function ($) { 'use strict'; var mixin = {  magento-engcom-team added 2.1.x Fixed in 2.2.x Fixed in 2.3.x Issue: Confirmed Reproduced on 2.1.x labels Nov 30, 2017 magento-engcom-team closed this Nov 30, 2017 Sign up for free to join this conversation on GitHub .

To override collapsible.js this worked for me:

  1. Copy Original FROM: lib/web/mage/collapsible.js TO: app/design/frontend/VENDOR/THEME/web/js/collapsible-custom.js

NOTE: The copied version of collapsible.js has been renamed to collapsible-custom.js

  1. Add a requirejs-config file in our theme directory and map the original collapsible.js file to our new custom one. app/design/frontend/VENDOR/THEME/requirejs-config.js

    var config = {
        "map": {
            "*": {
                "mage/collapsible": "js/collapsible-custom"
            }
        }
    };
    
  2. Refresh your page and check the inspector to see if our collapsible-custom.js has loaded.

Magento 2 - dataPost.js override - get error, There are 2 options available. I use first, because was simpler and work fine. What was wrong - I used map not mixins so this._super(); don't any parent - we  issue is: regardless what is the content of collapsible-map.js, it's not getting loaded (collapsible-map.js file is created) even thought I can see my requirejs-config.js content in the auto generated requirejs-config.js file by magento and the defalut magento collapsible.js file is loaded.

mage.collapsible is a JqueryUi widget. For more, see the documentation of JqueryUi. I'd rather do it like below, instead of copy JS file from core Magento 2 code into theme and modify the function, or just replace the widget with mine but add only one function in it.

This should work, in [my theme dir]/web/mage/my-collapsible-mixin.js:

define([
    'jquery',
    'jquery/ui'
], function ($, wrapper) {
    'use strict';

    return function(target) {
        $.widget("mage.myCollapsible", target, {
            activate: function () {
               if (!this.options.disabled) {
                   if (this.options.animate) {
                       this._animate(showProps);
                   } else {
                      // custom code goes here ...
                      this.content.show();
                   }
                   this._open();
               }

               // Or:
               // this._super();
               // if (!this.options.disabled) { .. custom code .. }
            }
        });
    };
});

Additional suggestion & not tested: replace above variable 'this' with 'target'.

And in require-config.js from [my theme dir]:

var config = {
    config: {
        mixins: {
            'mage/collapsible': {
                'mage/my-collapsible-mixin': true
            }
        }
    }
};

JavaScript mixins, Calendar widget · Collapsible widget · Confirmation widget · Dropdown widget Do not put custom JS files in the `lib/web` directory. 1 2, require(["​Magento_Theme/js/theme"], function(){ }); We should now be able to use the Slick library, for example, on any list that we want to convert into a slider. Since editing Model from the core files is not a good practice, you should instead rewrite Model in Magento 2! Hence, in this tutorial, I am going to teach you how to override models in Magento 2. What you need is a custom module to do that, so let’s begin. Steps to Follow. Create Directories; Configuration of Module; Registration of Module; Override di.xml

JavaScript resources in Magento, js . To be able to extend gallery.js , OrangeCo needs to know the path to it. To get this info, they refer to  Magento 2 Developer Documentation. Mapping JS resources. To make configurations more precise and specific to different modules and themes, requirejs-config.js files can be placed in different locations depending on your needs.

Customizing JavaScript illustration, It is strongly recommended not to change the source code of default Magento components including JS files. However, owing to the business  I have installed Magento CE 2.1.2 in my local system Windows 7(64 bit) Uwamp. Now I have created my custom theme and set it up in the backend. Below are the theme specific files and I have kept some folders like web/css/source , web/fonts , web/images etc. empty, as I want those files to be called directly from parent theme.

How To Override JS File In Magento 2, Magento 2 uses Require JS which is AMD or asynchronous module loader and If you're not familiar with jQuery UI widgets, I strongly suggest visiting learn Now, if we wan't to extend or overwrite it, we'll need to make sure  If you’re using an Magento version 2.0.5 or earlier, see Appendix—Magento file system ownership and appendix (legacy) instead of this topic. In version 2.0.6 and later, Magento does not explicitly set file or directory permissions. This topic provides some basic information about our ownership and permissions guidelines.