1

I have created a custom Knockout-Component that so far does not do anything. It is just the basic skeleton but it already fails to load.

Template:

<div class="my-module" data-bind="scope:'my-module'">
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>
<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "my-module": {
                    "component": "My_Module/js/my-module"
                }
            }
        }
    }
}
</script>

js component:

define([
    'jquery',
    'uiComponent',
    'ko',
    'Magento_Customer/js/customer-data',
    'Magento_Checkout/js/model/totals'
    ], function ($, Component, ko, customerData, totals) {

        'use strict';

        let cartData = customerData.get('cart');

        return Component.extend({
            defaults: {
                template: 'My_Module/my-module-template'
            },

            initialize: function () {
                this._super();
            }
        });
    }
);

But the component won't load (browser console error):

Failed to load the "My_Module/js/my-module" component.

After banging my head over this I tried to strip this down even more. So once I removed 'Magento_Checkout/js/model/totals' my component loads fine.

I am totally lost about this. The totals component totally exists but just does not work for me. I see it being implemented the same way in several other core components. I don't see what I am doing wrong here.

Would there be another way to get the current cart's totals ANYwhere in the shop (not only in cart or checkout)?

Thank you

2 Answers 2

1

Failed to load the "My_Module/js/my-module" component.

Some common reasons for this error are:

  • Incorrect file path: Make sure the file path for the JavaScript component is correct.

  • Incorrect file format or syntax: Check the JavaScript component's code for any syntax errors or incorrect file format.

  • Dependency issues: Ensure all the required dependencies for that component are properly defined and loaded using RequireJS.

  • File permissions: Make sure the file has the correct permissions set, allowing Magento to access and load it.

  • Caching issues: Redeploy static content and browser cache to ensure the latest version of the component is being loaded.

In your case, Magento_Checkout/js/model/totals (vendor/magento/module-checkout/view/frontend/web/js/model/totals.js) loads Magento_Checkout/js/model/quote (vendor/magento/module-checkout/view/frontend/web/js/model/quote.js)

define([
    'ko',
    'Magento_Checkout/js/model/quote',
    'Magento_Customer/js/customer-data'
], function (ko, quote, customerData) {
    'use strict';
    //....
});

which then calls some object properties of the window.checkoutConfig object and they are undefined since you are not on the checkout page or shopping cart page where initiate window.checkoutConfig object.

quoteData = window.checkoutConfig.quoteData,
basePriceFormat = window.checkoutConfig.basePriceFormat,
priceFormat = window.checkoutConfig.priceFormat,
storeCode = window.checkoutConfig.storeCode,
totalsData = proceedTotalsData(window.checkoutConfig.totalsData),
2
  • 1
    Thank you. window.checkoutConfig truly is a PITA. Not the first time this one bit me.
    – omsta
    Commented Apr 28, 2023 at 15:19
  • Glad to help @omsta. Cheers!
    – Tu Van
    Commented Apr 28, 2023 at 15:27
1

It seems like there might be a dependency issue or a problem with the path. Make sure the 'Magento_Checkout/js/model/totals' component is loaded correctly in your custom component.

First, double-check that the path to the 'Magento_Checkout/js/model/totals' component is correct. It should be in the 'vendor/magento/module-checkout/view/frontend/web/js/model' directory.

If the path is correct, try adding your custom component as a RequireJS module in your custom module's requirejs-config.js file. This can help with any potential dependency issues.

Create a requirejs-config.js file in your custom module, if it doesn't already exist:

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

Add the following code to the requirejs-config.js file:

var config = {
    map: {
        '*': {
            'my-module': 'My_Module/js/my-module'
        }
    }
};

Now, update your custom component's script tag in the template file:

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "my-module": {
                    "component": "my-module"
                }
            }
        }
    }
}
</script>

Keep CALM and clear your Magento cache and static content, then redeploy your static content:

bin/magento cache:clean
bin/magento cache:flush
rm -rf pub/static/*
bin/magento setup:static-content:deploy -f

Regarding getting the cart's totals anywhere in the shop, you can use the 'Magento_Customer/js/customer-data' object to retrieve the cart's data. Here's an example of how to get the cart's subtotal:

let cartData = customerData.get('cart');
let cartSubtotal = cartData().subtotal;

Keep in mind that the 'customerData' object is cached in the browser's local storage, so you may need to invalidate the local storage when the cart is updated to get the most recent totals.

1
  • 1
    Thank you. The first part of your answer was not the issue but your hint towards customerData.get('cart') was the eye opener I needed.
    – omsta
    Commented Apr 28, 2023 at 15:18

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.