Россия

region-img

Документация Сотбит: Оригами. Для разработчика. Кастомизация шаблона без потерь при обновлении решения. Шапка сайта

Шапка сайта

Для создания шаблона шапки сайта перейдите по пути: Рабочий стол > Контент > Структура сайта > Файлы и папки > local > template > sotbit_origami > theme > headers.

В открывшемся окне скопируйте имеющийся шаблон, например «1», в текущую папку.

Во избежание удаления пользовательского шаблона в процессе обновлений решений требуется задать уникальное имя раздела, хранящего все требуемые файлы шаблона, например custom_new_1.

Скопированная папка изначально содержит 2 файла:

  1. content.php – содержит код шаблона.
  2. preview.jpg – изображение шаблона в панели настроек.

При необходимости создайте дополнительные разделы для хранения стилей, изображений и скриптов.

Например

Для подключения стилей и скриптов потребуется внести изменения в файл шаблона content.php, а именно:

  1. Подключить пространство имен: use BitrixMainPageAsset;.
  2. Подключить необходимые стили, например style.css.
  3. Подключить необходимые скрипты, например custom.js.

Например:

use BitrixMainPageAsset;
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/theme/headers/custom_new_1/css/style.css");
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . "/theme/headers/custom_new_1/js/custom.js");

Подключите таким образом все необходимые файлы.

Для подключения файлов локализации перейдите по пути: Рабочий стол > Контент > Структура сайта > Файлы и папки > local > template > sotbit_origami > lang > ru > theme > headers.

В открывшемся окне скопируйте имеющийся раздел локализации, например «1», в текущую папку и переименуйте созданный раздел в соответствии с названием раздела шаблона, в нашем случае custom_new_1.

Важные моменты

  • При использовании заимствованных элементов шаблона обратите внимание на используемые компоненты и используемые для них шаблоны.
  • Шаблон содержит шапку как для десктопных так и для мобильных устройств.

Перечень используемых компонентов:

Шаблоны представленных ниже компонентов влияют на внешний вид шапки. Внесите изменения в шаблоны нижеперечисленных компонентов для достижения требуемого вида шапки.
Описание компонента Название компонента Ссылка на описание компонента
Вставка включаемой области bitrix:main.include  ссылка
Меню bitrix:menu ссылка
Ссылка на корзину bitrix:sale.basket.basket.line
ссылка
Поиск по заголовкам bitrix:search.title ссылка
Выбор региона sotbit:regions.choose
 
Перечень доступных компонентов можно посмотреть на сайте разработчика Битрикс.

Для того, чтобы созданные шаблоны компонентов не удалялись в процессе обновления решения, поместите их в папку, поиск в которой осуществляется в первую очередь, в нашем случае:
/local/templates/sotbit_origami/components.

Добавление пользовательских шаблонов компонентов рассмотрена подробнее в уроке «Шаблоны компонентов».

Пример пустой шапки:

<?php
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
global $APPLICATION;
global $USER;
use BitrixMainLocalizationLoc;
use SotbitOrigamiHelperConfig;

//css and Js connection
use BitrixMainPageAsset;
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/theme/headers/custom_new_1/css/style.css");
// style.css – созданный файл стилей в созданной папке «css»
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . "/theme/headers/custom_new_1/js/custom.js");
// custom.js – созданный файл скриптов в созданной папке «js»

//multiregion module check
$useRegion = (Config::get('USE_REGIONS') == 'Y') ? true : false;
?>

<div class='page'>
   <ваша фантазия> ... </ваша фантазия>

Видео с примером создания шапки сайта доступно по ссылке:
Сотбит Оригами: Кастомизация шапки сайта


Нужна помощь в настройке решения

Оставьте заявку и мы свяжемся с вами!