accordion ui widget name conflict

[shabith]

Steps to reproduce

1. implement a jQueryUI Accordion inside a jQueryUI widget

define([
   "jquery",
   "jquery/ui"
], function ($) {
   "use strict"

   $.widget("Ns.help", {
        _create: function () {

        $('#help').accordion({
           active: 2
        });

        }
    });

   return $.Ns.help;
});

Expected result

1. show jQueryUI accordion

Actual result

1. show mage accordion

In detail

both plugins has the same name but different name space ($.mage.accordion and $.ui.accordion)
So when we try to implement an accordion it will create a naming conflict.

Solution

At the moment only possible way to avoid this conflict is by using $.ui.bridge

$.widget.bridge( "mage_accordion", $.mage.accordion );
$.widget.bridge( "ui_accordion", $.ui.accordion );

// then call it with...
$('#help').ui_accordion({
           active: 2
        });

[piotrekkaminski]

@guz-anton @vkorotun can you look into it?

[veloraven]

@shabith is this issue still actual?
If it is please specify Magento version you are running.

[shabith]

@veloraven yes! the issue still exists.
Magento ver. 2.1.2

[ennostuurman]

@shabith I came across your post looking for a way to use and extend jQuery UI accordion in a custom Magento 2 theme.

I fixed it avoiding the collision between mage.accordion and jQuery UI accordion (accordion is mapped to mage.accordion in vendor/magento/module-theme/view/frontend/requirejs-config.js)

This solution is based upon Magento devdocs (http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/js_practice.html) and the jQuery UI widget documentation ( http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/ ).

1. Adjust your custom js file to extend the jquery/ui accordion:

define([
    "jquery",
    "jquery/ui"
], function ($) {
    "use strict"
        $.widget("customnamespace.accordion", $.ui.accordion, {
        });
    return $.customnamespace.accordion;
});

2. Namespace your local js accordion file:

path-to-your-file/customnamespace-accordion.js

3. Create a requirejs-config.js in your theme or module with the following content:

var config = {
    map: {
        "*": {
            "customnamespace.accordion" : "path-to-your-file/customnamespace-accordion"
        }
    }
};

4. Now you can call your custom accordion with data-mage-init in your template. An example with default jQuery UI accordion attributes:

<nav data-mage-init='{"customnamespace.accordion": {"active": false, "collapsible": true, "heightStyle": "content", "icons": false}}'

[KrystynaKabannyk]

Hello @shabith, thank you for reporting this issue, however this is not the one widget name that conflicts with jQuery UI. To fix the described issue we need to change the entire architecture of Javascript widgets, and unfortunately we don't have plans to change it in nearest future. So, please follow the suggestions, given to you above to fix your issue, and I have to close this bug report.