1

I want to load the login form into the account dropdown in the header.

Therefore I duplicate the default customer login form and loaded it into the dropdown phtml template file using the following;

<?php echo $this->getLayout()->createBlock("Magento\Customer\Block\Form\Login")->setTemplate("Magento_Customer::form/login-mini.phtml")->toHtml();?>

This all works perfect, except that it does not login using the enter key. When the e-mail address and password are entered and then the login button is pressed, the login works perfectly. But when the password is entered and the enter key is pressed on the keyboard, it will unfortunately not log in.

How can I change this?

EDIT; We found that the problem is inside the dropdown logic of M2. When we set the dropdown static to display block, so it will not close the dropdown, everything works fine. Is there a way to change the default dropdown login in the customer.phtml file, that we use to load this form in?

customer.phtml

<div data-block="dropdown" class="customer-welcome loggedout">
    <span class="customer-name" data-trigger="trigger">
        <i class="fad fa-user hide-on-desktop"></i>
        <span class="hide-on-mobile"><?= __('Login')?><i class="fad fa-angle-down"></i></span>
    </span>
</div>
<div class="customer-menu" style="display: none;"
     data-mage-init='{
        "dropdownDialog": {
            "appendTo": "[data-block=dropdown]",
            "triggerTarget":"[data-trigger=trigger]",
            "timeout": 2000,
            "closeOnMouseLeave": false,
            "closeOnEscape": true,
            "triggerClass": "active",
            "parentClass": "active",
            "buttons": []
        }
     }'>
    <script type="text/x-magento-init">
        {
            "*": {
                "Magento_Ui/js/core/app": {
                    "components": {
                        "customer": {
                            "component": "Magento_Customer/js/view/customer"
                        }
                    }
                }
            }
        }
    </script>
    <?php if($block->getChildHtml()):?>
        <?= $block->getChildHtml() ?>
    <?php endif; ?>
</div>

login-mini.phtml

<div class="block-customer-login">
    <div class="block-content" aria-labelledby="block-customer-login-heading">
        <form class="form form-login"
              action="<?= $block->escapeUrl($block->getPostActionUrl()) ?>"
              method="post"
              id="login-form"
              data-mage-init='{"validation":{}}'>
            <?= $block->getBlockHtml('formkey') ?>
            <fieldset class="fieldset login">
                <div class="field email required">
                    <label class="label" for="email"><span><?= $block->escapeHtml(__('Email')) ?></span></label>
                    <div class="control">
                        <input name="login[username]" value="<?= $block->escapeHtmlAttr($block->getUsername()) ?>" <?php if ($block->isAutocompleteDisabled()) : ?> autocomplete="off"<?php endif; ?> id="email" type="email" class="input-text form-control" title="<?= $block->escapeHtmlAttr(__('Email')) ?>" data-validate="{required:true, 'validate-email':true}">
                    </div>
                </div>
                <div class="field password required">
                    <label for="pass" class="label"><span class="sub-label"><?= $block->escapeHtml(__('Password')) ?></span><a class="action remind" href="<?= $block->escapeUrl($block->getForgotPasswordUrl()) ?>"><span><?= $block->escapeHtml(__('Forgot Your Password?')) ?></span></a></label>
                    <div class="control">
                        <input name="login[password]" type="password" <?php if ($block->isAutocompleteDisabled()) : ?> autocomplete="off"<?php endif; ?> class="input-text form-control" id="pass" title="<?= $block->escapeHtmlAttr(__('Password')) ?>" data-validate="{required:true}">
                    </div>
                </div>
                <div class="actions-toolbar account-button">
                    <div class="primary"><button type="submit" class="action login small-button primary" name="send" id="send2"><span><?= $block->escapeHtml(__('Sign In')) ?></span></button></div>
                </div>
            </fieldset>
        </form>
    </div>
</div>
6
  • i use your code and enter email and password then press enter key it works. i login successfully. but when wrong email or password enter and press enter key it's redirect to main customer. – Msquare Apr 8 '20 at 13:14
  • @Msquare That's quite strange. The enter key works fine on the email input field, but when entering also the password, the enter key does not login and redirect to the login. – JGeer Apr 9 '20 at 7:00
  • could you please let me know in which phtml you added code <?php echo $this->getLayout()->createBlock("Magento\Customer\Block\Form\Login")->setTemplate("Magento_Customer::form/login-mini.phtml")->toHtml();?> ? – Pawan Apr 10 '20 at 13:56
  • @Pawan This is placed inside the header and we use the Magento/Customer/template/account/customer.phtml file. There we load a custom template that is placed in /magento/theme/template/html/header/account-dropdown.phtml. Inside that file we load the login-mini.phtml. This because we also want to load customer urls when a customer is logged in. – JGeer Apr 11 '20 at 8:25
  • @Pawan See my changes in the question. – JGeer Apr 11 '20 at 8:30
3
+100

Please add this code

<div class="block-customer-login">
    <div class="block-content" aria-labelledby="block-customer-login-heading">
        <form class="form form-login"
              action="<?= $block->escapeUrl($block->getPostActionUrl()) ?>"
              method="post"
              id="login-form"
              data-mage-init='{"validation":{}}'>
            <?= $block->getBlockHtml('formkey') ?>
            <fieldset class="fieldset login">
                <div class="field email required">
                    <label class="label" for="email"><span><?= $block->escapeHtml(__('Email')) ?></span></label>
                    <div class="control">
                        <input name="login[username]" value="<?= $block->escapeHtmlAttr($block->getUsername()) ?>" <?php if ($block->isAutocompleteDisabled()) : ?> autocomplete="off"<?php endif; ?> id="email" type="email" class="input-text form-control" title="<?= $block->escapeHtmlAttr(__('Email')) ?>" data-validate="{required:true, 'validate-email':true}">
                    </div>
                </div>
                <div class="field password required">
                    <label for="pass" class="label"><span class="sub-label"><?= $block->escapeHtml(__('Password')) ?></span><a class="action remind" href="<?= $block->escapeUrl($block->getForgotPasswordUrl()) ?>"><span><?= $block->escapeHtml(__('Forgot Your Password?')) ?></span></a></label>
                    <div class="control">
                        <input name="login[password]" type="password" <?php if ($block->isAutocompleteDisabled()) : ?> autocomplete="off"<?php endif; ?> class="input-text form-control" id="pass" title="<?= $block->escapeHtmlAttr(__('Password')) ?>" data-validate="{required:true}">
                    </div>
                </div>
                <div class="actions-toolbar account-button">
                    <div class="primary"><button type="submit" class="action login small-button primary" name="send" id="send2"><span><?= $block->escapeHtml(__('Sign In')) ?></span></button></div>
                </div>
            </fieldset>
        </form>
    </div>
</div>

<script>
  require(
      [
          'jquery'
      ],
      function($) {
          $(document).ready(function(){

            $('#pass').on("focus keypress", function(e){
                if(e.which == 13) 
                {
                    $("#send2").trigger("click");
                }   
            });

          });
      }
  );
</script>

I Hope This Helps You.

2
  • Thanks! I tried this, but it did not solve this issue. I guess it has something to do with the default dropdown method. – JGeer Apr 14 '20 at 7:06
  • It's something js problem. Above code is working correctly. Please try to remove unnecessary js and code and check. – Msquare Apr 14 '20 at 7:22
0

try below code

I just create a custom module and override the customer login layout and load custom login template.

File: Devimage/Sms/view/frontend/layout/customer_account_login.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="customer_form_login">
            <block class="Devimage\Sms\Block\Customer\Login" name="customer_form_login_sms"/>
        </referenceBlock>
    </body>
</page>

Then Create a block for load template

File: Devimage/Sms/Block/Customer/Login.php

<?php
/**
 * Copyright © 2020 Devimage. All rights reserved.
 * See LICENSE.txt for license details.
 */

namespace Devimage\Sms\Block\Customer;

use Magento\Framework\View\Element\Template;
use Devimage\Sms\Helper\Data;
use Magento\Framework\View\Element\Template\Context;

/**
 * Class Login
 */
class Login extends Template
{
    /**
     * @var Data
     */
    protected $helper;

    /**
     * Login constructor.
     * @param Context $context
     * @param Data $helper
     * @param array $data
     */
    public function __construct(
        Context $context,
        Data $helper,
        array $data = []
    )
    {
        parent::__construct($context, $data);
        $this->helper = $helper;
    }

    /**
     * @return $this|Template
     */
    protected function _prepareLayout()
    {
        parent::_prepareLayout();
        if ($this->helper->isEnableMobileLogin()) {
            $this->getParentBlock()->setTemplate('Devimage_Sms::customer/login.phtml');
        }
        return $this;
    }
}

Create template

File: Devimage/Sms/view/frontend/templates/customer/login.phtml

<div class="block block-customer-login">
    <div class="block-content" aria-labelledby="block-customer-login-heading">
        <form class="form form-login"
              action="<?= $block->escapeUrl($block->getPostActionUrl()) ?>"
              method="post"
              id="login-form"
              data-mage-init='{"validation":{}}'>
            <?= $block->getBlockHtml('formkey') ?>
            <fieldset class="fieldset login">
                <div class="field note"><?= $block->escapeHtml(__('If you have an account, sign in with your email address.')) ?></div>
                <div class="field email required">
                    <div id="by_email" class="control sms-login-field">
                        <input name="login[username]"
                               value="<?= $block->escapeHtml($block->getUsername()) ?>" <?php if ($block->isAutocompleteDisabled()): ?> autocomplete="off"<?php endif; ?>
                               id="email" type="email" class="input-text" title="<?= $block->escapeHtml(__('Email')) ?>"
                               data-validate="{required:true, 'validate-email':true}">
                    </div>
                </div>
                <div class="field password required">
                    <label for="pass" class="label"><span><?= $block->escapeHtml(__('Password')) ?></span></label>
                    <div class="control">
                        <input name="login[password]"
                               type="password" <?php if ($block->isAutocompleteDisabled()): ?> autocomplete="off"<?php endif; ?>
                               class="input-text" id="pass" title="<?= $block->escapeHtml(__('Password')) ?>"
                               data-validate="{required:true}">
                    </div>
                </div>
                <?= $block->getChildHtml('form_additional_info') ?>
                <div class="actions-toolbar">
                    <div class="primary">
                        <button type="submit" class="action login primary" name="send" id="send2">
                            <span><?= $block->escapeHtml(__('Sign In')) ?></span></button>
                    </div>
                    <div class="secondary"><a class="action remind"
                                              href="<?= $block->escapeUrl($block->getForgotPasswordUrl()) ?>"><span><?= $block->escapeHtml(__('Forgot Your Password?')) ?></span></a>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
</div>

I hope this will help you.

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.