嘗試在 prestashop 1.7 管理模塊中加載 js 和 css 文件

Question

我正在學習為 prestashop 1.7 編寫模塊，目前我正在嘗試加載用戶嘗試配置模塊時將使用的 css 和 js 文件。

這是我的模塊的代碼：

class TuxInModComments extends Module
{

    function __construct()
    {
        $this->name = 'tuxinmodcomments';
        $this->tab = 'quick_bulk_update';
        $this->version = '0.1';
        $this->author = 'Kfir Ozer';
        $this->displayName = 'Tux-In Comments and Ranks';
        $this->description = 'With this module, your costumers will be able to grade and comment your products';
        $this->bootstrap = true;

        parent::__construct();
    }

    public function install() {
        parent::install();
        $this->registerHook('actionAdminControllerSetMedia');
        return true;
    }

    public function processConfiguration()
    {
        if (Tools::isSubmit('mymod_pc_form')) {
            $enable_grades = Tools::getValue('enable_grades');
            $enable_comements = Tools::getValue('enable_comments');
            $csvFile = Tools::getValue('csv_file');
            die(var_export($csvFile));
            Configuration::updateValue('MYMOD_GRADES', $enable_grades);
            Configuration::updateValue('MYMOD_COMMENTS', $enable_comements);
            $this->context->smarty->assign('confirmation', 'ok');
        }
    }

    public function assignConfiguration()
    {
        $enable_grades = Configuration::get('MYMOD_GRADES');
        $enable_comments = Configuration::get('MYMOD_COMMENTS');
        $this->context->smarty->assign('enable_grades', $enable_grades);
        $this->context->smarty->assign('enable_comments', $enable_comments);
    }

    public function hookActionAdminControllerSetMedia($params){
        $this->registerStylesheet('module-tuxinmodcomments-css','modules/tuxinmodcomments/js/getcontent.css');
        $this->registerJavascript('module-tuxinmodcomments-js','modules/tuxinmodcomments/js/getcontent.js');
    }


    public function getContent() {
        $this->processConfiguration();
        $this->assignConfiguration();
        return $this->display(__FILE__,'getContent.tpl');
    }

}

所以我用名稱actionAdminControllerSetMedia注冊了管理設置媒體鈎子，但它似乎沒有設置樣式表和 javascript 的功能，因為我得到了相同的錯誤： Uncaught Symfony\\Component\\Debug\\Exception\\UndefinedMethodException: Attempted to call an undefined method named "registerStylesheet" OR "registerJavascript" of class "AdminModulesController" 。

我對此很陌生..我讀到我需要在前端控制器中設置它..但這不意味着它會出現在常規頁面而不是配置頁面中嗎？

不知道如何解決這個問題，有點困惑，所以任何有關該問題的信息將不勝感激。

Answer 1

要加載 CSS 或 JS，您必須使用此鈎子，並使用以下代碼段：

public function hookDisplayBackOfficeHeader()
{
    $this->context->controller->addCSS($this->_path.'pathtocss/module.css', 'all');
    $this->context->controller->addJS($this->_path.'pathtojs/module.js', 'all');
}

享受:)

PS：必須先注冊顯示后台header hook

Answer 2

由於您需要為后台（即AdminController注冊資產，因此您需要使用addJS和addCSS方法。 因此，通過模塊類添加 JS 和 CSS 文件的正確示例是：

public function hookActionAdminControllerSetMedia($params)
{ 
    // Adds your's CSS file from a module's directory
    $this->context->controller->addCSS($this->_path . 'views/css/example.css'); 

    // Adds your's JavaScript file from a module's directory
    $this->context->controller->addJS($this->_path . 'views/js/example.js');
}

這是詳細信息，如何在后台（在管理頁面）注冊 JavaScript。

如果您需要在 PrestaShop 1.7 中為前台（即FrontController ）注冊資產，則需要使用registerJavascript和registerStylesheet方法：

public function hookHeader($params)
{
    $this->context->controller->registerJavascript(
        'module-tuxinmodcomments',
        'modules/' . $this->name . '/views/js/getcontent.js'
    );

    $this->context->controller->registerStylesheet(
        'module-tuxinmodcomments',
        'modules/' . $this->name . '/views/css/getcontent.css'
    );
}

Answer 3

將 CSS 和 JS 文件添加到 hookHeader：

public function hookHeader()
{
    $this->context->controller->addCSS($this->_path . 'views/css/styles.css');
    $this->context->controller->addJS($this->_path . 'views/js/script.js');
}

注冊鈎子頭：

public function install()
{
    return parent::install()
        && $this->registerHook('header');
}