Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Shim declaration ignored #83

Open
sebastian-enz opened this issue Feb 4, 2021 · 3 comments
Open

Shim declaration ignored #83

sebastian-enz opened this issue Feb 4, 2021 · 3 comments

Comments

@sebastian-enz
Copy link

sebastian-enz commented Feb 4, 2021 •
edited
Loading

Magento 2.4.1, we are using a module which has the following in requirejs-config.js:

    shim: {
        'MagePal_DataLayer/js/datalayer': ['Magento_Customer/js/customer-data']
    }

However, customer-data is not initialized before datalayer, specifically the constructor.

We get an error like this:

Uncaught TypeError: Cannot read property 'get' of undefined

Referring to this line in Magento_Customer/js/customer-data:

getExpiredSectionNames: function () {
...
sectionData = storage.get(sectionName);

I added some console.log in customer-data and can see that getExpiredSectioNNames is called somehow BEFORE the constructor of customer-data:

        'Magento_Customer/js/customer-data': function (settings) {
            options = settings;
            customerData.initStorage();
            invalidateCacheBySessionTimeOut(settings);
            invalidateCacheByCloseCookieSession();
            customerData.init();
            deferred.resolve();
        }

is called, which initializes the "storage" variable. So, the above constructor which calls customerData.initStorage() is NOT called before the first call to getExpiredSectionNames function which is in the same class.

This happens only after running Magepack. If Magepack is disabled, all works fine, and the constructor of customer-data is called first.

I already tried fixes mentioned here (magento/baler#6) however they didn't help, still the constructor isn't called in customer-data somehow.

Maybe it is related to this too https://magento.stackexchange.com/questions/316253/overriding-core-user-data-files-for-magepack however this person does not mention what he "fixed in customer-data" exactly.

Thank you very much for any insight!
@krzksz
Copy link
Collaborator

krzksz commented Feb 20, 2021

I think this is a problem with MagePal DataLayer, because it doesn't wait for customer data to initialize. Unfortunately, in Magento it was done in such a way that customer data is a JavaScript module that can't do almost anything until it gets initialized with inline data it gets, e.g.:

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Customer/js/customer-data": {
                "sectionLoadUrl": "...",
                "expirableSectionLifetime": 60,
                "expirableSectionNames": ["cart","persistent"],
                "cookieLifeTime": "108000",
                "updateSessionUrl": "..."
            }
        }
    }
</script>

so adding a shim that other module should wait for it to load is not enough. The only idea that I have would be to move MagePal DataLayer initialization (data-mage-init or text/x-magento-init, I don't know which one it uses) in layout so that it is located after customer data intialization.

I'm not sure if that's clear enough, but in case of any questions let me know.

@Quazz
Copy link

Quazz commented Apr 15, 2021

Assuming you're using Magepal Googletagmanager, you can do the following: (make needed adjustments for other modules ofc, check their layout files, element names, etc)

Create a folder in your theme called Magepal_GoogleTagManager

Create a folder in that folder called layout

Create a file called default.xml

Contents of default.xml:

<?xml version="1.0"?>
<!--
/**
 * Copyright © MagePal LLC. All rights reserved.
 * See COPYING.txt for license details.
 * http://www.magepal.com | [email protected]
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="head.additional">
            <move element="magepal_gtm_datalayer" destination="content" after="customer.customer.data" />
        </referenceBlock>
    </body>
</page>

Thanks to @krzksz info getting me onto the right track, figured I'd share my solution for people.

@leeroybrun
Copy link
Contributor

Thank you @krzksz and @Quazz ! I had the same issue and your suggestions helped me solve it.

Please note that the module is named MagePal_GoogleTagManager so the folder you need to create in your theme is MagePal_GoogleTagManager and not Magepal_GoogleTagManager.

Also move is not authorized inside referenceBlock, so here is an updated and working fix:

File app/design/frontend/YOUR/THEME/MagePal_GoogleTagManager/layout/default.xml :

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <!-- Move script after customer data initialization (https://github.com/magesuite/magepack/issues/83#issuecomment-782580759) -->
        <move element="magepal_gtm_datalayer" destination="content" after="customer.customer.data" />
    </body>
</page>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@krzksz @Quazz @leeroybrun @sebastian-enz