I have to implement droppick select box in our project. I used the theme to add the main droppick js. So that I added the below code in ../app/design/frontend/Themename/newtheme/Magento_Theme/requirejs-config.js
var config = {
map: {
'*': {
dropkick: 'Magento_Theme/js/dropkick'
}
}
};
then added the droppick.js file (main js to make work the droppick select box) in the path of .../app/design/frontend/Themename/newtheme/Magento_Theme/web/js
after that included the main css file (dropkick.css) for the droppick in the below path ../app/design/frontend/Themename/newtheme/web/css
and it's called via layout like below in theme ../frontend/Korla/Themename/Magento_Theme/layout/default.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/dropkick.css" />
</head>
</page>
Then I implement the droppick select box in my custom script
require(['jquery','dropkick', 'jquery/ui'], function($){
jQuery(document).ready(function(){
jQuery('.super-attribute-select').dropkick();
//to implement the droppick select box for the configurable options select box
});
});
JS is called fine. But in the configurable product page, it's having some problem with the configurable options. Select box is not listing the options. I'm getting the below error
Uncaught TypeError: Cannot read property 'length' of undefined(…)configurable.js:395
it comes from this line of code in configurable.js
for (i = element.options.length - 1; i >= 0; i--) {
How to solve this problem? Any help is appreciated...
