Adding JS and CSS in theme

[jd.creative]

I'm using PrestaShop 1.5

 

I've read a lot of forum posts on this matter, and none of the solutions seem to solve it.

 

I want to add a JS file to category pages,

and add a CSS file to all pages.

 

http://doc.prestasho...dingacontroller

 

Says to put your file in: /override/controllers/front/

 

So I made this file: CategoryController.php

 

and put it in /override/controllers/front/

 

Then I tried this in that file:

<!--?php
  class CategoryController extends CategoryControllerCore {
  public function setMedia() {
	 parent::setMedia();
	 Tools::addJS(_THEME_JS_DIR_.'effects.js');
  }
  }

 

That didn't work, so I tried this:

<!--?php
  class CategoryController extends CategoryControllerCore {
  public function setMedia() {
	 parent::setMedia();
	 $this->context->controller->addJS(_THEME_JS_DIR_.'effects.js');
  }
  }

 

Still not working, what am I doing wrong?

 

Thanks,

Josh.</code>

 

</div>-->

Edited May 3, 2013 by jd.creative (see edit history)

[Piotr Kaczor]

Your code looks fine so You probably forget to delete /cache/class_index.php file. It will be auto regenerate with Your overrides.

Regards.

Edited May 3, 2013 by Piotr Kaczor (see edit history)

[jd.creative]

Thank you, didn't know I had to do that!

 

Problem solved.

[the_raven]

Hello

 

I try to load a Javascript file by this way but  the file doesn't load  ! 

 

i give you some detail about what i want to do : 

 

I want to change HTML Select elements in my theme so i download dropKick jqurey Plugin.

 

The Plugin  has  one JS file  >> "jquery.dropkick-min.js" and one CSS >>  "dropkick.css".

 

also its need to use "jquery-1.11.0.min.js" ( if prestashop loads this library by default so i think it doesn't need to load this file again or may be i'm in wrong)

 

we have a piece of JS code you see below that i think i must put it in Header.TPL : 

  <script>
    $(function () {
      $('.selectElements').dropkick();

    });
  </script>

as you see this peace of code will affect elements with selectElements class.

 

and what happening in the JS file is that it change HTML Select items with Jquery maded one.

 

i will appreciate any help or suggestion . 

 

thank you 

Edited February 15, 2014 by the_raven (see edit history)

[vekia]

you have to:

1) attach js library to the theme, without this plugin attached to page body, script will not work

2) if you use code:
 

  <script>
    $(function () {
      $('.selectElements').dropkick();

    });
  </script>

inside .tpl files, don't forget about {literal}{/literal} tags

{literal}
  <script>
    $(function () {
      $('.selectElements').dropkick();

    });
  </script>
{/literal}

[the_raven]

Dear Vekia 

 

Please give me more details about this topics :

 

1 - you said attach js library to the theme . what is the best and smarter way for attaching JS and CSS files to theme . using override or using <script type="text/javascript" src="{$js_dir}js.js"></script> in Header.tpl .

( i have read override in better and faster and will  cache js files to the server , but i think it doesn't have depedence to the theme . for example when we move our customized theme override doesnt work on Destination.

 

2- in this sample Dropkick plugin use Jquery version jquery-1.11.0 and perstashop 1.5 use jquery--1.7.2.what i must to do in this position ? update the prestashop jqurey version with simply copy paste in Jqurey Folder ? or somthing else ?

 

3- and what  {literal}{/literal} tags do .

 

thank you 

[vekia]

3. if your script uses brackets { } - compiler think that you're trying to use some kind of smarty syntax, if you will use {literal}{/literal} tags for js scripts smarty compiler will know that code between these tags arent smarty syntax, so compiler will not try to compile it.

 

2. you can include proper library as a separate file and then you can use noconflict() function https://api.jquery.com/jQuery.noConflict/

 

1. if you don't want to use override, you can just attach it as a separate js file (with <script> code) but the best thing - override controllers, files will be minified with ccc option and performance will be a little better 

[the_raven]

Thank you dear Vekia for complete detailed Description.you are always terrific  

Edited February 15, 2014 by the_raven (see edit history)

[the_raven]

Hi again 

 

I added some Javascript and CSS files to FrontController.php, but the changes doesn't applied to all the pages. for example in Account creation page (authentication) or in checkout page After Submitting and saving personal information . 

 

i created an empty "FrontController.php" in "override\controllers\front" and then i added this content to the file :

<?php

class FrontController extends FrontControllerCore
{
    public function setMedia()
    {
        parent::setMedia(); // JS and CSS files
		$this->context->controller->addJS(_THEME_JS_DIR_.'jquery.easydropdown.js','all');
		$this->context->controller->addJS(_THEME_JS_DIR_.'mychanges.js','all');
		$this->context->controller->addJS(_THEME_JS_DIR_.'icheck.min.js','all');
		
		$this->context->controller->addCSS(_THEME_CSS_DIR_.'skins/square/red.css','all');
		$this->context->controller->addCSS(_THEME_CSS_DIR_.'easydropdown.flat.css','all');
		
		
    }
}

am i did somthing wrong ? 

Edited February 17, 2014 by the_raven (see edit history)

[vekia]

can you try to add these libraries to setMedia function in authcontroller.php

will see whats going on then

[the_raven]

i added the libraries to authcontroller.php and nothing changed.

 

but i found that Frontcontroller.php loads the files correctly to all parts and may i have did some other mistake.

 

i called the library in authentication.tpl and problem is solved. this is the function that loads the library :

$(function(){
	var $selects = $('select');
						
	$selects.easyDropDown({
		cutOff: 10,
		wrapperClass: 'dropdown',
	
	});
});

but still some part doesn't call the library correctly.for example in product page in comparison part or on checkout page after submit the form the carrier part unload the library .

 

now my question is that how i can call this library globally to all parts of website ?

Edited February 24, 2014 by the_raven (see edit history)

[the_raven]

I coulden't solve my problem yet , anybody know how to solve it  ?

 

I have used override in my shop to load some css and javascript on my custom theme.

 

on wamp server and evrything work's as well ( exept some pages that javascript does'nt load there ) .

 

but since i moved my shop from local to live server 

 

"FrontController.php" that i have made on >> override/controllers/front, cause white screen and javascript conflict maybe . i tried and solved white screen but so long as FrontController.php is Exist on server some javascripts such as shopping cart doesn't works and also all the css and javascript that i want to load doesn't works.

 

here is my FrontController.php content :

<?php

class FrontController extends FrontControllerCore
{
    public function setMedia()
    {
        parent::setMedia(); // JS and CSS files
		$this->context->controller->addJS(_THEME_JS_DIR_.'jquery.easydropdown.js','all');
		$this->context->controller->addJS(_THEME_JS_DIR_.'mychanges.js','all');
		$this->context->controller->addJS(_THEME_JS_DIR_.'icheck.min.js','all');	
		$this->context->controller->addCSS(_THEME_CSS_DIR_.'skins/square/red.css','all');
		$this->context->controller->addCSS(_THEME_CSS_DIR_.'easydropdown.flat.css','all');
		$this->context->controller->addJS(_THEME_JS_DIR_.'jquery.tipsy.js','all');
		$this->context->controller->addCSS(_THEME_CSS_DIR_.'tipsy.css','all');
		
		
    }
}

appreciate any suggestion , thank you  .

Edited June 15, 2014 by the_raven (see edit history)

[robertStg]

the controller should be added to override/classes/controller

[MacMaster]

Sorry, I do not know if I am allowed to hijack this topic shortly. But you seem to have the right skills so I try:

 

We are running PS 1.4.8 and try to adopt to mobile. A good starting point seem to be to include a dedicated stylesheet:

<link href="/themes/mydesign/css/mobil.css" rel="stylesheet" type="text/css" media="handheld" />By default PS will assign media to "all", but we need "handheld", any idea on how to achieve this. Thanks in advance.

Edited November 27, 2014 by MacMaster (see edit history)

[savedario]

Old thread, but it comes at the top of the search so...

 

I tried the suggested solution, but it did not work for me because setMedia() is called before all the modules have a chance to add their stylesheets and my theme needs the extra css added as the last one.

 

It was originally added "manually" in the the header.tpl, but that does not work either when compressing the css because, for some reason, the smarty variable $media contains 'print' and the HTML:

<link rel="stylesheet" href="{$css_dir}style.css" type="text/css" media="{$media|escape:'html':'UTF-8'}" />

was basically ignored for screens.

 

My solution was to override FrontController as suggested but to do this instead:

class FrontController extends FrontControllerCore
{
  public function display()
  {
    $this->addCSS(_THEME_CSS_DIR_.'style.css','all');
    parent::display();
  }
}

Using Prestashop 1.6.1.6.

Hoping this helps someone...
 

[razaro]

@savedario  

 

Not sure from which version but in 1.6 you do not need that override.

Just add .js file in theme/js/autoload floder and similar with css file to

theme/css/autoload and they will be included and compressed if 

settings are enabled.

[rocky]

I never noticed that before. Thank you for pointing it out.

[savedario]

@razaro,

 

Thanks for your suggestion. I was hoping to find a way for the theme to add it's own styles to be compressed.

 

Unfortunately all the files in the autoload folder are added before all the modules, which is a bit strange, because the theme "should" have the last say on the way things look... so it would logically go after all the other styles.

 

I will have to keep the override...