将JScript添加到prestashop CMS页面

时间:2014-09-16 09:35:45

标签: javascript jquery html css prestashop

prestashop v1.5.4.0 我想添加这个点击来打开由CSS,HTML和JS制作的元素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");
        }
    }

将其放入CMS页面的最佳方法是什么

4 个答案:

答案 0 :(得分:1)

我的猜测是因为CMS页面删除了大多数javascript标记,并且似乎不允许您附加exernal js文件,您需要创建cmsController.php的覆盖。

您需要创建外部js文件和css文件,并将它们保存在主题的js目录和css目录中。 setMedia方法用于在调用该控制器时附加style / js文件。您可以覆盖cmsController.php并将其添加到setMedia方法

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

我认为应该可行,但这会将这些文件添加到每个cms页面。我能想到的唯一方法是获取您希望它出现的cms页面的ID,并在addJS和addCSS函数上运行if状态。

示例:您希望它显示在id_cms 4

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

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

或者您希望它显示在id_cms 4和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');
}

答案 1 :(得分:1)

无需添加模块, 从prestashop中的主题文件夹转到cms.tpl, 添加这个

sudo apt-get update
sudo apt-get dist-upgrade
sudo apt-get install kurento-media-server-6.0
sudo apt-get install aptitude
sudo aptitude install kurento-media-server-6.0

替换你的cms id和js文件的名称,然后将文件上传到prestahop根文件夹中的js文件夹, 然后去prestahop面板,高级参数,性能,编译模板,然后启动你的网站---脚本将只在选定的页面上运行

答案 2 :(得分:0)

你可以像这样创建一个模块并将你的js挂钩到backoffice标题。

公共功能安装()     {

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

这个例子展示了来自prestashop核心模块的游戏化。之后,您可以编写自己想要的prestashop js代码。

答案 3 :(得分:0)

在2019年,关于PS 1.7-我们在此处解决了问题:https://www.prestashop.com/forums/topic/267834-how-to-insert-javascript-code-inside-a-page/

简而言之-稍加修改即可将其直接添加到CMS内容字段中:

1)在class / Validation.php中添加

    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),然后在/classes/CMS.php中第66行更改

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

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

现在你应该很好走