1

I have 2 modules where each one has an UI component on frontend. Module A contains the main component and component of Module B should be displayed inside the component of module A. I'm not instantiating components via XML and jsLayout but directly from .phtml file.

Module A

Module/A/view/frontend/templates/main.phtml

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

Module/A/view/frontend/web/js/view/main.js

define(
    ['jquery', 'uiComponent'],
    function ($, Component) {
        'use strict';

        return Component.extend({
            defaults : {
                template: 'Module_A/main'
            },
            childText: 'It works!'
        });
    }
);

Module/A/view/frontend/web/template/main.html

<h1>Main component title</h1>
<!-- ko foreach: getRegion('test_region') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

Module B

Module/B/view/frontend/templates/child.phtml

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

Module/B/view/frontend/web/js/view/child.js

define(
    ['jquery', 'uiComponent'],
    function ($, Component) {
        'use strict';

        return Component.extend({
            defaults : {
                template: 'Module_B/child'
            }
        });
    }
);

Module/B/view/frontend/web/template/child.html

<p data-bind: text: childText></p>

The structure above currently just creates two UI components which are not aware of each other.

How should I structure both of them so component of Module A can display child component(s) inside a region (test_region) or similar other way and share the data to it's children?

The end HTML output should be:

<h1>Main component title</h1>
<p>It works!</p>

1 Answer 1

0

Ended up using structure via XML and jsLayout as explained in this answer.

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.