In magento 2 javascript , How i can wait till a component/node initialize then i can excute my code?

Question

How to wait till components exists in registry . I want to wait till global component "messages" initialize then I can add error/success message.

// view/frontend/templates/messages.phtml
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                        "messages": {
                            "component": "Magento_Theme/js/view/messages"
                        }
                    }
                }
            }
    }
</script>

I have try 'Magento_Ui/js/lib/view/utils/async' but it's seam don't work. It does not run in debugger 1

define([
    'jquery',
    'Magento_Customer/js/customer-data',
    'Magento_Ui/js/lib/view/utils/async'
], function ($, customer_data) {
    $.async('> *', 'messages', function(node){
        // debugger 1;
        customer_data.set('messages',{'test':'your cookie have expires, you have to login again','type':'success'});
    })
}

How I can solve this problem.

Answer 1

To wait until a global component like "messages" is initialized in Magento 2 and then add error/success messages, you can use the following approach:

1. Define a custom JavaScript file (e.g., custom-messages.js) and include it in your theme or module.

2. In your custom-messages.js file, define a function that waits for the component to be initialized using the Magento_Ui/js/lib/view/utils/async module.

   define([
       'jquery',
       'Magento_Customer/js/customer-data',
       'Magento_Ui/js/lib/view/utils/async'
   ], function ($, customerData, async) {
       async('messages').done(function (messagesComponent) {
           // Add your error/success messages here
           var messages = {
               test: 'Your cookie has expired. You need to log in again.',
               type: 'success'
           };
           customerData.set('messages', messages);
       });
   });
   

3. Make sure to include the custom-messages.js file in your template or layout file. For example, in your .phtml template file:

   <script type="text/javascript">
       require(['jquery', 'Magento_Ui/js/core/app'], function ($, app) {
           $(document).ready(function () {
               app.load({
                   'custom-messages': 'Vendor_Module/js/custom-messages'
               });
           });
       });
   </script>
   

   Replace 'Vendor_Module' with the appropriate vendor and module names.

By following these steps, your custom JavaScript file will wait until the "messages" component is initialized and then add error/success messages using the customer-data module. Make sure to clear the cache and deploy the static content after adding the custom JavaScript file.

Note: Ensure that the messages component is included and initialized in your XML layout files or templates correctly.

Answer 2

To resolve this issue, you can try the following steps:

1.Make sure you have a custom JavaScript file that contains the code you provided. Let's call it custom_messages.js. This file should be placed in your theme's or module's requirejs-config.js file.

2.In your theme or module's requirejs-config.js, add the following code:

  var config = {
    map: {
        '*': {
            'customMessages': 'path/to/custom_messages' // Path to your custom_messages.js file
        }
    }
};

3.Update your custom_messages.js file with the corrected code.

     define([
    'jquery',
    'Magento_Customer/js/customer-data',
    'Magento_Ui/js/lib/view/utils/async'
], function ($, customerData, async) {
    async.asyncRendered('.page.messages', function () {
        customerData.set('messages', {'test': 'Your cookie has expired. You need to log in again.', 'type': 'success'});
    });
});

In the above code, we use the asyncRendered function from the async module to wait for the element with the class .page.messages to be rendered on the page. Once the element is rendered, we set the desired message using the customerData. set function.

4.Make sure the messages.phtml file is present in your theme or module's templates directory with the correct path: view/frontend/templates/messages.phtml.

After following these steps, the custom_messages.js file should be loaded and executed after the messages component is initialized, allowing you to add your error/success message successfully.

Note: Make sure to clear the Magento cache and deploy the static content after making any changes to JavaScript files or the requirejs-config.js file.

Answer 3

Offical Devdoc have the anwser https://devdocs.magento.com/guides/v2.3/ui_comp_guide/concepts/ui_comp_uiregistry.html

registry.get('componentName', function (component) {
    debugger;
});

p/s : i found the same question : Magento 2 : Run/Execute Javascript after KnockoutJS has rendered all elements