Adding JS and CSS files to CMS pages..how to?

[Norwegian Rat]

Hi

 

I am kind of stuck trying to add some JS and CSS files to the CMS pages (or one cms page to be more precise). Things have changed since 1.4, and even though I find some posts regarding this, it's not very well documented, so cant get it to work in 1.6.1

 

It looks like there are several approaches. Those being modifications to header.tpl, cms.tpl, CmsController.php and some mention something regarding the tools option(?) Some say creating a custom hook and a module is the best thing to do, yet some claim making modules (for everything) will make your store slow.

 

Can anyone shed some light on this issue, as I am pretty much clueless how to approach this in the most correct way?

 

Thanx in advance

 

Izraelviz

Edited July 19, 2015 by Izraelviz (see edit history)

[PhilCorleone]

Hello Izraelviz,

 

What you want to do seems very advanced buddy!

 

Would you share with us why would you add JS and CSS to your CMS pages? I mean, I might have modules that can do that for ya without all of those hassles!!!

 

Anyway, I did a quick research and found this guy who got it worked out with 1.6. Check him out:

 

https://www.prestashop.com/forums/topic/244401-how-do-i-add-scripts-to-a-cms-page/

 

Good luck.

[Norwegian Rat]

Hi there PhilCorleone! Thank you for replying!

 

It was doable in 1.4 without too much twaking, so I was hoping for the same in 1.6 as well.

 

I'm trying to create a modal pop-up on the cms-pages. Something like this: http://www.jqueryscript.net/demo/jQuery-CSS3-Powered-Modal-Window-Effects-Nifty-js/

 

I've been trying the steps on the link you provided, but I'll give it another go. After all there's a slight possibility this noob have been missing something crucial =)

[Norwegian Rat]

Must be doing something wrong, or this method does not work. I can get the css to work, but not the js script. What I have done is that I threw the css code in the cms.css and the little javascript code in the cms.js file. Now one should think that the only thing left to do was to link to the jquery itself, so I added this to the CmsController.php in the setMedia section:

 

$this->addJS(_PS_JS_DIR_.'jquery/jquery-1.11.0.min.js');

 

But this does not work. Anyone know if this is supposed to be working and that I am just missing something?

 

I've followed vekias tutorial on how to extend tinymce btw ( https://mypresta.eu/en/art/prestashop-16/extended-rich-text-editor.html )

[PrestaHeroes USA]

here is correct method to add, note in this example $jsfile/$cssfiile have pointers (I use in a loop).

 

$this->context->controller->addJS(trim($jsfile));

 

$this->context->controller->addCSS(trim($cssfile));

 

[Norwegian Rat]

 

here is correct method to add, note in this example $jsfile/$cssfiile have pointers (I use in a loop).

 

$this->context->controller->addJS(trim($jsfile));

 

$this->context->controller->addCSS(trim($cssfile));

 

 

 

So the CmsController.php should look something like this: (?)

 

public function setMedia()

{

parent::setMedia();

 

if ($this->assignCase == 1)

                         $this->addJS(_THEME_JS_DIR_.'cms.js');

/*added line*/    $this->context->controller->addJS(_THEME_JS_DIR_.'jquery-2.1.4.min.js');

 

$this->addCSS(_THEME_CSS_DIR_.'cms.css');

}

 

Or am I still doing it wrong, because I still cant get it to work..