Let’s say that you have a specific requirement to convert a simple drop-down into drop-down with color in the background.
Step 1: Add the “drop-down” class in the mentioned file “app/design/frontend/Magemonkey/luma_child/Magento_ConfigurableProduct/templates/product/view/type/options/configurable.phtml”
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="field configurable required color"> <label class="label" for="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>"> <span><?= $block->escapeHtml($_attribute->getProductAttribute()->getStoreLabel()) ?></span> </label> <div class="control drop-down"> <select name="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]" data-selector="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]" data-validate="{required:true}" id="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>" class="super-attribute-select"> <option value=""><?= /* @escapeNotVerified */ __('Choose an Option...') ?></option> </select> </div> </div> |
Step 2: Add the below js in the mentioned file
“app/design/frontend/Magemonkey/luma_child/Magento_ConfigurableProduct/templates/product/view/type/options/configurable.phtml”
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<script type="text/javascript"> require(["jquery"], function(jQuery) { document.onreadystatechange = function(){ if(document.readyState=='loaded' || document.readyState=='complete') { setTimeout(function(){ jQuery('.drop-down').append('<div class="button"></div>'); jQuery('.drop-down').append('<ul class="select-list"></ul>'); jQuery('.drop-down select option').each(function() { var bg = jQuery(this).val(); var colortext1 = jQuery(this).text(); var colortext1_arr = colortext1.split(' +'); var colortext = colortext1_arr[0].replace(/\s/g, ''); jQuery('.select-list').append('<li class="clsAnchor"><span class="color-icon" style="background-color:' + colortext + '"></span><span value="' + bg + '" class="' + jQuery(this).attr('class') + '" >' + jQuery(this).text() + '</span></li>'); }); jQuery('.drop-down .button').html('<span class="color-icon" style="background-color:' + jQuery('.drop-down select').find(':selected').val() + '"></span><span class="color-text">' + jQuery('.drop-down select').find(':selected').text() + '</span>' + '<a href="javascript:void(0);" class="select-list-link">Arrow</a>'); jQuery('.drop-down ul li').each(function() { if (jQuery(this).find('span').text() == jQuery('.drop-down select').find(':selected').text()) { jQuery(this).addClass('active'); } }); jQuery('.drop-down .select-list span').on('click', function() { var dd_text = jQuery(this).text(); var dd_img1 = jQuery(this).css('background-color'); var dd_img = '#'+dd_img1.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join(''); var dd_val = jQuery(this).attr('value'); //alert(dd_val); var dd_color_arr = dd_text.split(' +'); //var dd_color = dd_color_arr[0]; var dd_color = dd_color_arr[0].replace(/\s/g, ''); jQuery('.super-attribute-select option[value='+ dd_val +']').prop('selected',true).trigger('change'); jQuery('.drop-down .button').html('<span class="color-icon" style="background-color:' + dd_color + '"></span><span class="color-text">' + dd_text + '</span>' + '<a href="javascript:void(0);" class="select-list-link">Arrow</a>'); jQuery('.drop-down .select-list span').parent().removeClass('active'); jQuery(this).parent().addClass('active'); jQuery('.drop-down select[name=options]').val( dd_text ); jQuery('.drop-down .select-list li').slideUp(); }); jQuery('.drop-down .button').on('click', function() { jQuery('.drop-down ul li').slideToggle(); }); }, 3000); } } }); </script> |
This will convert the drop-down in HTML structure and set the color as a background.