Хуки в SMARTY — раcширение и изменение шаблонов

Хуки в SMARTY шаблонах помогут с помощью вашего модуля:

  • Расширить или изменить существующий шаблон или страницу
  • Подключить собственные таблицы стилей (CSS)
  • Подключить новый скрипт на языке JavaScript.

Практически все шаблоны темы CS-Cart содержат хуки.

Вы можете подключить свой шаблон перед хуком, после хука или заменить полностью код внутри хука.

Как это работает?

Хук в SMARTY шаблоне выглядит так:

1
2
3
4
5
6
7
8
9
...

{hook name="dir_name:file_name"}

    {* Любой код компилирующего обработчика SMARTY или код на языке разметки HTML *}

{/hook}

...

Обратите внимание на {hook name="dir_name:file_name"}

Значение name содержит всю необходимую информацию для подключения к данному хуку:

dir_name

Название папки которую вам нужно будет создать для вашего модуля.

Должно получиться так:

/design/themes/[название_темы]/templates/addons/[id_модуля]/hooks/[dir_name]
file_name

Название файла, который вам нужно будет создать в папке dir_name (смотреть пункты выше).

Файл подключения к хуку должен иметь один из трёх вариантов окончания:

  • [file_name].pre.tpl — подключение перед хуком
  • [file_name].post.tpl — подключение после хука
  • [file_name].override.tpl — заменить код хука полностью

Другими словами, чтобы подключиться к хуку {hook name="dir_name:file_name"}, вам нужно:

  • Чтобы вставить свой шаблон перед хуком, создаём файл:

    /design/themes/[название_темы]/templates/addons/[id_модуля]/hooks/[dir_name]/[file_name].pre.tpl

  • Чтобы вставить свой шаблон после хука, создаём файл:

    /design/themes/[название_темы]/templates/addons/[id_модуля]/hooks/[dir_name]/[file_name].post.tpl

  • Чтобы полностью заменить код внутри хука на свой:

    /design/themes/[название_темы]/templates/addons/[id_модуля]/hooks/[dir_name]/[file_name].override.tpl

В созданном файле вы можете использовать любой код компилирующего обработчика SMARTY или языка разметки HTML.

Пример: «Подключим свой файл таблиц стилей (CSS)»

Очень часто нужно подключать собственные стили таблиц стилей (CSS) (препроцессора LESS).

Чтобы не вносить изменения напрямую в таблицы стилей (CSS) ядра, подключим собственный файл таблиц стилей (CSS) своим модулем.

Важно

Подключение собственных таблиц стилей (CSS) с помощью модуля гарантирует отсутствие проблем при кэшировании и обновлении.

  1. Все стили ядра подключаются в шаблоне:

    /design/themes/responsive/templates/common/styles.tpl

    Данный шаблон имеет хук, для подключения собственных стилей.

    Вот так выглядит код файла:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
    {styles use_scheme=true reflect_less=$reflect_less}
{hook name="index:styles"}

    {style src="styles.less"}
    {style src="tygh/responsive.less"}
    
    {* Ещё какойто код *}

{/hook}
{/styles}

  2. Внимательно посмотрите на код выше, вы увидите хук:

    {hook name="index:styles"}

    Все модули подключают свои стили через данный хук.

  3. Подключим свой стиль, с помощью модуля “Мои изменения”. Если вы используете собственный модуль, то замените my_changes на ID вашего модуля.

    Создайте новый файл, чтобы подключиться к хуку:

    /design/themes/[название_темы]/templates/addons/my_changes/hooks/index/styles.post.tpl

  4. В созданный файл, добавьте код подключения собственного стиля:

    {style src="addons/my_changes/styles.less"}

  5. Осталось только создать новый styles.less который мы подключили выше.

    Создайте новый файл:

    /design/themes/[название_темы]/css/addons/my_changes/styles.less

    Добавьте в него любые стили таблиц стилей (CSS) или препроцессора LESS.

  6. Включите модуль и очистите кэш.

Всё. Теперь вы можете добавлять собственне стили таблиц стилей (CSS) с помощью вашего модуля в файле:

/design/themes/[название_темы]/css/addons/my_changes/styles.less

Важно

Живой пример!

Модуль «Баннеры» (banners), чтобы подключить собственные стили, использует два файла:

/design/themes/responsive/templates/addons/banners/hooks/index/styles.post.tpl

/design/themes/responsive/css/addons/banners/styles.less

Пример: «Подключим свой скрипт на языке JavaScript»

Подключим собственные скрипты с помощью модуля. В примере будем подключать с помощью модуля «Мои изменения» (my_changes). Если вы используете собственный модуль, то замените my_changes на ID вашего модуля.

  1. Все JS-скрипты ядра, подключаются в шаблоне:

    /design/themes/responsive/templates/common/scripts.tpl

    В самом конце данного файла есть хук:

    {hook name="index:scripts"}
{/hook}

    Используем данный хук, чтобы подключить собственный скрипт.

  2. Создадим новый файл:

    /design/themes/responsive/templates/addons/banners/hooks/index/scripts.post.tpl

  3. В этом файле мы уже можем добавлять собственные скрипты, например добавим:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
    <script type="text/javascript">

    (function(_, $) {

        // Узнаем текущий контроллер из SMARTY переменной
        var controller = '{$runtime.controller}';

        // Узнаем какой mode контроллера из SMARTY переменной
        var mode = '{$runtime.mode}';

        // Выведем на экран
        alert(controller + ':' + mode);    

    }(Tygh, Tygh.$));

</script>

  4. Также, в данном хуке можно подключить отдельный JS файл со скриптами.

    Добавьте в файл строку для подключения файла со скриптами:

    {script src="js/addons/my_changes/func.js"}

  5. Создайте файл js/addons/my_changes/func.js (путь относительно основного каталога магазина) и добавляйте в него необходимые функции. SMARTY переменные будут недоступны, однако данные можно передавать с помощью JS и скрипта из п.4

Всё.

Важно

Важно!

Если вы пишете скрипты в SMARTY, то фигурные скобки должны располагаться на отдельных строках. Если фигурные скобки расположены на одной строке, то SMARTY воспринимает это как переменную, не находит её и выдаёт ошибку (белый экран).

Важно

Изучайте и используйте живые примеры!

Многие модули подключают собственные скрипты.

Важно

Чтобы подключить скрипт в нижней части сайта, используйте хук {hook name="index:footer"}{/hook} из файла /design/themes/responsive/templates/index.tpl. Можно посмотреть модуль «Яндекс.Метрика».

Замена шаблона целиком через модуль

Полностью переопределить стандартный шаблон можно с помощью т.н. оверрайда.

Для создания оверрайда нужно произвести следующие действия:

  1. В папке с модулем создаем папку overrides (если её нет).
  2. Относительно созданной папки создаем папку и каталог до шаблона, который хотим переопределить.

Важно

Если шаблон переопределяется в нескольких модулях, то будет переопределен ТОЛЬКО модулем с наименьшим приоритетом — т.е. тем, который подключается раньше!

Допустим, мы хотим переопределить шаблон common_templates/status.tpl в нашем модуле my_changes. Создаем файл design/themes/[название_темы]/addons/my_changes/overrides/common/status.tpl.

Теперь если модуль my_changes включен, вместо стандартного шаблона загрузится наш.

Примечание

Не забываем чисить кэш после обновления шаблонов.

Расширение модуля другим модулем

Если нужно расширить один модуль другим, для удобства можно выделить весь функционал в хуки внутри модуля. Например, news_and_emails использует seo. Чтобы не размазывать функционал, связанный с seo, по функционалу news_and_emails, нужно вынести его в хуки:

templates/addons/news_and_emails/addons/seo/hooks

Хуки из каталога addons внутри модуля news_and_emails будут подключаться только тогда, когда включен соответствующий модуль (в нашем случае это seo).

Для хуков в php добавился 3 параметр при регистрации хука:

fn_register_hooks( array('get_news_data', '', 'seo') )

Функция, обрабатывающая хук, будет называться fn_seo_get_news_data и будет вызвана, если включен модуль seo.

Примечание

Все это делается в модуле news_and_emails.

Создание хука

  1. В шаблоне, в который необходимо подключить модуль, задаем блочную функцию hook с параметром name. Для name прописываем значение по правилу: common_name:action, где

    • common_name — обычно название контроллера,
    • action — название действия.

  2. В папке с модулем создаем папку hooks (если её нет).

  3. В папке hooks создаем папку. Называем ее так же, как имя хука до двоеточия.

  4. Далее в этой папке создаем шаблон по правилу:

    имя_хука_после_двоеточия.действие_производимое_с_кодом_хука.tpl

    действие_производимое_с_кодом_хука может принимать три значения:

    • post — результат вставляется после объявления хука
    • pre — результат вставляется перед объявлением хука
    • override — результат заменяет блок хука

    Например: product_info.post.tpl

    {hook name="orders:product_info"}
{/hook}

Содержание

Сейчас

Подсказать

© 2026 CS-Cart