Overwrite js core function magento 2

Question

I am trying to Overwrite some function from Magento_Swatches/js/SwatchRenderer.js file

My code is for requirejs-config.js:

var config = {
    config: {
        mixins: {
            'Magento_Swatches/js/SwatchRenderer': {
                'Magento_Swatches/js/SwatchRendererCategory1': true
            }
        }
    }
};

And code for file SwatchRendererCategory1.js

define(function () {
'use strict';

var mixin = {
        updateBaseImage: function (images, context, isProductViewExist) {
            var justAnImage = images[0];

            if (isProductViewExist) {
                context
                    .find('[data-gallery-role=gallery-placeholder]')
                    .data('gallery')
                    .updateData(images);
            } else if (justAnImage && justAnImage.img) {
                context.find('.image-block').css("background-image", "url('"+justAnImage.img+"')");
            }
        }
};

return function (target) {
    return target.extend(mixin);
};});

What I should use for target in this case? Thank you.

Answer 1

Step 1: Create a RequireJS configuration file requirejs-config.js

var config = {
  "map": {
    "*": {
      "<default_component>": "<custom_component>"
    }
  }
};

Where the following notation is used: : the name of the default component you replace

: the name of the custom component

Example, if you want to use custom navigation-menu.js script instead of the default menu widgets, your requirejs-config.js should contain the following:

var config = {
  "map": {
    "*": {
      "menu": "/js/navigation-menu",
      "mage/backend/menu": "js/navigation-menu",
    }
  }
};

How to Override Magento JS Core in Magento 2 /Configure JavaScript Resources /How to Override Magento JS Core in Magento 2 SharesFacebookLinkedInTwitterStumbleUponGoogle+SumoMe November 7, 2016 Updated: November 7th, 20161 Mod Configure JavaScript Resources In this topic we will show you How to Override Magento JS Core in Magento 2 through 2 steps:

Hello everyone. Sometimes, you want to change the Magento JS core. But you can not change directly in Magento source code. So you must override the Magento JS. In this blog, I will show you how to override the Magento JS core and replace it by your custom Javascript.

Step 1: Create a RequireJS configuration file requirejs-config.js

var config = {
  "map": {
    "*": {
      "<default_component>": "<custom_component>"
    }
  }
};
var config = {
  "map": {
    "*": {
      "<default_component>": "<custom_component>"
    }
  }
};

Where the following notation is used: : the name of the default component you replace

: the name of the custom component

Example, if you want to use custom navigation-menu.js script instead of the default menu widgets, your requirejs-config.js should contain the following:

var config = {
  "map": {
    "*": {
      "menu": "/js/navigation-menu",
      "mage/backend/menu": "js/navigation-menu",
    }
  }
};
var config = {
  "map": {
    "*": {
      "menu": "/js/navigation-menu",
      "mage/backend/menu": "js/navigation-menu",
    }
  }
};

Step 2: Place your requirejs-config.js file in one of the following directories (it depends on the location of your custom script):

Your theme files: Your module view files: /view/frontend The 2 steps I mention above is the shortest process for you to Override Magento JS Core in Magento 2. With this guide, you can manage the Magento JS Core in Magento 2 easily. Every store has a Magento JS Core in Magento 2 with many attributes.

Answer 2

Your code for "requirejs-config.js" should be this:

var config = { map: { '*': { "Magento_Swatches/js/SwatchRenderer": 'Magento_Swatches/js/SwatchRendererCategory1', } } };