14 Ноября 2017
Вот, что у нас должно будет получится в итоге.
Без меню разделов пока, его мы выведем чуть позже.
Начнем. Откроем сайт и перейдем в раздел Каталог, через главное меню, которое уже должно работать на вашем сайте. Убедимся, что мы находимся в разделе каталог - в адресной строке должен быть адрес заканчивающийся на /catalog/. Далее в панели администрирования нажимаем кнопку Изменить страницу и открываем страницу на изменение. В разделе компонентов Контент - Новости выбираем компонент Новости (комплексные компоненты выделены зеленым цветом).
Что такое простые и комплексные компоненты я покажу чуть позже не примере кода, сразу станет понятно отличия.
Сразу настроем параметры компонента. Нас будут интересовать сейчас только основные параметры. Здесь для всех компонентов, которые работают с инфоблоками основными параметрами является Тип инфоблока и сам Инфоблок их нужно выбрать.
И еще необходимо указать свойства, которые нужно выводить в карточках товара. Мы будем выводить пока только цену.
Так же цену нужно включить и на странице детального просмотра в параметрах компонента. Другие параметры нам не важны. А если вы будите выводить новости типовым компонентом, то нужно пройтись по всем параметрам и настроить все, что вам будет необходимо. Мы же выводим товары и полностью поменяем шаблон вывода. А сейчас если нажать сохранить будут выведены данные инфоблока изображения и названия. Далее начнем кастомизацию типового компонента.
Кастомизация компонента bitrix:news
Прежде всего нужно скопировать типовой шаблон компонента в наш шаблон сайта, чтобы можно было его изменять и не потерять изменения при очередном обновлении Битрикс. Включим режим редактирования и скопируем шаблон компонента.
Новый шаблон назовем catalog и скопируем в наш шаблон startshop.
Теперь нужно найти файлы нового шаблона. Перейдем по пути \www\local\templates\startshop\components\bitrix\news\catalog\ и увидим файлы комплексного компонента.
Особенность комплексного компонента в том, что он в себе содержит простые компоненты. Это видно по тому, что внутри комплексного компонента содержится папка bitrix, в которой будут расположены шаблоны простых компонентов.
И вот именно простые компоненты уже выводят информацию на страницу. Из этого списка прежде всего нам будут интересовать папки (компоненты) news.list и news.detail для страницы списка и детальной страницы товара соответственно.
Обращу внимание на файл style.css. В нем можно располагать CSS стили верстки компонента. Особенность в том, что они подключаются только при вызове компонента. Т.е. это несколько сокращает объем погрузки стилей. Но мы им пользоваться не будем все наши стили лежат в template_styles.css. Вобщем без страха удаляем все лишнее и открываем в редакторе файл template.php. В котором сразу заменяем имеющийся код на следующий:
Код:
Смотрим на результат, уже должно быть похоже на каталог.
Рассмотрим код компонента.
Код:
$this->setFrameMode(true); - это строчка нужна для композитного режима
Версия для печати
Урок 6. Вывод каталога товаров в Битрикс
Приветствую! Продолжаем разрабатывать наш собственный интернет-магазин на Битрикс с нуля и изучать при этом Битрикс. В прошлом уроке мы познакомились с ключевой сущностью Битрикса Инфоблоками и импортировали каталог с учебными данными. Пришло время воспользоваться всем этим и вывести каталог на сайт. В этом уроке мы выведем каталог товаров на страницу /catalog/ и подробно познакомимся с работой компонентов Битрикс. В частности с комплексным компонентом bitrix:news.Вот, что у нас должно будет получится в итоге.
Без меню разделов пока, его мы выведем чуть позже.
Вывод каталога товаров через компонент bitrix:news
В Уроке 4 - Вывод меню Битрикс мы уже познакомились с компонентами и я показал, как их выводить на страницу, копировать и изменять шаблон. Там все более подробно со скриншотами описано.Начнем. Откроем сайт и перейдем в раздел Каталог, через главное меню, которое уже должно работать на вашем сайте. Убедимся, что мы находимся в разделе каталог - в адресной строке должен быть адрес заканчивающийся на /catalog/. Далее в панели администрирования нажимаем кнопку Изменить страницу и открываем страницу на изменение. В разделе компонентов Контент - Новости выбираем компонент Новости (комплексные компоненты выделены зеленым цветом).
Что такое простые и комплексные компоненты я покажу чуть позже не примере кода, сразу станет понятно отличия.
Сразу настроем параметры компонента. Нас будут интересовать сейчас только основные параметры. Здесь для всех компонентов, которые работают с инфоблоками основными параметрами является Тип инфоблока и сам Инфоблок их нужно выбрать.
И еще необходимо указать свойства, которые нужно выводить в карточках товара. Мы будем выводить пока только цену.
Так же цену нужно включить и на странице детального просмотра в параметрах компонента. Другие параметры нам не важны. А если вы будите выводить новости типовым компонентом, то нужно пройтись по всем параметрам и настроить все, что вам будет необходимо. Мы же выводим товары и полностью поменяем шаблон вывода. А сейчас если нажать сохранить будут выведены данные инфоблока изображения и названия. Далее начнем кастомизацию типового компонента.
Кастомизация компонента bitrix:news
Прежде всего нужно скопировать типовой шаблон компонента в наш шаблон сайта, чтобы можно было его изменять и не потерять изменения при очередном обновлении Битрикс. Включим режим редактирования и скопируем шаблон компонента.Новый шаблон назовем catalog и скопируем в наш шаблон startshop.
Теперь нужно найти файлы нового шаблона. Перейдем по пути \www\local\templates\startshop\components\bitrix\news\catalog\ и увидим файлы комплексного компонента.
Особенность комплексного компонента в том, что он в себе содержит простые компоненты. Это видно по тому, что внутри комплексного компонента содержится папка bitrix, в которой будут расположены шаблоны простых компонентов.
И вот именно простые компоненты уже выводят информацию на страницу. Из этого списка прежде всего нам будут интересовать папки (компоненты) news.list и news.detail для страницы списка и детальной страницы товара соответственно.
news.list
Начнем мы со списка новостей. За вывод новости отвечает файл \www\local\templates\startshop\components\bitrix\news\catalog\bitrix\news.list\.default\template.php. Все остальное давайте удалим, чтобы нам не мешались.Обращу внимание на файл style.css. В нем можно располагать CSS стили верстки компонента. Особенность в том, что они подключаются только при вызове компонента. Т.е. это несколько сокращает объем погрузки стилей. Но мы им пользоваться не будем все наши стили лежат в template_styles.css. Вобщем без страха удаляем все лишнее и открываем в редакторе файл template.php. В котором сразу заменяем имеющийся код на следующий:
Код:
/** @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->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('Подтверждаете удаление?')));
?>
=$arResult["NAV_STRING"]?>
/** @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->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('Подтверждаете удаление?')));
?>
=$arResult["NAV_STRING"]?>
Смотрим на результат, уже должно быть похоже на каталог.
Рассмотрим код компонента.
Код:
/** @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 $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); - это строчка нужна для композитного режима
- этой строкой начинается блок CSS-сетки от фреймворка Foundation. О нем тоже говорили предыдущих уроках. Класс grid-x - начало ряда. Классы grid-padding-x large-up-4 задают вывод блоков виде таблицы в 4 колонки. Об этом говорит цифра 4 классе. Вот в этом и прелесть использования CSS-фреймворка, достаточно указать нужный класс и уже готово оформление. Т.е. это нас полностью избавило от необходимости программировать свою верстку вывода карточек товаров колонками.
- здесь начинается цикл по элементам массива $arResult.
Далее кусок кода, который выводит сам элемент с картинкой, надписью и ценой.
И давайте сразу вернемся к комплексному компоненту bitrix:news и посмотрем, что из себя представляет комплексный компонент. Откроем файл
\www\local\templates\startshop\components\bitrix\news\catalog\news.php и посмотрим, что в нем выполняется. Ниже я приведу часть кода из файла:
Код:
=GetMessage("SEARCH_LABEL")?>$APPLICATION->IncludeComponent(
"bitrix:search.form",
"flat",
Array(
"PAGE" => $arResult["FOLDER"].$arResult["URL_TEMPLATES"]["search"]
),
$component
);?>
$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
);
?>
Архив магазина StartShop на момент урока можно скачать отсюда.
От автора:
На этот раз статья получилась не такой длинной, как предыдущие. Но даже к лучшему, в коротком формате можно выпускать статьи быстрее и чаще. И в следующей статье я продолжу работать с компонентом Новости и расскажу, как добавлять свои параметры в настройки компонента, и мы сделаем настраиваемый вывод количества колонок в зависимости от настроек.
И ещё одна новость я на своем сайте настроил многосайтовость и разместил разрабатываемый магазин StartShop на втором сайте. По ссылке магазин StartShop вы можете перейти в магазин и сравнить результат своей работы с моим.
И ещё одно замечания я сменил домен, теперь сайт находится по адресу ut11-bitrix.ru.
До новых уроков!
- здесь начинается цикл по элементам массива $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('Подтверждаете удаление?')));
?>
Далее кусок кода, который выводит сам элемент с картинкой, надписью и ценой.
- здесь на блок вешается кнопка вызова редактора из публичной части.
- этой строкой выводим изображение
Купить - кнопка купить
- этой строкой выводим изображение
=$item['NAME']?>
- этой строчкой выводим наименование товара и ссылку на детальную страницу=$item['PROPERTIES']['PRICE']['VALUE']?>
- а здесь из свойств инфоблока выводится ценаКупить - кнопка купить
И давайте сразу вернемся к комплексному компоненту bitrix:news и посмотрем, что из себя представляет комплексный компонент. Откроем файл
\www\local\templates\startshop\components\bitrix\news\catalog\news.php и посмотрим, что в нем выполняется. Ниже я приведу часть кода из файла:
Код:
Выводим строку поиска через компонент bitrix:search
=GetMessage("SEARCH_LABEL")?>$APPLICATION->IncludeComponent(
"bitrix:search.form",
"flat",
Array(
"PAGE" => $arResult["FOLDER"].$arResult["URL_TEMPLATES"]["search"]
),
$component
);?>
Выводим фильтр через компонент catalog.filter
$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
);
?>
Выводим сам список элементов инфоблока через компонент 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.
До новых уроков!
Комментарии
Вопрос не по теме, но может есть решение у вас. Имеется УТ 11.3 с модулем БУС, редакция малый бизнес. Удалось произвести настройку обмена товарами. А вот настройку обмена Заказами - частично. Проблема следующая: на сайте создаются заказы (оплата по заказам производится только по безналичному расчету), далее выгружаются в 1С (все ок, заказы появляются), далее формируем оплату в 1С и выгружаем на сайт. Так вот по какой-то причине данные по оплате не передаются на сайт. Пробовал производить оплату как по наличке, так по безналичке и по эквайрингу - никакая оплата не загрузилась на сайт. Может сталкивались в чем может быть проблема?
В этом обмене документов много проблем. Чтобы сейчас все корректно обменивалось, нужно с сайта оплаты загружать в 1С, например не проведенными. Далее проводить в 1С оплата после обмена будет подтвержденной и на сайте. Может возразите, что так не удобно - согласен, но так работает, по другому судя по вашему вопросу до сих пор не работает.
Возразить бы хотелось, но не Вам)))) а разработчикам, если такой функционал не работает по какой-то причине. Конечно не удобно передавать оплату с сайта и его корректировать, т.к. если это платежка по банку(а так у нас и должно быть), то грошь цена загрузке платежек из клиент-банка в 1С...
Проблему решил, данные выгружаются на сайт корректно. Ответ от 1С-Битрикс: Так как обмен выполняется с 1С, вам необходимо в настройках модуля "Торговый каталог" отключить складской учет и резервирование. Данный учет выполняет 1С и использование указанных функций на сайте будет приводить к ошибка с остатками на сайте и ошибки при обмене заказами.