У вас есть собственный сайт, который был сделан на основе компонентов предыдущих редакций или на кастомизированных компонентах. Или вы купили шаблон и хотите в нем использовать каталожные компоненты от 14 версии. В этой статье мы рассмотрим как можно использовать каталожные компоненты 14 версии и на что обратить внимание при настройке.
Для экспериментов я взял готовый HTML шаблон, интегрировал его в шаблон сайта – как это сделать можно узнать на онлайн курсах которые вы можете пройти у нас:
И попробую использовать каталожные компоненты 14 версии, для вывода каталога.
Шаблон подготовлен, компоненты отлично вписались, давайте посмотрим, что у меня получилось и разберем как я настроил каталожные компоненты и включил их в купленный шаблон.
[spoiler]
Начнем разбирать компоненты
Первый компонент который мы рассмотрим будет компонент выводящий список товара:
С помощью компонента, на главной странице сайта, мы выведем блоки с товарами, в две строки по «три» элемента:
Разместим его на странице, подключим наш каталог:
Выбираем шаблон «.default» - это тот шаблон который обновляется продуктом и используется в компонентах по умолчанию
Прописываем конкретный раздел из которого будем выводить товары.
Задаем количество элементов в строке
Обратим внимание на первую опцию настройки которая нам нужна для осуществления задуманного:
«Количество элементов выводимых в одной строке таблицы» - данная опция задает сколько колонок выведется на экране, параметр может принимать значение от «двух» до «пяти», я поставил «три» - давайте посмотрим, что получилось:
Отлично, мы видим, что у нас отобразилось «три» колонки, давайте попробуем изменить значение на «пять» и посмотрим, что у нас получилось:
Количество элементов изменилось, теперь их «пять».
Помним, что наши компоненты адаптивные соответственно они пытаются занять всю область в которую их поместили, и изменяют свои размеры в зависимости от разрешения устройства на котором отображается компонент.
Мне нравится когда количество элементов в строке «три».
Какой он оптимальный каталог?
Компонент размещен, наступило время подумать о нашем каталоге, который мы будем выводить, я хочу сделать его красивым визуально, быстрым, вписывающимся в дизайн, что нужно сделать для этого.
Одна из тяжелых операций при выводе каталога это картинки, и желательно уделять им внимание, если вы загрузите картинку привьюшки списка в разрешение 1200 на 1200 пикселей, но будете выводить «пять» элементов в строке, то такой размер картинки сильно избыточен.
Выше мы сказали, что шаблон подстраивается к количеству места которое ему выделили соответственно оптимальный размер картинки будет всегда разный, для моего шаблона сайта, значения получились следующие:
Для детальной картинки которая будет отображаться в компоненте bitrix:catalog.element
363 х 474 пикселей, но так как я знаю, что буду использовать лупу, я сделаю картинку в два раза больше.
Для компонента списка и «трех» элементов в строке у меня получилось:
243 х 317 пикселей
Эти цифры понимают масштабирование, то есть из 363 х 474 я без потери пропорций, смогу сделать 243 х 317 пикселей – это сделано в компонентах, и найдя размер картинки для списка, исходя из представленных данных, можно предположить сколько будет размер у детальной картинки.
С размерами я определился, у меня будут следующие наборы картинок:
«Детальная картинка» в размере 243 х 317 – которая будет отображаться компонентом списка
«5 дополнительных картинок для детального компонента» - в размере 726 х 948 пикселей
Новые компоненты умеют делать анимацию картинок, при показе списка, отображается одна картинка, при наведение другая. Поэтому загружая картинки я учту, чтобы они были разные.
На видеоролике выше вы можете видеть такую анимацию картинок.
Как показываются картинки и в какой последовательности и куда их нужно загружать для оптимального отображения.
Для обычного товара:
Картинка для анонса
Детальная картинка
Дополнительные картинки – загруженные в файловое свойство
Для SKU товаров
Картинка для анонса
Детальная картинка
Дополнительные картинки – загруженные в файловое свойство
Картинка для анонса – в SKU инфоблоке
Детальная картинка – в SKU инфоблоке
Дополнительная картинка – загруженная в файловое свойство SKU инфоблока
Показ первой картинки делается по списку сверху вниз, второй картинки далее по списку.
Соответственно если вам нужно как и мне показать одну картинку в списке и пять картинок в детальном представление, то можно загрузить первую картинку или в «Картинка для анонса» или в «Детальная картинка», а пять картинок в «Дополнительные картинки» – загруженные в файловое свойство
Мы для списка будем делать картинку меньше чем для детального представления, соответственно в настройках компонента bitrix:catalog.element, я убираю галочку с «Добавлять детальную картинку в слайдер»:
Давайте сразу посмотрим где в настройках bitrix:catalog.section выбираются какие картинки и откуда показывать:
Я выбрал свойство с типом «Файл» из основного инфоблока товаров и установил его в «Дополнительная картинка основного товара:»
Посмотрим как выглядят загруженные картинки в редактирование товара:
Картинка для списка, и дополнительный набор из пяти картинок, который я буду использовать в детальном представление товара:
Рассмотрим остальные параметры компонента на которые стоит обратить внимание, и которые появились в новой 14 версии:
В этом блоке вы сможете выбрать нужные свойства предложений, которые должны отбираться и использоваться при показе товара.
Вы можете задавать, показывать или не показывать «Процент скидки» и «Старую цену товара»
Так же вы сможете заменить тексты кнопок и информационных сообщений, которые выводятся покупателям, на свои собственные.
Так выглядит в публичном разделе отображение скидки и старой цены товара.
Ну и последний параметр на котором хотелось бы остановится, если вы обратили внимание в ролике, сайт в который был вставлен компонент выполнен в пастельных нежно желтых или желтых тонах, соответственно было бы хорошо применить для компонента цветовую схему желтого цвета, идем в настройку:
Видим, что компонент поддерживает несколько цветовых схем, выбираем желтую:
Выбор цветовой схемы влияет на отображение кнопок и рамки вокруг свойств. Теперь компонент выглядит на сайте не чужеродно, а лаконично, как и задумывалось.
Следующий компонент который мы разберем, это bitrix:catalog.element
Добавляем его на страничку и входим в настройку компонента:
В настройках выбираем шаблон «.default», и посмотрим как он выглядит в публичном разделе:
Давайте разберем визуальную часть компонента подробней:
- Отображение картинки из набора дополнительных картинок, если картинка как в примере, будет меньше по размеру, то она будет отцентрована.
- Выводятся свойства Торговых Предложений – их может просто не быть, если вы не используете у себя в каталоге Торговые Предложения.
- Блок с дополнительными элементами, в виде кнопочек со всплывашками, выводятся из свойства с типом «Справочник» - можно не использовать. Удобно для вывода дополнительной информации сайта, как купить или выбрать товар, как оплатить, примерить и т.п.
- Обычные свойства товара, не свойства Торговых Предложений
- Рейтинг товара, в скобочках выводит количество людей поставивших товару рейтинг.
- Блок с комментариями, умеет гибко настраиваться, вы можете использовать либо все три типа комментариев: «Комментарии продукта», «Комментарии социальной сети Вконтакте», «Комментарии социальной сети Facebook», либо нужные именно вам, отключив ненужные.
- Блок с детальной информацией по товару
- Блок с дополнительными картинками, количество картинок не ограниченно, по умолчанию выводится пять, если их больше, появляются стрелочки, что бы просматривать остальные.
- Цветовая схема – аналогично компоненту списка, вы можете выбрать нужную вам цветовую схему
- Выбираем свойство в котором хранятся дополнительные картинки в инфоблоке товаров
- Выбираем свойство в котором хранятся дополнительные картинки в инфоблоке торговых предложений. Данная настройка может не использоваться, если у вас нет товаров или картинок в инфоблоке торговых предложений.
- Свойства по которым отбираются торговые предложения, фактически выбранные свойства будут отображены. Свойства с типом «список» – отображается как текстовый квадратик со словом «тест» который вы можете увидеть на скриншоте выше, а свойство с типом «справочник» отображается в виде картинок вкусов, если подвести мышку к картинке, всплывает ее название.
- Данное свойство разрешает или запрещает – добавление картинки используемой для списка в галерею для отображения на детальной странице, если картинка списка меньше чем детальная лучше ее не добавлять в галерею.
- Вы можете задавать, показывать или не показывать «Процент скидки» и «Старую цену товара»
- Блок, где можно изменить стандартные тексты для кнопок и сообщений.
- Блок где можно управлять комментариями
- Данная настройка включает использование компонента который может выводить дополнительную информацию, связанную с товарами, то есть у разных товаров, могут выводится разные блоки (3 – на скриншоте публичного отображения, показанного выше)
- Название свойства из которого выводится блок, описанный в пункте 3
Спасибо за потраченное время на статью, если у вас будут вопросы задавайте их в комментариях, я постараюсь на них ответить.
Фото:
Кручу-верчу демолабораторию и не могу понять, по какому принципу выводятся "С этим товаром покупают" и "топ раздела". Расскажите, пожалуйста.
По заданному ID товара он выводит заданное количество товаров, которые были также куплены, с учетом минимального количества покупок. Компонент стандартный и входит в дистрибутив модуля.
Для корректного функционирования этого компонента необходимо:
1) Заходим в Настройки -> Настройки продукта -> Настройки модулей -> Интернет-магазин и в пункте "Как часто перегенерировать список также продаваемых продуктов (дней)" стаавим 1
2) Заходим в настройки компонента catalog и там находим раздел "Настройки блока "С этим товаром покупают"" ставим галочку "Показывать блок "С этим товаром покупают"" и ставим "Минимальное количество покупок товара" равное 1
3) Кладем в корзину 2-3 товара и делаем заказ
4) Переходим в "Заказы" административной части сайта, находим наш заказ с 2-3 товарами, открываем его, ставим статус "Выполнен", "Оплачен", "Доставка разрешена", сохраняем.
5) Переходим в детальный просмотр любого товара из заказа который мы только что выполнили, и должны отобразится 1-2 товара с котрым мы купили этот товар, если не отобразится перейдите в пункт 1 и еще раз пересохраните настройки, должна произойти перегенерация списка
Я все понимаю, но кода там реально очень много. Если вы предполагаете что он настолько важен и нужен - почему бы не сделать отдельный компонент ehsop.catalog.section ?
Да и сам html этого нового шаблона выглядит невероятно дико.
Это я все к тому, что прибавив фишек и параметров получили шаблон который очень дорого в поддержке.
Мы и дизайн делали такой, чтобы можно было вписать его в большинство проектов без модернизации, он легкий без графических деталей.
А если клиент просит его модификацию, то это подразумевает достаточно большую работу и знания разработчика.
Веб усложняется с каждым днем и усложняются компоненты. Это неизбежно.
Мы продолжаем работы с компонентами постоянно, и постепенно будем стараться его делать более прозрачным и удобным для кастомизации, но он всё равно останется сложным.
Заработал древний функционал подписки на поступления товара, но на новый лад?
У меня на данный момент на Бизнесе не работает подписка, ключ товара $arItem['CATALOG_SUBSCRIPTION'] == N в шаблоне компонента catalog.section.
В настройках магазина:
Использовать уведомления о поступлении товаров == Y
В настройках каталога:
Включить количественный учет == Y
Разрешить покупку при отсутствии товара
Разрешить отрицательное количество товара
Разрешить подписку при отсутствии товара == Y
Включить складской учет == Y
У товара количество 0 обще, 0 на складе.
В карточке товара настройки учета по умолчанию из настроек модуля.
В саппорт писать или не работает еще функционал?
Как быть?
Разобраться в вашей проблеме, новые компоненты не просто работают с Торговыми Предложениями, а супер гибкие в работе с ними, можно творить все, что хочешь. А раз не выводится кнопка купить, значит настройки сделаны не совсем до конца или не корректно. Сложно не видя подсказать, в чем у вас проблема.
Я сегодня обновился до
Мастер создания интернет-магазина
Подскажите как теперь сделать как раньше вывод не всего каталога в слайдер, а например только со свойством "Спецпредложение"(как в 12.5 там в секции настроек "Внешний вид" был выбор из элементов "Спецпредложение".
Или какой то другой вариант использования главной страницы для реального магазина, а не для демоданных.
Вроде было уже несколько обновлений, а я так не смог в них найти как это сделать конечному клиенту без разработчика.
<?$arrFilterTop = array("!PROPERTY_SALELEADER"=>false);?> <?$APPLICATION->IncludeComponent( "bitrix:catalog.top", .......Все ужасно сырое и и апдейт от апдейта глюки в разных местах вылазят. Как раз в дефаулт шаблонах компонентов, которые мы с вами и пытаемся настраивать. (Профи пишут шаблоны сами или используют от предыдущих версий Битрикс.)
Документации и примеров модернизации не хватает ну или хотя бы разжеванности на форумах.
Как сделать, чтобы можно было продолжить покупки, а не сразу в корзину?
если да, как вы их связали между собой?
Спасибо! По вашему примеру сделала и себе такое. Но вопрос, есть ли возможность изменить картинку товара, если кликнуть по какому-то из торговых предложений? То есть подставить выбранный пользователем товар на детальную картинку?
Спасибо!
Не получается вывести цену в комплексном компоненте.
Поле тип цены не доступно для выбора (настройки).
Интернет-магазина нет. Руками добавлены функции купить, сравнить. Я человек новый, не программист. Может кто-то может помочь советом? Заранее спасибо!
<?if(!defined("B_PROLOG_INCLUDED";) || B_PROLOG_INCLUDED!==true)die();?>
<div class="catalog-section">
<?if($arParams["DISPLAY_TOP_PAGER"]):?>
<?=$arResult["NAV_STRING"]?><br />
<?endif;?>
<div class="row">
<?foreach($arResult["ITEMS"] as $cell=>$arElement):?>
<?
$this->AddEditAction($arElement['ID'], $arElement['EDIT_LINK'], CIBlock::GetArrayByID($arParams["IBLOCK_ID"], "ELEMENT_EDIT";));
$this->AddDeleteAction($arElement['ID'], $arElement['DELETE_LINK'], CIBlock::GetArrayByID($arParams["IBLOCK_ID"], "ELEMENT_DELETE";), array("CONFIRM" => GetMessage('CT_BCS_ELEMENT_DELETE_CONFIRM')));
?>
<section class="6u 12u(narrower) cat_item">
<div class="row 50%" id="<?=$this->GetEditAreaId($arElement['ID']);?>">
<div class="4u 12u(narrower)">
[url=<?=$arElement[]"><img class="top-pic" src="<?=$arElement["PREVIEW_PICTURE"]["SRC"]?>">[/url]
</div>
<div class="8u 12u(narrower)">
<p style="font-weight: 900; font-size: 0.8em; line-height: 1.3em; margin-bottom: 0.5em; letter-spacing: -0.025em;">[url=<?=$arElement[]"><?=$arElement["NAME"]?>[/url]</p>
<?if(isset($arElement["DESCRIPTION"]) && !empty($arElement["DESCRIPTION"])):?>
<p><?=$arElement["DESCRIPTION"]?></p>
<?endif;?>
<p style="clear: both"><?
$res1 = CIBlockElement::GetByID($arElement['ID']);
$icons_flag = false;
if($ar_res1 = $res1->GetNextElement()){
$ar_res2 = $ar_res1->GetProperties();
if($ar_res2["ICON_NEW"]['VALUE_XML_ID']=="YES";){
$icons_flag = true;
echo '
}
if($ar_res2["ICON_SALE"]['VALUE_XML_ID']=="YES";){
$icons_flag = true;
echo '
}
if($ar_res2["ICON_HIT"]['VALUE_XML_ID']=="YES";){
$icons_flag = true;
echo '
}
}
?></p><?
if($icons_flag){
//echo '<div style="clear: both"></div>';
}
?>
</div>
</div>
<div class="row 50%">
<div class="4u 12u(mobilep) div_quan">
<!-- <input type="text" class="quantity" placeholder="Кол-во"/> -->
</div>
<div class="5u 12u(mobilep)">
<!-- -->
</div>
<div class="3u 12u(mobilep)">
</div>
</div>
</section>
<?endforeach; // foreach($arResult["ITEMS"] as $arElement):?>
</div>
<?if($arParams["DISPLAY_BOTTOM_PAGER"]):?>
<br /><?=$arResult["NAV_STRING"]?>
<?endif;?>
</div>