Jump to content

<SOLVED>Question about "Move JavaScript to the end"

ysco
 Share

Recommended Posts

ysco Newbie

ysco

Posted
Posted (edited)

Hello All,

 

I have some time ago updated my store from 1.5.x to 1.6.0.6 and is running without problems.

Now i have updated my Test server that from 1.6.0.6. to version 1.6.0.8 and i noticed under performance under the part  "combine/cache options" there you have a option called "Move JavaScript to the end"

I have seen that for the first time so i have read that this is a new option for PS 1.6.x but this is the first time i have seen this option.

My question is how do i get this option in my current PS 1.6.0.6 version as it is not shown there.

Hope someone can help me in the right direction.

 

Thanks.

 

ysco..

Edited by ysco (see edit history)
Link to comment
Share on other sites
ysco Newbie

ysco

Posted
  • Author
Posted

Hello EI Patron,

 

Thanks for your reply.

 

So in 1.6.0.6 this is also working already by default but in new ps 1.6.0.8. they have added a option to set it ON or OFF as i understand it correct ;)

 

Thanks for letting me know.

 

Best regards,

 

ysco..

Link to comment
Share on other sites
PrestaHeroes USA Mentor

PrestaHeroes USA

Posted
Posted

Hi ysco,

 

visit your shop, any page, then right click-->view source.

 

scroll to the bottom, this is where you should find the bulk of your JavaScript being loaded.

 

Loading at the bottom is the recommended way to speed up 'above the fold' page render.

 

In 1.6.0.7 they added the capability to load at the top, I suppose this was done because  theme developers have not caught up with best in class practices (sort of like herding cats).

Link to comment
Share on other sites
  • 5 weeks later...
PrestaHeroes USA Mentor

PrestaHeroes USA

Posted
Posted

if it works, but in my case if I want to load in the header to display undeployed my top menu with 1.6.06 and not update because I have to work again in my template, and I have no way

 

ps supports from 1.6.0.7 and higher, load top, but it does not support 'some' top 'some' bottom.

 

it is all or nothing.

 

I hope I understand your question well enough to add this comment.

Link to comment
Share on other sites
Ron morales Newbie

Ron morales

Posted
Posted (edited)

I generate this file: media.php and Paste the file to override/classes/Media.php, cache/class_index.php delete? or add 'Media' => 

array (

'path' => 'override/classes/Media.php',

'type' => 'class',

)

 

 

 

in <head><script src="/themes/mytheme/js/myscript.js" data-keepinline="true"></script></head> 

correct?

Edited by Ron morales (see edit history)
Link to comment
Share on other sites
PrestaHeroes USA Mentor

PrestaHeroes USA

Posted
Posted

 

I generate this file: media.php and Paste the file to override/classes/Media.php, cache/class_index.php delete? or add 'Media' => 

array (

'path' => 'override/classes/Media.php',

'type' => 'class',

)

 

 

 

in <head><script src="/themes/mytheme/js/myscript.js" data-keepinline="true"></script></head> 

correct?

 

 

I am not sure of your question, so I take a guess.

 

after you create the overrride, then delete file cache/class_index.php

Link to comment
Share on other sites
Ron morales Newbie

Ron morales

Posted
Posted

I am not sure of your question, so I take a guess.

 

after you create the overrride, then delete file cache/class_index.php

in the comment https://gist.github.com/hereswhatidid/8c8edef106ee95138b03  

 

To install :

1. Paste the file to override/classes/Media.php

2. In cache/class_index.php find and complete this block :<----------------paste in this file---

'Media' =>

array (

'path' => 'override/classes/Media.php',

'type' => 'class',

)

Link to comment
Share on other sites
PrestaHeroes USA Mentor

PrestaHeroes USA

Posted
Posted

 

in the comment https://gist.github.com/hereswhatidid/8c8edef106ee95138b03

 

To install :

1. Paste the file to override/classes/Media.php

2. In cache/class_index.php find and complete this block :<----------------paste in this file---

'Media' =>

array (

'path' => 'override/classes/Media.php',

'type' => 'class',

)

 

 

1. create new file, Paste the file into file, then save as Media.php and ftp to remote server here: override/classes/Media.php

2. delete file cache/class_index.php  (this will automatically add the 'Media' => array to cache/class_index.php

Link to comment
Share on other sites
Ron morales Newbie

Ron morales

Posted
Posted

1. create new file, Paste the file into file, then save as Media.php and ftp to remote server here: override/classes/Media.php

 

2. delete file cache/class_index.php  (this will automatically add the 'Media' => array to cache/class_index.php

i test but not worktest.jpg

Link to comment
Share on other sites
PrestaHeroes USA Mentor

PrestaHeroes USA

Posted
Posted

This call work for me

<script type="text/javascript" data-keepinline="true">
// this script will remain here when rendered
alert( "hello!" );
</script>

when call <script  src="http://www.test/themes/default-bootstrap/js/modules/blocktopmenu/js/hoverIntent.js"></script> add to end body

 

data-keepinline is how it's done.  glad you got it sorted

  • Like 1
Link to comment
Share on other sites
  • 3 weeks later...
Daniel - PrestaBR Rookie

Daniel - PrestaBR

Posted
Posted

Hi there, El Patron

 

Is it possible to keep a javascript file loading inside a div only in a CMS Page?

 

I'd like to embed a tumblr page in cms.tpl: 

<div id="tumblr_page">
<script type="text/javascript" src="//prestashop.tumblr.com/js"></script>
</div>

If it moves to the end, the tumblr page renders after the footer...

 

If I disable the function, it works, but it loads all other scripts inside header in all pages...

Link to comment
Share on other sites
PrestaHeroes USA Mentor

PrestaHeroes USA

Posted
Posted

 

Hi there, El Patron

 

Is it possible to keep a javascript file loading inside a div only in a CMS Page?

 

I'd like to embed a tumblr page in cms.tpl: 

<div id="tumblr_page">
<script type="text/javascript" src="//prestashop.tumblr.com/js"></script>
</div>

If it moves to the end, the tumblr page renders after the footer...

 

If I disable the function, it works, but it loads all other scripts inside header in all pages...

 

 

did you add to cms and it loaded bottom, i.e. you can add it to cms without issue?

 

please follow this post, it shows how one can add javascript and be excluded from auto move bottom (keep at top).  Please post there if you have any questions concerning that method.  It does work as several have used this solution.

http://www.prestashop.com/forums/topic/315798-no-html-allowed-in-blockcmsinfo/?p=1666595

  • Like 1
Link to comment
Share on other sites
Daniel - PrestaBR Rookie

Daniel - PrestaBR

Posted
Posted

Thanks El Patron

 

Unfortunately, That doesn't add anything new to this.

 

What I wanted is to add a condition to keep JS files in place only for a determined page or file.

The best option would be if the attribute "data-keepline" did that. But it doesn't.

I guess that works only for inline JS.

 

I could write an override for the class/controller that moves the JS to the end of the page.

Do you know where is it?

 

Thanks.

Link to comment
Share on other sites
PrestaHeroes USA Mentor

PrestaHeroes USA

Posted
Posted

Thanks El Patron

 

Unfortunately, That doesn't add anything new to this.

 

What I wanted is to add a condition to keep JS files in place only for a determined page or file.

The best option would be if the attribute "data-keepline" did that. But it doesn't.

I guess that works only for inline JS.

 

I could write an override for the class/controller that moves the JS to the end of the page.

Do you know where is it?

 

Thanks.

 

sorry, I thought in-line, so this is called within module  yes?

Link to comment
Share on other sites
Daniel - PrestaBR Rookie

Daniel - PrestaBR

Posted
Posted (edited)

No.

 

I mean the code is loaded from an external file, not written directly in the .TPL (inline).

 

What I did was to insert the file manually in cms.tpl, like this:

{if $cms->id eq '10'}
<div id="tumblr_test" class="col-sm-12 col-md-12 col-xs-12">
<script type="text/javascript" src="//prestashop.tumblr.com/js" data-keepinline="true"></script>
<script type="text/javascript">
$('.tumblr_post').addClass('col-sm-3 col-md-3 col-xs-12');
</script>
</div>
{/if}

That works like a charm without moving to the end of the page, 'cause it has to load inside the <div></div>.

 

If override the controller/class that moves the JS to the end I can put a condition like:

if ($page_name !== 'cms')
{
     // Move to the end
}else{ 
     // Keep in header
}

I just need to know which class/controller does that...

 

Thanks

Edited by Daniel - PrestaBR
addicional info (see edit history)
  • Like 1
Link to comment
Share on other sites
  • 3 months later...
ps3z Newbie

ps3z

Posted
Posted

hi 

 

i have problem with java move to end option. if i enable it from performance... my payment system is forwarding to previous page.and it doesnt work.if i disable java move to end. states are being invisible on address.

 

 

Do you have any idea about it?

 

 

 

 

Thanks in advance

Link to comment
Share on other sites
PrestaHeroes USA Mentor

PrestaHeroes USA

Posted
Posted

hi 

 

i have problem with java move to end option. if i enable it from performance... my payment system is forwarding to previous page.and it doesnt work.if i disable java move to end. states are being invisible on address.

 

 

Do you have any idea about it?

 

 

 

 

Thanks in advance

 

Not all templates modules are 1.6 javascript bottom compliant.  Prior to  1.6.0.7 all javascript was forced to bottom without option.  This created a 'few' issues with theme/module developers work, so in 1.6.0.7 they added enable/disable move.

 

There is not 'easy' solution for you to make your modules compliant with move all bottom, sorry.  I wish you the best if you want to try.  With my JavaPro, you can select which java moves bottom, while keeping up top those required.

Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...