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

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

Хук в 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 содержит всю необходимую информацию для подключения к данному хуку:

Другими словами, чтобы подключиться к хуку {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 файл своим модулем.

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

Пример: «Подключим свой 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

Всё.