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"
1 Answer 1
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.