24 октября 2017

Урок 3. Создание шаблона 1С Битрикс (Foundation)

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

403 Forbidden You don't have permission to access / on this server

Отлично! Начнем свое повествование с ошибки )). Дело в том, что я сам растерялся получив эту ошибку, уже думал у меня перестало работать Веб-окружение Битрикс или порт заблокировался. Но оказалось все проще, мы просто в прошлом уроке удалили файл index.php из папки сайта, а сервер по умолчанию не дает просматривать содержимое папки и выдает ошибку доступа.
По этому чтобы больше не пугаться и не пугать вас проверим работу веб-сервера apache командой phpinfo().
Для этого создадим в корневой папке нашего проекта файл index.php и заполним его простым содержанием.

В веб-окружении Битрикс сайт находится по пути C:\BitrixVM\www.
В этом уроке я буду пользоваться самым доступным редактором кода Notepad++, он бесплатный, легковесный и имеет подсветку синтаксиса (PHP, HTML, CSS) очень удобно в нем редактировать текстовые файлы. Единственное советую сразу установить плагин explorer и тогда у вас появится слева панель дерева файлов, что значительно повысит удобство работы с блокнотом. (В дальнейшем я наверное в других уроках познакомлю вас с другими редакторами кода, такими как NetBeans, Visual Studio Code и может другими).

Вот такой у нас будет файл. И теперь если выполнить открытие сайта через веб-окружение мы уведем информацию о настройках php.

Устройство шаблона Битрикс

Сейчас Битрикс с внедрением ядра D7 рекомендует располагать шаблон и другую кастомизацию в папке local в корне сайта. Напомню раньше шаблоны располагались в папке bitrix (www/bitrix/templates). На самом деле это было не очень удобно, и тем что в папке bitrix много системных файлов, и тем, что при бекапе только публичной части сайта шаблоны не попадали в архив. Теперь все гораздо удобнее и вся кастомизация изолирована от ядра даже на уровне папок.
Создадим папку local, в коне сайта, а в ней папку templates, и ещё папку с названием шаблона startshop.

Минимальный набор шаблона Битрикс

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

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

Если лень создавать файлы вручную, то набор файлов шаблона можно скачать от сюда.
Шаблон Битрикса устроен интересным образом. Он разбит на 2 файла header.php и footer.php. В админке же весь текст шаблона объединяется в одно целое. А разделителем на два файла служит специальная строка #WORK_AREA#.
Из админки открыть шаблон можно в разделе Настройки продукта -> Сайты -> Шаблоны сайтов.

Т.е. все что выше разделителя #WORK_AREA# попадает в header.php, а что ниже в файл footer.php. Вместо разделителя выводится контент сайта через какой-либо компонент, например news (новости).
Не очень понятная структура скажете вы. И я соглашусь. Например, в joomla примерно такое же устройство шаблона, как и в Bitrix, как бы это было не парадоксально. Но файл шаблона один, а вывод контента сделал через вызов специального компонента. Почему так не сделал Битрикс? Я думаю такое устройство шаблона эта дань традициям, ведь Битрикс поддерживает совместимость со всеми предыдущими своими редакциями. И в связи с этим они не могут поменять структуру шаблона, как основу проектирования сайтов.

И чтобы у нас хоть что-то начало открываться давайте отредактируем файл index.php в корне сайта, заполнив его таким содержимым.

Код:

	 <?

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

	 $APPLICATION->SetTitle("Главная");

	 ?>

	 <h1>Магазин Start Shop</h1>

	 <?

	 require($_SERVER['DOCUMENT_ROOT'].'/bitrix/footer.php');

	 ?>

Внедрение собственной верстки в шаблон Битрикс

Копирование исходников шаблона

Наконец-то начнем внедрять шаблон. А в начеле скачем, если ещё не скачали шаблон интернет-магазина StartShop. И распакуем в папку C:\BitrixVM\www\local\templates\. Должно получится вот так:

Теперь нужно подключить добавленный шаблон в админки Битрикса. Авторизуемся если вы этого ещё не сделали добавив адресной строке к адресу сайта bitrix/. Например так http:/localhost:6449/bitrix/. Затем нужно авторизоваться, перейти в раздел администрирования Настройки продукта - Сайты - Список сайтов. Выбрать единственный сайт и открыть его на изменение.

В открывшийся форме Параметры сайта выбрать наш единственный шаблон.

Нажать Сохранить.
Но наша страничка не изменится. Во-первых в индексной страничке нет никаких данных, а во-вторых пока что в файлах Битрикс шаблона header.php и footer.php у нас пусто. Заполнением их мы и займемся в первую очередь.

Верстка шаблона Битрикс

И все таки ещё чуть чуть теории. Я выше уже рассказывал, что шаблон Битрикса делится на две части, теперь покажу на примере, как мы разделим свой шаблон.

Зеленым квадратом выделены данные которые попадут в шапку (header.php), синим, то что попадет в подвал (footer.php) и желтым выделен контент, т.е. то что будет выводится компонентом Битрикс, который мы разместим в файле index.php. При навигации по сайту переходя в разделы шапка и подвал будут оставаться всегда одинаковыми, а контент меняться на вывод содержимого файла index.php того раздела в который вы перешли.
Чтобы открыть файлы, которые мы будем верстать я их специально оставил в шаблоне. Это два файла ecommerce-grid-x.html и product-page-grid-x.html. Вы можете их просто открыть двойным кликом мыши в браузере. Использоваться в работе шаблона они не будут, но мы будем из них брать верстку и помещать в файлы шаблона Битрикс. Ну и сравнивать результат.

Начнем!

Открываем в редакторе notepad++ (или в любом вашем любимом) два файла header.php и ecommerce-grid-x.html. И начинаем переносить необходимый нам код. Первым делом перенесем начало верстки и раздел <head>.
Код:

 <!doctype html>

	 <html class="no-js" lang="en">

	   <head>

	     <meta charset="utf-8" />

	     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

	     <title>Foundation | Welcome</title>

	     <link rel="stylesheet" href="css/foundation.css">

	     <link rel="stylesheet" href="css/templates.css">

	   </head>

	   <body>

И заменяем определение CSS на вызовы API Битрикс.
Код:

 <!doctype html>

	 <html class="no-js" lang="en">

	 <head>

	     <meta name="viewport" content="width=device-width, initial-scale=1.0">

	     <title><?$APPLICATION->ShowTitle();?></title>

	     <?$APPLICATION->ShowHead();?>

	     <link rel="icon" href="<?=SITE_TEMPLATE_PATH?>/ico/favicon_bx.png">

	     <?

	     $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/foundation.min.css");

	     $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/foundation.css");

	     $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH . '/js/vendor/jquery.js');

	     $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH . '/js/vendor/foundation.min.js');

	     ?>

	 </head>      

	 <body>

Работа в шаблоне происходит с через класс CMain. Доступ к этому классу в шаблонах осуществляется через глобальную переменную $APPLICATION, что сокращает и упрощает вызываемый код.
https:/dev.1c-bitrix.ru/api_help/main/reference/cmain/index.php
Разберем по порядку:

<title><?$APPLICATION->ShowTitle();?></title> - здесь мы определяем заголовок сайта, который задан в админки Битрикс.
<?$APPLICATION->ShowHead();?> - выводим все необходимые объявления Битрикс в <head>. Это и стили Битрикс для административной панели, и подключения его скриптов и другие файлы о которых можно пока не задумываться.
<link rel="icon" href="<?=SITE_TEMPLATE_PATH?>/ico/favicon_bx.png"> - здесь мы подключаем фавикон. SITE_TEMPLATE_PATH это ещё одна глобальная переменная которая будет подменена на путь к папке текущего шаблона.
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH.'/css/foundation.css); - этой строкой мы подключаем стили.
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH . '/js/vendor/foundation.min.js'); - а так мы подключаем скрипты JavaScript.

Вот тут в FAQ Бирикс у меня расписаны все основные конструкции используемые в шаблонах.
Сохранимся. Проверить, что все работает можно посмотрев исходный код страницы. И сразу вам будем более понятно, как все работает.

Ну а теперь вставим код меню, который в последствии мы заменим на вызов компонента Битрикс.
Код:

 <div class="grid-container">

	     <!-- Start Top Bar -->

	 <div class="top-bar">

	   <div class="top-bar-left">

	     <ul class="dropdown menu" data-dropdown-menu>

	       <li class="menu-text">Site Title</li>

	       <li>

	         <a href="#">One</a>

	         <ul class="menu vertical">

	           <li><a href="#">One</a></li>

	           <li><a href="#">Two</a></li>

	           <li><a href="#">Three</a></li>

	         </ul>

	       </li>

	       <li><a href="#">Two</a></li>

	       <li><a href="#">Three</a></li>

	     </ul>

	   </div>

	   <div class="top-bar-right">

	     <ul class="menu">

	       <li><input type="search" placeholder="Search"></li>

	       <li><button type="button" class="button">Search</button></li>

	     </ul>

	   </div>

	 </div>

	     <!-- End Top Bar -->

И ещё выведем одну важную вещь - выведем панель администрирования Битрикс. Чтобы нам стали доступные все возможности управления сайтом из публичной части. Битрикс этот функционал называет Эрмитаж. Для этого сразу после тега <body> нужно вывести строчку показа Битрикс-панели.
Код:

<?$APPLICATION->ShowPanel();?>

Вот такая панель появляется вверху если пользователь авторизовался, как администратор. Очень удобно и в дальнейшем мы её будем постоянно пользоваться.
.
На этом пока работу с head.php закончим и перейдем к foter.php. В подвал мы скопируем конец файла нашего исходного примера ecommerce-grid-x.html.
Код:

     <div class="callout large secondary">

	       <div class="grid-x">

	         <div class="large-4 cells">

	           <h5>Vivamus Hendrerit Arcu Sed Erat Molestie</h5>

	           <p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit.</p>

	         </div>

	         <div class="large-3 large-offset-2 cells">

	           <ul class="menu vertical">

	             <li><a href="#">One</a></li>

	             <li><a href="#">Two</a></li>

	             <li><a href="#">Three</a></li>

	             <li><a href="#">Four</a></li>

	           </ul>

	         </div>

	       </div>

	     </div>

	 </div>

	     <script>

	       $(document).foundation();

	     </script>

	   </body>

	 </html>

Тут обращу внимание на один момент, чтобы заработали скрипты CSS-фреймворка Foundation в конце шаблона нужно прописать код JavaScript с инициализацией скриптов.
Код:

	     <script>

	       $(document).foundation();

	     </script>

Теперь можно обновить страницу и увидеть уже почти работающий сайт! Вот что вы должны увидеть на экране если все сделали правильно.

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

В начало...

Комментарии