Довольно часто при разработке интернет-магазина на битриксе возникает потребность вывести список товара в виде слайдера (Например, на главной странице). Наиболее часто товар фильтруется по какому-либо свойству (Новинка, хит продаж, скидка и тому подобное). Собственно, в данной заметке рассмотрен вопрос о том, как реализовать данный блок на сайте.
Что для этого требуется?
- Подключенная библиотека jquery и какой-нибудь плагин слайдера. В рамках данной статьи используется slick slider (Личные предпочтения автора, не более того).
- Копия шаблона компонента bitrix:catalog.section (в ней и будет происходить основная работа)
В рамках данного примера будет рассмотрен «классический» слайдер (Картинка-название-цена-кнопка) для простоты изложения. Стоит заметить, что в данном случае обрезана часть функционала (например, ajax добавление в корзину, которое идет по-умолчанию в новых шаблонах битрикса).
Свойством, в данном случае, выступает булевое значение «хит». В случае, если у товара данное свойство равно единице, на блок с товаром в слайдере добавляется лейбл «хит продаж».
БЛОК 1. Работа с шаблоном компонента
Первым делом, в файле template.php следует закомментировать (или удалить) весь имеющийся код (кроме самой первой строки (<?if(!defined(«B_PROLOG_INCLUDED») || B_PROLOG_INCLUDED!==true)die();?>)).
Далее, можно приступать именно к разработке шаблона слайдера. Предположим, что блок со слайдером будет занимать всю доступную ширину рабочей области, т.е. при подключенном бутстрапе блок будет обернут в:
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> </div>
Далее, при желании, можно добавить еще один div, в котором пропишем отступы и центрирование элементов. Очень желательно добавить к данному div’у какой-нибудь класс (пригодится позже).
После этих действий начинается основная работа по кастомизации шаблона компонента. Первым делом, следует добавить цикл foreach (в удобном разработчику синтаксисе) следующего вида:
<?foreach($arResult["ITEMS"] as $cell=>$arElement):?> <?endforeach;?>
И внутри данного цикла начинается разработка шаблона каждого товара в слайдере. Ниже приведен html и php код для шаблона товара, далее дается комментарий по основным моментам.
<div class="sale_main_main">
<div class="sale_main_skidka" style="background-color: #F44336; margin-left: -10px; padding: 5px; width: 45%; heigth: auto; float: left; font-weight: bold; border-radius: 0 50px 50px 0; color: white;"><?echo GetMessage("CATALOG_HHT")?></div><br><br>
<div class="item-image-hb-grid">
<a href="<?=$arElement["DETAIL_PAGE_URL"]?>"><img
border="0"
src="<?=$arElement["DETAIL_PICTURE"]["SRC"]?>"
alt="<?=$arElement["DETAIL_PICTURE"]["ALT"]?>"
title="<?=$arElement["DETAIL_PICTURE"]["TITLE"]?>" style="width:auto; height: 150px;"></a><br />
</div>
<div class="item-title-hb-grid" style="height: auto !important;">
<a href="<?=$arElement["DETAIL_PAGE_URL"]?>" style="font-weight: bold;"><?=$arElement["NAME"]?></a><br />
</div>
<div class="item-price-hb">
<div class="recent-item-price">
<p>
<span class="hbt-catalog-price"><?=$arPrice["PRINT_VALUE"]?></span>
</p>
<a href=<?=$arElement["DETAIL_PAGE_URL"]?>" rel="nofollow" ><div class="addBaskHit"><?echo GetMessage("CATALOG_BUY")?></div></a>
</div>
</div>
</div>
Автор заранее приносит извинения за инлайновые стили, достаточно вредная привычка, от которой тяжело отказаться.
Итак, комментарии, относительно вышеприведенного кода:
Как видно, блок с классом sale_main_main — это родительский контейнер для отдельного товара, в нем задается высота, ширина, цвет бэкграунда и прочие «общие» стили для товара в слайдере.
Блок с классом sale_main_skidka — это блок, который отвечает за вывод лейбла с надписью «Хит продаж». Учитывая то, что в данном слайдере все товары отфильтрованы под данному свойству, то и лейбл применяется ко всем товарам. <?echo GetMessage(«CATALOG_HHT»)?> — выводит непосредственно текст «Хит продаж». Само значение данной переменной хранится в языковом файле в папке lang в шаблоне компонента.
Далее все должно быть довольно очевидно: Ссылка на детальную страницу элемента — вывод фотографии, ссылка на детальную страницу элемента — вывод названия.
После идет вывод цены — тут надо обратить внимание на то, как организован вывод цены в шаблоне компонента по-умолчанию (и взять этот механизм за основу). Просто, в некоторых шаблонах битрикса данный механизм может различаться.
В конце идет кнопка со ссылкой на детальную страницу элемента, тут ничего сложного нет.
БЛОК 2. «Прикручиваем» слайдер к шаблону компонента.
Ранее, мы добавили класс к родительскому контейнеру (который идет до цикла foreach). Предположим, что класс у контейнера называется «your-class». Теперь, для того, чтобы наши товары выводились в slick слайдере, нужно добавить небольшой javascript-код. Он выглядит следующим образом:
<script>
$('.your-class').slick({
lazyLoad: 'ondemand',
dots: false,
infinite: true,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: false
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
</script>
В настройках отключены точки, установлен бесконечный цикл прокрутки, установлен вывод 4 элементов за раз. Блоки breakpoint предназначены для адаптации слайдера под меньшие размеры экрана, то есть чем меньше экран, тем меньше элементов выводится за раз. При ширине экрана 480px (мобильные устройства) выводится всего один элемент.
Собственно, на этом работа с шаблоном компонента закончена.
БЛОК 3. Вывод компонента на главной странице.
Последнее действие, которое осталось рассмотреть в данной статье — это вывод компонента на главной странице сайта. По-умолчанию, главная страница сайта на битриксе лежит в корне сайта и называется index.php.
Как было сказано в начале статьи, свойство «Хит продаж» является булевым, поэтому фильтр для вывода товаров каталога, отфильтрованных по данному свойству, будет выглядеть следующим образом:
$arrFilter = array("PROPERTY_HIT_PRODUCT" => "1");
Т.е. выбираем только те товары, где значение свойства равно единице. И далее выводим шаблон компонента bitrix:catalog.section с созданным нами шаблоном и установленным фильтром. Вызов компонента будет выглядеть примерно так (Возможны, конечно, небольшие изменения):
$APPLICATION->IncludeComponent(
"bitrix:catalog.section",
"hitProducts",
array(
"ACTION_VARIABLE" => "action",
"ADD_PICT_PROP" => "MORE_PHOTO",
"ADD_PROPERTIES_TO_BASKET" => "Y",
"ADD_SECTIONS_CHAIN" => "N",
"ADD_TO_BASKET_ACTION" => "ADD",
"AJAX_MODE" => "Y",
"AJAX_OPTION_ADDITIONAL" => "",
"AJAX_OPTION_HISTORY" => "N",
"AJAX_OPTION_JUMP" => "N",
"AJAX_OPTION_STYLE" => "Y",
"BASKET_URL" => "/personal/cart/",
"BROWSER_TITLE" => "-",
"CACHE_FILTER" => "N",
"CACHE_GROUPS" => "Y",
"CACHE_TIME" => "36000000",
"CACHE_TYPE" => "A",
"COMPONENT_TEMPLATE" => "hitProducts",
"CONVERT_CURRENCY" => "N",
"DETAIL_URL" => "",
"DISPLAY_BOTTOM_PAGER" => "Y",
"DISPLAY_TOP_PAGER" => "N",
"ELEMENT_SORT_FIELD" => "sort",
"ELEMENT_SORT_FIELD2" => "id",
"ELEMENT_SORT_ORDER" => "desc",
"ELEMENT_SORT_ORDER2" => "desc",
"FILTER_NAME" => "arrFilter",
"HIDE_NOT_AVAILABLE" => "N",
"IBLOCK_ID" => "265",
"IBLOCK_TYPE" => "catalog",
"IBLOCK_TYPE_ID" => "catalog",
"INCLUDE_SUBSECTIONS" => "Y",
"LABEL_PROP" => array(
0 => "NEWPRODUCT",
),
"LINE_ELEMENT_COUNT" => "5",
"MESSAGE_404" => "",
"MESS_BTN_ADD_TO_BASKET" => "В корзину",
"MESS_BTN_BUY" => "Купить",
"MESS_BTN_DETAIL" => "Подробнее",
"MESS_BTN_SUBSCRIBE" => "Подписаться",
"MESS_NOT_AVAILABLE" => "Нет в наличии",
"META_DESCRIPTION" => "-",
"META_KEYWORDS" => "-",
"OFFERS_CART_PROPERTIES" => array(
0 => "COLOR_REF",
1 => "SIZES_SHOES",
2 => "SIZES_CLOTHES",
),
"OFFERS_FIELD_CODE" => array(
0 => "",
1 => "",
),
"OFFERS_LIMIT" => "5",
"OFFERS_PROPERTY_CODE" => array(
0 => "",
1 => "",
),
"OFFERS_SORT_FIELD" => "sort",
"OFFERS_SORT_FIELD2" => "id",
"OFFERS_SORT_ORDER" => "desc",
"OFFERS_SORT_ORDER2" => "desc",
"OFFER_ADD_PICT_PROP" => "-",
"OFFER_TREE_PROPS" => array(
0 => "COLOR_REF",
1 => "SIZES_SHOES",
2 => "SIZES_CLOTHES",
),
"PAGER_BASE_LINK_ENABLE" => "N",
"PAGER_DESC_NUMBERING" => "N",
"PAGER_DESC_NUMBERING_CACHE_TIME" => "36000",
"PAGER_SHOW_ALL" => "N",
"PAGER_SHOW_ALWAYS" => "N",
"PAGER_TEMPLATE" => "round",
"PAGER_TITLE" => "Товары",
"PAGE_ELEMENT_COUNT" => "12",
"PARTIAL_PRODUCT_PROPERTIES" => "Y",
"PRICE_CODE" => array(
0 => "BASE",
),
"PRICE_VAT_INCLUDE" => "Y",
"PRODUCT_DISPLAY_MODE" => "Y",
"PRODUCT_ID_VARIABLE" => "id",
"PRODUCT_PROPERTIES" => array(
),
"PRODUCT_PROPS_VARIABLE" => "prop",
"PRODUCT_QUANTITY_VARIABLE" => "",
"PRODUCT_SUBSCRIPTION" => "N",
"PROPERTY_CODE" => array(
0 => "NEWPRODUCT",
1 => "",
),
"SECTION_CODE" => "",
"SECTION_ID" => $_REQUEST["SECTION_ID"],
"SECTION_ID_VARIABLE" => "SECTION_ID",
"SECTION_URL" => "",
"SECTION_USER_FIELDS" => array(
0 => "",
1 => "",
),
"SEF_MODE" => "N",
"SET_BROWSER_TITLE" => "Y",
"SET_LAST_MODIFIED" => "N",
"SET_META_DESCRIPTION" => "Y",
"SET_META_KEYWORDS" => "Y",
"SET_STATUS_404" => "N",
"SET_TITLE" => "Y",
"SHOW_404" => "N",
"SHOW_ALL_WO_SECTION" => "Y",
"SHOW_CLOSE_POPUP" => "N",
"SHOW_DISCOUNT_PERCENT" => "N",
"SHOW_OLD_PRICE" => "Y",
"SHOW_PRICE_COUNT" => "1",
"TEMPLATE_THEME" => "site",
"USE_MAIN_ELEMENT_SECTION" => "N",
"USE_PRICE_COUNT" => "N",
"USE_PRODUCT_QUANTITY" => "N",
"CUSTOM_FILTER" => "",
"HIDE_NOT_AVAILABLE_OFFERS" => "N",
"PROPERTY_CODE_MOBILE" => "",
"BACKGROUND_IMAGE" => "-",
"PRODUCT_ROW_VARIANTS" => "[{'VARIANT':'6','BIG_DATA':false},{'VARIANT':'6','BIG_DATA':false}]",
"ENLARGE_PRODUCT" => "STRICT",
"PRODUCT_BLOCKS_ORDER" => "price,props,sku,quantityLimit,quantity,buttons,compare",
"SHOW_SLIDER" => "Y",
"LABEL_PROP_MOBILE" => "",
"LABEL_PROP_POSITION" => "top-left",
"SHOW_MAX_QUANTITY" => "N",
"RCM_TYPE" => "personal",
"RCM_PROD_ID" => $_REQUEST["PRODUCT_ID"],
"SHOW_FROM_SECTION" => "N",
"DISPLAY_COMPARE" => "N",
"USE_ENHANCED_ECOMMERCE" => "N",
"LAZY_LOAD" => "N",
"LOAD_ON_SCROLL" => "N",
"COMPATIBLE_MODE" => "Y",
"DISABLE_INIT_JS_IN_COMPONENT" => "N",
"SLIDER_INTERVAL" => "3000",
"SLIDER_PROGRESS" => "N"
),
false
);?>
И после выполнения всех вышеперечисленных действий, «на выходе» получится что-то подобное:
