6

The module Amasty_HidePrice overrides mage/validation by using a mixin. But this mixin has a bug and I need to fix it by overriding the mixin with my own mixin.

This is the original mixin (shortened to only show relevant parts):

vendor\amasty\module-hide-price\view\frontend\requirejs-config.js:

var config = {
    config: {
        mixins: {
            'mage/validation': {
                'Amasty_HidePrice/js/validation-mixin': true
            }
        }
    }
};

I tried to override it like this:

app\code\Company\Newsletter2Go\view\frontend\requirejs-config.js

var config = {
    config: {
        mixins: {
            'mage/validation': {
                'Company_Newsletter2Go/js/validation-mixin': true,
            }
        }
    }
};

app\code\Company\Newsletter2Go\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="Company_Newsletter2Go" setup_version="1.0.0">
        <sequence>
            <module name="Amasty_HidePrice"/>
        </sequence>
    </module>
</config>

Now I added console.log("original mixin"); to the original mixin and console.log("custom mixin") to my override.

But it shows both, and the override does not work, the old code is still used.

original mixin
custom mixin

I also tried to use map, but it still loads the original method:

var config = {
    config: {
        map: {
            "*": {
                "Amasty_HidePrice/js/validation-mixin": "Company_Newsletter2Go/js/validation-mixin"
            }
        }
    }
};

I even tried to override it, by putting the script into my theme folder at THEME/Amasty_HidePrice/web/js/validation-mixin.js but it does still load the original file.





Current State:

app\code\Company\Newsletter2Go\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="Company_Newsletter2Go" setup_version="1.0.0">
        <sequence>
            <module name="Company_Base"/>
            <module name="Magento_Newsletter"/>
            <module name="Magento_Customer"/>
            <module name="Amasty_HidePrice"/>
        </sequence>
    </module>
</config>

app\code\Company\Newsletter2Go\view\frontend\requirejs-config.js

var config = {
    config: {
        mixins: {
            'mage/validation': {
                'Amasty_HidePrice/js/validation-mixin': false,
                'Company_Newsletter2Go/js/validation-mixin': true,
            }
        }
    }
};

app\code\Company\Newsletter2Go\view\frontend\web\js\validation-mixin.js

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

    return function (widget) {
        $.widget('mage.validation', widget, {
            listenFormValidateHandler: function (event, validation) {

                console.log("override loaded");

                // I removed the rest of the code, for easier debugging
            }
        });
        return $.mage.validation;
    };
});

vendor\amasty\module-hide-price\view\frontend\web\js\validation-mixin.js

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

    return function (widget) {
        $.widget('mage.validation', widget, {
            listenFormValidateHandler: function (event, validation) {

                console.log("original loaded");

                // I removed the rest of the code, for easier debugging
            }
        });
        return $.mage.validation;
    };
});

vendor\amasty\module-hide-price\view\frontend\requirejs-config.js

var config = {
    map: {
        '*': {
            'amasty-fancyambox' : 'Amasty_HidePrice/js/fancyambox/jquery.fancyambox.min'
        }
    },
    config: {
        mixins: {
            'mage/validation': {
                'Amasty_HidePrice/js/validation-mixin': true
            },
            'Magento_Swatches/js/swatch-renderer': {
                'Amasty_HidePrice/js/swatch-renderer-mixin': true
            }
        }
    }
};

Result

Uncaught TypeError: base is not a constructor
    at Function.$.widget (widget.js:75)
    at validation-mixin.js:5
    at mixins.js:105
    at Array.forEach (<anonymous>)
    at applyMixins (mixins.js:104)
    at mixins.js:129
    at Object.execCb (require.js:1650)
    at Module.check (require.js:866)
    at Module.<anonymous> (require.js:1113)
    at require.js:132

More Informations about the solution:

2
  • 1
    It is strange that map doesn't work. With map original amasty file should not be loaded.
    – LucScu
    Jun 5, 2021 at 15:33
  • 1
    We figured it out. Map is not in the right place. It should be in the other config. Note that there are two configs. Michał Biarda was able to help me.
    – Black
    Jun 7, 2021 at 12:32

3 Answers 3

7
+50

You can disable original mixin and enable yours by putting this snippet in your module's requirejs config:

var config = {
    config: {
        mixins: {
            'mage/validation': {
                'Amasty_HidePrice/js/validation-mixin': false,
                'YourVendor_YourModule/js/validation-mixin': true
            }
        }
    }
};

You have to also add this Amasty module as yours module dependency (sequence tag in 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="YourVendor_YourModule">
        <sequence>
            <module name="Amasty_HidePrice"/>
        </sequence>
    </module>
</config>

BTW. requirejs config is cached. After making changes to your requirejs config you need to clean pub/static/frontend/yourvendor/yourtheme folder.

Edit: After long analysis with @Black it turned out that there was an additional issue with 3rd party module, in which the mixin for the same file was created but incorrectly (ie. they forgot to return $.mage.validation - so all other mixins couldn't work).

11
  • Thx for your answer. Disabling it like that worked, but how can I load my own now instead?
    – Black
    Jun 7, 2021 at 7:00
  • In the same exact way as you already did in your question 🙂. In file: app\code\Company\Newsletter2Go\view\frontend\requirejs-config.js Jun 7, 2021 at 7:06
  • Can you edit your question and show what you mean? I already tried to paste the line just below it, but does not work.
    – Black
    Jun 7, 2021 at 7:12
  • 1
    Sure, give ma a second :-) Jun 7, 2021 at 7:18
  • You can check it now. Jun 7, 2021 at 7:23
3

I was able to solve it thanks to @Michał Biarda.

There was a bug in the extension Dotdigitalgroup_Sms, they forgot to return $.mage.validation.

So I have overriden it by mapping and fixed it.


But there is a much better solution:

The best way is to just use mapping and remap the mixin from Amasty to my own script. I even tried this at the beginning, but I made a mistake:

app\code\Company\Newsletter2Go\view\frontend\requirejs-config.js:

Wrong:

var config = {
    config: {
        map: {
            "*": {
                "Amasty_HidePrice/js/validation-mixin": "Company_Newsletter2Go/js/validation-mixin"
            }
        }
    }
};

Correct:

var config = {
    map: {
        "*": {
            "Amasty_HidePrice/js/validation-mixin": "Company_Newsletter2Go/js/validation-mixin"
        }
    }
};
0

You can try override it like this, (not tested)

var config = {
    config: {
        mixins: {
            'Amasty_HidePrice/js/validation-mixin': {
                'Company_Newsletter2Go/js/validation-mixin': true,
            }
        }
    }
};
3
  • I already tried this, it then just outputs original mixin and the override fails too.
    – Black
    Jun 2, 2021 at 10:57
  • It isn't the best solution but you can use map 'Amasty_HidePrice/js/validation-mixin':'Company_Newsletter2Go/js/validation-mixin' thought also about disabled original mixn but it also doesn't work. Jun 2, 2021 at 11:41
  • I also tried map, but it still loads the original method.
    – Black
    Jun 2, 2021 at 11:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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