Хуки в 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}

Содержание

Сейчас

Подсказать

© CS-CART РОССИЯ. CMS ДЛЯ РАЗРАБОТКИ ИНТЕРНЕТ-МАГАЗИНОВ