Создание каталога товаров (catalog)
Введение
В статье разберем как создать каталог с фильтрами на базе платформы Falcon Space.
Компонент каталог позволяет быстро поднять типовой каталог с использованием только MS SQL и верстки Bootstrap.
Как выглядит каталог
Вид каталога (страница категории):
Альтернативный вид товаров в категории (панели):
Карточка товара:
Корзина и заказ:
Возможности каталога
Каталог в решении Marketplace имеет следующие возможности:
- Вложенные категории (без ограничений по вложенности).
- Фильтры для категорий. Фильтры наследуются от родительских категорий.
- Кастомизация вида каталога, элемента каталога и карточки каталога.
- Человекопонятный URL (ЧПУ).
- Вывод тегов выбранных фильтров.
- Гибкие настройки под SEO - h1, title, keywords, description, микроразметка. Все генерируется через процедуры SQL с учетом всех входящих параметров (выбранная категория, фильтры).
- Два вида каталога - плитка и панели.
- Адаптивность под мобильные устройства.
- Мультикорзина. Учет различных поставщиков. Отдельное оформление заказов для разных поставщиков.
- Избранное.
- Кеширование выборки каталога. Возможность настроить длительность кеширования.
- Форма заказа с возможностью адаптации под свои потребности.
- Форма быстрого заказа.
- Возможность сортировки по разным параметрам.
- Возможность менять бизнес-логику выборки через SQL.
- Рейтинг товара, количество заказов, отзывы.
- Страница поставщика, рейтинг поставщика.
- Характеристики товаров.
- Кастомизация при заказе - выбор определенных характеристик.
- Вывод остатков.
Адрес демо https://marketplace.web-automation.ru/catalog
Структура базы данных под каталог

Основная номенклатура товаров хранится в as_cat_products. Товары могут находиться в различных категориях (as_cat_categories). У категории есть свои атрибуты (они представлены в каталоге фильтрами) - as_cat_filters. Фильтры могут быть различных типов - текстовый, галочки, выбор, переключатель, диапазон (as_cat_filterTypes).
У товаров есть атрибуты (as_cat_productAttrs) и они соответствуют атрибутам категории (as_cat_categoryFilters). У каждого товарного предложения поставщика есть набор кастомизируемых атрибутов - майка синяя, красная, XL, S (as_cat_supplierProductAttrs).
Каждый поставщик (as_cat_suppliers) связан с определенными категориями каталога (as_cat_supplierCategories) и размещает в каталоге свои товары (as_cat_supplierProducts), связанные с единой номенклатурой. Поставщик использует общую номенклатуру и только указывает свои остатки и стоимость для определенной конфигурации атрибутов товара.
Корзина хранится в ord_carts, а заказы - в ord_orders.
Построение адресов URL каталога
Построение URL для поиска
Адрес поиска строится следующим образом /catalog/[catName-catID]/[catName-catID]/f/[filterCode-val1,val2...]/[filterCode-val1,val2...]
Блоки с категориями показывают вложенность категорий.
Параметр /f/ говорит системе, что дальше в адресе идет блок фильтров (а перед этим шли категории). Значения фильтров указываются через запятую.
Пример адреса для поиска:
https://marketplace.web-automation.ru/catalog/spectekhnika-1012/pogruzchiki-1014/f/gruzopod_emnost-до%20300%20кг,до%20400%20кг/sostoyanie-Б-у
https://marketplace.web-automation.ru/catalog/spectekhnika-1012/ekskavatory-1015
Примечание:
- Нельзя кардинально поменять адресацию каталога. Движок использует опорные элементы для разбора адреса (/catalog, /p /f, фильтры через запятую).
- Нельзя использовать в выводимых значениях фильтров множественного выбора (например checks) символ "," (она используется как разделитель значений при обработке в процедуре Search). Заменяйте его на "." или другой символ.
- Если в фильтрах приходят спецсимволы (например, /\*), то они кодируются в URL через "-s{AsciiCode}-". Далее на стороне сервера они восстанавливаются и выводятся в первоначальном виде на странице. Это мера необходима из-за того, что не все спецсимволы можно вставлять в URL.
Построение URL для карточки товара
Адрес товара строится следующим образом /catalog/[сatName-catID]/[catName=catID]/p/[prodName-prodID]
В начале адреса идет иерархия категорий, в которых находится товар.
Параметр /p/ говорит системе, что это товар (а не вывод товаров в какой-то категории).
После /p/ идет блок с идентификацией товара по prodID (as_cat_products.id).
Примечание:
- адрес товара хранится в as_cat_products.url и задается при создании товара.
- можно убрать из адреса карточки товара элементы категорий, тогда адрес будет короче. В этом случае надо внести изменения в функцию dbo.cat_getProductURL и обновить поле URL у всех товаров.
Пример адреса товара: https://marketplace.web-automation.ru/catalog/spectekhnika-1012/pogruzchiki-1014/p/pogruzchik-honda-1155-1155
Управление бизнес-логикой и видом каталога
Управление логикой работы каталога осуществляется на странице /catsettings (доступна системному администратору)

На данной странице вы можете:
- Управлять категориями, атрибутами, товарами
- Делать импорт/экспорт через Excel
- Управлять процедурами для страницы поиска - search, preSearch и getSeoParameters
- Управлять процедурами для страницы карточки товара - getItem, getSeoParameters
- Управлять блоками разметки для страниц поиска и карточки товара
- Также на этой странице вы можете изменить бизнес-логику работы с корзиной (добавление в корзину, идентификация/создание корзины, получение корзины).
Атрибуты продуктов (фильтры)
Все возможные атрибуты продуктов лежат в as_cat_filters.
Атрибуты назначаются категории в таблице as_cat_categoryFilters, а продукты уже в свою очередь наследуют атрибуты всех родительских категорий.
Тип данных значений атрибута указывается в dataTypeID (строка, целое число, дробное число).
Заполнение атрибутов значениями для конкретного продукта идет в as_cat_productAttrs.
В этой таблице заполняется одна из трех колонок согласно установленному типу атрибута.
Значение Атрибута как выбор значения из списка (справочника)
Если на атрибуте заполнено поле sqlGetValues, значит он имеет конечное число установленных значений, и для каждого продукта будет выбор из списка одного из этих значений. В sqlGetValues указана хранимая процедура для выбора списка значений атрибута. Однако, если в системе реализована процедура cat_filter_getFilter, то все заполнения значений фильтров типа списки будет выполняться через нее.
Соответственно в БД необходимо создать дополнительные таблицы-справочники по таким атрибутам в виде as_cat_cust_{имяАтрибута} (id, name).
В as_cat_productAttrs тогда будет заполнена колонка intValue - ID записи из таблицы указанной в sqlGetValues.
Атрибуты как фильтры
Атрибуты продуктов должны также быть среди фильтров поиска.
Поле visibleInFilter определяет будет ли введен атрибут в перечень фильтров.
Есть следующие типы фильтров в каталоге:
- checkbuttons - кнопки для множественного выбора
- checks - галочки
- color - выбор цвета
- radio - радио-переключатели
- radiobuttons - кнопки для одиночного выбора
- range - выбор диапазона
- select, select2 - выбор из списка с поиском
- selectmultiple, select2multiple - множественный выбор из списка с поиском
- switch - переключатель да-нет
- text - строка для ввода
Поле typeID определяет тип фильтра.
Если вариант отображения - ползунок, то поле defValue необходимо обязательно заполнить по следующему шаблону - {минимум,максимум,шаг}
Для фильтра select необходимо в начале добавить элемент Не выбрано.
Чтобы назначить каждой категории свой набор фильтров, нужно прописать связи в as_cat_categoryFilters
Атрибуты отображаемые на обложке продукта
Если на атрибуте заполнен признак showForProductInList, то этот атрибут будет выводиться сразу на обложке товара в режиме отображения товаров Список
Добавление продуктов в корзину
При нажатии на соответствующую иконку на продукте, он попадает в корзину к пользователю, в количестве указанном в поле рядом.
Таблица корзин ord_carts. Если пользователь не авторизован, то поле username в ней будет равно null.
В таблице ord_cartItems лежат позиции, которые были добавлены в корзину.
О таблице ord_cartTypes
В ней лежит настройка того, какая корзина работает на каталоге
В поле cartInfoFormat можно задать формат вывода виджета корзины справа сверху на сайте.
Оформление заказа
Форма с кодом cartOrder, т. е. можно посмотреть её хранимки, и соответственно есть возможность её видоизменить.
В SaveItem прописано создание заказа. Все заказы хранятся в ord_orders, и через таблицу корзины выходят на позиции заказа (они же позиции корзины).

Как сделать, чтобы оформлялся единый заказ?
- Когда оформленный заказ идёт напрямую к поставщику, то кнопка Оформить заказ будет выставлена напротив каждого производителя в Корзине. В этом случае
- указываем ord_cartTypes.isSingleOrder = 0
- и в cartOrder будет передаваться itemID = ’{cartGuid}_{supplierID}’
- Чтобы сделать единую кнопку Оформить заказ в Корзине, например когда заказ должен уйти на Склад, то есть независимо от того у скольких поставщиков мы выбрали товар, то необходимо
- указать в ord_cartTypes.isSingleOrder = 1
- и в cartOrder будет передаваться itemID = ’{cartGuid}_0’
Добавление продуктов в Избранное
Добавить продукт в Избранное может только авторизованный пользователь, нажав на соответствующую иконку на продукте.
Физически запись об избранном продукте добавляется в ord_favorites.
Адрес Избранного /favorites
Хранимые процедуры каталога
Подготовка фильтров при поиске cat_preSearch (обычно ее не требуется менять)
На входе:
- @filters - список всех фильтров
- @cats - путь категорий,
- @username - текущий пользователь,
- @langID - язык интерфейса
На выходе:
SELECT 1 - выдает список категорий id, code, name, level, parentID, icon
SELECT 2 - выдает информацию о фильтрах id, title, tooltip, code, defValue, sqlGetValues, cacheMinutes, typeCode, commaSelected
SELECT 3 - выдает информацию о вложенных категориях id, code, name, level, parentID, icon.
Поиск по каталогу - cat_search
На входе:
- @filters ExtendedDictionaryParameter READONLY, - коллекция фильтров с Key, Value
- @selectedCatID int, - текущая выбранная категория
- @sort nvarchar(24), - выбранная сортировка
- @page int, - текущая страница
- @username nvarchar(32), - текущий пользователь (если зарегистрирован)
- @langID int = 0 - язык интерфейса пользователя
- @parameters ExtendedDictionaryParameter readonly - опционально, содержит langID, falconGuid, url (только часть после /catalog/) и другие параметры в виде Key,Value2
На выходе:
SELECT 1 Товары
- ID - ID товара
- Img - URL картинки товара
- Name - наименование товара
- ShortDesc - краткое описание
- SupplierCount - сколько поставщиков предлагают товар
- Price - стоимость
- Url - URL товара
- Поля field1, field2, field3, field4, field5 - любые строковые поля, которые можно использовать в гибкой разметке в виде вставок {field1}... {field5}
SELECT 2 Настройки вывода
- AttrTemplateMakeup - разметка для вывода атрибута товара в разметке List
- BannerImage - картинка баннера URL
- BannerText - текст к баннеру
- BodyBottomSection - разметка перед
- CustomMakeup - кастомная разметка основного каталога
- DefaultView - какой вид грузить по умолчанию? (list, panel)
- EmptyText - сообщение, что нет товаров
- FilterStateEnabled - если 1, то у фильтров будут проставляться доступность/недоступность фильтров и показываться количество товаров.
- HeadSection - разметка в (например, для счетчиков или микроразметки)
- itemsClass, itemClass - CSS классы для контейнеров всего каталога и 1 элемента (иногда требуется установить для этих блоков свои классы, например row).
- ListItemMakeup - кастомная разметка элемента в каталоге в виде
- ListPanelItemMakeup - кастомная разметка элемента в каталоге в виде Panel
- MetaDescription - метатег Description
- MetaKeywords - метатег Keywords
- MetaTitle - тег Title в Head
- OneToOneProduct - если 1, то режим работы без номенклатуры (каждое предложение от 1 поставщика)
- Page - текущая страница
- PageSize - размер пагинации
- RedirectUrl, RedirectStatusCode - если указан адрес, то страница сделает редирект с указанным статусом (по умолчанию 301)
- RightBreadcrumb - разметка для вставки в хлебные крошки справа (вспомогательные ссылки)
- RightBreadcrumbDropdownMakeup - некая HTML разметка всплывающей панели в хлебных крошках справа
- Sort - выбранная сортировка
- SortView - тип вывода элемента сортировки (по умолчанию кнопки). Если указать select - то выбор будет в виде выпадающего списка
- Text - текст описания к странице
- Title - заголовок страницы h1
- Total - сколько всего найдено товаров
SELECT 3 - Атрибуты товара, которые будут выводиться в поиске
- AttrCode - код атрибута
- AttrID - ID атрибута
- CacheMinutes - как долго минут кешируется список возможных вариантов из хранимой процедуры. Если 0, то не кешируется.
- Category - категория атрибута
- CategoryOrd - порядок категории
- DataType - тип данных, которые хранит атрибут
- ProductID - ID товара к которому привязан атрибут
- SqlGetValues - хранимая процедура, которая дает возможные варианты для списковых параметров
- Title - название атрибута
- TypeCode - тип атрибута
- Value - значение (если несколько, то через запятую)
SELECT 4 - Виды сортировок
- Key - код сортировки
- Value - название на странице
SELECT 5 - Состояния фильтров. Работают, если установлен FilterStateEnabled = 1. На базе этих данных в фильтрах отображается сколько товаров есть по данному фильтру при текущей конфигурации выбранных фильтров.
- Count - количество найденных товаров для данного значения данного фильтра.
- FilterCode - код фильтра
- Value - значение фильтра
SELECT 6 - состояния категорий. Можно скрыть категории, а также установить количество у категории (выводится справа от категории).
- CatCode - код категории
- Count - количество.
- State - если равно hide, то категория скрывается.
Настройка SEO параметров для поиска - cat_search_getSeoParameters.
На входе:
- bannerImage - картинка баннера. Выходной параметр
- bannerText - текст при баннере. Выходной параметр
- bodyBottomSection - разметка перед. Выходной параметр
- filters - выбранные фильтры
- headSection - разметка в. Выходной параметр
- langID - выбранный язык
- metaDescription - метатег Description. Выходной параметр
- metaKeywords - метатег Keywords. Выходной параметр
- metaTitle - тег title. Выходной параметр
- preBreadcrumbs - что поставить вперед в хлебные крошки перед структурой каталога в форме name||url. Выходной параметр
- selectedCatID - текущая категория
- title - заголовок h1. Выходной параметр
- username - текущий пользователь
На выходе:
нет выходных SELECT
Получить детали для карточки товара - cat_getItem
На входе:
- itemID - ID товара
- langID - выбранный язык
- username - текущий пользователь
- parameters ExtendedDictionaryParameter readonly - опционально, содержит langID, falconGuid, url (только часть после /list/{code}/) и другие параметры в виде Key,Value2
На выходе:
SELECT 1 Настройки вывода
- AttrTemplateMakeup - кастом разметка для вывода списка атрибутов товара
- BodyBottomSection - секция разметки перед закрывающим тегом body
- CustomMakeup - кастом разметка каталога
- HeadSection - секция разметки в head
- ID - ID товара
- MetaDescription - мета тег Description
- MetaKeywords - мета тег Keywords
- MetaTitle - мета тег Title
- Name - наименование
- OneToOneProduct - если 1, то включается режим Без номенклатуры
- PreBreadcrumbs - первый элемент в хлебных крошках
- Price - стоимость
- Rating - рейтинг товара
- RedirectUrl, RedirectStatusCode - если указан адрес, то страница сделает редирект с указанным статусом (по умолчанию 301)
- RightBreadcrumb - разметка для вставки в хлебные крошки справа (вспомогательные ссылки)
- RightBreadcrumbDropdownMakeup - некая HTML разметка всплывающей панели в хлебных крошках справа
- ShortDesc - краткое описание
- ValutaSigh - обозначение валюты
- Поля field1, field2, field3, field4, field5 - любые строковые поля, которые можно использовать в гибкой разметке в виде вставок {field1}... {field5}
SELECT 2 Категории товара (иерархия)
- Code - код категории
- Icon - Font Awesome иконка
- ID - ID категории
- Level - уровень вложенности от корня
- Name - название
- Url - URL категории на сайте
SELECT 3 Атрибуты
- AttrID - ID атрибута
- Category - категория (для группировки вывода атрибутов)
- CategoryOrd - Порядок категории
- DataType - тип данных фильтра
- TypeCode - тип атрибута
- Title - название атрибута
- Value - Значение
SELECT 4 Предложения поставщиков
- Price - стоимость
- SupplierLink - ссылка на страницу поставщика
- SupplierName - наименование поставщика
- SupplierProductID - ID предложения
Настройка SEO параметров для карточки товара - cat_getItem_getSeoParameters
На входе:
- bodyBottomSection - разметка перед. Выходной параметр
- headSection - разметка в. Выходной параметр
- itemID - ID товара
- langID - выбранный язык
- metaDescription - метатег Description. Выходной параметр
- metaKeywords - метатег Keywords. Выходной параметр
- metaTitle - тег title. Выходной параметр
- parameters - дополнительные системные параметры (например, falconGuid)
- preBreadcrumbs - что поставить вперед в хлебные крошки перед структурой каталога в форме name||url. Выходной параметр
- title - заголовок h1. Выходной параметр
- username - текущий пользователь
На выходе:
нет выходных SELECT
Управлять этими процедурами можно на /catSettings