Jump to content
John_John

CCC custom css and js

Recommended Posts

Hi all,

 

In de header.tpl and footer.tpl i have added some custom css and js.

For example:

 

header.tpl

<link rel="stylesheet" href="/themes/test/css/custom.css" />

 

footer.tpl

<script src="{$js_dir}custom.js"></script>

 

But how can i include them when i have Combine, Compress and Cache (CCC) turned on?

 

Thanks

Share this post


Link to post
Share on other sites

you will need to modify the hookHeader() function so that it uses code like the following to include its CSS file instead of linking it in a TPL file:

Tools::addCSS(_PS_MODULE_DIR_.$this->name.'/css/'.$this->name.'.css');

and the following to include its JS file:

Tools::addJS(_PS_MODULE_DIR_.$this->name.'/js/'.$this->name.'.js');

See here, this may be what you're looking for

  • Like 1

Share this post


Link to post
Share on other sites

Sorry but I have a problem.

I need to call the addCSS method inside the setmedia method of frontcontroller (I did an override of this core class) but if I remove the include of the css passed to the addCSS in the header.tpl the css didn't get loaded.

Why do this happen?

Share this post


Link to post
Share on other sites

Please can someone help me with my problem?!

How can I make my css to be compressed by the CCC?

Please it's kind of urgent.

Share this post


Link to post
Share on other sites

... but if I remove the include of the css passed to the addCSS in the header.tpl the css didn't get loaded.

 

Sorry but I don't understand what exactly you removed here.

But to add custom css and js files, like you did, FronController.php should look like this

<?php
class FrontController extends FrontControllerCore
{
public function setMedia()
{
 parent::setMedia();   

 $this->addCSS(_THEME_CSS_DIR_.'customcss.css');
 $this->addJS(array(
  _THEME_JS_DIR_.'customjs1.js',
  _THEME_JS_DIR_.'customjs2.js'
  ));  
}
}

Share this post


Link to post
Share on other sites

Thank you very much for your attention and sorry for my lateness in response.

Acutally I've done what you've written but it seems that it didn't work.

Indeed when I remove the inclusion of the css in the heder.tpl the over mentioned css didn't get loaded.

When I do the same thing with the js's they get loaded thanks to the set up in the setmedia method.

It seems that the css don't setup correctly in contrast to the js's.

Share this post


Link to post
Share on other sites

Can you give a bit more info ?

Like your Prestashop version, what exactly code is you are removing from header.tpl,

how does your FrontController looks like and where is located.

Also if you have live website link to it would be nice.

Share this post


Link to post
Share on other sites

I'm really grateful for your attention and so let me thank you one more time!

My Prestashop version is 1.4.8.2 and here is the setmedia method in my FrontController:

 

// Set our custom CSS and JS for CCC (Compression)
 public function setMedia()
 {
   parent::setMedia();
   Tools::addCSS(_THEME_CSS_DIR_.'stylesheets/application.css', 'all');
   Tools::addJS(array(_THEME_JS_DIR_.'myjs/globals.js', _THEME_JS_DIR_.'myjs/module.js', _THEME_JS_DIR_.'myjs/module_loader.js',  _THEME_JS_DIR_.'myjs/carousel.js',  _THEME_JS_DIR_.'myjs/menu.js'));
 }

 

The FrontController I'm talking about is the result of an override and so I've placed it in the override/classes folder.

Beside the setmedia method I've also added an override of the preProcess method.

However this method has nothing in it in the FrontControllerCore. It is empty.

In the header.tpl if I remove the following line of code i didn't get the css loaded correctly:

 

 <link href="/themes/custom/css/stylesheets/application.css" media="screen" rel="stylesheet" type="text/css">

 

Actually there is no online version of the site.

 

I hope I've give all the requested infos...If not please ask, I'll be happy to give additional ones.

Thank you again.

Share this post


Link to post
Share on other sites

Please can I have some support?

I still have the problem I've described a few post above

Share this post


Link to post
Share on other sites

Sorry for late replay, but your code seams OK.

And it is strange that override of js files works.

Only thing that comes to my mind is that you maybe testing with Internet explorer,

which have a limit of 32 loaded css files. But you probably checked other browsers too.

 

And it is difficult to help more as there is no live version.

If you want you can PM me FrontController.php and I will check on local server.

Share this post


Link to post
Share on other sites

I'm the one who need to apologieze.

I'm really late to give feedback about this.

Actually I don't know if I'm allowed to pass the FrontController by my chief.

However I tried with different browser and the results are always the same.

If I remove the css import statements in the header none of them is loaded despite all of them are specified in the FrontController setmedia.

Maybe is there some misconfiguration in PS backoffice?

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More