|
Каталог товаров на простых компонентах |
Бывают ситуации, что для построения каталога товаров на сайте
не подходит
Комплексный компонент Каталог осуществляет вывод полного каталога товаров из определенного инфоблока и включает в себя функционал ряда простых компонентов. Но возникают ситуации, когда комплексный компонент не подходит под требования. Например:
1. Необходим вывод элементов только определенного раздела инфоблока;
2. Требуется отображение информации из разных компонентов на одной странице;
и т.д.
комплексный компонент
Каталог
Комплексный компонент осуществляет вывод полного каталога товаров из определенного инфоблока. Его функциональность объединяет возможности нескольких одностраничных компонентов: фильтра, компонента сравнения, вывода элементов раздела, топа элементов, связанных элементов и др. Расположив комплексный компонент на странице, можно получить полнофункциональный каталог. Компонент является стандартным и входит в дистрибутив модуля.
Внимание! Компонент не работает с инфоблоками, не имеющими структуры разделов. Если по логике проекта информация не должна иметь структурного деления, то необходимо создать один раздел верхнего уровня и уже в нём размещать элементы инфоблока.
В визуальном редакторе компонент расположен по пути Контент > Каталог > Каталог.
Компонент относится к модулю Информационные блоки.
Порядок секций в форме настройки компонента может меняться в зависимости от выбранного шаблона.
Описание компонента «Каталог (комплексный компонент)» в пользовательской документации.
. Настроить индивидуальное отображение каталога можно вручную на простых компонентах. Рассмотрим процедуру создания такого каталога на небольшом примере. Организуем каталог на сайте в виде трех страниц:
- Главная страница каталога (index.php) - отобразим структуру разделов и TOP элементов каталога;
- Страница содержимого конкретного раздела с умным фильтром (section.php);
- Страница с детальной карточкой товара (element.php).
Внимание! В примере показаны общие минимальные действия, необходимые для создания каталога на простых компонентах. Детальную настройку смотрите в соответствующих
уроках
Ссылки указаны в текстовом описании и в конце урока.
.
|
Создание каталога на простых компонентах |
|
Текстовая часть о создании каталога дополнительно к видео
|
|---|
Первый этап - создаем структуру
Создадим новый раздел и три страницы через Публичный раздел:
- Нажмем кнопку
Создать раздел
на
Панели управления
На Панели управления собраны все команды, которые доступны контент-менеджеру при работе с сайтом. Подробнее...
. Введем название. Снимем галочку с редактирования страницы, а добавление пункта в меню оставим. При создании нового раздела, так же создатся страница index.php.
- В новом разделе создадим две страницы: section.php и element.php. Для них пункты в меню не добавляем, страницы пока оставляем пустыми.
Второй этап - настройка инфоблока товаров
Создайте
1. Откройте страницу Контент > Инфоблоки > Типы инфоблоков > название_типа, где вместо название_типа у вас отображается реальное название нужного типа инфоблоков (учтите, что после создания инфоблока его тип уже нельзя будет поменять).
2. Нажмите кнопку Добавить инфоблок.
3. Заполните поля формы редактирования инфоблока.
Подробнее...
и настройте инфоблок товаров:
- Заполните все обязательные поля и задайте
адреса страниц
(с учетом созданных нами страниц на первом этапе);
- Настройте поля и свойства инфоблока;
- Обязательно настройте инфоблок на работу в
режиме торгового каталога;
Чтобы нужный информационный блок работал в режиме торговых каталогов, необходимо
отметить его флажком в поле Является торговым каталогом на странице настроек модуля
Торговый каталог (Настройки > Настройки продукта > Настройки модулей > Торговый каталог).
Подробнее...
- Чтобы посетители имели доступ к инфоблоку на закладке Доступ установите Чтение (по умолчанию стоит Запрещен);
- Выполните настройку
отображения свойств в умном фильтре
В умном фильтре могут быть отображены свойства товаров и торговых предложений. Кроме того, начиная с версии 15.0.1 модуля Информационные блоки, для свойств доступна настройка их визуального представления.
Подробнее...
Также для разделов может быть настроен различный набор свойств, в одном инфоблоке возможно держать разнотипные товары с различными свойствами.
Подробнее...
.
Третий этап - размещение и настройка компонентов
Примечание: Далее в настройках компонентов все адреса указываются такими же, как и в настройках инфоблока (только опущено #SITE_DIR#).
Примечание: В нашем примере рассматриваем только основные настройки компонентов, необходимые для работы каталога. Остальные параметры оставьте по умолчанию или настройте в соответствии с вашими требованиями (например, выберите отображаемые свойства товаров или настройте внешний вид).
На странице index.php разместите:
- Компонент
Структура разделов
Компонент выводит список разделов инфоблока. Компонент стандартный, входит в дистрибутив модуля и содержит 4 шаблона: .default, old_version (шаблон .default до версии 14.0), tree и visual.
В визуальном редакторе компонент расположен по пути Контент > Каталог > Структура разделов.
Компонент относится к модулю Информационные блоки.
Описание компонента «Структура разделов» в пользовательской документации.
и в его настройках укажите:
- инфоблок товаров в секции Основные параметры;
- шаблон ссылки на странице раздела в секции Шаблоны ссылок:
- Компонент
Top элементов каталога
Компонент выводит в таблице top элементов из всех разделов в соответствии с заданной сортировкой (используется как правило на главной странице сайта). Компонент стандартный и входит в дистрибутив модуля.
В визуальном редакторе компонент расположен по пути Контент > Каталог > Top элементов каталога.
Компонент относится к модулю Информационные блоки.
Описание компонента «top элементов каталога» в пользовательской документации.
и в его настройках укажите:
- инфоблок товаров в секции Основные параметры;
- шаблоны ссылок на страницы раздела и карточки товара в
одноименной секции
- выберите тип цены в секции Цены;
Примечание: если у вас товары с торговыми предложениями, то в настройках компонента обязательно выберите свойства предложений в секции Внешний вид. Иначе для товаров отобразится пометка Нет в наличии.
На странице section.php разместите:
- Компонент
Умный фильтр
Компонент подготавливает фильтр для выборки из инфоблока и выводит форму фильтра для фильтрации элементов. Компонент должен подключаться перед компонентом вывода элементов каталога, иначе список элементов фильтроваться не будет. Компонент стандартный, входит в дистрибутив модуля и содержит три шаблона: .default, visual_horizontal и visual_vertical. (Последние два шаблона не поддерживаются, остались для сохранения совместимости.)
В визуальном редакторе компонент расположен по пути Контент > Каталог > Умный фильтр.
Компонент относится к модулю Информационные блоки.
Описание компонента «Умный фильтр» в пользовательской документации.
, в настройках укажите:
- инфоблок товаров (секция Источник данных);
- тип цены (секция Цены);
Важно! Подключение компонента Умный фильтр обязательно выполняйте до подключения компонента Элементы раздела.
- Компонент
Элементы раздела
Компонент выводит список элементов раздела с указанным набором свойств. Компонент содержит пять шаблонов: .default, board, links, list и old_version_16 (шаблон .default до версии 17.0). Компонент стандартный и входит в дистрибутив модуля.
В визуальном редакторе компонент расположен по пути Контент > Каталог > Элементы раздела.
Компонент относится к модулю Информационные блоки.
Описание компонента «Элементы раздела» в пользовательской документации.
, в его настройках укажите:
- инфоблок товаров в секции Основные параметры;
- шаблоны ссылок в
одноименной секции
;
- укажите тип цены в секции Цены;
На странице element.php разместите компонент
Элемент каталога детально
Компонент выводит детальную информацию по элементу каталога. Компонент стандартный, входит в дистрибутив модуля и содержит три шаблона: .default, board и old_version_16 (шаблон .default до версии 17.0).
В визуальном редакторе компонент расположен по пути Контент > Каталог > Элемент каталога детально.
Компонент относится к модулю Информационные блоки.
Описание компонента «Элемент каталога детально» в пользовательской документации.
и в его настройках укажите:
- инфоблок товаров в секции Основные параметры;
- шаблоны ссылок в
одноименной секции
;
- укажите тип цены в секции Цены;
|
|
Настройка ЧПУ для каталога на простых компонентах |
|
Текстовая часть о настройке ЧПУ дополнительно к видео
|
|---|
|
Сделаем для нашего каталога на простых компонентах красивые адреса. Для этого нам понадобится:
- Настроить
символьные коды
Символьный код - это заданный латиницей осмысленный код.
;
- Внести изменения в шаблоны адресов инфоблока и компонентов;
- Включить
ЧПУ
Средства «1С-Битрикс: Управление сайтом» позволяют сделать ссылки более понятными с помощью специальной функции. Функция встроена во все комплексные компоненты (и отдельные простые) и преобразует стандартный веб-адрес в так называемый человеко-понятный URL (сокращенно ЧПУ).
Подробнее...
в компонентах и
настроить
Согласитесь, что ссылка на некий элемент инфоблока http://mysite.ru/catalog/pants/pants-striped-flight/ гораздо понятнее посетителям, чем http://mysite.ru/catalog/?SECTION_ID=8&ELEMENT_ID=4. Весомым аргументом в пользу человеко-понятных адресов является и то, что такие адреса лучше воспринимаются поисковыми машинами. Сделайте красивые адреса для элементов инфоблока вместе с поддержкой ЧПУ в компонентах.
Подробнее...
правила его применения.
Настройка символьных кодов
Для того, чтобы в адресах использовались понятные пользователю слова вместо числовых идентификаторов ID, настроим символьные коды CODE:
- В настройках инфоблока в разделах Поля и Поля разделов включим символьные коды, а также отметим для них проверку на уникальность и автоматическую транслитеризацию из названия;
- Для существующих разделов инфоблока и его элементов создадим символьные коды. Для новых элементов они создадутся автоматически.
Перейдем к настройкам шаблонов адресов и ЧПУ:
Важно! Настройки ЧПУ выполняются в зависимости от версии модуля Информационные блоки следующим образом:
- если версия 15.5.0 или выше, то настройка ЧПУ выполняется в секции компонентов
Управление адресами страниц
;
- если версия ниже, чем 15.5.0, то следует вручную составить
правило
Подробнее в примере Настройка ЧПУ в простых компонентах.
на странице Настройки > Настройки продукта > Обработка адресов > Правила обработки.
- В настройках инфоблока изменим адреса таким образом:
Примечание: Далее в настройках компонентов все адреса указываются такими же, как и в настройках инфоблока (только опущено #SITE_DIR#).
- Компонент Элемент каталога детально:
- Настроим новые
шаблоны адресов
;
- Включим ЧПУ и укажем
правило
: /golovnye-ubory/#SECTION_CODE#/#ELEMENT_CODE#/.
- Компонент Умный фильтр:
- Включим ЧПУ и укажем
правило
: /golovnye-ubory/#SECTION_CODE#/filter#SMART_FILTER_PATH#/apply/.
- Компонент Элементы раздела:
- Настроим новые
шаблоны адресов
;
- Включим ЧПУ и укажем
правило
: /golovnye-ubory/#SECTION_CODE#/.
- Для компонента Структура разделов изменим только шаблон адреса на:
/golovnye-ubory/#SECTION_CODE#/#ELEMENT_CODE#/;
- Для компонента Top элементов каталога
меняем шаблоны
. Включаем ЧПУ, но в нашем случае страница всегда неизменна, поэтому правило: /golovnye-ubory/.
|
Каталог товаров на простых компонентах настроен и его страницы имеют следующий вид:
- Главная (index.php):
- Страница элементов раздела (section.php):
- Страница детального просмотра (element.php):
)
)
)