Каталог (витрина) в 1С-Битрикс

 

На прошлом этапе, мы определились какие компоненты у нас будут отвечать за ту или иную область шаблона. В данном посте мы рассмотрим как реализовать каталог (список продуктов, витрина).

 

 

Каталог (витрина)

 

Как я указал на этапе “подбор компонентов для шаблона“, за каталог (список продуктов, витрина) у нас будет отвечать компонент «bitrix:catalog».

 

 

Как будем интегрировать…

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

 

templeate_shop_small

 

 

Перед началом интеграции компонента «bitrix:catalog», нам надо подготовиться — создать минимальное информационное окружение, которое позволит ему работать:

  • нам нужно сформировать простую структуру сайта — один раздел магазина и один подраздел для конкретного продукта.
  •  создать элементарную иерархию инфоблоков с товарами.

 

 

Создаем разделы и информационные блоки…

 

Начнем с первого, создадим раздел «Магазин» с пунктом для меню «Products» и подраздел для конкретного продукта. Сделать это можно через панель администратора. Нажимаем «Контент» -> и раскрываем  «Структура сайта» -> «Моя компания», далее жмем «Добавить» и выбираем «Добавить папку».

 

panel_admin_new_section_small

 

Далее заходим в данный раздел и создаем подраздел, жмем «Добавить», выбираем «Добавить папку».

В шаблоне прототипа видно, какими продукты планируется заполнять будущий магазин:

 

templeate_infoblocks_small

 

На этапе интеграции нам достаточно создать один подраздел «Магазина«, пусть это будет «Processors».

Заполняем поля подраздела и жмем сохранить.

 

panel_admin_new_cat_small

 

Итак, мы  создали раздел «Магазин» и под раздел «Процессоры».

Теперь надо разобраться с инфоблоками. Напомню, что инфоблоки это блоки информации, с которыми работают некоторые из компонентов, как пример  «bitrix:catalog». Физически инфоблоки это таблицы в БД, но хочу заметить, что разработчики CMS 1C-Битрикс не рекомендуют работать с БД напрямую, все наши действия желательно совершать через эти сущности – «инфоблоки».

В документации, о инфоблоках есть хорошее описание — ссылка

Кому лень читать, кратко скажу, что с помощью информационных блоков можно строить иерархию. Во главе иреархии находиться «Тип информационного блока», причем этих типов может быть много. Далее, дочерние элементы «типов» это сам «Инфоблок», и их тоже может быть множество для каждого типа. Дочерние элементы «Инфоблока» это «Элемент», они имеют один набор свойств, который задает инфоблок-родитель. Элементов также может быть множество для каждого «Инфоблока». Помимо этого, в каждом «Инфоблоке» может быть «Раздел», это некое промежуточное звено группирующее «Элементы» по какому либо признаку.

Итак, построим элементарную иерархию, создадим «Тип инфоблока» с именем «Products».

В панеле администратора, выберем «Контент», далее раскроем «Инфоблоки» -> «Типы инфоблоков» и нажмем «Добавить новый тип».

Заполняем поля:

 

panel_admin_new_type_infoblock_small

 

Мы создали тип инфоблока «Products», теперь нужно создать инфоблоки их  элементы.

В нашем случае «Инфоблок» это отдельная разновидность продукта, т.е. «Процессоры», «Материнские платы», «Персональные компьютеры» и т.д.

Так как выше, мы уже создали раздел «Процессоры», то создадим одноименный инфоблок, которые будет в нем выводиться.

Итак, создадим инфоблок с именем «Processors», выберем тип инфоблока «Продукты» («Инфоблоки» -> «Типы инфоблоков» -> «Продукты»), далее жмем «Добавить инфоблок».

Откроется форма создание инфоблока, о значение полей можно посчитать здесь, я приведу пример как их заполнил я.

 

Закладку «Инфоблок» я заполнил следующим образом:

 

panel_admin_infoblock_infoblock

 

Закладку «Поля» я не изменял.

 

В закладку «Свойства» я добавил для будущих элементов-процессоров одно свойство:

 

panel_admin_infoblock_3

 

Закладку «Поля для разделов» я не изменял.

 

В закладке «Торговый каталог» я установил галку в «Является торговым каталогом».

 

panel_admin_infoblock_5

 

В закладке «Доступ» я изменил «Для всех пользователей» на «Чтение»:

 

panel_admin_infoblock_6

 

Закладку «Подписи» я оформил следующим образом:

 

panel_admin_infoblock_7

 

Мы создали инфоблок и настроили его свойства, дальше нужно добавить пару-тройку элементов – процессоров. На данном этапе, это необходимо только для отладки компонента «каталог», наполнять сайт товаром мы будем позже.

Благодаря установленной галкам «Является торговым каталогом» (закладка «Торговый каталог») работать с содержимым данного инфоблока, мы будем с помощью специального раздела в  панели администратора – «Магазин». Перейдем в данный раздел,  раскроем «Каталог товаров» -> «Процессоры», выберем «Список товаров» и нажмем «Добавить процессор».

 

Заполним поля, закладка «Процессор»:

 

panel_admin_new_element

 

Добавим изображение-превью на закладке «Анонс» и текст с большим изображением для подробного описания:

 

panel_admin_infoblock_2

 

В закладке «Торговый каталог» указываем цену:

 

panel_admin_new_element_5

 

Добавьте по аналогии еще пару-тройку процессоров.

 

Итак, мы подготовились к интеграции компонента «bitrix:catalog», т.е. обеспечили его необходимым информационным окружением. Перейдем непосредственно к интеграции.

 

 

Интеграция компонента…

 

Действуем по аналогии, как и с другими компонентами…

 

  1. Копируем подходящий нам шаблон компонента в папку с нашими шаблонами (www\bitrix\templates\имя_шаблона\components\bitrix\catalog). Я выбрал в качестве донора шаблон — «default», назовем наш пользовательский шаблон «myTemplate»
  2. Открываем страницу раздела «Processors» для редактирования, т.е. файл www\e-store\Processors\index.php
  3. Добавляем вызов компонента (в данном компоненте большое количество параметров, значение которых вы можете почитать в официальной документации  — ссылка)

     

    P.S. Добавленный вручную код в страницу по непонятным причинам не всегда работает, если это случилось, добавьте компонент через визуальный редактор («Контент» -> «Каталог» -> «Каталог»)

  4. Правим шаблон, данный компонент («bitrix:catalog») является комплексным, это значит, что он в своем шаблоне вызывает другие компоненты, причем при вызове он их конфигурирует на совместную работу. Шаблонов у комплексного компонента может быть несколько, вызывается тот или иной в зависимости от логики контроллера компонента («www\bitrix\components\bitrix\catalog\component.php»). Помимо своих шаблонов, комплексный компонент, также может иметь шаблоны простых компонентов, которых он взывает. Рассмотрим структуру пользовательского шаблона «myTemplate» (копия «.default») компонента «bitrix:catalog»:

    bitrix – (директория) «пространство имен», в которой содержаться шаблон вызываемых компонент

    catalog.compare.list – (директория), шаблон компонента «catalog.compare.list»
    catalog.compare.result –(директория), шаблон компонента «catalog.compare.result»
    catalog.element – (директория), шаблон компонента …
    catalog.filter — …
    catalog.section — …
    catalog.section.list — …
    catalog.top — …
    forum.topic.reviews — …

    section.php – (файл) шаблон компонента «каталог», отображает страницу с элементами раздела;
    sections.php – (файл) шаблон компонента «каталог», отображает страницу со списком разделов;
    compare.php — (файл) шаблон компонента «каталог», отображает страницу с таблицой сравнения.
    element.php – (файл) шаблон компонента «каталог», отображает страницу с детальной информацией;
    search.php – (файл) шаблон компонента «каталог», отображает страницу с поиском по каталогу.

     

    Сейчас компонент «каталог» в подразделе «Процессоры» раздела «Products» выглядит так:

    templeate_new_catalog

    За вывод данной части компонента отвечает шаблон www\bitrix\templates\имя_шаблона\components\bitrix\catalog\myTemplate\sections.php.

    В шаблоне «sections.php» происходит вызов трех компонентов:

    • bitrix:catalog.section.list – выводит список разделов инфоблока с указанным количеством элементов в каждом разделе.
    • bitrix:catalog.compare.list — выводит список сравниваемых элементов каталога в виде небольшой таблицы
    • bitrix:catalog.top – выводит элементы из всех разделов

    Вызываются данные компоненты опционально, т.е. могут использоваться, а могут и нет. Это зависит от параметров компонента «bitrix:catalog».

    В нашем случае (настройка при вызове «bitrix:catalog») используется только «bitrix:catalog.top», поэтому править будем шаблон данного компонента.

    Откроем файл: «www\bitrix\templates\имя_шаблона\components\bitrix\catalog\myTemplate\bitrix\catalog.top\.default\template.php», уберем все лишнее и добавим HTML код шаблона (той части шаблона, где выводиться содержимое каталога).

    У меня получилось следующее:

    В браузере это выглядит следующим образом:

    templeate_catalog_final

    Если мы нажмем на один из процессоров, то попадем на страницу с его детальным описанием. Сейчас эта страница выглядит так:

    templeate_new_element

    А в шаблоне-прототипе, страница с описанием товара выглядит так:

    templeate_element

    За вывод страницы с описанием товара в компоненте «bitrix:catalog», отвечает шаблон www\bitrix\templates\test\components\bitrix\catalog\myTemplate\element.php

    В данном шаблоне используются следующие компоненты:

    • bitrix:catalog.element — выводит детальную информацию по элементу каталога;
    • bitrix:forum.topic.reviews – выводит форму с отзывами к продукту;
    • sale.recommended.products – выводит «с этим товаром покупают»;
    • catalog.store.amount – показывает остаток на складе для данного товара .

    В нашем случае (настройки компонента «bitrix:catalog»), будет использоваться только компонент «bitrix:catalog.element», поэтому править будем шаблон данного компонента.
    Откроем файл www\bitrix\templates\test\components\bitrix\catalog\myTemplate\bitrix\catalog.element\.default\template.php, уберем все лишнее и добавим HTML код шаблона (той части шаблона, где выводиться описание одного товара).

    У меня получилось следующее:

     

    В браузере это выглядит следующим образом

    templeate_element_final

 

Сверху заголовок с названием товара, ниже слева изображение товара, справа список свойств (добавить свойства можно в разделе «Магазин») с ценой, ниже описание и кнопка добавить в корзину.

 

На этом интеграцию компонента «bitrix:catalog» можно завершить.




Буду признателен если вы поделитесь данным постом

Комментарии
  1. Цифровой пишет:

    Вроде бы это как раз то, что мне нужно. Буду пробовать. Ох тяжечко мне битрикс дается ((

  2. Цифровой пишет:

    «уберем все лишнее и добавим HTML код шаблона»

    Что убирать-то?



Ваш комментарий


Ответ в цифрах

 
© s-engineer.ru, 2012-2017 | Все права защищены