Как найти header в bitrix

Как найти header в bitrix

Просмотров: 33940
Дата последнего изменения: 11.01.2023

Сложность урока:

4 уровень – сложно, требуется сосредоточиться, внимание деталям и точному следованию инструкции.

5

Недоступно в лицензиях:

Ограничений нет


Ранее


Создание шаблона – первый шаг в интеграции дизайна.

Примечание: Ранее можно было задавать внешний вид шаблона сайта с помощью визуального редактора. С версии 14.0 работа выполняется без визуального редактора.

Подробнее…




мы создали папку шаблона сайта. Однако для корректного отображения шаблона на сайте нужно еще адаптировать вёрстку, подключив все стили и js-файлы в шапке и подвале сайта, а также прописав новые пути до картинок и объектов.

Необходимо выполнить три важных шага:

  1. Редактирование шапки сайта (header.php)
  2. Редактирование подвала сайта (footer.php)
  3. Подключение шапки и подвала (index.php), добавление контента

1. Редактирование шапки сайта (header.php)

  • В папке шаблона откроем файл header.php в режиме редактирования как PHP.
  • Первой строкой пропишем служебный код (защита от подключения файла напрямую без подключения ядра): 
    <? if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die(); ?>
  • Внутри тегов <head> добавим следующие строки:
    • Код отображения заголовка страницы: 
      <title><? $APPLICATION->ShowTitle(); ?></title>
    • Код вывода в шаблоне сайта основных полей тега <head> (мета-теги Content-Type, robots, keywords, description; стили CSS; скрипты): 
      <? $APPLICATION->ShowHead();  ?>
  • После открывающего тега <body> пропишем код для отображения административной панели <? $APPLICATION->ShowPanel(); ?> . В связи с особенностями данного html-макета заключим код отображения панели в теги <div> (панель будет отображаться внизу страницы), иначе административная панель “наедет” на меню: 
    <div id="panel">
    <? $APPLICATION->ShowPanel(); ?> 
</div>
  • Во все строках, где есть обращение к файлам, добавим в начале пути константу

    <?=SITE_TEMPLATE_PATH?>


    Возвращает путь до текущего подключённого шаблона сайта без последнего слеша.



    и слеш /.

    Рассмотрим на примере блока <!-- Bootstrap core JavaScript -->:

      <!-- Bootstrap core JavaScript -->
  <script src="<?=SITE_TEMPLATE_PATH?>/vendor/jquery/jquery.min.js"></script>
  <script src="<?=SITE_TEMPLATE_PATH?>/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  • Сохраним изменения.

Пример отредактированного файла header.php с комментариями

Примечание: css-стили в шапке сайта предпочтительнее подключить с помощью метода Asset::addCss() ядра D7.

Пример файла header.php с комментариями

2. Редактирование подвала сайта (footer.php)

Подвал сайта почти

не нуждается в изменениях

Проверьте обязательно наличие строки <?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();?> в начале файла.


. Необходимо только в строках, обращающихся к файлам, добавить в начале пути константу

<?=SITE_TEMPLATE_PATH?>


Возвращает путь до текущего подключённого шаблона сайта без последнего слеша.



со слешем / и сохранить изменения.

Пример отредактированного файла footer.php

3. Подключение шапки и подвала (index.php), добавление контента

  • Необходимо удостовериться в подключении на странице вывода файлов header.php и footer.php.

    Для этого в файле главной страницы сайта

    index.php

    (Контент > Структура сайта > Файлы и папки > index.php)




    сверим следующие конструкции:

    • первая строка: <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");?>
    • последняя строка: <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>
  • Добавим

    статический


    Т.е. для изменения контента страницы нужно будет вновь отредактировать вручную код страницы index.php.



    контент.

    Откроем файл с подготовленной вёрсткой (index.html) и скопируем код между шапкой (header) и подвалом сайта (footer) – тот, который мы в пункте 1 заменяли на #WORK_AREA#, то есть контент сайта.

    Настроим пути к картинкам. Пропишем в существующих путях уже знакомую константу <?=SITE_TEMPLATE_PATH?>/.

Пример отредактированного файла index.php с комментариями

Удобнее, разумеется, настроить вывод динамической информации и работать с ним. Подробнее об этом в

следующем уроке.


В предыдущем уроке мы создали шаблон главной страницы сайта. Однако пока вся информация на сайте – статическая, и для внесения любых изменений придется править главную страницу index.php. Это не очень удобно, если информация на сайте должна постоянно обновляться. И при этом слишком громоздко.

Поэтому однородную информацию лучше заносить в инфоблоки, а потом с помощью компонентов выводить её на сайте. А чтобы информация отображалась именно так, как задумал дизайнер, необходимо кастомизировать шаблон компонента.

Подробнее…



Готово! Теперь осталось только

назначить


Откройте в Административном разделе страницу Настройки > Настройки продукта > Сайты > Список сайтов. С помощью меню действий откройте для редактирования нужный сайт.

Выберите шаблон, который вы хотите применить и условия.

Подробнее…




созданный шаблон для тестового сайта и посмотреть результат.

Примечание:
Всегда можно изменить шапку или подвал сайта, перенеся требуемую часть кода из индексной страницы в файл header.php или footer.php.

Пример: перенос блока “Связаться с нами” в footer.php
Источник

Посмотрите как клиент отказался от Seo и потом все же вернулся к нам в seouspeh.ru – наглядный сред более 5 лет

А вот и через пару месяцев еще)), класс:

Новый кейс – за 2 последних года (с очень адекватным клиентом):

Посмотрите как мы в 10 раз уменьшили нагрузку на базу данных MySQL (перегруз был на 500% от лимитов)

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

Сайтсоздание | А тут у Нас Вы можете Заказать продвижение сайтов | Сливки SEO

Источник

Есть такая проблема. в разделах например новости /news/ отваливается heder.php
что делаю не так?
Вот он подключается:

require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");

вот код header.php который расположен в папке bitrix:

<?require_once($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog.php");?>

а вот heder.php который сидит в папке шаблона:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
IncludeTemplateLangFile($_SERVER["DOCUMENT_ROOT"]."/bitrix/templates/".SITE_TEMPLATE_ID."/header.php");
CJSCore::Init(array("fx"));
$curPage = $APPLICATION->GetCurPage(true);
$theme = COption::GetOptionString("main", "wizard_eshop_bootstrap_theme_id", "yellow", SITE_ID);
?> 
<!DOCTYPE html>
<html xml:lang="<?=LANGUAGE_ID?>" lang="<?=LANGUAGE_ID?>">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<!-- jQuery library (served from Google) -->
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<script src="/js/tab.js"></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src="bitrix/templates/eshop_bootstrap_yellow/js/index.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="bitrix/templates/eshop_bootstrap_yellow/tab.css" type="text/css" media="screen" />
<link rel="stylesheet" href="bitrix/templates/eshop_bootstrap_yellow/css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="bitrix/templates/eshop_bootstrap_yellow/accordionmenu.css" type="text/css" media="screen" />
<?$APPLICATION->ShowHead();?>
<?
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/colors.css", true);
$APPLICATION->SetAdditionalCSS("/bitrix/css/main/bootstrap.css");
$APPLICATION->SetAdditionalCSS("/bitrix/css/main/font-awesome.css");
?>
<title><?$APPLICATION->ShowTitle()?></title>
</head>
<body class="bx-background-image bx-theme-<?=$theme?>" <?=$APPLICATION->ShowProperty("backgroundImage")?>>
<div id="panel"><?$APPLICATION->ShowPanel();?></div>

<div class="bx-wrapper" id="bx_eshop_wrap">
<div id="menu_div">
			<div id="navigation1">
				<div id="menu">
					<ul id="nav">
						<li><a href="index.php">Главная</a></li>
						<li><a href="dostavka-i-oplata.php">Доставка и оплата</a></li>
						<li><a href="tseny.php">Цены</a></li>
						<li><a href="/news/">Новости</a></li>
						<li><a href="aktsii.php">Акции</a></li>
						<li><a href="o-kompanii.php">О компании</a></li>
						<li><a href="kontakty.php">Контакты</a></li>
					</ul>
					
					<!-- Корзина -->
					<form class="searchform" action="#"> 
					<?$APPLICATION->IncludeComponent(
"bitrix:sale.basket.basket.line", 
"bootstrap_v4", 
array(
"SHOW_PERSONAL_LINK" => "N",
"SHOW_NUM_PRODUCTS" => "N",
"SHOW_TOTAL_PRICE" => "Y",
"SHOW_PRODUCTS" => "N",
"POSITION_FIXED" => "N",
"SHOW_AUTHOR" => "Y",
"PATH_TO_BASKET" => SITE_DIR."personal/cart/",
"PATH_TO_PERSONAL" => SITE_DIR."personal/",
"PATH_TO_REGISTER" => SITE_DIR."login/",
"PATH_TO_PROFILE" => SITE_DIR."personal/",
"COMPONENT_TEMPLATE" => "bootstrap_v4",
"PATH_TO_ORDER" => SITE_DIR."personal/order/make/",
"SHOW_EMPTY_VALUES" => "Y",
"PATH_TO_AUTHORIZE" => "",
"SHOW_REGISTRATION" => "Y",
"HIDE_ON_BASKET_PAGES" => "Y"
),
false
);?>
					</form>
					<!-- / Search Form -->
					 
				</div><!-- #menu КОНЕЦ-->
			</div><!-- #navigation КОНЕЦ-->
		</div><!-- #menu_div КОНЕЦ-->
<div class="workarea">
<div class="container bx-content-seection">
<div class="col-md-12 hidden-xs" style="padding-top: 10px;">
<table width="100%" style="text-align: center;padding-top: 10px;font-weight: 600;font-family: Century Gothic;">
<tr>


</tr>
</table>
</div>
</div></div>
<header class="bx-header">
<div class="bx-header-section container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
<div class="bx-logo">
<a class="bx-logo-block hidden-xs" href="<?=SITE_DIR?>">
<?$APPLICATION->IncludeComponent("bitrix:main.include", "", array("AREA_FILE_SHOW" => "file", "PATH" => SITE_DIR."include/company_logo.php"), false);?>
</a>
<a class="bx-logo-block hidden-lg hidden-md hidden-sm text-center" href="<?=SITE_DIR?>">
<?$APPLICATION->IncludeComponent("bitrix:main.include", "", array("AREA_FILE_SHOW" => "file", "PATH" => SITE_DIR."include/company_logo_mobile.php"), false);?>
</a>
</div>
</div>
<div class="col-md-6" style="margin: 15px 0 0;">
<?$APPLICATION->IncludeComponent(
"bitrix:search.title",
"visual",
Array(
"CATEGORY_0" => array(),
"CATEGORY_0_TITLE" => "",
"CHECK_DATES" => "N",
"CONTAINER_ID" => "title-search",
"CONVERT_CURRENCY" => "N",
"INPUT_ID" => "title-search-input",
"NUM_CATEGORIES" => "1",
"ORDER" => "date",
"PAGE" => "#SITE_DIR#search/index.php",
"PREVIEW_TRUNCATE_LEN" => "",
"PRICE_CODE" => array(),
"PRICE_VAT_INCLUDE" => "Y",
"SHOW_INPUT" => "Y",
"SHOW_OTHERS" => "N",
"SHOW_PREVIEW" => "Y",
"TOP_COUNT" => "5",
"USE_LANGUAGE_GUESS" => "Y"
)
);?>
</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 hidden-xs">
<font size="6" style="font-weight: bold;"><a href="tel:74951427317" style="color: black;">+7(495)142-73-17</a></font>
<center>	<font size="2" style="font-weight: bold;">Ежедневно с 09:00 до 21:00</font></center>
</div>
</div>
<div class="row">
<div class="col-md-12 hidden-xs">
<?$APPLICATION->IncludeComponent(
"bitrix:menu", 
"catalog_horizontal", 
array(
"ROOT_MENU_TYPE" => "top",
"MENU_CACHE_TYPE" => "A",
"MENU_CACHE_TIME" => "36000000",
"MENU_CACHE_USE_GROUPS" => "N",
"MENU_THEME" => "yellow",
"CACHE_SELECTED_ITEMS" => "N",
"MENU_CACHE_GET_VARS" => array(
),
"MAX_LEVEL" => "4",
"CHILD_MENU_TYPE" => "",
"USE_EXT" => "Y",
"DELAY" => "N",
"ALLOW_MULTI_SELECT" => "N",
"COMPONENT_TEMPLATE" => "catalog_horizontal"
),
false
);?>
</div>
</div>
<?if ($curPage != SITE_DIR."index.php"):?>
<div class="row">
<div class="col-lg-12">
<?$APPLICATION->IncludeComponent("bitrix:search.title", "visual", array(
"NUM_CATEGORIES" => "1",
"TOP_COUNT" => "5",
"CHECK_DATES" => "N",
"SHOW_OTHERS" => "N",
"PAGE" => SITE_DIR."catalog/",
"CATEGORY_0_TITLE" => GetMessage("SEARCH_GOODS"),
"CATEGORY_0" => array(
0 => "iblock_catalog",
),
"CATEGORY_0_iblock_catalog" => array(
0 => "all",
),
"CATEGORY_OTHERS_TITLE" => GetMessage("SEARCH_OTHER"),
"SHOW_INPUT" => "Y",
"INPUT_ID" => "title-search-input",
"CONTAINER_ID" => "search",
"PRICE_CODE" => array(
0 => "BASE",
),
"SHOW_PREVIEW" => "Y",
"PREVIEW_WIDTH" => "75",
"PREVIEW_HEIGHT" => "75",
"CONVERT_CURRENCY" => "Y"
),
false,
array(
"ACTIVE_COMPONENT" => "N"
)
);?>
</div>
</div>
<?endif?>
<?if ($curPage != SITE_DIR."index.php"):?>
<div class="row">
<div class="col-lg-3" id="navigation">
<table style="text-align: left; width: 302px;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<ol class="korpus3"> 
  <li tabindex="0"><i class="fa fa-chevron-down" aria-hidden="true" style="padding-right: 10px;"></i>
Каталог
  <div style="text-align: center;">
  
					<ol><a href="index.php">Главная</a></ol>
					<ol><a href="#">Элементы питания</a></ol>
					<ol><a href="#">Фонари</a></ol>
					<ol><a href="#">Светильники</a></ol>
					<ol><a href="#">Аксессуары</a></ol>
					<ol><a href="#">Зонты</a></ol>
					<ol><a href="#">Оборудование</a></ol>
					<ol><a href="#">Упаковка</a></ol>
					<ol><a href="#">Кабели</a></ol>
					<ol><a href="#">АКБ</a></ol>
					<ol><a href="#">НАушники</a></ol>
					<ol><a href="#">Акустика</a></ol>
					<ol><a href="#">Расходники</a></ol>
					<ol><a href="#">Инструменты</a></ol>
					<ol><a href="#">Спецодежда</a></ol>
					<ol><a href="#">Защитные стекла</a></ol>
					<ol><a href="#">Бытовые лампы</a></ol>
					<ol><a href="#">Бумага</a></ol>
					<ol><a href="#">Новинки и хиты</a></ol>
					<ol><a href="#">Акционные товары</a></ol>
					<ol><a href="#">Уценка</a></ol>
</div>
  <li tabindex="0"><i class="fa fa-chevron-down" aria-hidden="true" style="padding-right: 10px;"></i>
Бренды
  <div>
  					<ol><a href="#">Remax</a></ol>
					<ol><a href="#">Duracell</a></ol>
					<ol><a href="#">Varta</a></ol>
					<ol><a href="#">GP</a></ol>
					<ol><a href="#">Cameolon</a></ol>
					<ol><a href="#">Energizer</a></ol>
  </div>
  
</ol>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>

<h1 class="bx-title dbg_title" id="pagetitle"><?=$APPLICATION->ShowTitle(false);?></h1>
<?endif?>
</div>
</header>
<div class="workarea">
<div class="container bx-content-seection">
<div class="row">

<div class="col-md-12 hidden-xs">

<script type="text/javascript">
$(document).ready(function() {
// Store variables
var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu');
// Open the first tab on load
accordion_head.first().addClass('active').next().slideDown('normal');
// Click function
accordion_head.on('click', function(event) {
// Disable header links
event.preventDefault();
// Show and hide the tabs on click
if ($(this).attr('class') != 'active'){
accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
accordion_head.removeClass('active');
$(this).addClass('active');
}
});
});
</script>


<div class="bx-content <?=("col-md-12 col-sm-12")?>">

вот такая простая задача. помогите пожалуйста, голова уже кипит.
Спасибо заранее
https://clck.ru/F979P
Ссылка где находится проблема

Источник

14 мая 2018

Приветствую мои читатели. Реши немного облагородить свой тестовый магазин и сверстать шаблон для Bitrix из готового HTML шаблона. Тема называется Electro и находится в свободном доступе в интернете. И вместе с этим я ещё раз покажу, как верстать или как говорят “натягивать” верстку на CMS Bitrix. А следующими статьями я так же сверстаю шаблон (правда немного другой шаблон) для wordpress. Но об этом чуть позже. А сейчас вот такой приятный шаблон мы сверстаем для нашего магазина StartShop Битрикс.

Шаблон для Bitrix Electro

Скачать HTML исходники темы можно по ссылке.

Вот на основании этой HTML верстки мы и создадим свой шаблон для Bitrix.
В этой статье я не буду очень подробно описывать процесс создания шаблона (иначе получится очень большой объем текста), а верстку более простого шаблона я описывал в отдельном уроке Урок 3. Создание шаблона на 1С Битрикс.

Особенность данного шаблона он сделан на CSS Bootstrap, а мы до этого использовали CSS Foundation (Урок 1).
Разделем нашу работу на несколько этапов:

  1. Создание структуры шаблона Битрикс.
  2. Верстка header.php.
  3. Верстка footer.php.
  4. Верстка каталога.
  5. Верстка детальной страницы товара.

Создание структуры шаблона Битрикс

Первое, что мы сделаем, создадим папку electro в папке наших шаблонов (local/templates/electro) и перенесем из исходников шаблона electro папки в наш шаблон. Дополнительно создадим необходимые для работы шаблона Bitrix файлы:  

Минимальный и достаточный набор файлов для работы шаблона Битрикс следующий:

  • description.php – файл описания шаблона. Это описание будет отображаться в административной части битрикс (в админки).
  • styles.css – это стили которые будут использоваться при редактировании контента (нужен контент менеджеру, у нас будет пустым)
  • template_styles.css – основной файл css-стилей шаблона (в нем будем создать собственные стили)
  • header.php – файл содержит шапку шаблона
  • footer.php – файл содержит подвал шаблона (в этих файлах мы будем редактировать шаблон)

В итоге у нас получится следующая структура:

Структура папок шаблона Bitrix

В папке src я разместил исходники шаблона для удобства работы. Больше не для чего эта папка не нужна.
И первый кусок кода мы внесем в файл description.php задав название и описание нашего шаблона.

Код:

<?
$arTemplate = array (
  'NAME' => 'Шаблон Electro (StartShop)',
  'DESCRIPTION' => 'Шаблон Electro для интернет магазина StartShop',
  'SORT' => '',
  'TYPE' => '',
);

Далее возьмемся за шапку шаблона файл header.php.

Верстка header.php

Как вы помните шаблон Битрикс разделен на два файла header.php и footer.php. А между ними вставляется контент. Подход староват, но и сам Битрикс не молодой.
В шапку вносится код отвечающий за подключение CSS стилей и JavaScript кода.

Но сначала нам нужно проверить инициирован ли движок Битрикса или к шаблону обратились по прямой ссылке. Этот код нужен для защиты.

Код:

<?php
if(!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true)    die();
?>

А затем открываем тег HEAD и подключаем все стили и скрипты. А так же инициируется запуск панели управления Битрикс. Стили и скрипты я взял из файла index.html шаблона electro.
Код:

<?php
use BitrixMainPageAsset;
if(!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true)    die();
$asset = Asset::getInstance();
?>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title><?$APPLICATION->ShowTitle();?></title>
    <?$APPLICATION->ShowHead();?>
    <?
    $asset->addCss(SITE_TEMPLATE_PATH."/css/bootstrap.min.css");
    $asset->addCss(SITE_TEMPLATE_PATH."/css/slick.css");
    $asset->addCss(SITE_TEMPLATE_PATH."/css/slick-theme.css");
    $asset->addCss(SITE_TEMPLATE_PATH."/css/nouislider.min.css");
    $asset->addCss(SITE_TEMPLATE_PATH."/css/font-awesome.min.css");
    $asset->addCss(SITE_TEMPLATE_PATH."/css/style.css");

    $asset->addJs(SITE_TEMPLATE_PATH . 'https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js');
    $asset->addJs(SITE_TEMPLATE_PATH . 'https://oss.maxcdn.com/respond/1.4.2/respond.min.js');
    $asset->addJs(SITE_TEMPLATE_PATH . '/js/jquery.min.js');
    $asset->addJs(SITE_TEMPLATE_PATH . '/js/bootstrap.min.js');
    $asset->addJs(SITE_TEMPLATE_PATH . '/js/slick.min.js');
    $asset->addJs(SITE_TEMPLATE_PATH . '/js/nouislider.min.js');
    $asset->addJs(SITE_TEMPLATE_PATH . '/js/jquery.zoom.min.js');
    $asset->addJs(SITE_TEMPLATE_PATH . '/js/main.js');
    ?>
</head>  
<body>  
<?$APPLICATION->ShowPanel();?>

Обратите внимание скрипты я подключил уже по нового через модуль BitrixMainPageAsset.
А теперь уже вставляем основную верстку. Для этого нам придется разделить файл index.html на 2 части. До комментария <!– FOOTER –> перенести в header.php, а остальное в footer.php. Скрипты из футера я подключил в шапке дублировать их в футере не нужно.
Ну а теперь самый сложный этап вывести вместо блоков HTML шаблона наш контент.
Для начала разберемся с путями к картинкам. Нужно в строках вида: <img src=”./img/logo.png” alt=””> вставить путь к шаблону через специальную константу SITE_TEMPLATE_PATH.

Код:

<img src="<?=SITE_TEMPLATE_PATH?>/img/shop01.png" alt="">

После этого все картинки выведутся в шаблон.
Теперь сайт должен открываться как статическая страница.

Вот что получается.

Шаблон начало

Теперь реализуем вывод следующих блоков:

  1. Меню Битрикс.
  2. Слайдер Лучший товар.

Вывод меню Битрикс

Для вывода меню найдите в файле header.php комментарий <!– NAV –> и вставьте место HTML код вызова компонента bitrix:menu меню:
Код:

<?$APPLICATION->IncludeComponent(
"bitrix:menu",
".default",
array(
    "ALLOW_MULTI_SELECT" => "N",
    "CHILD_MENU_TYPE" => "left",
    "DELAY" => "N",
    "MAX_LEVEL" => "1",
    "MENU_CACHE_GET_VARS" => array(
    ),
    "MENU_CACHE_TIME" => "3600",
    "MENU_CACHE_TYPE" => "N",
    "MENU_CACHE_USE_GROUPS" => "Y",
    "ROOT_MENU_TYPE" => "top",
    "USE_EXT" => "N",
    "COMPONENT_TEMPLATE" => ".default"
),
false
);?>

После этого надо скопировать шаблон компонента меню и уже править его.

Копировать шаблон меню Битрикс

Как получить этот код подробно описано в четвертом уроке Вывод меню Битрикс. 

У меня путь до шаблона меню сформировался следующий: local/templates/electro/components/bitrix/menu/top/template.php
Из папки top я удалил все файлы и папки кроме файла самого шаблона template.php. В него достаточно было перенести только классы тега <UL>.
Код:

<?
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>

<?if (!empty($arResult)):?>
    <ul class="main-nav nav navbar-nav">

<?
foreach($arResult as $arItem):
   if($arParams["MAX_LEVEL"] == 1 && $arItem["DEPTH_LEVEL"] > 1) 
      continue;
?>
   <?if($arItem["SELECTED"]):?>
      <li><a href="<?=$arItem["LINK"]?>" class="selected"><?=$arItem["TEXT"]?></a></li>
   <?else:?>
      <li><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
   <?endif?>
   
<?endforeach?>

</ul>
<?endif?>

Вывод слайдера Лучший товар

Теперь выведем слайдер. Для слайдера мы воспользуемся нашим компонентом, который мы создали в рамках уроков по Bitrix (Урок 9. Создание собственного компонента слайдера для интернет-магазина на Битрикс). Прелесть компонентов в том, что они универсальны и достаточно сделать для них новый шаблон и можно использовать в другом месте или на другом сайте.
Единственное компонент пришлось немного доработать и добавить вывод цены из свойства инфоблока ( “PROPERTY_ACCOUNT”, “PROPERTY_PRICE”).

Код:

$arSelect = Array("ID", "NAME", "PREVIEW_PICTURE", "DETAIL_PAGE_URL", "PROPERTY_".$arParams["PROPERTY_CODE"], "PROPERTY_ACCOUNT", "PROPERTY_PRICE");
$arFilter = Array("IBLOCK_ID" => IntVal($arParams["IBLOCK_ID"]), "ACTIVE"=>"Y", "PROPERTY_".$arParams["PROPERTY_CODE"]."_VALUE" => 'Да');
$res = CIBlockElement::GetList(Array(), $arFilter, false, false, $arSelect);
while($arFields = $res->GetNext())
{
   $arResult[] = $arFields;   
}
$this->includeComponentTemplate();

В файле index.php в корне сайта уже есть код отвечающий за вызов компонента слайдера.

Код:

<?$APPLICATION->IncludeComponent("startshop:slider", "best", Array(
   "AJAX_MODE" => "N",
      "AJAX_OPTION_ADDITIONAL" => "",
      "AJAX_OPTION_HISTORY" => "N",
      "AJAX_OPTION_JUMP" => "N",
      "AJAX_OPTION_STYLE" => "Y",
      "FIELD_CODE" => array(
         0 => "DETAIL_PICTURE",
         1 => "",
      ),
      "IBLOCK_ID" => "13",   // Инфобок
      "IBLOCK_TYPE" => "StartShop",  // Тип инфоблока
      "PROPERTY_CODE" => "BEST", // Укажите свойство по которому будет фильтроваться товары для слайдера
      "COMPONENT_TEMPLATE" => ".default"
   ),
   false
);?>

Нужно скопировать новый шаблон в папку нашего шаблона electro и внести верстку. Привожу целиком код файла local/templates/electro/components/startshop/slider/best/template.php

Код:

<?
if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
//pr($arResult);
?>
<!-- Products tab & slick -->
<div class="col-md-12">
    <div class="row">
        <div class="products-tabs">
            <!-- tab -->
            <div id="tab1" class="tab-pane active">
                <div class="products-slick" data-nav="#slick-nav-1">
                    <?foreach ($arResult as $item):
                        $file = CFile::ResizeImageGet($item["PREVIEW_PICTURE"], array('width' => 300,'height' => 300), BX_RESIZE_IMAGE_EXACT, true);
                        ?>
                    <!-- product -->
                    <div class="product">
                        <div class="product-img">
                            <img width="300px" height="300px" src="<?=$file['src']?>" alt="">
                            <div class="product-label">
                                <span class="new">NEW</span>
                            </div>
                        </div>
                        <div class="product-body">
                            <p class="product-category">Category</p>
                            <h3 class="product-name"><a href="<?=$item['DETAIL_PAGE_URL']?>"><?=$item['NAME']?></a></h3>
                            <div class="product-rating">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                            </div>
                            <div class="product-btns">
                                <button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span class="tooltipp">add to wishlist</span></button>
                                <button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to compare</span></button>
                                <button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick view</span></button>
                            </div>
                        </div>
                        <div class="add-to-cart">
                            <button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i> add to cart</button>
                        </div>
                    </div>
                    <!-- /product -->
                    <?endforeach;?>
                </div>
                <div id="slick-nav-1" class="products-slick-nav"></div>
            </div>
            <!-- /tab -->
        </div>
    </div>
</div>
<!-- Products tab & slick -->

Верстка footer.php

В футер мы вставим достаточно большой кусок когда от комментария <!– NEWSLETTER –>и до конца индексного фала шаблона.

Код:

<!-- NEWSLETTER -->
<div id="newsletter" class="section">

Изменений мы в нем делать пока не будет и весь я его приводить не буду, ниже будут ссылки к архивам.
Тут нужно обратить внимание на один момент. Все JavaScript файлы в шаблоне подключались в футере, а мы их, как вы помните, подключили в HEADER. И из-за этого наш слайдер не заработает. Но поскольку мы не просто прописали ссылки на скрипты, а подключили их средствами Bitrix, у нас есть возможность через настройки главного модуля перенести скрипты в конец страницы. Выполнить это можно установив соответствующий флажок в разделе Оптимизация CSS.

Переместить весь Jacascript в конец страницы

После такой манипуляции скрипты заработают и заработает наш слайдер.

Готовый слайдер

Далее приступаем к верстке каталога.

Верстка каталога

Для каталога мы используем комплексный компонент Новости (bitrix:news). Он уже размещен в папке catalog нашего сайта. Нам, как и всегда нужно скопировать шаблон компонента в наш шаблон. И на эту тему у меня так же есть подробный Урок 6. Вывод каталога товаров в Битрикс.
Работать мы будем с файлом local/templates/electro/components/bitrix/news/catalog-electro/bitrix/news.list/.default/template.php.
Код мы подготовим следующий (привожу весь).

Код:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);
?>
<!-- SECTION -->
<div class="section">
    <!-- container -->
    <div class="container">
<div class="row">

    <?foreach($arResult["ITEMS"] as $item):?>
        <?
        $file = CFile::ResizeImageGet($item["PREVIEW_PICTURE"]["ID"],array('width' => 200,'height' => 200), BX_RESIZE_IMAGE_EXACT, true);
        $item["PREVIEW_PICTURE"]['WIDTH'] = $file['width'];
        $item["PREVIEW_PICTURE"]['HEIGHT'] = $file['height'];
        $item["PREVIEW_PICTURE"]['SRC'] = $file['src'];
        ?>
        <?//Включает возможность изменять элемент из публички
        $this->AddEditAction($item['ID'], $item['EDIT_LINK'], CIBlock::GetArrayByID($item["IBLOCK_ID"], "ELEMENT_EDIT"));
        $this->AddDeleteAction($item['ID'], $item['DELETE_LINK'], CIBlock::GetArrayByID($item["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('Подтверждаете удаление?')));
        ?>
            <!-- product -->
            <div class="col-md-4 col-xs-6">
                <div class="product" id="<?=$this->GetEditAreaId($item['ID']);?>">
                    <div class="product-img">
                        <img src="<?=$item['PREVIEW_PICTURE']['SRC']?>" alt="">
                        <div class="product-label">
                            <span class="new">NEW</span>
                        </div>
                    </div>
                    <div class="product-body">
                        <p class="product-category">Category</p>
                        <h3 class="product-name"><a href="<?=$item['DETAIL_PAGE_URL']?>"><?=$item['NAME']?></a></h3>
                        <h4 class="product-price"><?=$item['PROPERTIES']['PRICE']['VALUE']?></h4>
                        <div class="product-rating">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                        </div>
                    </div>
                    <div class="add-to-cart">
                        <button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i>Купить</button>
                    </div>
                </div>
            </div>
        <!-- /product -->
    <?endforeach;?>
        </div>
        <!-- /row -->
        <?if($arParams["DISPLAY_BOTTOM_PAGER"]):?>
            <br /><?=$arResult["NAV_STRING"]?>
        <?endif;?>
    </div>
    <!-- /container -->
</div>
<!-- /SECTION -->

Вместе с комплексным компонентом всегда копируются все простые компоненты (список, форма поиска, rss и др.). Их все смело можно удалить, чтобы не захламляли шаблон. Ведь и так не просто разбираться в дереве шаблонов компонентов Битрикса. А если потребуется их всегда можно создать индивидуально и доработать.
Каталог получился у нас следующий.

Каталог готовый

Поясню немного отдельные моменты.

Код:

        $file = CFile::ResizeImageGet($item["PREVIEW_PICTURE"]["ID"],array('width' => 200,'height' => 200), BX_RESIZE_IMAGE_EXACT, true);
        $item["PREVIEW_PICTURE"]['WIDTH'] = $file['width'];
        $item["PREVIEW_PICTURE"]['HEIGHT'] = $file['height'];
        $item["PREVIEW_PICTURE"]['SRC'] = $file['src'];

Этим кодом мы через функцию CFile::ResizeImageGet масштабируем картинку под размер 200 на 200 пикселей.

Код:

        <?//Включает возможность изменять элемент из публички
        $this->AddEditAction($item['ID'], $item['EDIT_LINK'], CIBlock::GetArrayByID($item["IBLOCK_ID"], "ELEMENT_EDIT"));
        $this->AddDeleteAction($item['ID'], $item['DELETE_LINK'], CIBlock::GetArrayByID($item["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('Подтверждаете удаление?')));

Здесь мы подключаем экшены к элементам каталога, чтобы была возможность изменять, добавлять и удалять элементы непосредственно из публичной части.
Ещё раз напомню все специфичные моменты для Битрикса описаны в уроке, на который я дал ссылку выше.
А далее уже приступим к детальной страницы или карточки товара, как принято называть.

Верстка детальной страницы товара

С детальной страницей поступаем точно так же, как и с каталогом. Копируем шаблон компонента bitrix:news.detail в наш шаблон electro. И совмещаем верстку с Битрикс.
В процессе верстки, т.к. у нас каталог достаточно простой, не нужные элементы я убираю. Да и не ставлю целей выполнить верстку полностью. Цель показать вам, как происходит процесс “натягивание” HTML шаблона на компоненты Битрикс.
Код детальной страницы располагается по пути local/templates/electro/components/bitrix/news/catalog-electro/bitrix/news.detail/.default/template.php.
А сам код я представлю ниже полностью:

Код:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);
?>
<?
$file = CFile::ResizeImageGet($arResult["PREVIEW_PICTURE"]["ID"],array('width' => 300,'height' => 300), BX_RESIZE_IMAGE_PROPORTIONAL , true);
$arResult["PREVIEW_PICTURE"]['WIDTH'] = $file['width'];
$arResult["PREVIEW_PICTURE"]['HEIGHT'] = $file['height'];
$arResult["PREVIEW_PICTURE"]['SRC'] = $file['src'];

$file = CFile::ResizeImageGet($arResult["PREVIEW_PICTURE"]["ID"],array('width' => 100,'height' => 100), BX_RESIZE_IMAGE_PROPORTIONAL , true);
$arResult["PREVIEW_PICTURE_MIN"]['WIDTH'] = $file['width'];
$arResult["PREVIEW_PICTURE_MIN"]['HEIGHT'] = $file['height'];
$arResult["PREVIEW_PICTURE_MIN"]['SRC'] = $file['src'];

//pr($arResult);
?>
<!-- SECTION -->
<div class="section">
    <!-- container -->
    <div class="container">
        <!-- row -->
        <div class="row">
            <!-- Product main img -->
            <div class="col-md-6">
                <div id="product-main-img">
                    <div class="product-preview">
                        <img src="<?=$arResult['PREVIEW_PICTURE']['SRC']?>" alt="">
                    </div>
                </div>
            </div>
            <!-- /Product main img -->

            <!-- Product details -->
            <div class="col-md-6">
                <div class="product-details">
                    <h2 class="product-name"><?=$arResult["NAME"]?></h2>
                    <div>
                        <div class="product-rating">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-o"></i>
                        </div>
                        <a class="review-link" href="#">10 Review(s) | Add your review</a>
                    </div>
                    <div>
                        <h3 class="product-price"><?=$arResult['PROPERTIES']['PRICE']['VALUE']?></h3>
                        <span class="product-available">In Stock</span>
                    </div>
                    <p><?=$arResult["FIELDS"]["PREVIEW_TEXT"]?></p>

                    <div class="product-options">
                        <label>
                            Size
                            <select class="input-select">
                                <option value="0">X</option>
                            </select>
                        </label>
                        <label>
                            Color
                            <select class="input-select">
                                <option value="0">Red</option>
                            </select>
                        </label>
                    </div>

                    <div class="add-to-cart">
                        <div class="qty-label">
                            Qty
                            <div class="input-number">
                                <input type="number">
                                <span class="qty-up">+</span>
                                <span class="qty-down">-</span>
                            </div>
                        </div>
                        <button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i>Купить</button>
                    </div>
                </div>
            </div>
            <!-- /Product details -->

            <!-- Product tab -->
            <div class="col-md-12">
                <div id="product-tab">
                    <!-- product tab nav -->
                    <ul class="tab-nav">
                        <li class="active"><a data-toggle="tab" href="#tab1">Описание</a></li>
                        <li><a data-toggle="tab" href="#tab2">Характеристики</a></li>
                    </ul>
                    <!-- /product tab nav -->

                    <!-- product tab content -->
                    <div class="tab-content">
                        <!-- tab1  -->
                        <div id="tab1" class="tab-pane fade in active">
                            <div class="row">
                                <div class="col-md-12">
                                    <p><?=$arResult["PREVIEW_TEXT"]?></p>
                                </div>
                            </div>
                        </div>
                        <!-- /tab1  -->

                        <!-- tab2  -->
                        <div id="tab2" class="tab-pane fade in">
                            <div class="row">
                                <div class="col-md-12">
                                    <p><?=$arResult["DETAIL_TEXT"]?></p>
                                </div>
                            </div>
                        </div>
                        <!-- /tab2  -->
                    </div>
                    <!-- /product tab content  -->
                </div>
            </div>
            <!-- /product tab -->
        </div>
        <!-- /row -->
    </div>
    <!-- /container -->
</div>
<!-- /SECTION -->

Подробнее создание детальной страницы я описывал в одном из предыдущих уроков Урок 8. Создание детальной страницы товара в Битрикс.
Результат на скрине.

Детальная страница

Вот и все на этом я заканчиваю создание шаблона Битрикс. Ниже архив с исходными данными и готовый шаблон. А так же прикладываю полностью папку local чтобы можно быстро развернуть и перенести компоненты.

Исходные HTML фалы: electro.zip
Созданный шаблон для Битрикс: template-electro.zip
Полностью папка local (все сразу): local-electro.zip
Результат можно посмотреть здесь Магазин StartShop.

От автора:
В этой статье я рассмотрел,
как создаются шаблоны Битрикс. Тема эта, наверное, самая востребованная. В следующих
статьях я хочу тоже самое проделать для wordpress, чтобы понять, как происходит
создание шаблона там и сравнить с Битрикс. Так что подписывайтесь, чтобы не
пропустить думаю будет интересно, особенно тем, кто кроме Битрикса с другими
движками не работал. До новых встреч.

Источник

Сегодня узнаем как грамотно оформлять header.php в Битрикс, как правильно подключать .css и .js в header.php, как правильно подключать jQuery в Битрикс и как включить сжатие .css и .js файлов в Битрикс.

Это очень острая и актуальная проблема на сегодняшний день. Самые частые обращения по модулям связаны с ошибками в скриптах, когда неправильно подключена jQuery в header.php, и очень часто подключено несколько jQuery, но должна быть подключена на всех страницах сайта только одна библиотека jQuery и самой первой среди всех скриптов шаблона сайта.

На одном сайте был рекорд, я насчитал 7 подключенных библиотек jQuery, просто человек замучился искать ошибки и деваться уже некуда было, когда проблема была найдена и исправлена, все стало работать на сайте правильно.

Правильный header.php в Битрикс

Итак, как грамотно должен быть оформлен файл header.php шаблона сайта в Битрикс:

  1. Перед <!DOCTYPE html> не должно быть никаких пробелов и переносов
  2. Кодировка страницы задается перед <title>
  3. После заголовка <title> перечисляются все мета-теги <meta>
  4. После мета-тегов подключаются .css стили сайта <link>
  5. И только после подключения .css стилей подключаются  все .js скрипты <script>
  6. Комментарии к IE по возможности лучше опустить в самый конец перед закрывающим тегом </head>

Пример header.php для HTML 5 DOCTYPE

<?
if(!defined(“B_PROLOG_INCLUDED”) || B_PROLOG_INCLUDED!==true)  die();
/**
 * @var CUser $USER
 * @var CMain $APPLICATION
 * @var $full_width – переменная в которой будет true если выполнится условие из  $arFullWidthPages
 */
?><!DOCTYPE html>
<html lang=”<?=LANGUAGE_ID?>”>
<head>
<meta charset=”<?=SITE_CHARSET?>”>
<title><?$APPLICATION->ShowTitle()?></title>
<?
//Тут мета-теги
$APPLICATION->ShowMeta(“robots”, false, false);
$APPLICATION->ShowMeta(“keywords”, false, false);
$APPLICATION->ShowMeta(“description”, false, false);
?>
<meta name=”yandex-verification” content=”xxxxxxxxxxxxxxxx”>
<meta name=”google-site-verification” content=”xxxxxxxxxxxxxxxx”>
<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>
<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon”>
<?
//Тут канонический url
$APPLICATION->ShowLink(“canonical”, null, false);

//Тут стили шаблона сайта
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .’/css/uikit.gradient.min.css’);
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .’/css/components/form-password.gradient.min.css’);
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .’/css/components/sticky.gradient.min.css’);
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .’/css/components/placeholder.gradient.min.css’);
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .’/css/jquery.responsive-tabs.css’);
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .’/css/nanoscroller.css’);
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .’/css/scrollup/image.css’);
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .’/css/pace.min.css’);

//Тут выводим стили
$APPLICATION->ShowCSS(true, false);
?>
<!–[if lt IE 9]>
<script type=”text/javascript” src=”<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH.’/js/ie8-polyfill.js’);?>”></script>

<![endif]–>
<script type=”text/javascript” src=”<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH.’/js/jquery-1.11.2_min.js’);?>”></script>
<?
//Это встроенная в ядро Битрикс jQuery, если подключать ее, то строку подключения jQuery 1.11.2 выше надо удалить.
//CJSCore::Init(array(‘jquery’));

//Тут скрипты
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/uikit/core.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/uikit/grid.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/uikit/modal.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/uikit/dropdown.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/uikit/scrollspy.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/uikit/utility.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/uikit/button.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/uikit/switcher.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/uikit/nav.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/uikit/components/sticky.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/uikit/components/form-password.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/pace.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/jquery.nanoscroller.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/jquery.responsiveTabs.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/switchery.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/readmore.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/jquery.scrollUp.min.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/fn.js’);

//Тут выводим скрипты
$APPLICATION->ShowHeadStrings();
$APPLICATION->ShowHeadScripts();
?>
</head>

CUtil::GetAdditionalFileURL() – генерирует url к файлу с указанием метки версии файла, т.е. он будет кешироваться в браузере посетителя.

SITE_TEMPLATE_PATH – это константа указывающая URL от корня сайта до папки текущего шаблона включая имя папки, если измените папку шаблона, то в header.php ничего  исправлять уже не придется, он изменится в этой константе, например: /bitrix/templates/папка шаблона сайта/


Разберем представленный выше код header.php детально, чтобы понимать, что тут для чего подключается.
Хочу обратить внимание на передаваемые параметры true и false в методах, например ShowMeta() и ShowCSS(), от них зависит стандарт вывода тегов, для HTML 4, HTML 5 в виде <link>, иначе по стандарту xHTML в виде <link />, в данном примере для HTML 5, подробнее читайте в API-документации Битрикс.

Тут мы выводим мета-теги “описание” и “ключевые слова” для поисковых систем.

<?
$APPLICATION->ShowMeta(“robots”, false, false);
$APPLICATION->ShowMeta(“keywords”, false, false);
$APPLICATION->ShowMeta(“description”, false, false);
?>

Методом SetAdditionalCSS() подключаем стили шаблона, так каждый стиль.

$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .’/css/uikit.gradient.min.css’);

Метод ShowCSS() выводит все стили шаблона и стили, которые могут подключаться в компонентах Битрикс, т.е. вообще все подключенные стили, включая стили ядра Битрикс.

<?
$APPLICATION->ShowCSS(true, false);
?>

Перед подключением вообще всех скриптов сайта и только для браузера Internet Explorer младше IE 9  я подключаю специальные полифилы функций/методов, которые в нем отсутствуют и вызывают ошибки javascript, возможная самая частая ошибка типа Object doesn’t support property or method ‘forEach’…
Т.е. если какого-то метода нет в IE 8, но он используется в новой jQuery или каком-то плагине, то может повезет и он найдется в этом скрипте, но Вы можете его не подключать, только если нужен.

<!–[if lt IE 9]>
<script type=”text/javascript” src=”<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH.’/js/ie8-polyfill.js’);?>”></script>
<![endif]–>

А вот и подошли мы к самому интересному, на этом этапе самая частая ошибка подключения jQuery, которая должна выводиться самой первой среди всех остальных подключенных в компонентах или в шаблоне сайта jQuery-плагинах, т.е. ошибок с подключенными где-то в компоненте или шаблоне jQuery-плагинами быть не должно!
Все плагины и скрипты будут подключаться как положено, после jQuery, а не как у многих, в обратном порядке, это базовое правило подключения плагинов jQuery, знать его нужно всем!

<script type=”text/javascript” src=”<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH.’/js/jquery-1.11.2_min.js’);?>”></script>

Методом AddHeadScript() подключаем скрипты шаблона и только после подключения стилей, стили всегда подключайте выше скриптов.

$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .’/js/uikit/core.min.js’);

Ниже два заключительных метода “выводят”:

  • ShowHeadStrings() выводит все скрипты ядра Битрикс, включая встроенную jQuery, если вызывается методом CJSCore::Init(array(‘jquery’));
  • ShowHeadScripts() выводит скрипты шаблона добавленные с помощью AddHeadScript(), а также  специальные стили, JavaScript, либо произвольный html-код, который  задается в компонентах с помощью CMain::AddHeadString() и все на свете пользовательское.

Обратите внимание на порядок, именно в таком порядке!

$APPLICATION->ShowHeadStrings();
$APPLICATION->ShowHeadScripts();

Почему строго в таком порядке?
Потому что в методе ShowHeadStrings() может выводиться jQuery ядра Битрикс, вызываемая таким образом:

CJSCore::Init(array(‘jquery’));

Я ее специально закомментировал, чтобы Вы это знали, и знали где подключать. Вызываться он может в любом компоненте, в шаблоне, на любой странице сайта, а выводится она именно в этом самом первом методе, если поменять их местами, она окажется в самом низу, вот и ошибка разработки, можно это смело добавлять в чек-лист по разработке сайта.
Но если Вы выводите встроенную jQuery, значит подключенную ранее вручную jQuery надо удалить со страницы, не забывайте, она должна быть одна на всем сайте! 

Итак, все это подключенное в исходном коде выглядит так:

Правильный header.php в Битрикс

Это конечно все круто! Но, как мы видим, к серверу очень много запросов – 93 шт., много подключено всяких файликов, а это заметно сказывается на скорости загрузки страницы, на время ожидания клиентом, мне-то как разработчику очень удобно, наглядно все видно в коде, но посетители мои от этого заметно страдают…

Просмотр количества запросов к серверу в Firebug


Оказывается, в Битрикс есть отличные опции в настройках главного модуля, позволяющие:

  • Объединять CSS файлы
  • Объединять JS файлы
  • Подключать минифицированные версии CSS и JS файлов
  • Создавать сжатую копию объединенных CSS и JS файлов – нужно отключить

Включается сжатие и объединение .css и .js здесь:

Администрирование -> Настройки -> Настройки модулей -> Главный модуль

Поставьте галочки и сохраните настройки модуля зеленой кнопкой Сохранить.
При включении этих опции в идеальном случае на странице подключается 3 css и 3 js файла, подробнее читайте в курсе про Сжатие css и js файлов.

Сжатие о объединение .css и .js Битрикс

Создавать сжатую копию объединенных CSS и JS файлов – это нужно отключить!
Потому что при включенной опции Битрикс сжимает вообще все подключенные на сайте скрипты и стили со всех страниц сайта, это и вес им прибавляет, и велика вероятность появления JS-ошибок на странице.

Лично я столкнулся с такой проблемой, JS-ошибка запросто будет в модуле, где у jQuery-плагина есть js-lang, эти лэнги хранятся в соответствующих php-файлах, вот если на странице сайта подключается какое-то расширение, то Битрикс его также сжимает, скрипт этого расширения будет на всех страницах сайта, а вот лэнги расширения подключаются только на той странице, где вызывается расширение, если
jQuery-плагин не видит свой js-lang, то запросто может быть на странице js-ошибка.

Например, я свой
jQuery-плагин

подключил как расширение на странице Каталог, тут же и лэнги моего плагина подключаются, вот если включить сжатую копию всех JS-файлов, мой плагин будет на всех страницах сайта в хедере, а лэнг только на странице Каталог, соответственно, когда я открываю например главную страницу сайта или любую другую отличную от Каталога, то в консоли появляется JS-ошибка, т.к. лэнги моего плагина подключаются только на странице Каталог.

В общем, очень опасная опция, не включайте ее вообще.

Все, сжатие включено и должно работать.

Для точного результата работы сжатия необходимо разлогиниться, далее открывайте главную страницу сайта, обновите ее, откройте исходный код и увидите такую картину

Результат работы сжатия в Битрикс

Наглядно видим, насколько уменьшилось количество файлов, все скрипты шаблона сжаты в один файл, стили также в один файл.
Количество запросов уменьшилось в разы, время полной загрузки страницы сократилось с 3.8сек. до 1.8сек., запросы к серверу сократились с 93 до 43.

Просмотр количества запросов к серверу в Firebug

Заключение

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

Обязательно изучите все моменты подключения jQuery, скриптов и стилей, их порядок и включайте сжатие на сайте, это существенно ускорит время загрузки страницы и время ее отклика на действия посетителя, облегчит ее и нагрузку на сервер, сайт даже меньше трафика станет потреблять, т.к. каждый файлик на вашем сайте – это трафик!
Также, советую избавляться от всех малонужных и устаревших jQuery-плагинов, ко многим можно найти замену меньшую в разы и даже лучше по функционалу.

Это была моя первая статья из курса “Ускорение сайта”, продолжение следует…

Источник

Добавить комментарий