Magento custom module phtml inside another custom module phtml block

Question

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.

Fabian Schmengler · Accepted Answer · 2015-12-21 07:03:45Z

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.

answered Dec 21, 2015 at 7:03

Fabian Schmengler

66.1k25 gold badges188 silver badges422 bronze badges

@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
Commented Dec 21, 2015 at 7:10
Please add the code that you tried to the question, I might spot the error there
– Fabian Schmengler
Commented Dec 21, 2015 at 7:21
Updated my question, please have a look.
– Vicky Dev
Commented Dec 21, 2015 at 7:31
getChildHtml(ajaxlogin) should be getChildHtml(facebookconnect)
– Fabian Schmengler
Commented Dec 21, 2015 at 8:05

Add a comment |

Abdul · Accepted Answer · 2015-12-21 09:11:15Z

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') ?>

Stack Exchange Network

Magento custom module phtml inside another custom module phtml block

2 Answers 2

Your Answer

Not the answer you're looking for? Browse other questions tagged
magento-1.9
layout
blocks
xml
custom-block
or ask your own question.

Hot Network Questions

Magento custom module phtml inside another custom module phtml block

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged magento-1.9layoutblocksxmlcustom-block or ask your own question.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
magento-1.9
layout
blocks
xml
custom-block
or ask your own question.