2

I've made a script in a custom module that is dependent on customer-data.js, a .js file initiated by Magento_Customer.

So, what I did in my module.xml:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_AjaxCart" setup_version="2.0.0">
        <sequence>
            <module name="Magento_Customer" />
        </sequence>
    </module>
</config>

But still, my .js file which runs in the custom module gets loaded before the customer-data.js.

The only way I can get everything working is using a time out like this:

<script>
    setTimeout(function() {
        require([
            'Vendor_AjaxCart/js/cartAjaxQty'
        ]);
    }, 5000);
</script>

which makes sure it gets loaded AFTER customer-data.js.

Is there another way to fix this?

When I look at app/etc/config.php, my module should be instantiated AFTER Magento_Customer.

I tried doing the following in the .phtml:

<script>
    require ([
            'jquery'
        ],
    function ($) {
        $(document).ready(function () {
            require([
                'Vendor_AjaxCart/js/cartAjaxQty'
            ]);
        });
    });
</script>

But unfortunately no luck either. STILL the file gets loaded before customer-data.js

-- For anyone wanting to see the source code --

Ajax Cart M2

2
  • Not sure if this is the issue or just an error in your example, but you are using Module_AjaxCart in the module.xml file and Vendor_AjaxCart in your JS.
    – Niels
    Apr 25, 2018 at 9:02
  • Oh yeah that's placeholders for the actual names I use. I'll change it!
    – Condor
    Apr 25, 2018 at 9:04

3 Answers 3

2

You do not need to apply sequence for loading js in order, require js is for the same thing.

You should just mention the Magento_Customer/js/customer-data before your js as follows;

<script>
         require(['jquery',
           'Magento_Customer/js/customer-data',
            'Vendor_AjaxCart/js/cartAjaxQty'],
            function($,customerData,cartAjaxQty) {

              //your code here

            });
</script>

EDIT:

In your Vendor_AjaxCart/js/cartAjaxQty.js file encapsulate your code in following require block.

require(['jquery',
           'Magento_Customer/js/customer-data'],
            function($,customerData) {

              //your Vendor_AjaxCart/js/cartAjaxQty.js code here

            });
5
  • How would you see me implementing this exactly? Because in cartAjaxQty.js is all my code which I need, so I don't need to run more code in the .phtml file which includes the cartAjaxQty (the code you show) because you state you include the file there and then run some code, but what code must I run?
    – Condor
    Apr 26, 2018 at 6:25
  • If you have a separate js file you should add this require block in your js file and remember to remove your own reference in require block Apr 26, 2018 at 6:47
  • check the edit to see how to implement Apr 26, 2018 at 6:47
  • If I see correctly this is already what I was doing. I had a define in my cartAjaxQty.js which includes the correct defines/requirements. If you want to have an insight into my code, I've shared my Git repository in my edited question
    – Condor
    Apr 26, 2018 at 6:59
  • I fixed it , see my answer!
    – Condor
    Apr 26, 2018 at 7:39
2

I fixed it, see this other question of mine:

Dependecy error bug? Magento 2.2.3

I posted my answer here.

Short said, I fixed it by including a $(window).on("load", function () (instead of $(document).ready(function(){ ) in in the .phtml-file:

<script>
require ([
        'jquery'
    ],
function ($) {
    $(window).on("load", function () {
        require([
            'Buro210_AjaxCart/js/cartAjaxQty'
        ]);
    });
});

And now all loads fine. It's not the fix I had hoped for, a more cleaner approach would've been my preference but it fixes my error.

2
  • @RamaChandranM I changed my answer.
    – Condor
    Apr 26, 2018 at 10:06
  • Thanks, @bramulus. Don't provide links usually. suppose link is removed. make problem. :). Apr 26, 2018 at 10:13
1

customer-data.js is added through layout in Module\Customer\view\frontend\layout\default.xml:

<referenceContainer name="content">            
    <block name="customer.customer.data"
           class="Magento\Customer\Block\CustomerData"
           template="Magento_Customer::js/customer-data.phtml"/>
</referenceContainer>

If your phtml file is loaded before this you can't depend on customer-data.js, even if your <sequence> states that your module should be loaded after Magento_Customer.

Have you tried moving your block to be placed after customer.customer.data?

<referenceContainer name="content">            
    <block name="vendor.ajaxcart"
           class="Vendor\AjaxCart\Block\MyBlockName"
           template="Vendor_AjaxCart::js/cartajaxqty.phtml" after="customer.customer.data"/>
</referenceContainer>
3
  • Tried, did not work unfortunately..
    – Condor
    Apr 26, 2018 at 6:25
  • I did help in my fix tho!
    – Condor
    Apr 26, 2018 at 7:42
  • 1
    Glad to hear you got it working! Even though it was not this exact solution. And yes, customer-data.js seems to be quite the special case. Had some issues with other third-party modules and customer-data.js before. Moving the custom code in the layout helped in that case.
    – sduif
    Apr 26, 2018 at 9:17

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.