[SOLVED] display loading image

[cingkonext]

How to display loading image after clicking submit button on authentication.tpl?

 

code reference : this

Edited May 6, 2013 by hady (see edit history)

[PascalVG]

In authentication.tpl there are 4 submit moments:

- new account

- login to existing account

- guest checkout

- register (?, not fully sure when/what this is)

 

Any specific place you need this?

 

Example for new account:

In your reference page, they load jquery. This is not necessary, as PS uses jquery already. So the changes are easy:

 

find the following code (easiest when you search for "create-account_form" )

Then add the red code as indicated below:

 

<form action="{$link->getPageLink('authentication', true)}" method="post" id="create-account_form" class="std">
 <fieldset>
  <h3>{l s='Create an account'}</h3>
  <div class="form_content clearfix">
   <p class="title_block">{l s='Please enter your email address to create an account.'}.</p>
   <div class="error" id="create_account_error" style="display:none"></div>
   <p class="text">
 <label for="email_create">{l s='Email address'}</label>
 <span><input type="text" id="email_create" name="email_create" value="{if isset($smarty.post.email_create)}{$smarty.post.email_create|stripslashes}{/if}" class="account_input" /></span>
   </p>
   <p class="submit">
 {if isset($back)}<input type="hidden" class="hidden" name="back" value="{$back|escape:'htmlall':'UTF-8'}" />{/if}

 

<input type="submit" id="SubmitCreate" name="SubmitCreate" class="button_large" value="{l s='Create an account'}" onclick="$('#loading').show();" />

<div id="loading" style="display:none;"><img src="/img/loading.gif" width="40" height="40" alt="" />Loading!</div>

 

 <input type="hidden" class="hidden" name="SubmitCreate" value="{l s='Create an account'}" />
   </p>
  </div>
 </fieldset>
</form>

 

Then copy the picture of your example page (right click on circling image and save to your computer.

Then upload the 'loading.gif' file to:

<your prestashop rootfolder>/img/loading.gif

 

(You can change this path of course, but then change into code as well)

 

Try to add a new account, click the create account button and see result.

 

Hope this helps,

pascal

[cingkonext]

Thank you..

Yes, I need for new account moment.. perfect...

[vekia]

hey, remember that if your problem is solved, you can always mark own thread as solved - it is really helpfull for other forum members

 

regards

[cingkonext]

i dont know how to mark this thread as solved..

[PascalVG]

Hi Hady, see my footer text how to mark your post as [sOLVED] :-)

Glad I could help, success with your shop!

Pascal

[vekia]

i dont know how to mark this thread as solved..

 

hello

 

it's easy, here is an instruction from forum rules:

 

[sOLVED] Topic

 

If, after posting a topic, you find a solution to your problem, please indicate it in your post and describe the solution.

There is nothing more frustrating for users with the same issue who come across your post "all is good, I fixed it..." without an explanation of how to fix it.

 

Furthermore if you are the author of the topic for which a solution has been found, please edit your topic title to mark it as [sOLVED].

 

To mark a topic as [solved] :

- Edit the first post of your topic by clicking on the "Edit" button,

- Click on the "Use full editor" button,

- Add the "[solved]" string at the beginning of your topic title and click on the "Submit Modified Post" button.