Skip to content
Logo
  • Support
  • My account
  • My cart
  • Magento 2 Extensions
  • Magento 1 Extensions
  • Magento Services
  • Packages
  • Special Offers
  • Blog
  • Contact Us

Home Magento 2 Extensions Magento 2 Social Login Pro Documentation v4 Developer Guide How to Add Custom HTML

    • Installation
    • Updating
    • Configuration
    • Integrations
    • How-To Guides
    • Troubleshooting
      • Adding Social Buttons Manually
      • Setting Custom Location for User Profile Photo
      • Adding Custom HTML
      • Setting Custom Design for Social Login Buttons On a Specific Form
      • Adding customer photo in the header in Hyvä
      Developer Guide & API Reference
    • Translation
    • Uninstalling
    Magento 2 Social Login Pro - Documentation

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?
08/19/202208/19/2022
Search
Search
Generic selectors
Exact matches only
Search in title
Search in content
Contents
Company
  • Home
  • About Plumrocket Inc.
  • Customer Stories
  • Programs & Promotions
  • Careers
  • Contact Us
Legal
  • Terms of Service
  • Privacy Policy
  • Refund Policy
  • Cookie Policy
  • Privacy Center
  • Updates & Support Policy
Resources
  • Blog
  • FAQ
  • Documentation
  • Tutorials
Partners
  • Partner Program
  • Affiliate Program
  • Official Partners
Plumrocket Inc. © 2008 - 2025
Follow Us:
  • Facebook
  • Twitter
  • LinkedIn
  • YouTube