Adding Prototype js to template...

Hi!

I would like to have a few things (like the login) popup in a nice ajax window. I'm not very good at programming but am determined to figure it out, however I do not know if I should be messing with header.tpl, header.php or some other file? A little hint, please? Thanks!

jQuery is already part of OpenCart. It is also the most popular, smallest, fastest, and most intuitive. Just use jQuery and thickbox, which is also already part of OpenCart for the enlarged pictures. Simply apply that to the login button.

That sounds good. Where would it be applied? header.tpl seems to be more for layout, so would it go in header.php? Do I need to add anything so it can pull the jquery source?

Thank you kindly for your time.

javascript in general is a "Client-side" technology. That means it loads on the Customers browser, not on your server. So yea, the tpl file is what the customer sees so that is where you would put javascript and jquery (and prototype and mootools, etc)

Start by looking at the thickbox link I sent you to get an idea how to use it. There are examples with form fields there. Then think of the concept that you are loading a page that normally loads in a normal window, but loading it in a thickbox window.

Thanks again. I'm playing around with it right now. Going through trial and error, right now I have the background turn grey and the loadbar appears, but the page isn't loading. I'll try to post when I have it up and running. Your support is great. I like how you answered the question in a way to help me learn, rather then just spoon feeding.

"Give a man a fish, he'll eat for a day. Teach a man to fish, he'll eat for a lifetime." Well done.

My trials have only resulted in error.

Attempt 1 was to use the InlineContent example, but I had mysite.com/index.php?=account/login show up as part of the text, inbetween "Login" and "Account". It also didn't load anything.

Attempt 2 was to create an iframe, using the Open iFrame Modal example. Using the code <a class="thickbox" title="" href="<?php echo $login; ?>?placeValuesBeforeTB_... resulted in an iframe popping up with the OpenCart "page not found" screen.

Attempt 3 was to create the Ajax login (modal). I used the code <a href="ajaxLogin.html?height=8.... and copy and pasted login.php in to the appropriate divs, but the popup came up blank.

I used FireBug to find and copy their code, but I can't seem to get it right. Any more hints?

Thanks.

Ok, I'm close to giving up. Does anyone know how to have the login display as a a cool ajax popup type?

I still can't get it.

I have placed this in header.tpl:
1)
...<a href="#TB_inline?height=355&width=350&inlineId=hiddenContent" class="thickbox">TEST BOX<img src="catalog/view/theme/default/image/icon_login.png" alt="" /></a>
</div>
</div>

2)
<div id="hiddenModalContent" style="display: none">
<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="login">
<?php echo $text_i_am_returning_customer; ?><br />
<br />
<b><?php echo $entry_email; ?></b><br />
<input type="text" name="email" />
<br />
<br />
<b><?php echo $entry_password; ?></b><br />
<input type="password" name="password" />
<br />
<a href="<?php echo $forgotten; ?>"><?php echo $text_forgotten_password; ?></a><br />
<div style="text-align: right;"><a onclick="$('#login').submit();" class="button"><span><?php echo $button_login; ?></span></a></div>
<?php if ($redirect) { ?>
<input type="hidden" name="redirect" value="<?php echo $redirect; ?>" />
<?php } ?>
</form>
<input type="submit" value="Ok" onclick="tb_remove()" /></div>

but it doesn't work. I get an empty pop-up window. I also tried it without "style="display: none" but that got me the form with undefined errors on every other line.
I tried it with the rest of the code from login.tpl, but it also came up blank.

Any suggestions?

Well first off you have inlineId=hiddenContent
but the actual div is called "hiddenModalContent"

So I fixed that in my test setup. But then there are lots of php errors for references to unset variables because you haven't set them in the controller.

Basically if you are calling the login from within the header, you will need to merge the catalog/controller/account/login.php page into the catalog/controller/common/header.php

Unless you use an iframe and load the login page (without the layout) into the frame. It would likely need to be a clone of the existing login page so you'd probably make another controller called "tblogin.php" with a custom "tblogin.tpl" and "tblogin.css"

Then have the new tblogin controller not load the layout part. Instead, have the tpl load the custom css, and keep the successful login redirect to the checkout page

I see that this thread has pretty much been abandoned. If you are still interested in something like this then reply here and let me know. I have thought about doing this to my development shop. I will probably start working on it today!

Hello, I am after an ajax pop up / dropdown login form to include in my header. Did you manage to build the mod you mention above?

I have made extension Pop-up Login Ajax Window
http://www.opencart.com/index.php?route ... on_id=2455