14 мая 2018
Версия для печати

Урок 11. Создание (верстка) шаблона Bitrix

Приветствую мои читатели. Реши немного облагородить свой тестовый магазин и сверстать шаблон для 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 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="">

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

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

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

Теперь реализуем вывод следующих блоков:
  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, чтобы понять, как происходит создание шаблона там и сравнить с Битрикс. Так что подписывайтесь, чтобы не пропустить думаю будет интересно, особенно тем, кто кроме Битрикса с другими движками не работал. До новых встреч.

В начало...

Комментарии

Подписаться на комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
19
14.06.2018 | Антон

Привет. Спасибо за информацию. Вопрос: Чем обоснован выбор размещения каталога путем компонента новостей, а не собственно компонентом каталога?

Комментировать
Подписаться на комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
19
Закрыть
14.06.2018 | Администратор

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

Комментировать
Подписаться на комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
19
Закрыть
14.06.2018 | Антон

Это да, посмотрел. Отдельное спасибо) Но в случае интернет-магазина приходится им пользоваться. Как быть? Все переписывать под себя??

Комментировать
Подписаться на комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
19
Закрыть
14.06.2018 | Администратор

Это сложный вопрос. С одной стороны типовые компоненты дают скорость разработки и это то что отличает CMS от фреймворка. С другой стороны, как все универсальное они дают лишнюю нагрузку. Я думаю тут как всегда золотую середину искать, какие-то проблемные места переписывать. Я вот себе сделал компонент уже можно использовать там, где у меня в сайд-барах выводится информация. А вывод статей, который через комплексный компонент новости. Его не вижу смысла переделывать, много работы, а выигрыш возможно будет и не большой.

Комментировать
Подписаться на комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
19
Закрыть
14.05.2018 | Александр

Познавательный урок, спасибо.

Комментировать
Подписаться на комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
19
Закрыть
В начало...

Читайте ещё статьи по данному разделу:

18 июня 2018 Урок 15. Поддержка классов в компонентах Битрикс

10 июня 2018 Урок 14. Как работает Кеш Битрикс на примере собственного компонента

30 мая 2018 Урок 13. Bitrix AJAX (запрос средствами Битрикс)

22 мая 2018 Урок 12. AJAX запрос средствами JQuery в Bitrix

14 мая 2018 Урок 11. Создание (верстка) шаблона Bitrix

28 апреля 2018 Урок 10. AJAX корзина Битрикс своими руками

10 декабря 2017 Урок 9. Создание собственного компонента слайдера для интернет-магазина на Битрикс на CMS-Foundation

29 ноября 2017 Урок 8. Создание детальной страницы товара в Битрикс

17 ноября 2017 Урок 7. Параметры компонента битрикс и result_modifier.php

14 ноября 2017 Урок 6. Вывод каталога товаров в Битрикс через компонент Новости (bitrix:news)

2 ноября 2017 Урок 5. Инфоблоки битрикс (структура и создание)

26 октября 2017 Урок 4. Вывод меню битрикс

24 октября 2017 Урок 2. Установка Битрикс

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

23 октября 2017 Урок 1. Знакомство с CSS-фреймворком Foundation для верстки Битрикс магазина

13 октября 2017 Уроки создания интернет магазина на Битрикс

И на посошок видео уроки колег с youtube


Возврат к списку