Каталог
Подраздел предназначен для организации и размещения на сайте полнофункционального каталога товаров. Включает следующие компоненты:
| Компоненты | ||
|---|---|---|
| Название | Имя в пространстве имен bitrix | Описание |
| Структура разделов | catalog.section.list | Выводит список разделов инфоблока с указанным количеством элементов в каждом разделе. |
| Элементы раздела | catalog.section | Выводит список элементов раздела с указанным набором свойств. |
| Каталог (комплексный компонент) | catalog | Осуществляет вывод полного каталога товаров из определенного инфоблока. |
| Поиск по каталогу | catalog.search | Выводит результаты поиска по элементам каталога с указанным набором свойств, цен и т.д. |
| Бренды | catalog.brandblock | Служит для отображения брендов на странице с детальной информацией о товаре. |
| Презентационный список | furniture.catalog.index | Выводит презентационный список элементов или разделов инфоблока. |
| Специальное предложение | furniture.catalog.random | Показывает одно специальное предложение. |
| Элемент каталога детально | catalog.element | Выводит детальную информацию по элементу каталога. |
| Список сравниваемых элементов каталога | catalog.compare.list | Выводит список сравниваемых элементов каталога в виде небольшой таблицы. |
| Таблица сравнения | catalog.compare.result | Выводит таблицу сравниваемых элементов каталога. |
| Умный фильтр | catalog.smart.filter | Подготавливает фильтр для выборки из инфоблока и выводит форму фильтра для фильтрации элементов. |
| Фильтр по элементам | catalog.filter | Выводит форму фильтра для фильтрации элементов информационых блоков. |
| Список информационных блоков заданного типа | catalog.main | Выводит список всех информационных блоков заданного типа. |
| Top элементов каталога | catalog.top | Выводит в таблице Top элементов из всех разделов в соответствии с заданной сортировкой (используется как правило на главной странице сайта). |
| Конструктор наборов | catalog.set.constructor | Служит для отображения заданного набора и конструктора составления собственного набора товаров. |
| Разделы с top’ом элементов | catalog.sections.top | Выводит Top элементов сгруппированных по разделам; элементы выводятся в таблице. |
| Список связанных элементов | catalog.link.list | Выводит список элементов, связанных с заданным. |
Пользовательские комментарии
Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.
Для этого нужно всего лишь авторизоваться на сайте
Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.
Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
Bitrix catalog item параметры
Курс предназначен для администраторов интернет-магазинов, работающих на базе системы «1С-Битрикс: Управление сайтом». Изучение курса необходимо при работе с продуктом редакции Малый бизнес и выше при организации торговых операций через Интернет.
Поэтому, если у вас нет возможности обновить продукт и/или выполнить конвертацию, то описание работы с модулем Интернет-магазин смотрите в курсе Магазин до конвертации (до версии 15.0).
Кроме того, доступны для скачивания в формате CHM следующие материалы с описанием старого функционала магазина:
Курс Администратор. Бизнес завершает группу административных курсов по Bitrix Framework.
Начальные требования
Необходимый минимум знаний для изучения курса:
Неплохо было бы иметь базовые навыки установки и администрирования *nix-систем.
У нас часто спрашивают, сколько нужно заплатить
Но у нас есть Академия 1С-Битрикс, где можно обучиться на платной основе на курсах нашей компании либо наших партнёров.
Тесты и сертификат
После изучения курса вам будет предложено пройти тесты на сертификацию. При успешной сдаче последовательности тестов на странице Моё обучение можно просмотреть результат обучения и загрузить сертификат в формате PDF.
Для преподавания оффлайн
Если данный курс берётся в качестве основы для оффлайного преподавания, то рекомендуемая продолжительность: 2 дня (16 академических часов).
Если нет интернета
Скачать материалы курса в формате EPUB. Файлы формата EPUB Чем открыть файл на
Android:
EPUB Reader
CoolReader
FBReader
Moon+ Reader
eBoox
iPhone:
FBReader
CoolReader
iBook
Bookmate
Windows:
Calibre
FBReader
Icecream Ebook Reader
Плагины для браузеров:
EpuBReader – для Firefox
Readium – для Google Chrome
Как проходить учебный курс?
Использование и настройка каталожных компонентов 14 версии
Все о чем будет рассказано в статье работает на обновление инфоблоков 14.0.7
У вас есть собственный сайт, который был сделан на основе компонентов предыдущих редакций или на кастомизированных компонентах. Или вы купили шаблон и хотите в нем использовать каталожные компоненты от 14 версии. В этой статье мы рассмотрим как можно использовать каталожные компоненты 14 версии и на что обратить внимание при настройке.
Для экспериментов я взял готовый HTML шаблон, интегрировал его в шаблон сайта – как это сделать можно узнать на онлайн курсах которые вы можете пройти у нас: http://academy.1c-bitrix.ru
И попробую использовать каталожные компоненты 14 версии, для вывода каталога.
Шаблон подготовлен, компоненты отлично вписались, давайте посмотрим, что у меня получилось и разберем как я настроил каталожные компоненты и включил их в купленный шаблон.
Начнем разбирать компоненты
Первый компонент который мы рассмотрим будет компонент выводящий список товара:
С помощью компонента, на главной странице сайта, мы выведем блоки с товарами, в две строки по « три » элемента:
Разместим его на странице, подключим наш каталог:
Прописываем конкретный раздел из которого будем выводить товары.
Задаем количество элементов в строке
Обратим внимание на первую опцию настройки которая нам нужна для осуществления задуманного:
Отлично, мы видим, что у нас отобразилось « три » колонки, давайте попробуем изменить значение на « пять » и посмотрим, что у нас получилось:
Количество элементов изменилось, теперь их « пять ».
Помним, что наши компоненты адаптивные соответственно они пытаются занять всю область в которую их поместили, и изменяют свои размеры в зависимости от разрешения устройства на котором отображается компонент.
Мне нравится когда количество элементов в строке « три ».
Какой он оптимальный каталог?
Компонент размещен, наступило время подумать о нашем каталоге, который мы будем выводить, я хочу сделать его красивым визуально, быстрым, вписывающимся в дизайн, что нужно сделать для этого.
Одна из тяжелых операций при выводе каталога это картинки, и желательно уделять им внимание, если вы загрузите картинку привьюшки списка в разрешение 1200 на 1200 пикселей, но будете выводить « пять » элементов в строке, то такой размер картинки сильно избыточен.
Выше мы сказали, что шаблон подстраивается к количеству места которое ему выделили соответственно оптимальный размер картинки будет всегда разный, для моего шаблона сайта, значения получились следующие:
Для детальной картинки которая будет отображаться в компоненте bitrix:catalog.element
363 х 474 пикселей, но так как я знаю, что буду использовать лупу, я сделаю картинку в два раза больше.
Для компонента списка и « трех » элементов в строке у меня получилось:
243 х 317 пикселей
Эти цифры понимают масштабирование, то есть из 363 х 474 я без потери пропорций, смогу сделать 243 х 317 пикселей – это сделано в компонентах, и найдя размер картинки для списка, исходя из представленных данных, можно предположить сколько будет размер у детальной картинки.
С размерами я определился, у меня будут следующие наборы картинок:
« Детальная картинка » в размере 243 х 317 – которая будет отображаться компонентом списка
Новые компоненты умеют делать анимацию картинок, при показе списка, отображается одна картинка, при наведение другая. Поэтому загружая картинки я учту, чтобы они были разные.
На видеоролике выше вы можете видеть такую анимацию картинок.
Как показываются картинки и в какой последовательности и куда их нужно загружать для оптимального отображения.
Для обычного товара:
Картинка для анонса
Детальная картинка
Дополнительные картинки – загруженные в файловое свойство
Картинка для анонса
Детальная картинка
Дополнительные картинки – загруженные в файловое свойство
Картинка для анонса – в SKU инфоблоке
Детальная картинка – в SKU инфоблоке
Дополнительная картинка – загруженная в файловое свойство SKU инфоблока
Показ первой картинки делается по списку сверху вниз, второй картинки далее по списку.
Соответственно если вам нужно как и мне показать одну картинку в списке и пять картинок в детальном представление, то можно загрузить первую картинку или в « Картинка для анонса » или в « Детальная картинка », а пять картинок в « Дополнительные картинки » – загруженные в файловое свойство
Давайте сразу посмотрим где в настройках bitrix:catalog.section выбираются какие картинки и откуда показывать:
Я выбрал свойство с типом « Файл » из основного инфоблока товаров и установил его в « Дополнительная картинка основного товара: »
Посмотрим как выглядят загруженные картинки в редактирование товара:
Картинка для списка, и дополнительный набор из пяти картинок, который я буду использовать в детальном представление товара:
Рассмотрим остальные параметры компонента на которые стоит обратить внимание, и которые появились в новой 14 версии:
В этом блоке вы сможете выбрать нужные свойства предложений, которые должны отбираться и использоваться при показе товара.
Вы можете задавать, показывать или не показывать « Процент скидки » и « Старую цену товара »
Так же вы сможете заменить тексты кнопок и информационных сообщений, которые выводятся покупателям, на свои собственные.
Так выглядит в публичном разделе отображение скидки и старой цены товара.
Видим, что компонент поддерживает несколько цветовых схем, выбираем желтую:
Следующий компонент который мы разберем, это bitrix:catalog.element
Добавляем его на страничку и входим в настройку компонента:
Спасибо за потраченное время на статью, если у вас будут вопросы задавайте их в комментариях, я постараюсь на них ответить.
Урок 7. Параметры компонента битрикс и result_modifier.php
Приветствую. В предыдущем уроке мы вывели товары на страницу каталога. Собственно почти готов интернет-магазин, по крайней мере витрина. Но если вы посмотрите, то каталог выводится не очень хорошо, из за того, что разный размер изображений и разная длинна наименования (в одну и две строки) карточки товаров «скачут».
Изменение результата работы компонента через result_modifier.php
Первая проблема это то, что изображения предварительного просмотра добавлены в инфоблок разных размеров. Ситуация распространенная, т.к. подгонять все изображение под один размер до миллиметра это не реально. Хотя конечно изображения должны быть примерно одинаковых размеров.
Что нам нужно сделать? Просто версткой, указанием размеров блока изображения проблему не решить, т.к. картинки растянутся не пропорционально. Нужно делать полноценный resize с сохранением пропорций. И в этой задаче нам тоже поможет богатое API Битрикса, в нем есть все функции для этого, а точнее нам понадобится всего одна CFile::ResizeImageGet.
Чтобы изменить размер изображений в инфоблоке Битрикс нужно выполнить следующий код.
Данный код можно разместить и в самом шаблоне компонента news.list или в специальном файле result_modifier.php , который должен находится в то же папке где и файл шаблона компонента. На нем я остановлюсь поподробней, т.к. это интересная технология модификации результата работы компонента без изменения кода компонента или шаблона.
Результат работы будет одинаковый. Расположить код внутри шаблона в данном примере более оптимально т.к. нет ненужного цикла по всему массиву $arResult.
Результат будет следующий.
Обратите внимание Битрикс создает отдельную папку resize_cache в которой сохраняет преобразованные файлы.
.bord h5 <
display: block;
height: 60px;
>
Параметры компонентов Битрикс
Т.к. шаблон адаптивный мы внесли параметры для трех размеров экранов. Т.е. у нас будет возможность на каждом размере экрана задать какое количество столбцов нужно выводить.
Теперь посмотрим, как это реализовать в шаблоне?
Передача параметров между компонентами Битрикс
Архив магазина StartShop на момент урока можно скачать отсюда.
Элемент каталога детально
Описание catalog.element
В визуальном редакторе компонент расположен по пути Контент > Каталог > Элемент каталога детально.
Компонент относится к модулю Информационные блоки.
Параметры
Внимание! При включенной опции Использовать параметры свойств в компонентах и формах 
эта настройка может быть скрыта. В этом случае показ свойств настраивается только в форме редактирования инфоблока 
. Подробнее о настройке свойств инфоблока в уроке.
Внимание! При включенной опции Использовать параметры свойств в компонентах и формах эта настройка может быть скрыта. В этом случае показ свойств настраивается только в форме редактирования инфоблока . Подробнее о настройке свойств инфоблока в уроке.
Свойство должно быть немножественным типа Файл.
Важно! В шаблоне сайта должна быть реализована поддержка этого функционала: в необходимом вам теге должно быть прописано:
Внимание! При включенной опции Использовать параметры свойств в компонентах и формах эта настройка может быть скрыта. В этом случае показ свойств настраивается только в форме редактирования инфоблока . Подробнее о настройке свойств инфоблока в уроке.
Кроме того, при использовании Вконтакте для создания отзывов, становится доступным для настройки параметр DETAIL_VK_API_ID, в котором задается идентификатор приложения Вконтакте (API_ID).
Каноническая ссылка строится для основного раздела элемента, а если он не задан, то для раздела с наименьшим идентификатором.
| Установить заголовок окна браузера из свойства | BROWSER_TITLE | Среди всех свойств, определенных для данного инфоблока, выбирается то, в котором содержится заголовок окна браузера. |
).
| Установить ключевые слова страницы из свойства | META_KEYWORDS | Среди всех свойств, определенных для данного инфоблока, выбирается то, в котором содержатся ключевые слова. |
).
| Установить описание страницы из свойства | META_DESCRIPTION | Среди всех свойств, определенных для данного инфоблока, выбирается то, в котором содержится описание. |
).
Если опция не отмечена, про ссылка на детальную страницу элемента формируется с учетом того раздела, через который элемент открыт на просмотр.
Параметр доступен с версии 20.5.0 модуля Информационные блоки.
Примечание: Настройка Яндекс метрикой не сложна, и данные в ней отображаются довольно быстро (полчаса-час). У Google используется Google Tag Manager с плагином электронной коммерции, его нужно настроить и добавить на страницу в шаблоне. После настройки на «той» стороне, нужно настроить компоненты для работы с электронной коммерцией и включить эту поле настройки.