0

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

10
0

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!

10
  • Hey thanks but its not working in my custom theme Aug 25 at 7:32
  • How you trying?
    – ZealousWeb
    Aug 25 at 7:35
  • Show me your code
    – ZealousWeb
    Aug 25 at 7:35
  • I implement all code as your instruction but i did not found anything . I created app/design/frontend/Myshop/theme/Magento_Theme/layout/customer_account_login.xml and paste your code , I also created /app/design/frontend/Myshop/theme/Magento_Theme/templates/form/both.phtml file and paste your code but i did not found result Aug 25 at 7:39
  • 1
    Thank you so much now its working for me Aug 25 at 8:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.