4. Подключим новый стиль

Мы уже создали собственный файл styles.css. Теперь нам нужно сообщить платформе, что добавился новый стиль. Платформа его подключит, закэширует и отдаст в браузер.

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

Все шаблоны для витрины расположены в папке:

/design/themes/[название_темы]/templates/

Все шаблоны модулей в папке

/design/themes/[название_темы]/templates/addons

Непосредственное подключение стилей выполняет шаблон:

/design/themes/[название_темы]/templates/common/styles.tpl

Приступим к подключению:

  1. Откройте файл /design/themes/[название_темы]/templates/common/styles.tpl

    В моём примере открыта тема с адаптивным дизайном «Responsive».

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    {styles use_scheme=true reflect_less=$reflect_less}
    {hook name="index:styles"}
    
        {style src="styles.less"}
        {style src="tygh/responsive.less"}
        
        {* Translation mode *}
        {if $runtime.customization_mode.translation || $runtime.customization_mode.design}
            {style src="tygh/design_mode.less"}
        {/if}
    
        {* Theme editor mode *}
        {if $runtime.customization_mode.theme_editor}
            {style src="tygh/theme_editor.less"}
        {/if}
    {/hook}
    {/styles}
    

    Данный файл подключает стили less (css) в теме c адаптивным дизайном.

  2. Обратим внимание на 2 и 16 строки и теги {hook name="index:styles"} и {/hook}.

    Это хук шаблона smarty . Эти тэги позволяют расширить данный шаблон с помощью модуля. Все хуки во всех шаблонах выглядят так и позволяют расширение без грубого вмешательства в шаблон.

    Тег {hook name="index:styles"} содержит в поле name:

    index — папка хука

    styles — название хука

  3. Пройдите в папку design/themes/[название_темы]/templates/addons .

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

  4. Создайте новую папку для вашего модуля, с названием соответствующим id вашего модуля. В нашем примере: first_addon.

    Пройдите в только что созданную папку:

    /design/themes/[название_темы]/templates/addons/first_addons

  5. Создайте новую папку hooks .

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

    Пройдите в только что созданную папку:

    /design/themes/[название_темы]/templates/addons/first_addons/hooks

  6. Создайте папку index .

    — Почему index?

    — Потому что хук к которому мы подключаемся говорит {hook name=” index :styles”}

  7. Откройте созданную папку:

    /design/themes/[название_темы]/templates/addons/first_addons/hooks/index

  8. Создайте новый файл styles.post.tpl .

    — Почему styles.post.tpl?

    — Потому что хук к которому мы подключаемся содержит {hook name=”index: styles “} . А добавленное окончание .post. означает, что созданный файл подключится после хука (после закрывающего тега {/hook}).

  9. Откройте файл:

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

  10. Вставьте код для подключения файла styles.css:

    1
    {style src="addons/first_addon/styles.css"}
    
  11. Проверяем результат.

    Модуль выключен Модуль включен
    Первый модуль Первый модуль

Если стиль не подключился то:

  1. Возможно вы забыли включить модуль.
  2. Возможно вы допустили ошибку в названии файла или папки.
  3. Возможно нужно очистить кэш.

Далее о кэше.