The task was to add the extension’s elements to the standard authorization popup on Magento 2.
The developers made it easy to do by adding their own component “social-buttons” into the list of embedded elements of the component “authenticationPopup” which is sent to the “authentication-popup” block’s constructor. The block “authentication-popup” and its element “authenticationPopup” appears in the standard Magento_Customer module. The file <Mageplaza_SocialLogin_path>/view/frontend/layout/default.xml of the module Mageplaza Social Login has the code which specifies adding the embedded element:
<referenceBlock name="authentication-popup"> <arguments> <argument name="jsLayout" xsi:type="array"> <item name="components" xsi:type="array"> <item name="authenticationPopup" xsi:type="array"> <item name="children" xsi:type="array"> <item name="social-buttons" xsi:type="array"> <item name="component" xsi:type="string">Mageplaza_SocialLogin/js/view/social-buttons</item> <item name="displayArea" xsi:type="string">before</item> </item> </item> </item> </item> </argument> </arguments> </referenceBlock>
The code shows that the new element “social-buttons” has the property “displayArea” with the value “before”. It should be considered when calling the component from an HTML-template by the standard authorization popup on Magento 2.
Now, it is obvious what element you need to call. Try to add social networks authorization buttons to the standard popup.
1. Make the copy of the html-template vendor/magento/module-customer/view/frontend/web/template/authentication-popup.html and add it to the current theme catalog <theme_dir>/Magento_Customer/web/template/_authentication-popup.html
Add these directives to the created copy:
<!-- ko foreach: getRegion('before') -->
<!-- ko if: isActive() -->
<div class="actions-toolbar last" data-bind="foreach: socials()">
<div class="next-action" data-bind="css: key + '-login'">
<a data-bind="socialButton: $parent.isActive, url: url, label: label">
<span data-bind="i18n: 'sign in with ' + label"></span>
</a>
</div>
</div>
<!-- /ko -->
<!-- /ko -->
The first line in this fragment is the point of interest for us because the others lines can be copied from the HTML-template which is used in the module Mageplaza Social Login that outputs authorization buttons.
Choose the region “before” in the first line, it will call all the
subsequent methods (ex. “isActive()” or “socials()”) from the element in this region. The region is represented by “displayArea” which is specified in the description of the component. It makes clear the reason for choosing “before” region: because the “displayArea” property of the”social-buttons” element has the value “before”, it was mentioned above.
It looks like the task should be completed at this point. But it isn’t because of the strategic mistake of Mageplaza Social Login extension.
As it was described, “social-buttons” element outputs the social buttons. To make this component work, there has to be the global window.socialAuthenticationPopup js-object in one of the scripts. The object should contain all possible social networks authorization variants.
Such object is created in the template <Mageplaza_SocialLogin_path>/view/frontend/templates/popup/form/authentication/social.phtml
If the option is disabled, the “social.phtml” template won’t appear on a page and the js-object window.socialAuthenticationPopup won’t be output and, as a consequence, the “social-buttons” element won’t create any button.
The output of the “social.phtml” template depends on the settings of “Use Popup Login”. Let’s take a look at the xml-file that contains this template. It is the file <Mageplaza_SocialLogin_path>/view/frontend/layout/default.xml and the lines:
<referenceContainer name="content"> <block class="Mageplaza\SocialLogin\Block\Popup" name="social-login-popup" as="popup.modal" template="popup.phtml"> <block class="Mageplaza\SocialLogin\Block\Form\Login" name="social-login-popup-authentication" as="popup.authentication" template="Mageplaza_SocialLogin::popup/form/authentication.phtml"> <block class="Mageplaza\SocialLogin\Block\Popup\Social" name="social-login-popup-authentication-social" as="popup.authentication.social" template="popup/form/authentication/social.phtml" /> … </block> </block> </referenceContainer>
These lines make it obvious that the “social.phtml” template contains the data from the block “social-login-popup-authentication-social”. This block is a component of the global block “social-login-popup”. We can suggest that the global block forbids the output of its own embedded blocks in case of disabled “Use Popup Login” option. To reveal if it is true, see the global block’s template which is located in the file <Mageplaza_SocialLogin_path>/view/frontend/templates/popup.phtml. The content of the file is:
<?php if ($block->isEnabled()): ?>
<div id="social-login-popup" class="white-popup mfp-with-anim mfp-hide" data-mage-init='{"socialPopupForm": <?php echo $block->getFormParams() ?>}'>
<?php echo $block->getChildHtml('popup.authentication') ?>
<?php echo $block->getChildHtml('popup.create') ?>
<?php echo $block->getChildHtml('popup.forgot') ?>
</div>
<div style="clear: both"></div>
<?php endif; ?>
This code shows that the first line calls the method “isEnabled()” which checks the value of the line “Use Popup Login”. It means that if the option is disabled, no embedded block will be output on the page.
There is no need to use the popup of Mageplaza Social Login extension on the website, that’s why I decide to get rid of the global block “social-login-popup”, and take out its embedded “social-login-popup-authentication-social” block with “social.phtml” template and output it unconditionally on all pages.
I created the file in the theme for this purpose:
<theme_dir>/Mageplaza_SocialLogin/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> <referenceContainer name="content"> <referenceBlock name="social-login-popup" remove="true"/> <block class="Mageplaza\SocialLogin\Block\Popup\Social" name="social-login-popup-authentication-social" as="popup.authentication.social" template="popup/form/authentication/social.phtml" /> </referenceContainer> </body> </page>
The js-object window.socialAuthenticationPopup appears unconditionally on all pages of the website now. And the element “social-buttons” gets the data from this js-object on the social authorization buttons that have to be added.
