Mixin js not loading when Switch Tab while loading site

[sunilit42]

Preconditions 1) Magento 2.2.* 2) Open Multiple Tabs in browser 3) Create one mixins file

Steps to reproduce 1) open your site (open your developer console) 2) switch to another tab 3) after finish load step 1 site go to there 4) In console you can check no mixins js load

Expected result It should be load all mixins js file.

Actual result It is not loading mixins js

For example we are creating mixins for

var config = {   
    config: {
        mixins: {
            'Magento_Catalog/js/catalog-add-to-cart': {
                'NameSpace_ModuleNaame/js/catalog/catalog-add-to-cart-mixins': true
            }
        }
    }
};

catalog-add-to-cart-mixins.js code

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

    return function (widget) {
        $.widget('mage.catalogAddToCart', $.mage.catalogAddToCart, {
            enableAddToCartButton: function (formElement) {
                this._super(formElement);
                if(formElement.attr('id') == 'product_addtocart_form') {
                    $("html, body").animate({ scrollTop: 0 }, "slow");
                }
            }
        });
        return $.mage.catalogAddToCart;
    }
});

[paragpadsumbiya]

@sunilit42 Thanks for reporting . After add any file you if you are in developer mode you need to run Grunt again or if you are in production mode you need to below steps to reflect your code .

rm -rf var/di var/generation var/cache var/pagecache php bin/magento cache:clean php bin/magento cache:flush php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

[sunilit42]

@paragpadsumbiya js and css loading properly.

It is mixin js issue.

we are extending js functionality, that js does not load when we switch tab while page load.

If you are not switching tab then works.

[sunilit42]

@magento-engcom-team

Any update on this?

[magento-engcom-team]

@sunilit42 , thank you for your report. We were not able to reproduce this issue by following the steps you provided. Please provide more detailed steps to reproduce or try to reproduce this issue on a clean installation.

[sunilit42]

Hey,

have you created mixins file?

Open Multiple Tab into your browser. Open developer console as well Open your magento2 site, and switch to other tab Go to Magento 2 site tab, and check network panel into console, you will see mixin file does not call.

Hope it will help you find that problem.

[emil-vdc]

@magento-engcom-team

We noticed this behaviour also on Magento 2.2.0 and 2.2.2. (different sites)

When you open a page in the background tab or reload a page in the background tab the javascript mixins will not get loaded.

Steps to reproduce:

1. Make sure you have a Javascript mixin registered
2. Check that the mixin is loaded in the network tab in devtools
3. Open some page that uses the mixin as a new tab and don't visit it until it is fully loaded
4. Open and check the network tab if the custom mixins are loaded

Attached a video clip: mixin-disappears.mp4.zip

[sunilit42]

Hello @magento-engcom-team

Have you checked @emil-tw video clip.

Any update on this issue?

[JuteSenthil]

Hi Team,

I am also facing same kind of issue. Please share if you have any solution.

Package: Magento ver. 2.0.8 Browser : Chrome 64.0.3

Steps to re-reproduce the issue:

Browser Tab : 1 - Adding product to cart from Product detail page (after product added to cart, the page redirect to cart page) Browser Tab : 1 - On clicking "Go to Checkout" button, before the page redirect to checkout page meanwhile opening a new empty Tab (Tab:2) or my website in another one tab. Browser Tab : 2 - On Tab : 2 surfing some time & go back to visit Tab : 1. Browser Tab : 1 - Following mixin js files are not loaded fully. place-order-with-comments-mixin.js , place-order-mixin.js. If i reload the page once again then the mixinJS files are loading properly.

Thanks.

[sunilaccorin]

@magento-engcom-team

Any update on this?

[sunilaccorin]

Hey @magento-admin

any update on that?

[DB-Alex]

We have the same issue, would like an update asap!

[ghost]

Hi @sunilit42 I'm not able to reproduce following steps you describe. the problem you are described maybe relevant to web browser, we are closing this issue, If you'd like to update it, please reopen the issue.

[sunilit42]

Hello,

@magento-engcom-team checkout page comes using ajax and ko so works

Try to create one mixin for product page and try it

[ghost]

@sunilit42 ok.

[sunilit42]

let me know if you want sample module

[ghost]

@sunilit42 Same result for custom module, Can you please provide your module ?

[sunilit42]

just open url and switch to another tab

[ghost]

@sunilit42

[ghost]

@sunilit42 Can you reproduce this again ? or i can close issue ?

[ghost]

@sunilit42 we are closing this issue. If you'd like to update it, please reopen the issue.

[pravalitera]

Same issue.

Preconditions;

• using Magento 2.1 or 2.2 (not tested on 2.3)
• must be a human that really wants to solve problem and not closing as much as ticket as possible with "can't reproduce" tag

Steps to reproduce :

1) Create a module with the following mixin:

var config = {
    'config': {
        'mixins': {
            'Magento_Catalog/js/price-box': {'Namespace_Module/js/price-box': true}
        }
    }

The JS :

define([
    'jquery',
    'Magento_Catalog/js/price-utils',
    'underscore',
    'mage/template',
    'jquery/ui'
], function ($, utils, _, mageTemplate) {
    'use strict';

    return function (priceBox) {
        return $.widget('mage.priceBox', priceBox, {
            reloadPrice: function reDrawPrices() {
                console.log("reloadPrice REWRITTEN ");

            }
        });
    };
});

3: Open a category page with a product Configurable. 4: donc left-click , open the link in a new tab. DON'T FOCUS IT 5: the console log won't appear

[atsareva]

I faced with the same issue on magento 2.3.3 using production mode.

[lano-vargas]

Having same issue 2.3.5 with mixins set-shipping-information just followed this tutorial from magento docs. ref:https://devdocs.magento.com/guides/v2.3/howdoi/checkout/checkout_new_field.html

I can see the mixin file added to requirejs-config.js file and I can open in the browser but the mixin file doesn't load in the checkout page. map loads fine but not mixins

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/action/set-shipping-information': {
                'Vendor_Module/js/action/set-shipping-information-mixin': true
            }
        },
    "map": {
        "*": {
            'Magento_Checkout/js/model/shipping-save-processor/default': 
            'Vendor_Module/js/model/shipping-save-processor/default'
        }
    }
}

UPDATE: Not sure if is browser issue but after open incognito the can see it loaded the mixin then just went back to default browser mode and it now loaded, so just in case anyone having same issue give it try.

[Mecalux-Developer]

Same issue in Magento 2.3.4-p2 We have created a new issue https://github.com/magento/magento2/issues/29694