4

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 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 at 12:32
3
+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 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 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 at 7:12
  • 1
    Sure, give ma a second :-) Jun 7 at 7:18
  • You can check it now. Jun 7 at 7:23
2

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 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 at 11:41
  • I also tried map, but it still loads the original method.
    – Black
    Jun 2 at 11:44

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.