14 мая 2018
Вот на основании этой HTML верстки мы и создадим свой шаблон для Bitrix.
В этой статье я не буду очень подробно описывать процесс создания шаблона (иначе получится очень большой объем текста), а верстку более простого шаблона я описывал в отдельном уроке Урок 3. Создание шаблона на 1С Битрикс.
Особенность данного шаблона он сделан на CSS Bootstrap, а мы до этого использовали CSS Foundation (Урок 1).
Разделем нашу работу на несколько этапов:
Создание структуры шаблона Битрикс
Первое, что мы сделаем, создадим папку electro в папке наших шаблонов (local/templates/electro) и перенесем из исходников шаблона electro папки в наш шаблон. Дополнительно создадим необходимые для работы шаблона Bitrix файлы:
И первый кусок кода мы внесем в файл description.php задав название и описание нашего шаблона.
Код:
Далее возьмемся за шапку шаблона файл header.php.
Верстка header.php
Как вы помните шаблон Битрикс разделен на два файла header.php и footer.php. А между ними вставляется контент. Подход староват, но и сам Битрикс не молодой.
В шапку вносится код отвечающий за подключение CSS стилей и JavaScript кода.
Но сначала нам нужно проверить инициирован ли движок Битрикса или к шаблону обратились по прямой ссылке. Этот код нужен для защиты.
Код:
А затем открываем тег HEAD и подключаем все стили и скрипты. А так же инициируется запуск панели управления Битрикс. Стили и скрипты я взял из файла index.html шаблона electro.
Код:
Обратите внимание скрипты я подключил уже по нового через модуль Bitrix\Main\Page\Asset.
А теперь уже вставляем основную верстку. Для этого нам придется разделить файл index.html на 2 части. До комментария <!-- FOOTER --> перенести в header.php, а остальное в footer.php. Скрипты из футера я подключил в шапке дублировать их в футере не нужно.
Ну а теперь самый сложный этап вывести вместо блоков HTML шаблона наш контент.
Для начала разберемся с путями к картинкам. Нужно в строках вида: <img src="./img/logo.png" alt=""> вставить путь к шаблону через специальную константу SITE_TEMPLATE_PATH.
Код:
После этого все картинки выведутся в шаблон.
Теперь сайт должен открываться как статическая страница.
Вот что получается.
Код:
После этого надо скопировать шаблон компонента меню и уже править его.
Как получить этот код подробно описано в четвертом уроке Вывод меню Битрикс.
У меня путь до шаблона меню сформировался следующий: local/templates/electro/components/bitrix/menu/top/template.php
Из папки top я удалил все файлы и папки кроме файла самого шаблона template.php. В него достаточно было перенести только классы тега <UL>.
Код:
Единственное компонент пришлось немного доработать и добавить вывод цены из свойства инфоблока ( "PROPERTY_ACCOUNT", "PROPERTY_PRICE").
Код:
В файле index.php в корне сайта уже есть код отвечающий за вызов компонента слайдера.
Код:
Нужно скопировать новый шаблон в папку нашего шаблона electro и внести верстку. Привожу целиком код файла local/templates/electro/components/startshop/slider/best/template.php
Код:
Верстка footer.php
В футер мы вставим достаточно большой кусок когда от комментария <!-- NEWSLETTER -->и до конца индексного фала шаблона.
Код:
Изменений мы в нем делать пока не будет и весь я его приводить не буду, ниже будут ссылки к архивам.
Тут нужно обратить внимание на один момент. Все JavaScript файлы в шаблоне подключались в футере, а мы их, как вы помните, подключили в HEADER. И из-за этого наш слайдер не заработает. Но поскольку мы не просто прописали ссылки на скрипты, а подключили их средствами Bitrix, у нас есть возможность через настройки главного модуля перенести скрипты в конец страницы. Выполнить это можно установив соответствующий флажок в разделе Оптимизация CSS.
После такой манипуляции скрипты заработают и заработает наш слайдер.
Далее приступаем к верстке каталога.
Верстка каталога
Для каталога мы используем комплексный компонент Новости (bitrix:news). Он уже размещен в папке catalog нашего сайта. Нам, как и всегда нужно скопировать шаблон компонента в наш шаблон. И на эту тему у меня так же есть подробный Урок 6. Вывод каталога товаров в Битрикс.
Работать мы будем с файлом local/templates/electro/components/bitrix/news/catalog-electro/bitrix/news.list/.default/template.php.
Код мы подготовим следующий (привожу весь).
Код:
Вместе с комплексным компонентом всегда копируются все простые компоненты (список, форма поиска, rss и др.). Их все смело можно удалить, чтобы не захламляли шаблон. Ведь и так не просто разбираться в дереве шаблонов компонентов Битрикса. А если потребуется их всегда можно создать индивидуально и доработать.
Каталог получился у нас следующий.
Поясню немного отдельные моменты.
Код:
Этим кодом мы через функцию CFile::ResizeImageGet масштабируем картинку под размер 200 на 200 пикселей.
Код:
Здесь мы подключаем экшены к элементам каталога, чтобы была возможность изменять, добавлять и удалять элементы непосредственно из публичной части.
Ещё раз напомню все специфичные моменты для Битрикса описаны в уроке, на который я дал ссылку выше.
А далее уже приступим к детальной страницы или карточки товара, как принято называть.
Верстка детальной страницы товара
С детальной страницей поступаем точно так же, как и с каталогом. Копируем шаблон компонента bitrix:news.detail в наш шаблон electro. И совмещаем верстку с Битрикс.
В процессе верстки, т.к. у нас каталог достаточно простой, не нужные элементы я убираю. Да и не ставлю целей выполнить верстку полностью. Цель показать вам, как происходит процесс "натягивание" HTML шаблона на компоненты Битрикс.
Код детальной страницы располагается по пути local/templates/electro/components/bitrix/news/catalog-electro/bitrix/news.detail/.default/template.php.
А сам код я представлю ниже полностью:
Код:
Подробнее создание детальной страницы я описывал в одном из предыдущих уроков Урок 8. Создание детальной страницы товара в Битрикс.
Результат на скрине.
Вот и все на этом я заканчиваю создание шаблона Битрикс. Ниже архив с исходными данными и готовый шаблон. А так же прикладываю полностью папку local чтобы можно быстро развернуть и перенести компоненты.
Исходные HTML фалы: electro.zip
Созданный шаблон для Битрикс: template-electro.zip
Полностью папка local (все сразу): local-electro.zip
Результат можно посмотреть здесь Магазин StartShop.
От автора:
В этой статье я рассмотрел, как создаются шаблоны Битрикс. Тема эта, наверное, самая востребованная. В следующих статьях я хочу тоже самое проделать для wordpress, чтобы понять, как происходит создание шаблона там и сравнить с Битрикс. Так что подписывайтесь, чтобы не пропустить думаю будет интересно, особенно тем, кто кроме Битрикса с другими движками не работал. До новых встреч.
Урок 11. Создание (верстка) шаблона Bitrix
Приветствую мои читатели. Реши немного облагородить свой тестовый магазин и сверстать шаблон для Bitrix из готового HTML шаблона. Тема называется Electro и находится в свободном доступе в интернете. И вместе с этим я ещё раз покажу, как верстать или как говорят "натягивать" верстку на CMS Bitrix. А следующими статьями я так же сверстаю шаблон (правда немного другой шаблон) для wordpress. Но об этом чуть позже. А сейчас вот такой приятный шаблон мы сверстаем для нашего магазина StartShop Битрикс.Скачать HTML исходники темы можно по ссылке.
Вот на основании этой HTML верстки мы и создадим свой шаблон для Bitrix.
В этой статье я не буду очень подробно описывать процесс создания шаблона (иначе получится очень большой объем текста), а верстку более простого шаблона я описывал в отдельном уроке Урок 3. Создание шаблона на 1С Битрикс.
Особенность данного шаблона он сделан на CSS Bootstrap, а мы до этого использовали CSS Foundation (Урок 1).
Разделем нашу работу на несколько этапов:
- Создание структуры шаблона Битрикс.
- Верстка header.php.
- Верстка footer.php.
- Верстка каталога.
- Верстка детальной страницы товара.
Создание структуры шаблона Битрикс
Первое, что мы сделаем, создадим папку electro в папке наших шаблонов (local/templates/electro) и перенесем из исходников шаблона electro папки в наш шаблон. Дополнительно создадим необходимые для работы шаблона Bitrix файлы:
Минимальный и достаточный набор файлов для работы шаблона Битрикс следующий:
В итоге у нас получится следующая структура:- description.php - файл описания шаблона. Это описание будет отображаться в административной части битрикс (в админки).
- styles.css - это стили которые будут использоваться при редактировании контента (нужен контент менеджеру, у нас будет пустым)
- template_styles.css - основной файл css-стилей шаблона (в нем будем создать собственные стили)
- header.php - файл содержит шапку шаблона
- footer.php - файл содержит подвал шаблона (в этих файлах мы будем редактировать шаблон)
В папке 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 Bitrix\Main\Page\Asset;
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();?>
Обратите внимание скрипты я подключил уже по нового через модуль Bitrix\Main\Page\Asset.
А теперь уже вставляем основную верстку. Для этого нам придется разделить файл 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="">
После этого все картинки выведутся в шаблон.
Теперь сайт должен открываться как статическая страница.
Вот что получается.
Теперь реализуем вывод следующих блоков:
Вывод меню Битрикс
Для вывода меню найдите в файле 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.
После такой манипуляции скрипты заработают и заработает наш слайдер.
Далее приступаем к верстке каталога.
Верстка каталога
Для каталога мы используем комплексный компонент Новости (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, чтобы понять, как происходит создание шаблона там и сравнить с Битрикс. Так что подписывайтесь, чтобы не пропустить думаю будет интересно, особенно тем, кто кроме Битрикса с другими движками не работал. До новых встреч.
Комментарии
Привет. Спасибо за информацию. Вопрос: Чем обоснован выбор размещения каталога путем компонента новостей, а не собственно компонентом каталога?
Привет. Каталог все же для модуля интернет-магазин нужен. В данном случае его функционал будет избыточным. Да и разбирать и показывать компонент новости легче, меньше кода. Посмотрите последнюю статью я там привожу примеры как типовые компоненты создают лишние запросы.
Это да, посмотрел. Отдельное спасибо) Но в случае интернет-магазина приходится им пользоваться. Как быть? Все переписывать под себя??
Это сложный вопрос. С одной стороны типовые компоненты дают скорость разработки и это то что отличает CMS от фреймворка. С другой стороны, как все универсальное они дают лишнюю нагрузку. Я думаю тут как всегда золотую середину искать, какие-то проблемные места переписывать. Я вот себе сделал компонент уже можно использовать там, где у меня в сайд-барах выводится информация. А вывод статей, который через комплексный компонент новости. Его не вижу смысла переделывать, много работы, а выигрыш возможно будет и не большой.
Познавательный урок, спасибо.