CODEWITHSUNDEEP
javascriptjqueryhtmlcssprestashop
ducksoup
ducksoup

Reputation: 39

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

Upvotes: 1

Views: 6301

Answers (4)

David Bouška
David Bouška

Reputation: 133

In 2019 regarding PS 1.7 - we solved it here: https://www.prestashop.com/forums/topic/267834-how-to-insert-javascript-code-inside-a-page/

In short - add it directly to CMS content field with slight modifiations:

1) in class/Validation.php add

    public static function isCleanHtmlWithScript($html, $allow_iframe = false)
    {
        $events = 'onmousedown|onmousemove|onmmouseup|onmouseover|onmouseout|onload|onunload|onfocus|onblur|onchange';
        $events .= '|onsubmit|ondblclick|onclick|onkeydown|onkeyup|onkeypress|onmouseenter|onmouseleave|onerror|onselect|onreset|onabort|ondragdrop|onresize|onactivate|onafterprint|onmoveend';
        $events .= '|onafterupdate|onbeforeactivate|onbeforecopy|onbeforecut|onbeforedeactivate|onbeforeeditfocus|onbeforepaste|onbeforeprint|onbeforeunload|onbeforeupdate|onmove';
        $events .= '|onbounce|oncellchange|oncontextmenu|oncontrolselect|oncopy|oncut|ondataavailable|ondatasetchanged|ondatasetcomplete|ondeactivate|ondrag|ondragend|ondragenter|onmousewheel';
        $events .= '|ondragleave|ondragover|ondragstart|ondrop|onerrorupdate|onfilterchange|onfinish|onfocusin|onfocusout|onhashchange|onhelp|oninput|onlosecapture|onmessage|onmouseup|onmovestart';
        $events .= '|onoffline|ononline|onpaste|onpropertychange|onreadystatechange|onresizeend|onresizestart|onrowenter|onrowexit|onrowsdelete|onrowsinserted|onscroll|onsearch|onselectionchange';
        $events .= '|onselectstart|onstart|onstop';

        if (!$allow_iframe && preg_match('/<[\s]*(i?frame|form|input|embed|object)/ims', $html)) {
            return false;
        }

        return true;
    }

2) then in /classes/CMS.php around line #66 change

'content' => array('type' => self::TYPE_HTML, 'lang' => true, 'validate' => 'isCleanHtml', 'size' => 3999999999999)

to

'content' => array('type' => self::TYPE_HTML, 'lang' => true, 'validate' => 'isCleanHtmlWithScripts', 'size' => 3999999999999)

now you should be good to go

Upvotes: 0

dicentiu
dicentiu

Reputation: 413

no need to add modules, go to cms.tpl from your theme folder in prestashop, add this 

{if $cms->id==6}
{literal}
<script type="text/javascript" src="js/yourjsfile.js"></script>
{/literal}
{/if}

replace with your cms id and the name of your js file, then upload the file to js folder in prestahop root folder, then go the prestahop panel, advanced parameters, performance, compile the templates and then launch your site --- the script will run only on the page selected

Upvotes: 1

arifur rahman
arifur rahman

Reputation: 264

You can create a module and hook your js to backoffice header like this.

public function install() {

    if ( !$this->installTab() 
         || !$this->registerHook('displayBackOfficeHeader'))
        return false;
    return true;
}

public function hookDisplayBackOfficeHeader()
    {
        //check if currently updatingcheck if module is currently processing update
        if ($this->isUpdating() || !Module::isEnabled($this->name))
            return false;

        if (method_exists($this->context->controller, 'addJquery'))
        {
            $this->context->controller->addJquery();
            $this->context->controller->addCss($this->_path.'views/css/gamification.css');



            if (version_compare(_PS_VERSION_, '1.6.0', '>=') === TRUE)
                $this->context->controller->addJs($this->_path.'views/js/gamification_bt.js');
            else
                $this->context->controller->addJs($this->_path.'views/js/gamification.js');

            $this->context->controller->addJqueryPlugin('fancybox');

            return $css_str.'<script>
                var ids_ps_advice = new Array('.rtrim($js_str, ',').');
                var admin_gamification_ajax_url = \''.$this->context->link->getAdminLink('AdminGamification').'\';
                var current_id_tab = '.(int)$this->context->controller->id.';
            </script>';
        }
    }

This a example show from prestashop core module gamification. After that you can write your own prestashop js code which you want.

Upvotes: 0

Conner Burnett
Conner Burnett

Reputation: 512

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');
}

Upvotes: 1

Related Questions