0

Hi am trying to show pop login form in my custom theme

Vendor/Theme/Magento_Theme/Layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="js/custom.js"/>
    </head>
    <body>
        <referenceContainer name="footer-container">
        <block class="Magento\Customer\Block\Form\Login" name="custom_customer_form_login" template="Magento_Theme::form/login.phtml" />
        </referenceContainer>
    </body>
</page>

*Vendor/Theme/Magento_Theme/templates/form/login.phtml

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/** @var \Magento\Customer\Block\Form\Login $block */
?>
<div class="block block-customer-login" id="popup-modal" style="display:none">
    <div class="block-title">
        <strong id="block-customer-login-heading" role="heading" aria-level="2"><?= $block->escapeHtml(__('Registered Customers')) ?></strong>
    </div>
    <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" data-hasrequired="<?= $block->escapeHtmlAttr(__('* Required Fields')) ?>">
                <div class="field note"><?= $block->escapeHtml(__('If you have an account, sign in with your email address.')) ?></div>
                <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" title="<?= $block->escapeHtmlAttr(__('Email')) ?>" data-mage-init='{"mage/trim-input":{}}' 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->escapeHtmlAttr(__('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>

Vendor/Theme/web/js/custom.js

define([
    'jquery',
    'Magento_Ui/js/modal/modal'
], function ($, modal) {
    'use strict';
 
    return {
        modalWindow: null,
 
        /**
         * Create popUp window for provided element
         *
         * @param {HTMLElement} element
         */
        createPopUp: function (element) {
            var options = {
                'type': 'popup',
                'modalClass': 'popup-authentication',
                'focus': '[name=username]',
                'responsive': true,
                'innerScroll': true,
                'trigger': '.proceed-to-checkout, .some-other-class',
                'buttons': []
            };
 
            this.modalWindow = element;
            modal(options, $(this.modalWindow));
        },
 
        /** Show login popup window */
        showModal: function () {
            $(this.modalWindow).modal('openModal');
        }
    };
});

but its not working anyone suggest what is the problem and why it is not working thanks in advance

2
1

Try this code

Vendor/Theme/Magento_Theme/templates/form/login.phtml

  <div id="your_popup_container" style="display:none">

    <div class="block block-customer-login" id="popup-modal" >
    <div class="block-title">
        <strong id="block-customer-login-heading" role="heading" aria-level="2"><?= $block->escapeHtml(__('Registered Customers')) ?></strong>
    </div>
    <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" data-hasrequired="<?= $block->escapeHtmlAttr(__('* Required Fields')) ?>">
                <div class="field note"><?= $block->escapeHtml(__('If you have an account, sign in with your email address.')) ?></div>
                <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" title="<?= $block->escapeHtmlAttr(__('Email')) ?>" data-mage-init='{"mage/trim-input":{}}' 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->escapeHtmlAttr(__('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>
</div>

<script type="text/javascript">
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                'type': 'popup',
                'title': 'your popup title',
                'modalClass': 'your_popup_custom_class',
                'responsive': true,
                'innerScroll': true,
                'buttons': [{
                    text: $.mage.__('Back'),
                    class: 'back_button_class',
                    click: function () {
                        this.closeModal();
                        // any javascript coode
                    }
                }]
            };

            $(document).ready(function(){
                var popup = modal(options, $('#your_popup_container')); 
                $("#your_popup_container").modal("openModal");
            });
        }
    );
</script>

Note :- In above code there is no need to external java script because i have added in phtml file.

8
  • please check and update me Jul 8 '20 at 11:36
  • hmm i have got that let me check
    – Pramod
    Jul 8 '20 at 11:37
  • na its not working moreover that it creates sign in link in the footer which i generally do not need
    – Pramod
    Jul 8 '20 at 11:42
  • Is popup show or not? Jul 8 '20 at 11:47
  • na its not working and still trying to debug that
    – Pramod
    Jul 8 '20 at 11:48

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.