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

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

Всё.

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

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}