Extracting Javascript codes & CSS styles from source code at index.php to external files

[jirislav]

Hi there!

 

I'm using PrestaShop™ 1.4.7.3 & I've been trying SEO online analysis. I've found that at the site was found CSS or JavaScript in the HTML code of the page.It was suggested to me to move it into external files. Okay, but how can I do it? I tried to access index.php through FTP, but this is what i got:

<?php
/*
* 2007-2012 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Open Software License (OSL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/osl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2012 PrestaShop SA
*  @version  Release: $Revision: 14007 $
*  @license    http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*/

require(dirname(__FILE__).'/config/config.inc.php');
ControllerFactory::getController('IndexController')->run();

On the page are these javascripts & CSS styles:

<script type="text/javascript">/* <![CDATA[ */
var _hwq=_hwq||[];_hwq.push(['setKey','E82B199F2792A9A6EC338E8D38C3B635']);_hwq.push(['setTopPos','60']);_hwq.push(['showWidget','22']);(function(){var ho=document.createElement('script');ho.type='text/javascript';ho.async=true;ho.src=('https:'==document.location.protocol?'https://ssl':'http://www')+'.heureka.cz/direct/i/gjs.php?n=wdgt&sak=E82B199F2792A9A6EC338E8D38C3B635';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ho,s);})();/* ]]> */</script>

<script type="text/javascript">/* <![CDATA[ */
var baseDir='http://www.sedacivaky.eu/';var static_token='abb0a6113ba5516af65ed42878e21012';var token='585ae46801f771c57bfbf41d94b81df6';var priceDisplayPrecision=0;var priceDisplayMethod=0;var roundMode=2;/* ]]> */</script>

<script type="text/javascript">/* <![CDATA[ */
var _gaq=_gaq||[];_gaq.push(['_setAccount','UA-18925753-1']);_gaq.push(['_setSiteSpeedSampleRate',5]);_gaq.push(['_trackPageview','/order/step0.html']);(function(){var ga=document.createElement('script');ga.type='text/javascript';ga.async=true;ga.src=('https:'==document.location.protocol?'https://ssl':'http://www')+'.google-analytics.com/ga.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ga,s);})();/* ]]> */</script>

<style type="text/css">.fb_hidden{position:absolute;top:-10000px;z-index:10001}
.fb_invisible{display:none}
.fb_reset{background:none;border:0;border-spacing:0;color:#000;cursor:auto;direction:ltr;font-family:"lucida grande", tahoma, verdana, arial, sans-serif;font-size:11px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:1;margin:0;overflow:visible;padding:0;text-align:left;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;visibility:visible;white-space:normal;word-spacing:normal}
.fb_reset > div{overflow:hidden}
.fb_link img{border:none}
.fb_dialog{background:rgba(82, 82, 82, .7);position:absolute;top:-10000px;z-index:10001}
.fb_dialog_advanced{padding:10px;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px}
.fb_dialog_content{background:#fff;color:#333}
.fb_dialog_close_icon{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 0 transparent;_background-image:url(http://static.ak.fbcdn.net/rsrc.php/v2/yL/r/s816eWC-2sl.gif);cursor:pointer;display:block;height:15px;position:absolute;right:18px;top:17px;width:15px;top:8px\9;right:7px\9}
.fb_dialog_mobile .fb_dialog_close_icon{top:5px;left:5px;right:auto}
.fb_dialog_padding{background-color:transparent;position:absolute;width:1px;z-index:-1}
.fb_dialog_close_icon:hover{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 -15px transparent;_background-image:url(http://static.ak.fbcdn.net/rsrc.php/v2/yL/r/s816eWC-2sl.gif)}
.fb_dialog_close_icon:active{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 -30px transparent;_background-image:url(http://static.ak.fbcdn.net/rsrc.php/v2/yL/r/s816eWC-2sl.gif)}
.fb_dialog_loader{background-color:#f2f2f2;border:1px solid #606060;font-size:24px;padding:20px}
.fb_dialog_top_left,
.fb_dialog_top_right,
.fb_dialog_bottom_left,
.fb_dialog_bottom_right{height:10px;width:10px;overflow:hidden;position:absolute}
.fb_dialog_top_left{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ye/r/8YeTNIlTZjm.png) no-repeat 0 0;left:-10px;top:-10px}
.fb_dialog_top_right{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ye/r/8YeTNIlTZjm.png) no-repeat 0 -10px;right:-10px;top:-10px}
.fb_dialog_bottom_left{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ye/r/8YeTNIlTZjm.png) no-repeat 0 -20px;bottom:-10px;left:-10px}
.fb_dialog_bottom_right{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ye/r/8YeTNIlTZjm.png) no-repeat 0 -30px;right:-10px;bottom:-10px}
.fb_dialog_vert_left,
.fb_dialog_vert_right,
.fb_dialog_horiz_top,
.fb_dialog_horiz_bottom{position:absolute;background:#525252;filter:alpha(opacity=70);opacity:.7}
.fb_dialog_vert_left,
.fb_dialog_vert_right{width:10px;height:100%}
.fb_dialog_vert_left{;margin-right:-10px}
.fb_dialog_horiz_top,
.fb_dialog_horiz_bottom{width:100%;height:10px}
.fb_dialog_horiz_top{margin-top:-10px}
.fb_dialog_horiz_bottom{bottom:0;margin-bottom:-10px}
.fb_dialog_iframe{line-height:0}
.fb_dialog_content .dialog_title{background:#6d84b4;border:1px solid #3b5998;color:#fff;font-size:14px;font-weight:bold;margin:0}
.fb_dialog_content .dialog_title > span{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/yd/r/Cou7n-nqK52.gif)
no-repeat 5px 50%;float:left;padding:5px 0 7px 26px}
body.fb_hidden{-webkit-transform:none;height:100%;margin:0;overflow:visible;position:absolute;top:-10000px;left:0;width:100%}
.fb_dialog.fb_dialog_mobile.loading{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ya/r/3rhSv5V8j3o.gif)
white no-repeat 50% 50%;min-height:100%;min-width:100%;overflow:hidden;position:absolute;top:0;z-index:10001}
.fb_dialog.fb_dialog_mobile.loading.centered{max-height:590px;min-height:590px;max-width:500px;min-width:500px}
#fb-root #fb_dialog_ipad_overlay{background:rgba(0, 0, 0, .45);position:absolute;left:0;top:0;width:100%;min-height:100%;z-index:10000}
#fb-root #fb_dialog_ipad_overlay.hidden{display:none}
.fb_dialog.fb_dialog_mobile.loading iframe{visibility:hidden}
.fb_dialog_content .dialog_header{-webkit-box-shadow:white 0 1px 1px -1px inset;background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#738ABA), to(#2C4987));border-bottom:1px solid;border-color:#1d4088;color:#fff;font:14px Helvetica, sans-serif;font-weight:bold;text-overflow:ellipsis;text-shadow:rgba(0, 30, 84, .296875) 0 -1px 0;vertical-align:middle;white-space:nowrap}
.fb_dialog_content .dialog_header table{-webkit-font-smoothing:subpixel-antialiased;height:43px;width:100%
}
.fb_dialog_content .dialog_header td.header_left{font-size:12px;padding-left:5px;vertical-align:middle;width:60px
}
.fb_dialog_content .dialog_header td.header_right{font-size:12px;padding-right:5px;vertical-align:middle;width:60px
}
.fb_dialog_content .touchable_button{background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4966A6),
color-stop(0.5, #355492), to(#2A4887));border:1px solid #29447e;-webkit-background-clip:padding-box;-webkit-border-radius:3px;-webkit-box-shadow:rgba(0, 0, 0, .117188) 0 1px 1px inset,
rgba(255, 255, 255, .167969) 0 1px 0;display:inline-block;margin-top:3px;max-width:85px;line-height:18px;padding:4px 12px;position:relative}
.fb_dialog_content .dialog_header .touchable_button input{border:none;background:none;color:#fff;font:12px Helvetica, sans-serif;font-weight:bold;margin:2px -12px;padding:2px 6px 3px 6px;text-shadow:rgba(0, 30, 84, .296875) 0 -1px 0}
.fb_dialog_content .dialog_header .header_center{color:#fff;font-size:16px;font-weight:bold;line-height:18px;text-align:center;vertical-align:middle}
.fb_dialog_content .dialog_content{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/y9/r/jKEcVPZFk-2.gif) no-repeat 50% 50%;border:1px solid #555;border-bottom:0;border-top:0;height:150px}
.fb_dialog_content .dialog_footer{background:#f2f2f2;border:1px solid #555;border-top-color:#ccc;height:40px}
#fb_dialog_loader_close{float:left}
.fb_dialog.fb_dialog_mobile .fb_dialog_close_button{text-shadow:rgba(0, 30, 84, .296875) 0 -1px 0}
.fb_dialog.fb_dialog_mobile .fb_dialog_close_icon{visibility:hidden}
.fb_iframe_widget{display:inline-block;position:relative}
.fb_iframe_widget span{display:inline-block;position:relative;text-align:justify}
.fb_iframe_widget iframe{position:absolute}
.fb_iframe_widget_lift{z-index:1}
.fb_hide_iframes iframe{position:relative;left:-10000px}
.fb_iframe_widget_loader{position:relative;display:inline-block}
.fb_iframe_widget_fluid{display:inline}
.fb_iframe_widget_fluid span{width:100%}
.fb_iframe_widget_loader iframe{min-height:32px;z-index:2;zoom:1}
.fb_iframe_widget_loader .FB_Loader{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/y9/r/jKEcVPZFk-2.gif) no-repeat;height:32px;width:32px;;position:absolute;left:50%;z-index:4}
.fb_connect_bar_container div,
.fb_connect_bar_container span,
.fb_connect_bar_container a,
.fb_connect_bar_container img,
.fb_connect_bar_container strong{background:none;border-spacing:0;border:0;direction:ltr;font-style:normal;font-variant:normal;letter-spacing:normal;line-height:1;margin:0;overflow:visible;padding:0;text-align:left;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;visibility:visible;white-space:normal;word-spacing:normal;vertical-align:baseline}
.fb_connect_bar_container{position:fixed;left:0 !important;right:0 !important;height:42px !important;padding:0 25px !important;margin:0 !important;vertical-align:middle !important;border-bottom:1px solid #333 !important;background:#3b5998 !important;z-index:99999999 !important;overflow:hidden !important}
.fb_connect_bar_container_ie6{position:absolute;top:expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+"px":body.scrollTop+"px")}
.fb_connect_bar{position:relative;margin:auto;height:100%;width:100%;padding:6px 0 0 0 !important;background:none;color:#fff !important;font-family:"lucida grande", tahoma, verdana, arial, sans-serif !important;font-size:13px !important;font-style:normal !important;font-variant:normal !important;font-weight:normal !important;letter-spacing:normal !important;line-height:1 !important;text-decoration:none !important;text-indent:0 !important;text-shadow:none !important;text-transform:none !important;white-space:normal !important;word-spacing:normal !important}
.fb_connect_bar a:hover{color:#fff}
.fb_connect_bar .fb_profile img{height:30px;width:30px;vertical-align:middle;margin:0 6px 5px 0}
.fb_connect_bar div a,
.fb_connect_bar span,
.fb_connect_bar span a{color:#bac6da;font-size:11px;text-decoration:none}
.fb_connect_bar .fb_buttons{float:right;margin-top:7px}
.fb_edge_widget_with_comment{position:relative;*z-index:1000}
.fb_edge_widget_with_comment span.fb_edge_comment_widget{position:absolute}
.fb_edge_widget_with_comment span.fb_send_button_form_widget{z-index:1}
.fb_edge_widget_with_comment span.fb_send_button_form_widget .FB_Loader{left:0;top:1px;margin-top:6px;margin-left:0;background-position:50% 50%;background-color:#fff;height:150px;width:394px;border:1px #666 solid;border-bottom:2px solid #283e6c;z-index:1}
.fb_edge_widget_with_comment span.fb_send_button_form_widget.dark .FB_Loader{background-color:#000;border-bottom:2px solid #ccc}
.fb_edge_widget_with_comment span.fb_send_button_form_widget.siderender
.FB_Loader{margin-top:0}
.fbpluginrecommendationsbarleft,
.fbpluginrecommendationsbarright{position:fixed !important;bottom:0;z-index:999}
.fbpluginrecommendationsbarleft{left:10px}
.fbpluginrecommendationsbarright{right:10px}</style>

I'm really lost, please could you help me? 

 

Thanks alot.

[vekia]

in your theme directory you've got file: header.tpl

 

take a look there

[jirislav]

in your theme directory you've got file: header.tpl

 

take a look there

Thank you man! I would have been looking for this file for ages! xD

 

... EDIT:

I've customized that file you told me, then saved it, but .. nothing happens. When I open my website, the source code still looks like before that customization. So I've checked that file, if it is overwritten & yes, it is in the way I did. What is the problem now? 

 

2nd EDIT:

I want only to delete these scripts & create link to external .js

 

(http://sedacivaky.eu/themes/theme181/header.tpl - the modification vs. http://www.sedacivaky.eu/)

Edited December 5, 2013 by jirislav (see edit history)

[El Patron]

not totally off topic, you may find this also of interest. 

 

http://www.prestashop.com/forums/topic/282343-free-module-move-java-script-to-footer/

 

number 1 page load java solution is to move most if if not all java calls to the bottom of the page.

[jirislav]

not totally off topic, you may find this also of interest. 

 

http://www.prestashop.com/forums/topic/282343-free-module-move-java-script-to-footer/

 

number 1 page load java solution is to move most if if not all java calls to the bottom of the page.

Thanks for your interest, but I like to move these scripts out of the source code .. to external files  

btw... I've already copied these to external .js, but it seems like header.tpl have no function at all. index.php still looks the same.

[El Patron]

Thanks for your interest, but I like to move these scripts out of the source code .. to external files

btw... I've already copied these to external .js, but it seems like header.tpl have no function at all. index.php still looks the same.

 

You must look at classes/controller/FrontController.php

 

see function addJS

also see functions setMobileMedia, setMedia

 

 

One approach is to copy .js files from self hosted to remote by updating the directory define (url)

 

config/defines_uri.inc

 

example:

define('_PS_JS_DIR_',               __PS_BASE_URI__.'js/');
define('_THEME_JS_DIR_',   _THEME_DIR_.'js/');
define('_THEME_MOBILE_JS_DIR_', _THEME_MOBILE_DIR_.'js/');

if you do this, make sure back up any changed files first.

[vekia]

these scripts are probably a part of external modules that you use.

am I right? for example google analytics, and some facebook addon.

 

also, after .tpl files modifications - you have to recompile template, 

go to adv. parameters > performance and turn on (temporarily!) force compilation and clear smarty cache (there is a button to clear smarty cache)

[jirislav]

these scripts are probably a part of external modules that you use.

am I right? for example google analytics, and some facebook addon.

 

also, after .tpl files modifications - you have to recompile template, 

go to adv. parameters > performance and turn on (temporarily!) force compilation and clear smarty cache (there is a button to clear smarty cache)

 

Nope, scripts like google analytics & facebook addon have their own external .js files. 

Anyway, thanks for your advice to recompile, that helped me, but I have no button to clear smarty cache, I can only allow or disallow that function (as I posted, I'm using PrestaShop™ 1.4.7.3) So I'm clearing it by disabling & enabling, looks like it helps.

 

You must look at classes/controller/FrontController.php

 

see function addJS

also see functions setMobileMedia, setMedia

 

 

One approach is to copy .js files from self hosted to remote by updating the directory define (url)

 

config/defines_uri.inc

 

example:

define('_PS_JS_DIR_',               __PS_BASE_URI__.'js/');
define('_THEME_JS_DIR_',   _THEME_DIR_.'js/');
define('_THEME_MOBILE_JS_DIR_', _THEME_MOBILE_DIR_.'js/');

if you do this, make sure back up any changed files first.

 

I haven't found folder called controller in classes nor the file defines_uri.inc, only defines.inc.php & there are lines:

define('_PS_JS_DIR_',               __PS_BASE_URI__.'js/');
define('_PS_CSS_DIR_',              __PS_BASE_URI__.'css/');

so I think if I put in these folders new js (in js folder) or css (in css folder) files, it wouldn't need any adjustments, would it?

[El Patron]

oh, yes you are running 1.4.8.3...that would be slightly different...

 

the Tools::addJs function is used, FrontController only for 1.5 and higher...

[jirislav]

oh, yes you are running 1.4.8.3...that would be slightly different...

 

the Tools::addJs function is used, FrontController only for 1.5 and higher...

Ok, so if I'd like to move some .js files to main directory, what line should I add to that file defines.inc.php? something like this?:

define('_PS_MYJS_DIR_',             _PS_ROOT_DIR_.'js'/);

I'm really newbie in this

[El Patron]

no, like this

define('_PS_JS_DIR_',               __PS_BASE_URI__.'js/');

to something like this

define('_PS_JS_DIR_',               'http://example.com/js/');


PLEASE NOTE THIS IS UNTESTED SUGGESTION.  MAKE SURE TO BACK UP ORIGINAL FILE

[jirislav]

 

no, like this

define('_PS_JS_DIR_',               __PS_BASE_URI__.'js/');

to something like this

define('_PS_JS_DIR_',               'http://example.com/js/');


PLEASE NOTE THIS IS UNTESTED SUGGESTION.  MAKE SURE TO BACK UP ORIGINAL FILE

Okay, but what about all these .js files in /js directory? they'll become inactive?

[El Patron]

Okay, but what about all these .js files in /js directory? they'll become inactive?

 

if changing the base URI from local hosting folder to external hosting folder (where you copied the files) then the local hosting folder would not be used by PrestaShop. 

 

This does not mean you should delete it, as there may be important updates to this folder (in the future) that you would want to put to external hosting folder.

[jirislav]

if changing the base URI from local hosting folder to external hosting folder (where you copied the files) then the local hosting folder would not be used by PrestaShop. 

 

This does not mean you should delete it, as there may be important updates to this folder (in the future) that you would want to put to external hosting folder.

OK, thanks.