Admin product «Custom Options» tab controls («Import Options», «Add New Option» buttons) do not work when non-English locale is used


(Dmitry Fedyuk) #1

The wrong code is:

The bug is quite tricky, let’s explain it.
What is Custom_Options html element id?
This is an id autogenerated by jQuery UI library based on the element’s title attribute value:

So the «Custom Options» tab functionality will not work with non-English locale because there will no an element with Custom_Options html id.

There are multiple ways to fix the issue. I propose 2 of them: the first is simple and the second is more resistant to the future code changes.

Fix #1 (simple)

Replace the wrong line

with the new one:

var fieldSet = $("[aria-labelledby='product_info_tabs_customer_options']");


var fieldSet = $('#product-custom-options-wrapper').parent();

Fix #2 (more resistant to the future changes)

Leys’s look closely at the jQuery UI _tabId method implementation:

As you can see, we can set up aria-controls attribute for the contailer’s LI element and it will be used as the id for the tabs widget.

In can be done here: