Jump to content

Add custom JS file to theme

jumbo

By jumbo
in OUT - 1.6.0.11 [7 Jan 2015]

 Share

Recommended Posts

jumbo Newbie

jumbo

Posted
Posted

Hi,

 

I'm trying to add a custom JS file. I created it under the js folder of my theme, but when I try to manually include it in the header.tpl file as:


	<script type="text/javascript" src="/themes/mytheme/js/myfile.js"></script>

PS displays it at the end of the HTML code and not in the <head> section.

 

Why is that? What is the best way to include a new js file?

Link to comment
Share on other sites
Whispar1 Newbie

Whispar1

Posted
Posted

It depends where you want to add the JS.. for all pages? CMS pages?

For example, if you wanted to add to cms pages, you would enter code as follows in cmscontroller.php under public function setMedia() just add a new line with your custom JS

public function setMedia()
	{
		parent::setMedia();
		
		if ($this->assignCase == 1)
		     $this->addJS(_THEME_JS_DIR_.'cms.js');
		     $this->addJS(_THEME_JS_DIR_.'some-custom-js.js');
	}
Link to comment
Share on other sites
jumbo Newbie

jumbo

Posted
  • Author
Posted

 

It depends where you want to add the JS.. for all pages? CMS pages?

For example, if you wanted to add to cms pages, you would enter code as follows in cmscontroller.php under public function setMedia() just add a new line with your custom JS

public function setMedia()
	{
		parent::setMedia();
		
		if ($this->assignCase == 1)
		     $this->addJS(_THEME_JS_DIR_.'cms.js');
		     $this->addJS(_THEME_JS_DIR_.'some-custom-js.js');
	}

 

Well there is one JS I'd like to add to all page, and another just for product pages... but I wouldn't mind and them both to all pages...

 

So am I allowed to directly edit the controller files? Or should I override them?

Link to comment
Share on other sites
Whispar1 Newbie

Whispar1

Posted
Posted (edited)

I did something similar with my shop but only needed the JS for me cms pages and it has worked flawlessly so I see no reason why you can not use the same method with yours. Of course, always make a backup of the file before making and changes in case something goes screwy :)

 

There is another method using Tools::addJs() to the tpl file but I don't know the exact syntax - maybe someone else can chime in on this one

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

Whispar1

Posted
Posted (edited)

and which file should I edit in order to place the JS in all pages?

I've read something about FrontController, but I guess this one doesn't exist in PS1.6

I am still on 1.5.3 so I am not sure about that. Maybe this could help or if someone else knows which controller to edit they can answer here???

http://doc.prestashop.com/display/PS16/Overriding+default+behaviors

 

http://doc.prestashop.com/display/PS16/Controllers+within+PrestaShop

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

jumbo

Posted
  • Author
Posted

it would be a 'lot' faster to create a module that does nothing but hook to header and issue addJS as suggested by whispar.

 

Thank you, I tried your suggestion.

 

I was struggling with the following piece of code for Facebook's like button. I needed to include it anywhere on the page.

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

I finally created a simple module as you suggested, with a tpl file that includes only this code (it didn't work with the addJS method, the like button wouldn't load). I ended up hooking it to the footer instead of the header because PS basically takes all javascripts together and puts them at the end, right before </body>

 

I'm not sure why PS is behaving this way. Is it some kind of setting that we can change?

 

Anyway it works for me for that issue, and to include the google analytics code.

  • Like 1
Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

Thank you, I tried your suggestion.

 

I was struggling with the following piece of code for Facebook's like button. I needed to include it anywhere on the page.

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

I finally created a simple module as you suggested, with a tpl file that includes only this code (it didn't work with the addJS method, the like button wouldn't load). I ended up hooking it to the footer instead of the header because PS basically takes all javascripts together and puts them at the end, right before </body>

 

 

header.tpl file located in your theme directory. 

you can also use modules like html box free or contentbox to insert custom content to your website.

 

 

 

 

I'm not sure why PS is behaving this way. Is it some kind of setting that we can change?

 

Anyway it works for me for that issue, and to include the google analytics code.

it's for performance purposes.

i will be honest with you,

you can paste this code at the end of the website (in footer section)

it will work too :)

Link to comment
Share on other sites
  • 5 months later...
conidig Newbie

conidig

Posted
Posted (edited)

hello, i'm trying to install sumome script but it keep on showing this error:

 

Your SumoMe script tag is missing a valid site id. Here's a new one for you, just copy & paste it over your current one.

 

 

i contacted sumome and they said i should contact prestashop.

 

how should i resolve this issue?

 

-update:

 

prestashop remove a part of code

 

instead of:

<script src="//load.sumome.com/" data-sumo-site-id="jajskjaksjkfnmdnmdnmnsd" async>

 

it includes just this:

<script type="text/javascript" src="http://load.sumome.com/"></script>

Edited by conidig (see edit history)
  • Like 1
Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...