How to Add Custom HTML in Magento 2 Social Login Extension

This developer guide is for Magento 2 Social Login Pro extension to demonstrate how to display any custom HTML only if the social buttons are displayed.

Adding HTML code (to phtml file)

In order to show any HTML code only if social buttons are displayed, use the code while editing phtml file:

<?php if($this->helper('PlumrocketSocialLoginFreeHelperData')->hasButtons()): ?>
    <!-- Custom Html -->
    <?php echo $this->getLayout()
        ->createBlock("PlumrocketSocialLoginProBlockButtons")
        ->setTemplate("Plumrocket_SocialLoginPro::customer/form/login/buttons.phtml")
        ->toHtml(); ?>
    <!-- Custom Html -->
<?php endif; ?>

Code Example

<?php if($this->helper('PlumrocketSocialLoginFreeHelperData')->hasButtons()): ?>
        <div class="pslogin-spacer pslogin-clearfix">
            <table>
                <tr>
                    <td><div class="pslogin-border"></div></td>
                    <td class="pslogin-bordertext w25"><?php echo __('OR'); ?></td>
                    <td><div class="pslogin-border"></div></td>
                </tr>
            </table>
        </div>
        <?php echo $this->getLayout()
            ->createBlock("PlumrocketSocialLoginProBlockButtons")
            ->setTemplate("Plumrocket_SocialLoginPro::customer/form/login/buttons.phtml")
            ->toHtml(); ?>
     <?php endif; ?>

Adding HTML code (to html file)

In order to show any HTML code only if social buttons are displayed, use the code while editing html file:

<!-- Custom Html with attribute data-bind="if: window.psloginButtons" -->
<div data-bind="html: window.psloginButtons"></div>
<!-- Custom Html with attribute data-bind="if: window.psloginButtons" -->

Code Example

<div class="pslogin-spacer pslogin-clearfix" data-bind="if: window.psloginButtons">
        <table>
            <tr>
                <td><div class="pslogin-border"></div></td>
                <td class="pslogin-bordertext w25" data-bind="i18n: 'OR'"></td>
                <td><div class="pslogin-border"></div></td>
            </tr>
        </table>
    </div>
    <div data-bind="html: window.psloginButtons"></div>

Was this article helpful?