0

I have Magento 1.9 ce website with two modules installed.

One for Ajaxlogin in popup in all pages including homepage and another for Facebook Connect Login.

Now AjaxLogin popup is called in local.xml as below:

<kallyas_ajaxloginregister_ajaxlogin>
        <reference name="content">
            <block type="kallyas_ajaxloginregister/ajaxlogin" name="ajaxlogin" template="kallyas/ajaxloginregister/ajaxlogin.phtml" />
        </reference>
</kallyas_ajaxloginregister_ajaxlogin>

Js and css files are loaded fine, which I don't feel the need to show here.

And the Facebook connect block/phtml is loaded as below:

<customer_account_login>
    <reference name="before_body_end">
      <block type="facebookconnect/customer_facebookconnect" name="facebookconnect" template="facebookconnect/facebookconnect.phtml" />
    </reference>
</customer_account_login>

Now I want to add facebook connect login block into Ajaxlogin popup block, which are both from custom module.

How can I do it with xml changes only ?

I tried with getChildHtml() process but it doesn't work. I added below xml in my local.xml file

<kallyas_ajaxloginregister_ajaxlogin>
    <reference name="ajaxlogin">
      <block type="facebookconnect/customer_facebookconnect" name="facebookconnect" template="facebookconnect/facebookconnect.phtml" after="-" />
    </reference>
</kallyas_ajaxloginregister_ajaxlogin>

Then I called in ajaxlogin.phtml the getChildHtml function like below:

<?php echo $this->getChildHtml('ajaxlogin') ?>
<script type="text/javascript" charset="utf-8">
    jQuery.fn.center = function(pos){
        if (! pos)
            pos = 'fixed';

        var w = jQuery(window);
        this.css("position", pos);
        if ('fixed' == pos){
            this.css("top" , (w.height()-this.height())/2 + "px");
            this.css("left", (w.width()-this.width())  /2 + "px");
        } else if ('absolute' == pos){
            this.css("top",(w.height()-this.height())/2+w.scrollTop() + "px");
            if(w.height() < this.height())
                this.css("top", w.scrollTop() + "px");
            this.css("left",(w.width()-this.width())/2+w.scrollLeft() + "px");
        }
        return this;
    }
</script>

<?php if (!Mage::getStoreConfig('ajaxloginregister/kallyas_ajaxloginregister/show_mask')): ?>
<script type="text/javascript">//<![CDATA[
showmask = false;
//]]></script>
<?php endif;?>

<?php $shadow = Mage::getStoreConfig('ajaxloginregister/kallyas_ajaxloginregister/show_shadow_border');?>
<?php $bgColor = Mage::getStoreConfig('ajaxloginregister/kallyas_ajaxloginregister/bg');?>
<div id="ajaxLoginWindow" class="popup_login blueBorder <?php echo ($shadow)?'shadow':''?>" style="display: none;">
    <div class="popup-content" style="background-color: #<?php echo $bgColor;?>">
        <div class="page-head">
            <a id="closeLogin" class="close" href="javascript:void(0);" onclick="openAjaxLogin();"><span class="glyphicon glyphicon-remove"></span></a>
            <h3><?php echo $this->__('Sign in your account to have access to different features'); ?></h3>
        </div>
        <div id="ajaxLoginError"></div>
        <div id="ajaxLoginSuccess"></div>
        <button id="ajaxLoginRegisterLink" class="button"><span><?php echo $this->__('Create Account'); ?></span></button>
        <fieldset class="group-select wide">
            <ul>
                <li class="field">
                    <div class="input-box">
                        <input type="text" id="username" name="login[username]" value="" title="<?php echo $this->__('Email Address') ?>" class="validate-email required-entry input-text" placeholder="<?php echo $this->__('Email Address') ?>" />
                    </div>
                </li>
                <li class="field">
                    <div class="input-box">
                        <input type="password" id="password" name="login[password]" value="" title="<?php echo $this->__('Password') ?>" class="required-entry input-text" placeholder="<?php echo $this->__('Password') ?>" />
                    </div>
                </li>
            </ul>
            <div class="actions">
                <button class="button" id="login" type="submit"><span>Login</span></button>
                <div class="ajax_loader"></div>
            </div>
        </fieldset>

        <?php echo $this->getLayout()->createBlock('facebookconnect/customer_facebookconnect')->setTemplate('facebookconnect/facebookconnect.phtml')->toHtml(); ?>
        <?php echo $this->getLayout()->createBlock('googleconnect/customer_connectbutton')->setTemplate('google/connect/connectbutton.phtml')->toHtml(); ?>
        <?php echo $this->getLayout()->createBlock('twitterconnect/customer_connectbutton')->setTemplate('twitter/connect/connectbutton.phtml')->toHtml(); ?>

        <div class="clear"></div>
        <a href="javascript:void(0)" id="forgotlink"><?php echo $this->__('Forgot Your Password?'); ?></a> 
    </div>
</div>

<div id="ajaxForgotWindow" class="popup_forgot blueBorder <?php echo ($shadow)?'shadow':''?>" style="display: none;">
    <div class="popup-content" style="background-color: #<?php echo $bgColor;?>">
        <div class="page-head">
            <a id="closeForgot" class="close" href="javascript: void(0);"><span class="glyphicon glyphicon-remove"></span></a>
            <h3><?php echo $this->__('Forgot Your Password?'); ?></h3>
        </div>
        <p><?php echo $this->__('Please enter your email address below. You will receive a link to reset your password.'); ?></p>
        <div id="ajaxForgotError"></div>
        <div id="ajaxForgotSuccess"></div>
        <fieldset class="group-select wide">
            <ul class="form-list">
                <li class="wide">
                    <label for="email_address" class="required"><em>*</em><?php echo $this->__('Email Address') ?></label>
                    <div class="input-box">
                        <input type="text" name="email" id="forgot_email_address" value="" title="<?php echo $this->__('Email Address') ?>" class="validate-email required-entry input-text" />
                    </div>
                </li>
            </ul>
            <div class="actions">
                <button class="button" id="sendForgotEmail" type="submit"><span>Send My Details!</span></button>
                <div class="ajax_loader"></div>
            </div>
        </fieldset>
        <a href="javascript:void(0)" id="backtologin"><?php echo $this->__('Ahh, wait, I remember now!') ?></a>
        <div class="clear"></div>
    </div>
</div>

<script type="text/javascript">//<![CDATA[
jQuery('#login').bind('click', function(){
    // auth via AJAX request
    auth(jQuery('#username').val(), jQuery('#password').val());
});
jQuery('#sendForgotEmail').bind('click', function(){
    // auth via AJAX request
    SendForgotEmail(jQuery('#forgot_email_address').val());
});
jQuery('#password').keyup(function(e){
    if (13 == e.keyCode){
        jQuery('#login').click();
    }
});
jQuery('#forgot_email_address').keyup(function(e){
    if (13 == e.keyCode){
        jQuery('#sendForgotEmail').click();
    }
});

<?php

if (preg_match('#www.#i', $_SERVER['HTTP_HOST'])){
    $loginUrl = $this->getPostActionUrl();
} else {
    $loginUrl = str_replace('www.', '', $this->getPostActionUrl());
}

$forgotUrl = Mage::getUrl('customer/account/ajaxForgotPasswordPost');
if (preg_match('#www.#i', $_SERVER['HTTP_HOST'])){
    $forgotUrl = $forgotUrl;
} else {
    $forgotUrl = str_replace('www.', '', $forgotUrl);
}

?>

function auth(username, password)
{
    jQuery('#ajaxLoginWindow .ajax_loader').css('visibility', 'visible');
    jQuery.getJSON(
        '<?php echo $loginUrl ?>',
        {
            'login[username]': username,
            'login[password]': password
        },
        onLoginRequested
    );
}

function SendForgotEmail(email)
{
    jQuery('#ajaxForgotWindow .ajax_loader').css('visibility', 'visible');
    jQuery.getJSON(
        '<?php echo $forgotUrl ?>',
        {
            'email': email
        },
        onForgotRequested
    );
}

function onLoginRequested(data){
    jQuery('#ajaxLoginWindow .ajax_loader').css('visibility', 'hidden');
    if ('success' == data.message){
        jQuery('#ajaxLoginError').text('');
        jQuery('#ajaxLoginSuccess').text('Please wait...');
        jQuery('#ajax_login_controls').hide();
        window.location.href = '<?php echo $this->getRequest()->getRequestUri() ?>';
    } else {
        jQuery('#ajaxLoginError').text(data.message);
        setTimeout(function(){jQuery('#ajaxLoginError').text("");}, 2000);
    }
}

function onForgotRequested(data){
    jQuery('#ajaxForgotWindow .ajax_loader').css('visibility', 'hidden');
    if ('success' == data.message){
        jQuery('#ajaxForgotError').text('');
        jQuery('#ajaxForgotSuccess').text("<?php echo Mage::helper('customer')->__('You will receive an email with a link to reset your password.') ?>");
        setTimeout(function(){jQuery('#ajaxForgotSuccess').text("");jQuery("#backtologin").click();}, 5000);
    } else {
        jQuery('#ajaxForgotError').text(data.message);
        setTimeout(function(){jQuery('#ajaxForgotError').text("");}, 5000);
    }
}

function toggleAjaxLogin() {

    if (jQuery('#ajaxRegister')) {
        jQuery('#ajaxRegister').fadeOut('fast');
    }
    if (jQuery('#ajaxLoginWindow').css('display') == 'none'){
        if (mask && showmask) {
            mask.show();
        }
        jQuery('#ajaxLoginWindow').center();
        jQuery('#ajaxLoginWindow').fadeIn('fast');
        jQuery('#username').focus();
    } else {
        if (mask && showmask) {
            mask.hide();
        }
        jQuery('#ajaxLoginWindow').fadeOut('fast');
    }
}

function openAjaxLogin() {

    if (jQuery('#ajaxRegister')) {
        jQuery('#ajaxRegister').fadeOut('fast');
    }
    if (jQuery('#ajaxLoginWindow').css('display') == 'none'){
        if (mask && showmask) {
            mask.show();
        }
        jQuery('#ajaxLoginWindow').center();
        jQuery('#ajaxLoginWindow').fadeIn('fast');
        jQuery('#username').focus();
        showSocialLogin();
    } else {
        if (mask && showmask) {
            mask.hide();
        }
        jQuery('#ajaxLoginWindow').fadeOut('fast');
        hideSocialLogin();
    }
}

jQuery("#forgotlink").click(function(){
    if (jQuery('#ajaxLoginWindow').css('display') != 'none'){
        jQuery('#ajaxLoginWindow').fadeOut('fast');

        if (mask && showmask) {
            mask.show();
        }
        jQuery('#ajaxForgotWindow').center();
        jQuery('#ajaxForgotWindow').fadeIn('fast');
        jQuery('#forgot_email_address').focus();
    }
});
jQuery("#backtologin").click(function(){
    if (jQuery('#ajaxLoginWindow').css('display') == 'none'){
        jQuery('#ajaxForgotWindow').fadeOut('fast');

        if (mask && showmask) {
            mask.show();
        }
        jQuery('#ajaxLoginWindow').center();
        jQuery('#ajaxLoginWindow').fadeIn('fast');
        jQuery('#username').focus();
    }
});

jQuery("#closeForgot").click(function(){
    if (mask && showmask) {
        mask.hide();
    }
    jQuery('#ajaxForgotWindow').fadeOut('fast');
});

function showSocialLogin() {
    jQuery('#facebookconnect_wrapper').show();
    jQuery('#googleconnect_wrapper').show();
    jQuery('#twitterconnect_wrapper').show();
    return true;
}

function hideSocialLogin() {
    jQuery('#facebookconnect_wrapper').hide();
    jQuery('#googleconnect_wrapper').hide();
    jQuery('#twitterconnect_wrapper').hide();
    return true;
}

<?php if(Mage::getStoreConfig('ajaxloginregister/kallyas_ajaxloginregister/show_mask')): ?>
jQuery(document).ready(function(){
    jQuery('#overlayMask').click(function(){
        jQuery('#ajaxLoginWindow').fadeOut('fast');
        jQuery('#ajaxForgotWindow').fadeOut('fast');
        jQuery('#ajaxRegister').fadeOut('fast');
        if (mask && showmask){
            mask.hide();
        }
    });
});
jQuery(window).resize(function(){
    jQuery('#ajaxLoginWindow').center();
    jQuery('#ajaxForgotWindow').center();
    jQuery('#ajaxRegister').center('absolute');
});
<?php endif; ?>

//]]></script>

But this also doesn't work.

1

If it's enough to add the block next to the existing block in the Ajax popup, you can do this in your theme XML:

<kallyas_ajaxloginregister_ajaxlogin>
    <reference name="content ">
      <block type="facebookconnect/customer_facebookconnect" name="facebookconnect" template="facebookconnect/facebookconnect.phtml" />
    </reference>
</kallyas_ajaxloginregister_ajaxlogin>

If you really need to have it inside the other phtml, you can change the reference from content to ajaxlogin but it only works if the template contains a getChildHtml() call, so you might need to override the template as well.

  • @fschmengler I already tried both ways: The xml you stated above and getchildhtml thing, I called getChildHtml('faceboonconnect') function inside ajaxlogin.phtml but none of them works, even after clearing caches. – Vicky Dev Dec 21 '15 at 7:10
  • Please add the code that you tried to the question, I might spot the error there – Fabian Schmengler Dec 21 '15 at 7:21
  • Updated my question, please have a look. – Vicky Dev Dec 21 '15 at 7:31
  • getChildHtml(ajaxlogin) should be getChildHtml(facebookconnect) – Fabian Schmengler Dec 21 '15 at 8:05
0

Try bellow way

First Way

Now AjaxLogin popup is called in local.xml as below:

<kallyas_ajaxloginregister_ajaxlogin>
        <reference name="content">
         <block type="kallyas_ajaxloginregister/ajaxlogin" name="ajaxlogin" template="kallyas/ajaxloginregister/ajaxlogin.phtml">
       <block type="facebookconnect/customer_facebookconnect" name="facebookconnect" as="facebookconnect" template="facebookconnect/facebookconnect.phtml" after="-" />
     </block>   
        </reference>
</kallyas_ajaxloginregister_ajaxlogin>

Then I called in ajaxlogin.phtml the getChildHtml function like below:

<?php echo $this->getChildHtml('facebookconnect') ?>

Second Way

Now AjaxLogin popup is called in local.xml as below:

<kallyas_ajaxloginregister_ajaxlogin>
    <reference name="ajaxlogin">
      <block type="facebookconnect/customer_facebookconnect" name="facebookconnect" as="facebookconnect" template="facebookconnect/facebookconnect.phtml" after="-" />
    </reference>
</kallyas_ajaxloginregister_ajaxlogin>

Then I called in ajaxlogin.phtml the getChildHtml function like below:

<?php echo $this->getChildHtml('facebookconnect') ?>

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.