Меню

1С УПРАВЛЕНИЕ ТОРГОВЛЕЙ И ИНТЕРНЕТ-МАГАЗИН БИТРИКС

14 Ноября 2017

Урок 6. Вывод каталога товаров в Битрикс

Приветствую! Продолжаем разрабатывать наш собственный интернет-магазин на Битрикс с нуля и изучать при этом Битрикс. В прошлом уроке мы познакомились с ключевой сущностью Битрикса Инфоблоками и импортировали каталог с учебными данными. Пришло время воспользоваться всем этим и вывести каталог на сайт. В этом уроке мы выведем каталог товаров на страницу /catalog/ и подробно познакомимся с работой компонентов Битрикс. В частности с комплексным компонентом bitrix:news.
Вот, что у нас должно будет получится в итоге.

StartShop Catalog

Без меню разделов пока, его мы выведем чуть позже.

Вывод каталога товаров через компонент bitrix:news

В Уроке 4 - Вывод меню Битрикс мы уже познакомились с компонентами и я показал, как их выводить на страницу, копировать и изменять шаблон. Там все более подробно со скриншотами описано.
Начнем. Откроем сайт и перейдем в раздел Каталог, через главное меню, которое уже должно работать на вашем сайте. Убедимся, что мы находимся в разделе каталог - в адресной строке должен быть адрес заканчивающийся на /catalog/. Далее в панели администрирования нажимаем кнопку Изменить страницу и открываем страницу на изменение. В разделе компонентов Контент - Новости выбираем компонент Новости (комплексные компоненты выделены зеленым цветом).

Вызов компонента bitrix-news

Что такое простые и комплексные компоненты я покажу чуть позже не примере кода, сразу станет понятно отличия.
Сразу настроем параметры компонента. Нас будут интересовать сейчас только основные параметры. Здесь для всех компонентов, которые работают с инфоблоками основными параметрами является Тип инфоблока и сам Инфоблок их нужно выбрать.

Параметры компонента News

И еще необходимо указать свойства, которые нужно выводить в карточках товара. Мы будем выводить пока только цену.

Параметры компонента News свойства


Так же цену нужно включить и на странице детального просмотра в параметрах компонента. Другие параметры нам не важны. А если вы будите выводить новости типовым компонентом, то нужно пройтись по всем параметрам и настроить все, что вам будет необходимо. Мы же выводим товары и полностью поменяем шаблон вывода. А сейчас если нажать сохранить будут выведены данные инфоблока изображения и названия. Далее начнем кастомизацию типового компонента.

Кастомизация компонента bitrix:news

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

Копирование компонента

Новый шаблон назовем catalog и скопируем в наш шаблон startshop.

Куда крпируем шаблон

Теперь нужно найти файлы нового шаблона. Перейдем по пути \www\local\templates\startshop\components\bitrix\news\catalog\ и увидим файлы комплексного компонента.

Путь до компонента news


Особенность комплексного компонента в том, что он в себе содержит простые компоненты. Это видно по тому, что внутри комплексного компонента содержится папка 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. В котором сразу заменяем имеющийся код на следующий:
Код:
<?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> 


Смотрим на результат, уже должно быть похоже на каталог.

Каталог вар 1

Рассмотрим код компонента.
Код:
<?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);
?>
Первая строка вам должна быть знакома из предыдущих уроков, здесь проверяется, то что страница вызвана из среды Битрикс, а не по прямой ссылки. А ниже перечислены переменные которые доступны в шаблоне.
$this->setFrameMode(true); - это строчка нужна для композитного режима
<div class="grid-x grid-padding-x large-up-4"> - этой строкой начинается блок CSS-сетки от фреймворка Fundation. О нем тоже говорили предыдущих уроках. Класс 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 выводимого элемента.
Далее кусок кода, который выводит сам элемент с картинкой, надписью и ценой.
     <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?>
Выводим фильтр через компонент 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?>
Выводим сам список элементов инфоблока через компонент 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. Такая страница становится виртуальной и генерируется в момент клика по ссылке в списке новостей.
Архив магазина StartShop на момент урока можно скачать отсюда.
От автора:
На этот раз статья получилась не такой длинной, как предыдущие. Но даже к лучшему, в коротком формате можно выпускать статьи быстрее и чаще. И в следующей статье я продолжу работать с компонентом Новости и расскажу, как добавлять свои параметры в настройки компонента, и мы сделаем настраиваемый вывод количества колонок в зависимости от настроек.
И ещё одна новость я на своем сайте настроил многосайтовость и разместил разрабатываемый магазин StartShop на втором сайте. По ссылке магазин StartShop вы можете перейти в магазин и сравнить результат своей работы с моим.
И ещё одно замечания я сменил домен, теперь сайт находится по адресу ut11-bitrix.ru.
До новых уроков!
Количество показов: 118
Кем создан (имя): (admin) Администратор

Комментарии

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

Вопрос не по теме, но может есть решение у вас. Имеется УТ 11.3 с модулем БУС, редакция малый бизнес. Удалось произвести настройку обмена товарами. А вот настройку обмена Заказами - частично. Проблема следующая: на сайте создаются заказы (оплата по заказам производится только по безналичному расчету), далее выгружаются в 1С (все ок, заказы появляются), далее формируем оплату в 1С и выгружаем на сайт. Так вот по какой-то причине данные по оплате не передаются на сайт. Пробовал производить оплату как по наличке, так по безналичке и по эквайрингу - никакая оплата не загрузилась на сайт. Может сталкивались в чем может быть проблема?

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

В этом обмене документов много проблем. Чтобы сейчас все корректно обменивалось, нужно с сайта оплаты загружать в 1С, например не проведенными. Далее проводить в 1С оплата после обмена будет подтвержденной и на сайте. Может возразите, что так не удобно - согласен, но так работает, по другому судя по вашему вопросу до сих пор не работает.

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

Возразить бы хотелось, но не Вам)))) а разработчикам, если такой функционал не работает по какой-то причине. Конечно не удобно передавать оплату с сайта и его корректировать, т.к. если это платежка по банку(а так у нас и должно быть), то грошь цена загрузке платежек из клиент-банка в 1С...

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

Проблему решил, данные выгружаются на сайт корректно. Ответ от 1С-Битрикс: Так как обмен выполняется с 1С, вам необходимо в настройках модуля "Торговый каталог" отключить складской учет и резервирование. Данный учет выполняет 1С и использование указанных функций на сайте будет приводить к ошибка с остатками на сайте и ошибки при обмене заказами.

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


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