Свои скрипты и стили

Где размещать доработки внешнего вида и поведения, чтобы они не потерялись при обновлении модуля и синхронизации шаблона.

Что сохраняется при обновлении

Синхронизация шаблона (кнопка в настройках или автообновление) копирует шаблон из модуля в /bitrix/templates/skyshop/ поверх существующего. Исключение — два файла, которые остаются как есть: assets/css/custom.css и assets/js/custom.js.

custom.css — свои стили

Файл подключается после всех стилей шаблона — основного main.css, стилей выбранной шапки, праздничных декораций и эффекта стекла, — поэтому его правила перекрывают стандартные при той же специфичности селекторов.

/* your custom styles */

/* крупнее заголовок у плиток категорий */
.category-card__title {
    font-size: 113%;
}

/* стили только для ночной темы */
.night-theme .header__logo img {
    filter: invert(1);
}

Для ночной темы у <body> появляется класс night-theme — используйте его в селекторах, как в примере.

CSS-переменные темы

Цвета, шрифт, скругления и размеры, выбранные в настройках, шаблон выводит CSS-переменными на :root в теге <style data-skyshoptheme>. Этот тег стоит в коде страницы после custom.css, поэтому простое правило :root { … } из custom.css не сработает. Повысьте специфичность селектора:

html:root {
    --theme-color: #6675f5;
    --card-border-radius: 24px;
}

custom.js — свои скрипты

Файл подключается последним, после библиотек и main.js: в нём уже доступны jQuery ($), EventHandler, PopupHandler и другие объекты шаблона. Здесь удобно подписываться на JS-события.

//custom scripts

EventHandler.register(['MainHandler', 'initScripts'], function (params) {
    // инициализация своих элементов — и при загрузке, и в подгруженном контенте
    params.parent.find('[data-my-widget]').each(function () {
        // ...
    });
});

Скрипты шаблона выводятся в конце страницы, поэтому код, который зависит от них, не вставляйте встроенным <script> в контент страницы — пишите его в custom.js.

Отдельные файлы в /local

Если доработок много, держите их в отдельных файлах в папке /local/ и подключайте через Asset в init.php:

<?php
use Bitrix\Main\EventManager;
use Bitrix\Main\Page\Asset;

EventManager::getInstance()->addEventHandler('main', 'OnBeforeProlog', function () {
    if (defined('ADMIN_SECTION') || !defined('SITE_TEMPLATE_ID') || SITE_TEMPLATE_ID !== 'skyshop') {
        return;
    }
    $asset = Asset::getInstance();
    $asset->addCss('/local/assets/shop.css');
    $asset->addJs('/local/assets/shop.js');
});

Порядок подключения таких файлов относительно скриптов шаблона не гарантирован. Оборачивайте код, который использует объекты шаблона, в DOMContentLoaded — к этому моменту все скрипты страницы уже загружены:

document.addEventListener('DOMContentLoaded', function () {
    EventHandler.register(['FormHandler', 'action'], function (params) {
        // ...
    });
});

Стили из такого файла могут оказаться в коде страницы раньше стилей шаблона — если правило не применяется, повысьте специфичность селектора или перенесите его в custom.css.

Сторонний код без правки файлов

Код виджетов и сервисов — онлайн-чатов, коллтрекинга, пикселей — можно вставить прямо в настройках, без доступа к файлам:

• «Счётчики в начале страницы» — код выводится внутри <head>.
• «Счётчики в конце страницы» — код выводится в конце страницы.

Код выводится как есть, без обработки, — проверяйте сайт после сохранения. Подробнее — в разделе «Счётчики».

Переменные шаблона: /include/variables.php

Файл /include/variables.php в корне сайта переопределяет служебные значения шаблона: размеры, до которых уменьшаются картинки, заглушку для товаров без фото и адреса служебных страниц. Файл возвращает массив с ключами default и url; указывайте только то, что хотите изменить.

<?php
return [
    'default' => [
        // обычный размер уменьшенных картинок (по умолчанию 650×650)
        'resize_width'  => 800,
        'resize_height' => 800,
    ],
    'url' => [
        // корзина лежит по другому адресу
        'cart' => SITE_DIR . 'basket/',
    ],
];

Изменение шаблонов компонентов

Если доработку нельзя сделать стилями, скриптами или PHP-событиями, шаблон компонента можно переопределить, не трогая файлы SkyShop. «Битрикс» ищет шаблоны компонентов сначала в /local/templates/, а затем в /bitrix/templates/.

1. Скопируйте папку шаблона компонента из /bitrix/templates/skyshop/components/… в такой же путь внутри /local/templates/skyshop/components/…. Например: /local/templates/skyshop/components/bitrix/news.list/banner/.
2. Правьте копию — сайт будет использовать её вместо стандартной.
3. Сбросьте кеш, чтобы изменения появились на сайте.