Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Page 1 of 3
mini login box? 
 
Sean Yeomans
Jr. Member
 
Avatar
Total Posts:  29
Joined:  2008-04-02
Winnipeg
 

I have a designer who is freakin insisting that I make the login box front and center on our clients website (since thats what got signed off) and so I was wondering if there is a pre-fab way of showing a modified login box in the header?

I could just take the rendered form from the ‘login’ page and hard code it in with the correct form elements and ‘action’ attribute, but if there is a better way I’d love to know… I don’tquite get yet how to make my own ‘child html’ blocks. or how they work.

Image Attachments
loginbox.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
Mageho
Sr. Member
 
Avatar
Total Posts:  291
Joined:  2008-03-24
France, Paris
 

Hi Sean,

You have already a mini login form in
app/design/frontend/default/default/template/customer/form/mini.login.phtml

Cheers,
Ilan

 
Magento Community Magento Community
Magento Community
Magento Community
 
Sean Yeomans
Jr. Member
 
Avatar
Total Posts:  29
Joined:  2008-04-02
Winnipeg
 

hahah get out! man, I’ve barely cracked the lid on this sucker...!

so what do I need to do to include said form? does $this->getChildHTML() work?
i have some holes in my head to fill

whats funny is I only called it ‘mini login box’ in this forum post, otherwise all I searched the directories for was ‘login box’ and found nothing.
i’m silly

 
Magento Community Magento Community
Magento Community
Magento Community
 
Mageho
Sr. Member
 
Avatar
Total Posts:  291
Joined:  2008-03-24
France, Paris
 

Well, it will be better to do yourself ...
Ok, in the header.

So add in app/design/frontend/default/default/layout/page.xml :

<block type="customer/form_login" name="mini_login" template="customer/form/mini.login.phtml" />
in the block page/html_header.

Then, you just have to call the module :

<?php echo $this->getChildHtml('mini_login'?>

That’s all.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Sean Yeomans
Jr. Member
 
Avatar
Total Posts:  29
Joined:  2008-04-02
Winnipeg
 

Oh thank you Ilan
I think I need to sit down and conquer the XML section of the documentation. this helps get me started in that, though.
cheers wink

 
Magento Community Magento Community
Magento Community
Magento Community
 
kseones
Jr. Member
 
Total Posts:  2
Joined:  2008-09-05
 

Hi, now i have a login box and it works great. But i have a problem. After login the box is still there. What can i do?
thanks

 
Magento Community Magento Community
Magento Community
Magento Community
 
tas_zsolt
Jr. Member
 
Total Posts:  24
Joined:  2008-11-26
Romania
 

You need to use the folowing syntax in the xml file:

I put the mini login box in the right sidebar, and is working fine:

<!--
Load this update on every page when customer is logged out
-->
<customer_logged_out>
<reference name="top.links">
<action method="addLink" translate="label title” module="customer"><label>Log In</label><url helper="customer/getLoginUrl"/><title>Log In</title><prepare/><urlParams/><position>100</position></action>
</reference>
<remove name="wishlist_sidebar"></remove>
<remove name="reorder"></remove>
<reference name="right">
<block type="customer/form_login" name="mini_login" template="customer/form/mini.login.phtml" />
</reference>
</customer_logged_out>

I put this in customer.xml.

 
Magento Community Magento Community
Magento Community
Magento Community
 
kseones
Jr. Member
 
Total Posts:  2
Joined:  2008-09-05
 

it works thank you
i want ask a general question
can i move the block like in the attachment

Image Attachments
magento.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
Yooplaboom
Jr. Member
 
Total Posts:  30
Joined:  2008-11-25
 
tas_zsolt - 11 December 2008 06:57 AM

You need to use the folowing syntax in the xml file:

I put the mini login box in the right sidebar, and is working fine:

<!--
Load this update on every page when customer is logged out
-->
<customer_logged_out>
<reference name="top.links">
<action method="addLink" translate="label title” module="customer"><label>Log In</label><url helper="customer/getLoginUrl"/><title>Log In</title><prepare/><urlParams/><position>100</position></action>
</reference>
<remove name="wishlist_sidebar"></remove>
<remove name="reorder"></remove>
<reference name="right">
<block type="customer/form_login" name="mini_login" template="customer/form/mini.login.phtml" />
</reference>
</customer_logged_out>

I put this in customer.xml.

I’ve tried this, it works great.
To put it in a box like the newsletter, I’ve copied the code from template\newsletter\suscribe.phtml

<div class="box base-mini mini-newsletter">
    <
div class="head">
        <
h4><?php echo "Connexion" ?><a name="newsletter-box"></a></h4>
    </
div>
    <
form action="<?php echo $this->getPostActionUrl() ?>" method="post">
    <
fieldset class="content">
            <
label for="email"><?php echo $this->__('Email'?></label>
            <
input name="login[username]" type="text" id="newsletter" class="required-entry validate-email input-text" />
            <
label for="password"><?php echo $this->__('Password'?></label>
            <
input name="login[password]" type="text" id="newsletter" class="required-entry validate-email input-text" />
            <
button type="submit" class="form-button-alt"><span><?php echo $this->__('Login'?></span></button>
    </
fieldset>
</
form>
</
div>

But now, it changes my page title to “Customer login” :(

 
Magento Community Magento Community
Magento Community
Magento Community
 
sibble
Jr. Member
 
Avatar
Total Posts:  24
Joined:  2008-09-15
Philadelphia
 

I’m having the same problem…

From only adding:

<reference name="right"
<
block type="customer/form_login" name="mini_login" template="customer/form/mini.login.phtml" /> 
</
reference>

...to my customer.xml, it changes my home page title to “Customer Login.”

I’m just starting to look into this, if anyone has already solved please post solution thanks smile

Jeff

 
Magento Community Magento Community
Magento Community
Magento Community
 
sibble
Jr. Member
 
Avatar
Total Posts:  24
Joined:  2008-09-15
Philadelphia
 

I built a mini-box that fits perfectly into the default Magento template.  I also copied some of the form/input code from the main customer login page.

template/customer/form/mini.login.phtml:

<div class="box base-mini mini-login-form">
    <
div class="head">
        <
h4><?php echo $this->__('Login'?></h4>
    </
div>
    <
form action="<?php echo $this->getPostActionUrl() ?>" method="post" id="login-form">
        <
div class="content">
            <
ul class="form-list">
                    <
li>
                        <
label for="email"><?php echo $this->__('Email Address'?> <span class="required">*</span></label><br />
                        <
input name="login[username]" value="<?php echo $this->htmlEscape($this->getUsername()) ?>" title="<?php echo $this->__('Email Address') ?>" id="email" type="text" class="input-text required-entry" style="width:122px;" />
                    </
li>
                    <
li>
                        <
label for="pass"><?php echo $this->__('Password'?> <span class="required">*</span></label><br />
                        <
input name="login[password]" type="password" class="input-text required-entry validate-password" id="pass" style="width:122px;" />
                    </
li>
                </
ul>
                <
class="required"><?php echo $this->__('* Required Fields'?></p>
          </
div>
    <
div class="actions">
        <
button class="form-button-alt" type="submit" name="send" id="send2"><span><?php echo $this->__('Login'?></span></button>
    </
div>
</
form>
<
script type="text/javascript">
    var 
dataForm = new VarienForm('login-form'true);
</script>
</div>

layout/customer.xml:

<customer_logged_out>
        <
reference name="top.links">
            <
action method="addLink" translate="label title" module="customer"><label>Log In</label><url helper="customer/getLoginUrl"/><title>Log In</title><prepare/><urlParams/><position>100</position></action>
        </
reference>
        <
remove name="wishlist_sidebar"></remove>
        <
remove name="reorder"></remove>
        <
reference name="right"
            <
block type="customer/form_login" name="mini_login" template="customer/form/mini.login.phtml" /> 
        </
reference
    </
customer_logged_out>

CSS:

.mini-login-form h4 { background-image:url(../images/icon_page_white_text.gif); }

So I got 2 problems left, getting “Customer Login:” out of the title, and finding a way to always have this box located at the top of the column.

EDIT:
This worked to fix the page title: http://www.magentocommerce.com/boards/viewthread/23451/

Image Attachments
mini-login-box.gif
 
Magento Community Magento Community
Magento Community
Magento Community
 
sibble
Jr. Member
 
Avatar
Total Posts:  24
Joined:  2008-09-15
Philadelphia
 

Found out how to but the box on top of the column.

You need to add the before="-"

<block type="customer/form_login" name="mini_login" template="customer/form/mini.login.phtml" before="-" />

Now, I’m not sure how 2 blocks react both having this attribute, so i removed the before="-" from here:
checkout.xml

<block type="checkout/cart_sidebar" name="cart_sidebar" template="checkout/cart/sidebar.phtml" before="-">
The My Cart block is not longer the default top block of this column, which isn’t a big deal to me.

Jeff

 
Magento Community Magento Community
Magento Community
Magento Community
 
isaacs2
Jr. Member
 
Total Posts:  11
Joined:  2009-01-04
 

ok, here is mine if anyone wants to use/modify it for their site. Made this to use on the Moderate Theme Login box is in the header. When a customer logins they get a Welcome Message and a couple quick links (pics attached below):

Edited app/design/frontend/default/your_template/template/customer/form/mini.login.php like this:

<form id="mini_login_form" action="<?php echo $this->getPostActionUrl() ?>" method="post">
    <
div>
            <
input id="email" type="text" class="input-text required-entry" name="login[username]" value="<?php echo $this->helper('catalogSearch')->getEscapedQueryText() ?>" title="<?php echo $this->__('Email Address') ?>" />&nbsp;
            <
input id="pass" type="password" class="input-text required-entry validate-password" name="login[password]" value="<?php echo $this->helper('catalogSearch')->getEscapedQueryText() ?>" />&nbsp;
            <
input type="image" src="<?php echo $this->getSkinUrl('images/btn_go.gif') ?>" alt="<?php echo $this->__('Go') ?>"/><br />
            <
h6>&nbsp;&nbsp;First time here? <a href="<?php echo $this->getUrl('customer/account/create/') ?>" title="Logout">Register</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="<?php echo $this->getUrl('customer/account/forgotpassword/') ?>" title="Logout">Forgot Password?</a></h6>
           <
script type="text/javascript">
            var 
searchForm = new Varien.searchForm('mini_login_form''email''<?php echo $this->helper('catalogSearch')->__('Email Address') ?>');
              new 
Varien.searchForm('mini_login_form''pass''<?php echo $this->helper('catalogSearch')->__('Password') ?>');
          
</script>
     
</div>
</
form>

Created the file app/design/frontend/default/your_template/template/customer/welcome.phtml

<ul class="header-links">
<
li class="first"><?php echo $this->getLayout()->getBlock('header')->getWelcome() ?></li>
<
li><a href="<?php echo $this->getUrl('customer/account/') ?>" title="My Account">My Account</a></li>
<
li class="last"><a href="<?php echo $this->getUrl('customer/account/logout/') ?>" title="Logout">Logout</a></li>
</
ul>

Added this line to my header where I wanted the box to display:

<div  class="mini-login"><?php echo $this->getChildHtml('mini_login'?><?php echo $this->getChildHtml('welcome'?></div>

Added the following lines to app/design/frontend/default/your_template/layout/page.xml directly below
<block type="page/html_header" name="header" as="header">

<block type="customer/form_login" name="mini_login" template="customer/form/mini.login.phtml" />
            <
block type="core/template" name="welcome" template="customer/welcome.phtml" />

Edited app/design/frontend/default/your_template/layout/customer.xml as follows

<customer_logged_in>
        <
remove name="mini_login"></remove>
        <
reference name="header">
           <
block type="core/template" name="welcome" template="customer/welcome.phtml" />
        </
reference>

    </
customer_logged_in>

    <
customer_logged_out>
        <
reference name="header">
           <
block type="customer/form_login" name="mini_login" template="customer/form/mini.login.phtml" />
        </
reference>
        <
remove name="wishlist_sidebar"></remove>
        <
remove name="welcome"></remove>
    </
customer_logged_out>

Then edited this line in skin/frontend/default/your_template/css/boxes.css to this (may be relevant only to my template)

.headerlinks-bar           { color:#444; text-align:right; float:right; margin-top:16px; padding-bottom:3px;}

Finally I created and added these lines also to skin/frontend/default/your_template/css/boxes.css (note most of this was to match the Moderate theme and may not be needed)

.mini-login { backgroundtransparentfloat:right;    margin-top:0pxmargin-right:3pxheight:20px;}
.mini-login           { color:#444; text-align:right;}
.mini-login .header-links              { padding-left:8px}
.mini-login .header-links,
.
mini-login .header-links li           { display:inline;}
.mini-login .header-links li           { padding:0 4px 0 1px}
.mini-login .header-links a,
.
mini-login .header-links a:hover      { color:#444; }
.mini-login .header-links a            { padding:0 7px 0 0background:url(../images/links_separator.gifno-repeat 10050%; }
.mini-login .header-links .last a      { padding:0background:none}
.mini-login-td { height:36px;}
.mini-login div h6 {
    font
-size:10px;
    
text-alignleft;
}

Used the Page Title Fix listed in the post above also. Hopefully this helps someone else out but is really selfishly here to remind me what I did when I crash the site again!! cool smile

Shane

Image Attachments
Logged-out.JPGLogged-in.JPG
 
Magento Community Magento Community
Magento Community
Magento Community
 
artbussy
Jr. Member
 
Total Posts:  22
Joined:  2008-08-27
 

Awesome! This seems to work for me in a local environment. But only without updating the customer.xml!
Where exactly did you place the code in this file? When I use your code in customer.xml I get an error.

Next step will be figuring out if a ‘remember me’ checkbox can be added.

Thanks,
Arthur

EDIT: I were too fast. Found the place where to edit customer.xml: after <!--
Load this update on every page when customer is logged in
-->

 
Magento Community Magento Community
Magento Community
Magento Community
 
artbussy
Jr. Member
 
Total Posts:  22
Joined:  2008-08-27
 

When doing a search the result page shows the search terms in the search box (which is okay) but also in the émail address box’ of the mini-login form.

Anybody a clue?

 
Magento Community Magento Community
Magento Community
Magento Community
 
yudhijatnika
Jr. Member
 
Total Posts:  1
Joined:  2009-02-23
 

hey i have version 1.2.1 but seems that guidance are doesn’t work
is there any version issue ?

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 1 of 3