Стили и скрипты

Блоку модуля нужны свои стили, а иногда и скрипт. Теги link и script в шаблон хука не пишут: файлы регистрируют у контроллера страницы, и движок сам выводит их в нужном месте, объединяет и сжимает вместе с остальными.

Где лежат файлы

Создайте вручную две папки и два файла:

modules/acmehello/
├── acmehello.php
├── logo.png
└── views/
    ├── css/
    │   └── front.css
    ├── js/
    │   └── front.js
    └── templates/
        └── hook/
            ├── home.tpl
            └── product-reviews.tpl

/* modules/acmehello/views/css/front.css */
.acme-hello h2 {
    color: #2563eb;
    text-align: center;
}

Подключение стиля

Файлы регистрируют в обработчике хука actionFrontControllerSetMedia — движок вызывает его на каждой странице витрины, когда собирает список стилей и скриптов.

// modules/acmehello/acmehello.php
public function hookActionFrontControllerSetMedia(): void
{
    $this->context->controller->registerStylesheet(
        'acmehello-front',
        'modules/' . $this->name . '/views/css/front.css',
        ['media' => 'all', 'priority' => 150],
    );
}

Первый аргумент — уникальный идентификатор файла, второй — путь от корня магазина. Чем меньше priority, тем раньше файл подключается.

Хук нужно зарегистрировать: добавьте в install() строку && $this->registerHook('actionFrontControllerSetMedia') и сбросьте модуль:

php bin/console prestashop:module reset acmehello

Обновите главную страницу: приветствие стало синим и встало по центру.

Подключение скрипта

// modules/acmehello/views/js/front.js
document.addEventListener('DOMContentLoaded', () => {
    const block = document.querySelector('.acme-reviews');
 
    if (block) {
        block.classList.add('acme-reviews--ready');
    }
});

// modules/acmehello/acmehello.php
public function hookActionFrontControllerSetMedia(): void
{
    $this->context->controller->registerStylesheet(
        'acmehello-front',
        'modules/' . $this->name . '/views/css/front.css',
        ['media' => 'all', 'priority' => 150],
    );
 
    $this->context->controller->registerJavascript(
        'acmehello-front',
        'modules/' . $this->name . '/views/js/front.js',
        ['position' => 'bottom', 'priority' => 150],
    );
}

'position' => 'bottom' ставит скрипт в конец страницы, 'head' — в начало. В коде страницы товара у блока отзывов появится класс acme-reviews--ready.

Только на нужной странице

Чтобы не грузить файлы на всём сайте, проверяют, какая страница открыта:

// modules/acmehello/acmehello.php
public function hookActionFrontControllerSetMedia(): void
{
    if ($this->context->controller->php_self !== 'product') {
        return;
    }
 
    // registerStylesheet и registerJavascript, как выше
}

Свойство php_self — имя страницы: index, product, category, cart, order.

Данные для скрипта

Значения из PHP передают в JavaScript вызовом Media::addJsDef():

Media::addJsDef([
    'acmeHelloProductId' => (int) Tools::getValue('id_product'),
]);

На странице появится глобальная переменная acmeHelloProductId, доступная в front.js.

В панели управления

Для страниц панели служит другой хук — actionAdminControllerSetMedia, а файлы добавляют методами addCSS() и addJS():

// modules/acmehello/acmehello.php
public function hookActionAdminControllerSetMedia(): void
{
    $this->context->controller->addCSS($this->_path . 'views/css/admin.css');
}

Свойство $this->_path — веб-путь к папке модуля.

Частая ошибка

Вы поправили CSS, а на сайте всё по-старому. Если на странице «Расширенные параметры → Производительность» включено объединение и сжатие файлов, движок отдаёт собранную копию. Нажмите там «Очистить кеш», а на время разработки выключите эти настройки.

Спасибо, что читаете!