Хуки в 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. Можно посмотреть модуль «Яндекс.Метрика».