Joe Williams Joe Williams - 5 months ago 53
Javascript Question

Adding JScript to a prestashop CMS page

prestashop v1.5.4.0
I want to add this click to open element made from CSS, HTML and JS located here http://codepen.io/anon/pen/Gqkxv

function openDoor(field) {
var y = $(field).find(".thumb");
var x = y.attr("class");
if (y.hasClass("thumbOpened")) {
y.removeClass("thumbOpened");
}
else {
$(".thumb").removeClass("thumbOpened");
y.addClass("thumbOpened");
}
}


what is the best method to place this in to a CMS page

Answer

My guess is since the CMS pages strip out most javascript tags and don't seem to allow you to attach exernal js files you will need to create an override of the cmsController.php.

You would need to create your external js file and css file and save them in the theme's js directory and css directory. The setMedia method is used to attach style/js files when that controller is called. You can override the cmsController.php and add this to the setMedia method

$this->addJS(_THEME_JS_DIR_.'yourjsfile.js');
$this->addCSS(_THEME_CSS_DIR_.'yourcssfile.css');

I believe that should work however, this will add these files to every cms page. The only way I can think to get around that is by getting the ID of the cms page(s) that you want it to appear on and run an if state on your addJS and addCSS functions.

example: You want it to show up on id_cms 4

if ((int)Tools::getValue('id_cms') == 4) {

    $this->addJS(_THEME_JS_DIR_.'yourjsfile.js');
    $this->addCSS(_THEME_CSS_DIR_.'yourcssfile.css');
}

or you want it to show on id_cms 4 and id_cms 6

if ((int)Tools::getValue('id_cms') == 4 || (int)Tools::getValue('id_cms') == 6) {

    $this->addJS(_THEME_JS_DIR_.'yourjsfile.js');
    $this->addCSS(_THEME_CSS_DIR_.'yourcssfile.css');
}