14 ноября 2017
Вот, что у нас должно будет получится в итоге.
Начнем. Откроем сайт и перейдем в раздел Каталог, через главное меню, которое уже должно работать на вашем сайте. Убедимся, что мы находимся в разделе каталог - в адресной строке должен быть адрес заканчивающийся на /catalog/. Далее в панели администрирования нажимаем кнопку Изменить страницу и открываем страницу на изменение. В разделе компонентов Контент - Новости выбираем компонент Новости (комплексные компоненты выделены зеленым цветом).
Сразу настроем параметры компонента. Нас будут интересовать сейчас только основные параметры. Здесь для всех компонентов, которые работают с инфоблоками основными параметрами является Тип инфоблока и сам Инфоблок их нужно выбрать.
Так же цену нужно включить и на странице детального просмотра в параметрах компонента. Другие параметры нам не важны. А если вы будите выводить новости типовым компонентом, то нужно пройтись по всем параметрам и настроить все, что вам будет необходимо. Мы же выводим товары и полностью поменяем шаблон вывода. А сейчас если нажать сохранить будут выведены данные инфоблока изображения и названия. Далее начнем кастомизацию типового компонента.
Кастомизация компонента bitrix:news
Прежде всего нужно скопировать типовой шаблон компонента в наш шаблон сайта, чтобы можно было его изменять и не потерять изменения при очередном обновлении Битрикс. Включим режим редактирования и скопируем шаблон компонента.
Особенность комплексного компонента в том, что он в себе содержит простые компоненты. Это видно по тому, что внутри комплексного компонента содержится папка bitrix, в которой будут расположены шаблоны простых компонентов.
Обращу внимание на файл style.css. В нем можно располагать CSS стили верстки компонента. Особенность в том, что они подключаются только при вызове компонента. Т.е. это несколько сокращает объем погрузки стилей. Но мы им пользоваться не будем все наши стили лежат в template_styles.css. Вобщем без страха удаляем все лишнее и открываем в редакторе файл template.php. В котором сразу заменяем имеющийся код на следующий:
Код:
Смотрим на результат, уже должно быть похоже на каталог.
Код:
$this->setFrameMode(true); - это строчка нужна для композитного режима
<div class="grid-x grid-padding-x large-up-4"> - этой строкой начинается блок CSS-сетки от фреймворка Foundation. О нем тоже говорили предыдущих уроках. Класс grid-x - начало ряда. Классы grid-padding-x large-up-4 задают вывод блоков виде таблицы в 4 колонки. Об этом говорит цифра 4 классе. Вот в этом и прелесть использования CSS-фреймворка, достаточно указать нужный класс и уже готово оформление. Т.е. это нас полностью избавило от необходимости программировать свою верстку вывода карточек товаров колонками.
<?foreach($arResult["ITEMS"] as $item):?> - здесь начинается цикл по элементам массива $arResult.
Далее кусок кода, который выводит сам элемент с картинкой, надписью и ценой.
<div class="cell bord" id="<?=$this->GetEditAreaId($item['ID']);?>"> - здесь на блок вешается кнопка вызова редактора из публичной части.
<img class="thumbnail" src="<?=$item['PREVIEW_PICTURE']['SRC']?>"> - этой строкой выводим изображение
<h5><a href="<?=$item['DETAIL_PAGE_URL']?>"><?=$item['NAME']?></a></h5> - этой строчкой выводим наименование товара и ссылку на детальную страницу
<p class="price"><b><?=$item['PROPERTIES']['PRICE']['VALUE']?></b></p> - а здесь из свойств инфоблока выводится цена
<a href="#" class="button expanded">Купить</a> - кнопка купить
</div>
И давайте сразу вернемся к комплексному компоненту bitrix:news и посмотрем, что из себя представляет комплексный компонент. Откроем файл
\www\local\templates\startshop\components\bitrix\news\catalog\news.php и посмотрим, что в нем выполняется. Ниже я приведу часть кода из файла:
Код:
Архив магазина StartShop на момент урока можно скачать отсюда.
От автора:
На этот раз статья получилась не такой длинной, как предыдущие. Но даже к лучшему, в коротком формате можно выпускать статьи быстрее и чаще. И в следующей статье я продолжу работать с компонентом Новости и расскажу, как добавлять свои параметры в настройки компонента, и мы сделаем настраиваемый вывод количества колонок в зависимости от настроек.
И ещё одна новость я на своем сайте настроил многосайтовость и разместил разрабатываемый магазин StartShop на втором сайте. По ссылке магазин StartShop вы можете перейти в магазин и сравнить результат своей работы с моим.
И ещё одно замечания я сменил домен, теперь сайт находится по адресу ut11-bitrix.ru.
До новых уроков!
Урок 6. Вывод каталога товаров в Битрикс через компонент Новости (bitrix:news)
Приветствую! Продолжаем разрабатывать наш собственный интернет-магазин на Битрикс с нуля и изучать при этом Битрикс. В прошлом уроке мы познакомились с ключевой сущностью Битрикса Инфоблоками и импортировали каталог с учебными данными. Пришло время воспользоваться всем этим и вывести каталог на сайт. В этом уроке мы выведем каталог товаров на страницу /catalog/ и подробно познакомимся с работой компонентов Битрикс. В частности с комплексным компонентом bitrix:news.Вот, что у нас должно будет получится в итоге.
Вывод каталога товаров через компонент bitrix:news
В Уроке 4 - Вывод меню Битрикс мы уже познакомились с компонентами и я показал, как их выводить на страницу, копировать и изменять шаблон. Там все более подробно со скриншотами описано.Начнем. Откроем сайт и перейдем в раздел Каталог, через главное меню, которое уже должно работать на вашем сайте. Убедимся, что мы находимся в разделе каталог - в адресной строке должен быть адрес заканчивающийся на /catalog/. Далее в панели администрирования нажимаем кнопку Изменить страницу и открываем страницу на изменение. В разделе компонентов Контент - Новости выбираем компонент Новости (комплексные компоненты выделены зеленым цветом).
Сразу настроем параметры компонента. Нас будут интересовать сейчас только основные параметры. Здесь для всех компонентов, которые работают с инфоблоками основными параметрами является Тип инфоблока и сам Инфоблок их нужно выбрать.
Так же цену нужно включить и на странице детального просмотра в параметрах компонента. Другие параметры нам не важны. А если вы будите выводить новости типовым компонентом, то нужно пройтись по всем параметрам и настроить все, что вам будет необходимо. Мы же выводим товары и полностью поменяем шаблон вывода. А сейчас если нажать сохранить будут выведены данные инфоблока изображения и названия. Далее начнем кастомизацию типового компонента.
Кастомизация компонента bitrix:news
Прежде всего нужно скопировать типовой шаблон компонента в наш шаблон сайта, чтобы можно было его изменять и не потерять изменения при очередном обновлении Битрикс. Включим режим редактирования и скопируем шаблон компонента.
Особенность комплексного компонента в том, что он в себе содержит простые компоненты. Это видно по тому, что внутри комплексного компонента содержится папка bitrix, в которой будут расположены шаблоны простых компонентов.
news.list
Начнем мы со списка новостей. За вывод новости отвечает файл \www\local\templates\startshop\components\bitrix\news\catalog\bitrix\news.list\.default\template.php. Все остальное давайте удалим, чтобы нам не мешались.
Обращу внимание на файл style.css. В нем можно располагать CSS стили верстки компонента. Особенность в том, что они подключаются только при вызове компонента. Т.е. это несколько сокращает объем погрузки стилей. Но мы им пользоваться не будем все наши стили лежат в template_styles.css. Вобщем без страха удаляем все лишнее и открываем в редакторе файл 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);
?>
<div class="grid-x grid-padding-x large-up-4">
<?foreach($arResult["ITEMS"] as $item):?>
<?/Включает возможность изменять элемент из публички
$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('Подтверждаете удаление?')));
?>
<div class="cell bord" id="<?=$this->GetEditAreaId($item['ID']);?>">
<img class="thumbnail" src="<?=$item['PREVIEW_PICTURE']['SRC']?>">
<h5><a href="<?=$item['DETAIL_PAGE_URL']?>"><?=$item['NAME']?></a></h5>
<p class="price"><b><?=$item['PROPERTIES']['PRICE']['VALUE']?></b></p>
<a href="#" class="button expanded">Купить</a>
</div>
<?endforeach;?>
<?if($arParams["DISPLAY_BOTTOM_PAGER"]):?>
<br /><?=$arResult["NAV_STRING"]?>
<?endif;?>
</div>
/** @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);
?>
<div class="grid-x grid-padding-x large-up-4">
<?foreach($arResult["ITEMS"] as $item):?>
<?/Включает возможность изменять элемент из публички
$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('Подтверждаете удаление?')));
?>
<div class="cell bord" id="<?=$this->GetEditAreaId($item['ID']);?>">
<img class="thumbnail" src="<?=$item['PREVIEW_PICTURE']['SRC']?>">
<h5><a href="<?=$item['DETAIL_PAGE_URL']?>"><?=$item['NAME']?></a></h5>
<p class="price"><b><?=$item['PROPERTIES']['PRICE']['VALUE']?></b></p>
<a href="#" class="button expanded">Купить</a>
</div>
<?endforeach;?>
<?if($arParams["DISPLAY_BOTTOM_PAGER"]):?>
<br /><?=$arResult["NAV_STRING"]?>
<?endif;?>
</div>
Смотрим на результат, уже должно быть похоже на каталог.
Код:
<?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);
?>
Первая строка вам должна быть знакома из предыдущих уроков, здесь проверяется, то что страница вызвана из среды Битрикс, а не по прямой ссылки. А ниже перечислены переменные которые доступны в шаблоне./** @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);
?>
$this->setFrameMode(true); - это строчка нужна для композитного режима
<div class="grid-x grid-padding-x large-up-4"> - этой строкой начинается блок CSS-сетки от фреймворка Foundation. О нем тоже говорили предыдущих уроках. Класс grid-x - начало ряда. Классы grid-padding-x large-up-4 задают вывод блоков виде таблицы в 4 колонки. Об этом говорит цифра 4 классе. Вот в этом и прелесть использования CSS-фреймворка, достаточно указать нужный класс и уже готово оформление. Т.е. это нас полностью избавило от необходимости программировать свою верстку вывода карточек товаров колонками.
<?foreach($arResult["ITEMS"] as $item):?> - здесь начинается цикл по элементам массива $arResult.
<?/Включает возможность изменять элемент из публички
$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('Подтверждаете удаление?')));
?>
Это важные строчки кода. Они подключают скрипты битрикс и включают возможность редактировать элементы инфоблоков из публичной части. Их нужно запомнить или просто брать из стандартных шаблонов. Переменным элементом здесь является $item['ID'], в котором хранится ID выводимого элемента.$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('Подтверждаете удаление?')));
?>
Далее кусок кода, который выводит сам элемент с картинкой, надписью и ценой.
<div class="cell bord" id="<?=$this->GetEditAreaId($item['ID']);?>"> - здесь на блок вешается кнопка вызова редактора из публичной части.
<img class="thumbnail" src="<?=$item['PREVIEW_PICTURE']['SRC']?>"> - этой строкой выводим изображение
<h5><a href="<?=$item['DETAIL_PAGE_URL']?>"><?=$item['NAME']?></a></h5> - этой строчкой выводим наименование товара и ссылку на детальную страницу
<p class="price"><b><?=$item['PROPERTIES']['PRICE']['VALUE']?></b></p> - а здесь из свойств инфоблока выводится цена
<a href="#" class="button expanded">Купить</a> - кнопка купить
</div>
И давайте сразу вернемся к комплексному компоненту bitrix:news и посмотрем, что из себя представляет комплексный компонент. Откроем файл
\www\local\templates\startshop\components\bitrix\news\catalog\news.php и посмотрим, что в нем выполняется. Ниже я приведу часть кода из файла:
Код:
Выводим строку поиска через компонент bitrix:search
<?if($arParams["USE_SEARCH"]=="Y"):?>
<?=GetMessage("SEARCH_LABEL")?><?$APPLICATION->IncludeComponent(
"bitrix:search.form",
"flat",
Array(
"PAGE" => $arResult["FOLDER"].$arResult["URL_TEMPLATES"]["search"]
),
$component
);?>
<br />
<?endif?>
<?=GetMessage("SEARCH_LABEL")?><?$APPLICATION->IncludeComponent(
"bitrix:search.form",
"flat",
Array(
"PAGE" => $arResult["FOLDER"].$arResult["URL_TEMPLATES"]["search"]
),
$component
);?>
<br />
<?endif?>
Выводим фильтр через компонент catalog.filter
<?if($arParams["USE_FILTER"]=="Y"):?>
<?$APPLICATION->IncludeComponent(
"bitrix:catalog.filter",
"",
Array(
"IBLOCK_TYPE" => $arParams["IBLOCK_TYPE"],
"IBLOCK_ID" => $arParams["IBLOCK_ID"],
"FILTER_NAME" => $arParams["FILTER_NAME"],
"FIELD_CODE" => $arParams["FILTER_FIELD_CODE"],
"PROPERTY_CODE" => $arParams["FILTER_PROPERTY_CODE"],
"CACHE_TYPE" => $arParams["CACHE_TYPE"],
"CACHE_TIME" => $arParams["CACHE_TIME"],
"CACHE_GROUPS" => $arParams["CACHE_GROUPS"],
"PAGER_PARAMS_NAME" => $arParams["PAGER_PARAMS_NAME"],
),
$component
);
?>
<br />
<?endif?>
<?$APPLICATION->IncludeComponent(
"bitrix:catalog.filter",
"",
Array(
"IBLOCK_TYPE" => $arParams["IBLOCK_TYPE"],
"IBLOCK_ID" => $arParams["IBLOCK_ID"],
"FILTER_NAME" => $arParams["FILTER_NAME"],
"FIELD_CODE" => $arParams["FILTER_FIELD_CODE"],
"PROPERTY_CODE" => $arParams["FILTER_PROPERTY_CODE"],
"CACHE_TYPE" => $arParams["CACHE_TYPE"],
"CACHE_TIME" => $arParams["CACHE_TIME"],
"CACHE_GROUPS" => $arParams["CACHE_GROUPS"],
"PAGER_PARAMS_NAME" => $arParams["PAGER_PARAMS_NAME"],
),
$component
);
?>
<br />
<?endif?>
Выводим сам список элементов инфоблока через компонент news.list какраз шаблон, которого мы кастомизировали
<?$APPLICATION->IncludeComponent(
"bitrix:news.list",
"",
Array(
"IBLOCK_TYPE" => $arParams["IBLOCK_TYPE"],
"IBLOCK_ID" => $arParams["IBLOCK_ID"],
"NEWS_COUNT" => $arParams["NEWS_COUNT"],
"SORT_BY1" => $arParams["SORT_BY1"],
"SORT_ORDER1" => $arParams["SORT_ORDER1"],
Т.е. комплексный компонент всего лишь выводит простые компоненты на одну страницу. И позволяет параметры всех простых компонентов, которые входят в комплексный, настраивать в одном месте - в параметрах комплексного компонента. На самом деле ровно такую же логику работы можно реализовать вручную разместив простые компоненты на страницах и запрограммировав передачу данных между ними. Работать будет точно так же. Но комплексный компонент упрощает процесс настройки и не требуется дополнительной страницы, чтобы разместить на ней компонент детального просмотра news.detail. Такая страница становится виртуальной и генерируется в момент клика по ссылке в списке новостей."bitrix:news.list",
"",
Array(
"IBLOCK_TYPE" => $arParams["IBLOCK_TYPE"],
"IBLOCK_ID" => $arParams["IBLOCK_ID"],
"NEWS_COUNT" => $arParams["NEWS_COUNT"],
"SORT_BY1" => $arParams["SORT_BY1"],
"SORT_ORDER1" => $arParams["SORT_ORDER1"],
Архив магазина StartShop на момент урока можно скачать отсюда.
От автора:
На этот раз статья получилась не такой длинной, как предыдущие. Но даже к лучшему, в коротком формате можно выпускать статьи быстрее и чаще. И в следующей статье я продолжу работать с компонентом Новости и расскажу, как добавлять свои параметры в настройки компонента, и мы сделаем настраиваемый вывод количества колонок в зависимости от настроек.
И ещё одна новость я на своем сайте настроил многосайтовость и разместил разрабатываемый магазин StartShop на втором сайте. По ссылке магазин StartShop вы можете перейти в магазин и сравнить результат своей работы с моим.
И ещё одно замечания я сменил домен, теперь сайт находится по адресу ut11-bitrix.ru.
До новых уроков!
Комментарии
Спасибо за доступные уроки, как раз такого формата искал. В своем примере создания интернет-магазина вы используете компонент bitrix.news для вывода каталога. Но в редакции есть отдельный компонент - catalog, для вывода каталога товаров со своим дополнительным функционалом. По какой причине вы его не использовали? Из-за используемой редакции битрикса? Или применение этого компонента в данном случае более целесообразно? PS. в приведенном первом листинге кода ошибка: <?/Включает возможность изменять элемент из публички не хватает еще одного слеша. PPS. М.б. не стоит кардинально изменять код в шаблоне который вы предлагаете для вставки. Тк иногда сложно понять, а почему этот "ненужный" код был вами вырезан. К примеру заметил, что цена выводится без символа валюты. Или это уже ограничения используемого компонента?
Рад, что уроки полезны. Компонент bitrix.news использую т.к. он проще. Код компонента catalog огромен и использует данные модуля интернет магазина. Он конечно работать будет т.к. там включены проверки стоит модуль магазина или нет и они отсекают часть кода. Но в данном примере проще сделать на новостях. А вобще у меня идея сделать отдельный компонент, который будет выводить только данные инфоблока и больше ничего. По вопросу "кардинально изменять код в шаблоне который вы предлагаете для вставки". Я вас понял, что речь идет про шаблон компонентов новости. В шаблоне типового компонента много лишнего, т.к. компонент универсален. И когда вы делаете свой шаблон то большую часть кода вы не будите использовать. Зачем её оставлять. Это будет лишний код который будет и вам мешать и другим. Это не только мой подход, шаблон, как правило пишут с нуля только нужное. Валюты нет в данном решении т.к. это не интернет-магазин. Просто можно добавить "р." в верстке. Это как бы детали уже. Ошибки исправил, спасибо.
спасибо
Здрасти. У вас почему-то некоторые ссылки в уроках не работают. Например, ссылка на отдельный домен учебного магазина
Да неправильно задал ссылку. Спасибо, что сообщили. Исправил.
Вопрос не по теме, но может есть решение у вас. Имеется УТ 11.3 с модулем БУС, редакция малый бизнес. Удалось произвести настройку обмена товарами. А вот настройку обмена Заказами - частично. Проблема следующая: на сайте создаются заказы (оплата по заказам производится только по безналичному расчету), далее выгружаются в 1С (все ок, заказы появляются), далее формируем оплату в 1С и выгружаем на сайт. Так вот по какой-то причине данные по оплате не передаются на сайт. Пробовал производить оплату как по наличке, так по безналичке и по эквайрингу - никакая оплата не загрузилась на сайт. Может сталкивались в чем может быть проблема?
В этом обмене документов много проблем. Чтобы сейчас все корректно обменивалось, нужно с сайта оплаты загружать в 1С, например не проведенными. Далее проводить в 1С оплата после обмена будет подтвержденной и на сайте. Может возразите, что так не удобно - согласен, но так работает, по другому судя по вашему вопросу до сих пор не работает.
Возразить бы хотелось, но не Вам)))) а разработчикам, если такой функционал не работает по какой-то причине. Конечно не удобно передавать оплату с сайта и его корректировать, т.к. если это платежка по банку(а так у нас и должно быть), то грошь цена загрузке платежек из клиент-банка в 1С...
Проблему решил, данные выгружаются на сайт корректно. Ответ от 1С-Битрикс: Так как обмен выполняется с 1С, вам необходимо в настройках модуля "Торговый каталог" отключить складской учет и резервирование. Данный учет выполняет 1С и использование указанных функций на сайте будет приводить к ошибка с остатками на сайте и ошибки при обмене заказами.