Magento 2 – Override JS from Third Party Module

javascriptmagento2overridesrequirejs-config.js

I successfully overrode a JS file of a third party module from my own module named Amasty/AdvancedReviewOverrides.

First I copied the file from vendor/amasty/advanced-review/view/frontend/web/js/amVote.js to

app/code/Amasty/AdvancedReviewOverrides/view/frontend/web/js/amVote.js

then I added my override statement here:

app/code/Amasty/AdvancedReviewOverrides/view/frontend/requirejs-config.js:

var config = {
    map: {
        '*': {
            'Amasty_AdvancedReview/js/amVote': 'Amasty_AdvancedReviewOverrides/js/amVote'
        }
    }
};

This works great!

Now I tried to override another JS (amReview.js) the same way, but this time it fails:

First I copied it from vendor/amasty/advanced-review/view/frontend/web/js/amReview.js to:

app/code/Amasty/AdvancedReviewOverrides/view/frontend/web/js/amReview.js

(I've added a console.log statement to amReview.js so that I know if it works.)

Then I added my rewrite

app/code/Amasty/AdvancedReviewOverrides/view/frontend/requirejs-config.js:

var config = {
    map: {
        '*': {
            'Amasty_AdvancedReview/js/amVote': 'Amasty_AdvancedReviewOverrides/js/amVote',
            'Amasty_AdvancedReview/js/amReview': 'Amasty_AdvancedReviewOverrides/js/amReview'
        }
    }
};

but the override for amReview.js does not work ! Why!? The console.log message is not showing.

I even executed these commands:

rm -rf pub/static/frontend/*
bin/magento cache:flush

Best Answer

I figured it out. You always have to look at the original requirejs-config.js

vendor/amasty/advanced-review/view/frontend/requirejs-config.js:

var config = {
    map: {
        "*": {
            "amrevloader": "Amasty_AdvancedReview/js/components/amrev-loader",
            "amReview": "Amasty_AdvancedReview/js/amReview",
            "amReviewSlider": "Amasty_AdvancedReview/js/widget/amReviewSlider",
            "amProductReviews": "Amasty_AdvancedReview/js/widget/amProductReviews",
            "amShowMore": "Amasty_AdvancedReview/js/components/am-show-more"
        }
    },
    config: {
        mixins: {
            'Magento_Review/js/view/review': {
                'Amasty_AdvancedReview/js/view/review': true
            }
        }
    },
    shim: {
        'Magento_Review/js/process-reviews': ['mage/tabs']
    }
};

As you can see, it is defined as amReview, so I had to change mine to this:

var config = {
    map: {
        '*': {
            'Amasty_AdvancedReview/js/amVote': 'Amasty_AdvancedReviewOverrides/js/amVote',
            'amReview': 'Amasty_AdvancedReviewOverrides/js/amReview'
        }
    }
};
Related Topic