2

Lets say we have an Third Party Module in Magento 2 that has in frontend from requirejs-config.js the following code:

var config = {
map: {
    '*': {
        amShopbyFilterAbstract: 'Amasty_Shopby/js/amShopby',
        amShopbyFilterItemDefault: 'Amasty_Shopby/js/amShopby',
        amShopbyFilterDropdown: 'Amasty_Shopby/js/amShopby',
        amShopbyFilterSlider: 'Amasty_Shopby/js/amShopby',
        amShopbyFilterFromTo: 'Amasty_Shopby/js/amShopby',
        amShopbyAjax: 'Amasty_Shopby/js/amShopbyAjax',
        amShopbyFilterSearch: 'Amasty_Shopby/js/amShopby',
        amShopbyFilterHideMoreOptions: 'Amasty_Shopby/js/amShopby',
        amShopbyFilterAddTooltip: 'Amasty_Shopby/js/amShopby',
        amShopbySwatchesChoose: 'Amasty_Shopby/js/amShopbySwatchesChoose',
        amShopbyFilterMultiselect: 'Amasty_Shopby/js/amShopby',
        amShopbyFilterSwatch: 'Amasty_Shopby/js/amShopby',
        amShopbyFiltersSync: 'Amasty_Shopby/js/amShopbyFiltersSync',
        amShopbyApplyFilters: 'Amasty_Shopby/js/amShopbyApplyFilters',
        amShopbyTopFilters: 'Amasty_Shopby/js/amShopbyTopFilters',
        amShopbyFilterCategoryDropdown: 'Amasty_Shopby/js/amShopby',
        amShopbyFilterCategoryLabelsFolding: 'Amasty_Shopby/js/amShopby',
        amShopbyFilterContainer: 'Amasty_Shopby/js/amShopby'
    }
},
deps: [
    'Amasty_Shopby/js/amShopbyResponsive'
]

};

And I want to use my own code in order to overwrite the js from 'Amasty_Shopby/js/amShopby' so it loads my own code instead of the extension code in order for me to make changes into it.

3

So in order for me to do that I had to build a module following the structure:

enter image description here

app/code/MageCheck/Shopby/composer.json

{
    "name": "magecheck/shopby",
    "description": "MageCheck_Shopby rewrite to Amasty_Shopby",
    "require": {
        "php": "~5.6.5|7.0.2|7.0.4|~7.0.6"
    },
    "type": "magento2-module",
    "version": "1.0.0",
    "license": [
        "Non-Commercial"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ],
        "psr-4": {
            "MageCheck\\Shopby\\": ""
        }
    }
}

app/code/MageCheck/Shopby/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="MageCheck_Shopby" setup_version="1.0.0">
    <sequence>
        <module name="Amasty_Shopby" />
    </sequence>
</module>

The above code makes sure that the extension loads after the module we want to extend, in this case Amasty_Shopby.

app/code/MageCheck/Shopby/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE, 
    'MageCheck_Shopby',
    __DIR__
);

app/code/MageCheck/Shopby/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            amShopbyFilterAbstract: 'MageCheck_Shopby/js/amShopby',
            amShopbyFilterItemDefault: 'MageCheck_Shopby/js/amShopby',
            amShopbyFilterDropdown: 'MageCheck_Shopby/js/amShopby',
            amShopbyFilterSlider: 'MageCheck_Shopby/js/amShopby',
            amShopbyFilterFromTo: 'MageCheck_Shopby/js/amShopby',
            amShopbyFilterSearch: 'MageCheck_Shopby/js/amShopby',
            amShopbyFilterHideMoreOptions: 'MageCheck_Shopby/js/amShopby',
            amShopbyFilterAddTooltip: 'MageCheck_Shopby/js/amShopby',
            amShopbyFilterMultiselect: 'MageCheck_Shopby/js/amShopby',
            amShopbyFilterSwatch: 'MageCheck_Shopby/js/amShopby',
            amShopbyFilterCategoryDropdown: 'MageCheck_Shopby/js/amShopby',
            amShopbyFilterCategoryLabelsFolding: 'MageCheck_Shopby/js/amShopby',
            amShopbyFilterContainer: 'MageCheck_Shopby/js/amShopby'          
        }
    }
};

So the code above actually replaces the load for the former Amasty_Shopby/js/amShopby js with the new js on page load

the contents of amShopby.js is irrelevant so I did not add it.

Hope this helps somebody not struggle with this as I did!

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.