How to add custom content to block layout render by jslayout

magento.stackexchange https://magento.stackexchange.com/questions/167836

  •  07-10-2020
  •  | 
  •  

Question

Inside customer module layout default

vendor/magento/module-customer/view/frontend/layout/default.xml

<block class="Magento\Customer\Block\Account\AuthenticationPopup" name="authentication-popup" as="authentication-popup" template="account/authentication-popup.phtml">
      <arguments>
            <argument name="jsLayout" xsi:type="array">
                <item name="components" xsi:type="array">
                     <item name="authenticationPopup" xsi:type="array">
                        <item name="component" xsi:type="string">Magento_Customer/js/view/authentication-popup</item>
                        <item name="children" xsi:type="array">
                            <item name="messages" xsi:type="array">
                                 <item name="component" xsi:type="string">Magento_Ui/js/view/messages</item>
                                 <item name="displayArea" xsi:type="string">messages</item>
                            </item>
                        </item>
                      </item>
                </item>
            </argument>
      </arguments>
</block>

Above is form login customer will popup when customer sign in while checkout . So my question is possible to move and add custom block to this kind of "js block" ?
Example: I want to add my block to bottom of block name "authenication-popup"

Was it helpful?

Solution

You can try this:

If you are doing this by separate module (make sure to add dependency to Magento_Customer in module.xml via sequence node) add file app/code/Vendor/Module/view/frontend/layout/default.xml with the content

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceBlock name="authentication-popup">
        <action method="setTemplate">
            <argument name="template" xsi:type="string">Vendor_Module::account/authentication-popup.phtml</argument>
        </action>
        <block class="Venodr\Module\Block\MyBlock" name="custom-block" template="account/popup-end.phtml" />    
    </referenceBlock>
</body>
</page>

Then create app/code/Vendor/Module/view/frontend/templates/account/authentication-popup.phtml file 

<div id="authenticationPopup" data-bind="scope:'authenticationPopup'" style="display: none;">
    <script>
        window.authenticationPopup = <?php /* @escapeNotVerified */ echo \Zend_Json::encode($block->getConfig()); ?>;
    </script>
    <!-- ko template: getTemplate() --><!-- /ko -->
    <script type="text/x-magento-init">
        {
            "#authenticationPopup": {
                "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
            },
            "*": {
                "Magento_Ui/js/block-loader": "<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
            }
        }
    </script>
    <?php echo $block->getChildHtml('custom-block');?>
</div>

And finally create your custom block with custom template and any additional elements you need.

Then only drawback of this solution is that it is prone to conflicts if 2 modules want to do the same. In that case I would create a plugin for Magento\Customer\Block\Account\AuthenticationPopup class and in it prepare afterFetchView() method and in it render the block and inject it to the result.

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top