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

Improve this question
10

1 Answer 1

Reset to default
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!

Improve this answer
10
  • Hey thanks but its not working in my custom theme
    – Mark
    Aug 25, 2021 at 7:32
  • How you trying?
    – ZealousWeb
    Aug 25, 2021 at 7:35
  • Show me your code
    – ZealousWeb
    Aug 25, 2021 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
    – Mark
    Aug 25, 2021 at 7:39
  • 1
    Thank you so much now its working for me
    – Mark
    Aug 25, 2021 at 8:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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