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

  • 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 '18 at 9:02
  • Oh yeah that's placeholders for the actual names I use. I'll change it! – Condor Apr 25 '18 at 9:04
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

            });
  • 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 '18 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 – Vivek Kumar Apr 26 '18 at 6:47
  • check the edit to see how to implement – Vivek Kumar Apr 26 '18 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 '18 at 6:59
  • I fixed it , see my answer! – Condor Apr 26 '18 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.

  • @RamaChandranM I changed my answer. – Condor Apr 26 '18 at 10:06
  • Thanks, @bramulus. Don't provide links usually. suppose link is removed. make problem. :). – Rama Chandran M Apr 26 '18 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>
  • Tried, did not work unfortunately.. – Condor Apr 26 '18 at 6:25
  • I did help in my fix tho! – Condor Apr 26 '18 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 '18 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.