5

I tried to overwrite Magento_Catalog/js/catalog-add-to-cart.js only to extend the submitForm method as follows:

app/code/Vendor/Module/view/frontend/requirejs-config.js

/**
 * Copyright © Onectus, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

var config = {
    map: {
        '*': {
            productIframe: 'Vendor_Module/js/product-iframe',
        }
    },
    config: {
        mixins: {
            'Magento_Catalog/js/catalog-add-to-cart': {
                'Vendor_Module/js/catalog-add-to-cart-mixin': true
            }
        }
    }
};

app/code/Vendor/Module/view/frontend/web/js/catalog-add-to-cart-mixin.js

/**
 * Copyright © Onectus, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

define([
    'jquery',
    'mage/translate'
], function($, $t) {
    "use strict";
    return function(widget) {
        $.widget('mage.catalogAddToCart', widget, {
            /**
             * Handler for the form 'submit' event
             *
             * @param {Object} form
             */
            submitForm: function(form) {
                alert('Here!');
                return false;
                ...
            }            
        });
        return $.mage.catalogAddToCart;
    }
});

My problem is that sometimes the JS file is loaded in the DOM, but sometimes is not loaded and I don't know why. I need it to be loaded each time so that I can do some validation before calling this.ajaxSubmit(form).

Is this a dependency-related issue? What am I doing wrong?

5
  • Very strone one. Did you resolve? Also have this particularl mixin not starting
    – elfling
    Aug 18, 2022 at 14:07
  • Same issue here. Did you manage it? Aug 22, 2022 at 15:21
  • Same problem in 2.4.5-p1 here
    – Alex
    Mar 15, 2023 at 15:45
  • There seems a similar report here: github.com/magento/magento2/issues/35097
    – Alex
    Mar 15, 2023 at 17:31
  • @Alex I've tried to reproduce the issue with the code both in this topic and github issue but was unable to reproduce the issue. Tested with Chrome, and Firefox in the Incognito Window, hard refresh page > 10 times. Could you share your code by adding them on pastecode.io and the related errors?
    – Tu Van
    Mar 15, 2023 at 20:25

3 Answers 3

0

It's possible that the issue is related to dependency loading. When you override a JavaScript file using a mixin, Magento will load the original file and then apply your mixin on top of it. However, if there are other modules or components that are also modifying the same file, there could be conflicts that cause your mixin to not be applied consistently.

One way to address this is to add a dependency on your mixin module in your requirejs-config.js file. This will ensure that your mixin is loaded before the original catalog-add-to-cart.js file is loaded, which should make it more reliable.

Here's an updated requirejs-config.js file that adds a dependency on the Vendor_Module/js/catalog-add-to-cart-mixin module:

var config = {
    map: {
        '*': {
          productIframe: 'Vendor_Module/js/product-iframe',
          'Magento_Catalog/js/catalog-add-to-cart': 'Vendor_Module/js/catalog-add-to-cart-mixin'
            }
       }
 };

This should ensure that your mixin is loaded before the original catalog-add-to-cart.js file, which should make it more reliable.

Let me know if that works or not!

2
  • Is this necessary for all mixins? We never saw before that a require needs to be added. In our case (which might be different from the OP), the mixin file is just not downloaded at all. So it must be a deeper problem in require-js ?
    – Alex
    Mar 16, 2023 at 7:37
  • No, it is not necessary to add a require statement to all mixins in Magento 2. The require statement is only needed if the mixin file is not being downloaded at all, which suggests a deeper issue with RequireJS. Mar 16, 2023 at 9:06
0

WIP

I am debugging this - posting as an answer, as this would not fit into a comment.

I added debug code in mixins.js (static/version1678804250/frontend/x/y/de_DE/mage/requirejs/mixins.js)

        processNames: function (names, context) {
            var config = context.config;

        console.log('processNames', config);


...

    function addPlugin(name) {
    console.log('addPlugin ' + name);
        return 'mixins!' + name;
    }

In the console I see that the config printed by processNames contains my mixin, but addPlugin is not called in those sporadic cases where it does not work.

EDIT in our case it's actually related to the price-box and an old template of vendor/magento/module-catalog/view/frontend/templates/product/view/form.phtml

new template:

<script type="text/x-magento-init">
    {
        "[data-role=priceBox][data-price-box=product-id-<?= $block->escapeHtml($_product->getId()) ?>]": {
            "priceBox": {
                "priceConfig":  <?= /* @noEscape */ $block->getJsonConfig() ?>
            }
        }
    }
</script>

old template:

<script>
    require([
        'jquery',
        'priceBox'
    ], function($){
        var dataPriceBoxSelector = '[data-role=priceBox]',
            dataProductIdSelector = '[data-product-id=<?= $block->escapeHtml($_product->getId()) ?>]',
            priceBoxes = $(dataPriceBoxSelector + dataProductIdSelector);

        priceBoxes = priceBoxes.filter(function(index, elem){
            return !$(elem).find('.price-from').length
                && !$(elem).find('[id*="-old"]').length; // ignore old prices
        });

        priceBoxes.priceBox({'priceConfig': <?= /* @escapeNotVerified */ $block->getJsonConfig() ?>});
    });
</script>

The price boxes just might not be there when the page is loaded (not ready), so this can cause the issue.

To the OP I can recommend to add some debug code and see if the issues is related to how the module is loaded.

3
  • Was problem resolved @Alex?
    – HoangHieu
    Mar 22, 2023 at 13:43
  • Tried many times, but still cannot reproduce the issue with Default Magento.
    – HoangHieu
    Mar 22, 2023 at 13:59
  • Yes for our case it's resolved but we might have a different issue than the OP, this I cannot be sure about
    – Alex
    Mar 22, 2023 at 17:21
0

I had the same issue, it is reproduced if more than 2 mixins created for the same file. This patch helped me https://github.com/magento/magento2/compare/2.4-develop...krzksz:patch-1?diff=unified.

Also check this comment here https://github.com/magesuite/magepack/issues/64#issuecomment-818895555

Your Answer

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

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