2

Here I would like to override the configurable.js there is a method _fillSelect The below method is working for preselecting the first children. I would like to override from my custom module what are the steps need to follow here.

_fillSelect: function (element) {
    var attributeId = element.id.replace(/[a-z]*/, ''),
        options = this._getAttributeOptions(attributeId),
        prevConfig,
        index = 1,
        allowedProducts,
        i,
        j;

    this._clearSelect(element);
    element.options[0] = new Option('', '');
    element.options[0].innerHTML = this.options.spConfig.chooseText;
    prevConfig = false;

    if (element.prevSetting) {
        prevConfig = element.prevSetting.options[element.prevSetting.selectedIndex];
    }

    if (options) {
        for (i = 0; i < options.length; i++) {
            allowedProducts = [];
            if (prevConfig) {
                for (j = 0; j < options[i].products.length; j++) {
                    // prevConfig.config can be undefined
                    if (prevConfig.config &&
                        prevConfig.config.allowedProducts &&
                        prevConfig.config.allowedProducts.indexOf(options[i].products[j]) > -1) {
                        allowedProducts.push(options[i].products[j]);
                    }
                }
            } else {
                allowedProducts = options[i].products.slice(0);
            }

            if (allowedProducts.length > 0) {
                options[i].allowedProducts = allowedProducts;
                element.options[index] = new Option(this._getOptionLabel(options[i]), options[i].id);
                if (typeof options[i].price !== 'undefined') {
                    element.options[index].setAttribute('price', options[i].prices);
                }

                element.options[index].config = options[i];    
                index++;
            }
            // Code added to select option
            if (i == 0) {
                this.options.values[attributeId] = options[i].id;
            }   
        }
        //Code added to check if configurations are set in url and resets them if needed 
        if (window.location.href.indexOf('#') !== -1) {this._parseQueryParams(window.location.href.substr(window.location.href.indexOf('#') + 1));}
    }

},
2

Method 1: Override configurable js without mixin

Create requirejs-config.js under

app/code/Vendor/Module/view/frontend/requirejs-config.js

with below content:

var config = {
  map: {
    '*': {
      'Magento_ConfigurableProduct/js/configurable':'Vendor_Module/js/configurable'
    }
  }
};

Now create configurable.js under

app/code/Vendor/Module/view/frontend/web/js/configurable.js

and copy all the content from configurable.js under

vendor/magento/module-configurable-product/view/frontend/web/js/configurable.js

and modify the required things.

Now flush the cache and run static content deploy.

Method 2: Extend configurable js through mixin

Step 1:

Create requirejs-config.js under

app/code/Vendor/Module/view/frontend/requirejs-config.js

with below content:

var config = {
    config: {
        mixins: {
            'Magento_ConfigurableProduct/js/configurable': {
                'Vendor_Module/js/configurable': true
            }
        }
    }
};

Step 2:

Create configurable.js under

app/code/Vendor/Module/view/frontend/web/js/configurable.js

with below content:

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

    return function (configurable) {
        $.widget('mage.configurable', $['mage']['configurable'], {
            _fillSelect: function (element) {
                    console.log('extend working through mixin');
                    var attributeId = element.id.replace(/[a-z]*/, ''),
                    options = this._getAttributeOptions(attributeId),
                    prevConfig,
                    index = 1,
                    allowedProducts,
                    i,
                    j,
                    finalPrice = parseFloat(this.options.spConfig.prices.finalPrice.amount),
                    optionFinalPrice,
                    optionPriceDiff,
                    optionPrices = this.options.spConfig.optionPrices,
                    allowedProductMinPrice;

                this._clearSelect(element);
                element.options[0] = new Option('', '');
                element.options[0].innerHTML = this.options.spConfig.chooseText;
                prevConfig = false;

                if (element.prevSetting) {
                    prevConfig = element.prevSetting.options[element.prevSetting.selectedIndex];
                }

                if (options) {
                    for (i = 0; i < options.length; i++) {
                        allowedProducts = [];
                        optionPriceDiff = 0;

                        /* eslint-disable max-depth */
                        if (prevConfig) {
                            for (j = 0; j < options[i].products.length; j++) {
                                // prevConfig.config can be undefined
                                if (prevConfig.config &&
                                    prevConfig.config.allowedProducts &&
                                    prevConfig.config.allowedProducts.indexOf(options[i].products[j]) > -1) {
                                    allowedProducts.push(options[i].products[j]);
                                }
                            }
                        } else {
                            allowedProducts = options[i].products.slice(0);

                            if (typeof allowedProducts[0] !== 'undefined' &&
                                typeof optionPrices[allowedProducts[0]] !== 'undefined') {
                                allowedProductMinPrice = this._getAllowedProductWithMinPrice(allowedProducts);
                                optionFinalPrice = parseFloat(optionPrices[allowedProductMinPrice].finalPrice.amount);
                                optionPriceDiff = optionFinalPrice - finalPrice;

                                if (optionPriceDiff !== 0) {
                                    options[i].label = options[i].label + ' ' + priceUtils.formatPrice(
                                        optionPriceDiff,
                                        this.options.priceFormat,
                                        true);
                                }
                            }
                        }

                        if (allowedProducts.length > 0) {
                            options[i].allowedProducts = allowedProducts;
                            element.options[index] = new Option(this._getOptionLabel(options[i]), options[i].id);

                            if (typeof options[i].price !== 'undefined') {
                                element.options[index].setAttribute('price', options[i].price);
                            }

                            element.options[index].config = options[i];
                            index++;
                        }

                        /* eslint-enable max-depth */
                    }
                }
            }
        });
        return $['mage']['configurable'];
    };
});

You can update your code according to your requirement.

| improve this answer | |
  • Thanks for your assistance @sukumar if I would like to override only _fillSelect method how do we do? – Nagaraju K Dec 26 '19 at 16:47
  • You can try Magento mixin concept. – Sukumar Gorai Dec 26 '19 at 16:49
  • can u guide me how to do it? – Nagaraju K Dec 26 '19 at 16:58
  • Hi @sukumar can u please assist me only a particular method on how to override? – Nagaraju K Dec 27 '19 at 8:04
  • @NagarajuK Please check the updated code with Method 2. – Sukumar Gorai Dec 27 '19 at 8:53
1

Assume you are using a custom module names "Company_MyModule".

step 1) create requirejs-config.js under app/code/Company/MyModule/view/frontend/

File : app/code/Company/MyModule/view/frontend/requirejs-config.js

 var config = {
    map: {
        '*': {
            configurable: 'Company_MyModule/js/configurable-custom'
        }
    }    
};

step 2) create configurable-custom.js under app/code/Company/MyModule/view/frontend/web/js

File: app/code/Company/MyModule/view/frontend/web/js/configurable-custom.js

define([
    'jquery',
    'jquery/ui',
    'Magento_ConfigurableProduct/js/configurable'
], function($){

    $.widget('mycustom.configurable', $.mage.configurable, {

            _fillSelect: function (element) {
             var attributeId = element.id.replace(/[a-z]*/, ''),
                options = this._getAttributeOptions(attributeId),
                prevConfig,
                index = 1,
                allowedProducts,
                i,
                j;

            this._clearSelect(element);
            element.options[0] = new Option('', '');
            element.options[0].innerHTML = this.options.spConfig.chooseText;
            prevConfig = false;

            if (element.prevSetting) {
                prevConfig = element.prevSetting.options[element.prevSetting.selectedIndex];
            }

            if (options) {
                for (i = 0; i < options.length; i++) {
                    allowedProducts = [];

                    /* eslint-disable max-depth */
                    if (prevConfig) {
                        for (j = 0; j < options[i].products.length; j++) {
                            // prevConfig.config can be undefined
                            if (prevConfig.config &&
                                prevConfig.config.allowedProducts &&
                                prevConfig.config.allowedProducts.indexOf(options[i].products[j]) > -1) {
                                allowedProducts.push(options[i].products[j]);
                            }
                        }
                    } else {
                        allowedProducts = options[i].products.slice(0);
                    }

                    if (allowedProducts.length > 0) {
                        options[i].allowedProducts = allowedProducts;
                        element.options[index] = new Option(this._getOptionLabel(options[i]), options[i].id);

                        if (typeof options[i].price !== 'undefined') {
                            element.options[index].setAttribute('price', options[i].prices);
                        }

                        element.options[index].config = options[i];
                        index++;
                    }

                    /* eslint-enable max-depth */
                }
            }
        },        


    });

    return $.mycustom.configurable;
});
| improve this answer | |
  • its not working – Nagaraju K Dec 26 '19 at 15:00
  • once again i will veirfy and let you know – Nagaraju K Dec 26 '19 at 15:04
  • requirejs-config.js in this file is there anything we are missing? – Nagaraju K Dec 26 '19 at 15:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.