1

phtml file:

<?php 
$mycollection = $block->getMyCollection();
?>
<?php if ($mycollection) : ?>
    <div id="my-component" data-bind="scope:'myComponent'">
        <!-- ko template: getTemplate() --><!-- /ko -->
        <script type="text/x-magento-init">
        {
            "#my-component": {
                "Magento_Ui/js/core/app": {
                   "components": {
                        "myComponent": {
                            "component": "Xyz_Pqr/js/my",
                            "template" : "Xyz_Pqr/my",
                            "mycollection" : <?= /* @noEscape */ $block->jsonEncode(array_values($mycollection)) ?>
                        }
                    }
                }
            }
        }
        </script>
    </div>
<?php endif; ?>

js file: Working good.

define([
    'jquery',
    'uiComponent',
    'ko',
    'mage/storage',
    'mage/template',
    'mage/url',
    'slick',
    'jquery/jquery.cookie'
], function ($, Component, ko, storage, mageTemplate) {
    'use strict';
    var self;
    return Component.extend({
});
});

js file: Not working.

define([
    'jquery',
    'uiComponent',
    'ko',
    'Xyz_Pqr/js/model/resource-url-manager',
    'mage/storage',
    'mage/template',
    'mage/url',
    'slick',
    'jquery/jquery.cookie'
], function ($, Component, ko, resourceUrlManager, storage, mageTemplate) {
    'use strict';
    var self;
    return Component.extend({
});
});

resource-url-manager.js

define(
    [
         'Magento_Checkout/js/model/resource-url-manager'
    ],
    function (urlManager) {
        'use strict';
        return {
            /**
             * Retrieve style url
             * 
             * @return {string}
             */
            getStyleUrl: function () {
                var params = (urlManager.getCheckoutMethod() == 'guest') ? {} : {};
                var urls = {
                        'guest': '/my-style/get-by-my',
                        'customer': '/my-style/get-by-my'
                    };

                return urlManager.getUrl(urls, params);
            },
        };
    }
);

After defining Xyz_Pqr/js/model/resource-url-manager , giving error [ERROR] Failed to load the "Xyz_Pqr/js/my" component.

I have already run commands.

When i remove this ('Magento_Checkout/js/model/resource-url-manager') from resource-url-manager.js file then component loading but giving error for urlManager.getCheckoutMethod()

Any help will be appreciated.

8
  • Did you add entry in requirejs-config.js? Oct 25, 2021 at 8:15
  • You need to add it first. Oct 25, 2021 at 9:17
  • magepow.com/blog/… you can see this article maybe it helps you
    – nhungo duc
    Oct 25, 2021 at 11:02
  • could you please share resource-url-manager,.js code Oct 25, 2021 at 11:17
  • @nhungoduc, component already working,, not working after adding custom js file Oct 25, 2021 at 11:17

3 Answers 3

0

Create a file named "requirejs-config.js" on below path app / code / Company / modulename / view / frontend.

var config = {
    map: {
        '*': {
            resourceUrlManager: 'Xyz_Pqr/js/model/resource-url-manager',
        }
    }
};

and update your code as below

define([
    'jquery',
    'uiComponent',
    'ko',
    'resourceUrlManager',
    'mage/storage',
    'mage/template',
    'mage/url',
    'slick',
    'jquery/jquery.cookie'
], function ($, Component, ko, resourceUrlManager, storage, mageTemplate) {
    'use strict';
    var self;
    return Component.extend({
});
});

please run

php bin/magento setup:upgrade

after changes

3
  • After adding , still getting same error. Oct 25, 2021 at 9:18
  • dont know why still error. it should work' Oct 25, 2021 at 10:55
  • i have added more details Oct 26, 2021 at 4:45
0

you can use this way to call Magento_Checkout/js/model/resource-url-manager

Xyz_Pqr/js/model/resource-url-manager.js

define(
    [
        'jquery',
        'Magento_Checkout/js/model/resource-url-manager'
    ],
    function ($, resourceUrlManager) {
        "use strict";

        return $.extend({

            /** Get url for update item qty and remove item */
            getUrlForUpdateItemInformation: function (quote, isRemove) {
                var params = (this.getCheckoutMethod() == 'guest') ? {cartId: quote.getQuoteId()} : {};
                var urlPath = (isRemove == true) ? 'remove-item' : 'update-item';
                var urls = {
                    'guest': '/guest-carts/:cartId/' + urlPath,
                    'customer': '/carts/mine/' + urlPath
                };
                return this.getUrl(urls, params);
            },

          
        }, resourceUrlManager);
    }
);

js file

define(
    [
        'Magento_Checkout/js/model/quote',
        'Xyz_Pqr/js/model/resource-url-manager',
        'mage/storage',
        'Magento_Checkout/js/model/error-processor',
        'Magento_Customer/js/model/customer',
        'Magento_Checkout/js/model/payment/method-converter',
        'Magento_Checkout/js/model/payment-service',
        'Magento_Checkout/js/model/shipping-service',
        'Magento_Checkout/js/model/full-screen-loader',
        'Magento_Customer/js/customer-data'
    ],
    function (quote,
              resourceUrlManager,
              storage,
              errorProcessor,
              customer,
              methodConverter,
              paymentService,
              shippingService,
              Loader,
              customerData) {
        'use strict';

        var itemUpdateLoader = ['shipping', 'payment', 'total'];

        return function (payload) {
            var isRemove = !('item_qty' in payload);

            if (!customer.isLoggedIn()) {
                payload.cart_id = quote.getQuoteId();
            }

            Loader.startLoader(itemUpdateLoader);

            return storage.post(
                resourceUrlManager.getUrlForUpdateItemInformation(quote, isRemove),
                JSON.stringify(payload)
            ).done(
                function (response) {
                    if (response.redirect_url) {
                        window.location.href = response.redirect_url;
                        return;
                    }
                    quote.setTotals(response.totals);
                    paymentService.setPaymentMethods(methodConverter(response.payment_methods));
                    if (response.shipping_methods && !quote.isVirtual()) {
                        shippingService.setShippingRates(response.shipping_methods);
                    }
                    customerData.reload(['cart'], true);
                }
            ).fail(
                function (response) {
                    errorProcessor.process(response);
                }
            ).always(
                function () {
                    Loader.stopLoader(itemUpdateLoader);
                }
            );
        };
    }
);
2
  • getting this error: Uncaught TypeError: Cannot read properties of undefined (reading 'quoteData') quote.js Oct 25, 2021 at 16:44
  • i have added more details Oct 26, 2021 at 4:44
0

Probably, you’re trying to call the code on a non-checkout page.

Reason:

In ‘Xyz_Pqr/js/model/resource-url-manager.js’ file you’re trying to load ‘Magento_Checkout/js/model/resource-url-manager’ which loads ‘Magento_Checkout/js/model/url-builder’ file in its turn.

If you look at the file /vendor/magento/module-checkout/view/frontend/web/js/model/url-builder.js, you will find the following part of code there:

return {
    ...
    storeCode: window.checkoutConfig.storeCode,
    ...
}

Since window.checkoutConfig variable is defined only on cart and checkout pages, the object cannot be loaded. And as a result, you’re getting the error.

Solution:

The easiest way solve this (but not the best one!) is to add the following code anywhere to your .phtml file:

<?php
$storeManager = \Magento\Framework\App\ObjectManager::getInstance()->get(\Magento\Store\Model\StoreManagerInterface::class);
?>
<script type="text/javascript">
    window.checkoutConfig = {
        storeCode: '<?php echo $storeManager->getStore($block->getStoreId())->getCode(); ?>'
    };
</script>

Please, note, that this code is aimed only to emulate the missed variable. It would be much better to avoid using ‘Magento_Checkout/js/model/resource-url-manager’ and use your own object instead.

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.