Magento2 – How to Add Tab for Login and Registration Form

magento2registration

I want to show the login and registration form in a tab , when I click registration form should be open, and when I click login form login for should be open

Best Answer

Please add the below code in your theme files. I have shown you here that how we can set tabbing section.

Also written here is some piece of code CSS. Please change CSS according to your need.

Please add js code in your script.js file. Here I have added code in the phtml file but please write CSS and js in proper theme files.

Step 1:- Please create file customer_account_login.xml under path app/design/frontend/{{YOUR THEME NAME HERE}}/{{YOUR THEME PACKAGE NAME HERE}}/Magento_Customer/layout

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <title>Customer Login</title>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="timber.login.register.section" template="Magento_Customer::form/both.phtml">
                <block class="Magento\Customer\Block\Form\Login" name="customer_form_login" template="Magento_Customer::form/login.phtml" cacheable="false">
                    <container name="messages.view.new" as="messages_new_view"/>
                    <container name="form.additional.info" as="form_additional_info"/>
                </block>
                <block class="Magento\Cookie\Block\RequireCookie" name="require-cookie" template="Magento_Cookie::require_cookie.phtml">
                    <arguments>
                        <argument name="triggers" xsi:type="array">
                            <item name="loginButton" xsi:type="string">.action.login</item>
                        </argument>
                    </arguments>
                </block>
                <block class="Magento\Customer\Block\Form\Register" name="customer_form_register" template="Magento_Customer::form/register.phtml">
                    <arguments>
                        <argument name="attribute_data" xsi:type="object">Magento\Customer\Block\DataProviders\AddressAttributeData</argument>
                    </arguments>
                    <container name="form.additional.info" as="form_additional_info"/>
                    <container name="customer.form.register.fields.before" as="form_fields_before" label="Form Fields Before" htmlTag="div" htmlClass="customer-form-before"/>
                </block>
                <block class="Magento\Cookie\Block\RequireCookie" name="require-cookie" template="Magento_Cookie::require_cookie.phtml">
                    <arguments>
                        <argument name="triggers" xsi:type="array">
                            <item name="registerSubmitButton" xsi:type="string">.action.submit</item>
                        </argument>
                    </arguments>
                </block>
            </block>
        </referenceContainer>
        <referenceContainer name="form.additional.info">
            <block class="Magento\Framework\View\Element\Template" name="form_additional_info_customer" template="Magento_Customer::additionalinfocustomer.phtml"/>
        </referenceContainer>
    </body>
</page>

Step 2:- Please create file both.phtml under path app/design/frontend/{{YOUR THEME NAME HERE}}/{{YOUR THEME PACKAGE NAME HERE}}/Magento_Customer/templates/form/

<div class="login-container">
    <ul class="tabs-menu customer-tabs-menu">
        <li>    
            <a href="javascript:void(0);" data-tab="tab-1" class="login-title current">
                <strong id="block-customer-login-heading" role="heading" aria-level="2"><?= $block->escapeHtml(__('Log in')) ?></strong>
            </a>
        </li>
        <li>
            <a href="javascript:void(0);" data-tab="tab-2" class="login-title">
                <strong id="block-customer-register-heading" role="heading" aria-level="2"><?= $block->escapeHtml(__('Create an account')) ?></strong>
            </a>
        </li>
    </ul>
    <div class="tab">
        <div id="tab-1" class="timber-login tab-content current"> 
            <?php echo $block->getChildHtml('customer_form_login'); ?>
        </div>
        <div id="tab-2" class="timber-register tab-content" style="display: none;">
            <?php echo $block->getChildHtml('customer_form_register'); ?>
        </div>
    </div>
</div>

<script type="text/javascript">
    require(['jquery',"mage/url"],function($,url){
        $(document).ready(function() {
            $('ul.customer-tabs-menu li a').click(function(){
                $('.tab-content').hide();
                var tab_id = $(this).attr('data-tab');
                $('ul.tabs-menu li a').removeClass('current');
                $('.tab-content').removeClass('current');
                $(this).addClass('current');
                $("#"+tab_id).addClass('current');
                $("#"+tab_id).show();
            })
        });
    });
</script>

<style type="text/css">
.login-container {
    background: #ffffff;
    max-width: 700px;
    margin: 40px auto;
}
.tabs-menu li {
    margin: 0;
    width: 100%;
}
.login-container .login-title.current {
    background: #e8e7e7;
    color: #010101;
}
.login-container .login-title strong {
    font-family: "Arkibal Display";
    font-weight: 400;
}
.login-container .login-title {
    background: #666568;
    width: 100%;
    float: left;
    text-align: center;
    padding: 20px;
    color: #ffffff;
}
.tab-content.current {
    clear: both;
}
.block-customer-login, .form-create-account {
    max-width: 450px !important;
    margin: auto !important;
    padding: 50px 15px !important;
}
.timber-login {
    float: left;
    width: 100%;
}
ul {
    padding: 0;
    list-style-type: none;
    margin: 0;
    display: flex;
}
</style>

I have done in luma theme.

Please check the output:-

https://prnt.sc/1qhkjgg https://prnt.sc/1qhkjs0

Cheers!

Related Topic