Создание каталога товаров (catalog)

Введение

В статье разберем как создать каталог на сайте на базе платформы Falcon Space.
Компонент каталог позволяет быстро поднять типовой каталог с использованием только MS SQL и верстки Bootstrap. 
 
Вид каталога:
        
 
 
 
Карточка товара: 
 
Корзина и заказ: 
             
 
 

Возможности каталога

 
Каталог на демо имеет следующие возможности: 
 

Адрес демо 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

Примечание: 

Построение URL для карточки товара

Адрес товара строится следующим образом  /catalog/[сatName-catID]/[catName=catID]/p/[prodName-prodID]

В начале адреса идет иерархия категорий, в которых находится товар. 

Параметр /p/ говорит системе, что это товар. 

После /p/ идет блок с идентификацией товара по prodID.

Примечание: 

Пример адреса товара: https://marketplace.web-automation.ru/catalog/spectekhnika-1012/pogruzchiki-1014/p/pogruzchik-honda-1155-1155

Управление бизнес-логикой и видом каталога

Управление логикой работы каталога осуществляется на странице /catSettings (в меню выбираем пункт "Компоненты", затем "Настройки каталога") (доступна системному администратору)

 

На данной странице вы можете: 

 

Атрибуты продуктов (фильтры)

Все возможные атрибуты продуктов лежат в as_cat_filters.
Атрибуты назначаются категории в таблице as_cat_categoryFilters, а продукты уже в свою очередь наследуют атрибуты всех родительских категорий.
Тип данных значений атрибута указывается в dataTypeID (строка, целое число, дробное число).
Заполнение атрибутов значениями для конкретного продукта идет в as_cat_productAttrs.

В этой таблице заполняется одна из трех колонок согласно установленному типу атрибута.

Значение Атрибута как выбор значения из списка (справочника)

Если на атрибуте заполнено поле sqlGetValues, значит он имеет конечное число установленных значений, и для каждого продукта будет выбор из списка одного из этих значений.
В sqlGetValues указана хранимая процедура для выбора списка значений атрибута.
Соответственно в БД необходимо создать дополнительные таблицы-справочники по таким атрибутам в виде as_cat_cust_{имяАтрибута} (id, name)
В as_cat_productAttrs тогда будет заполнена колонка intValue - ID записи из таблицы указанной в sqlGetValues.

Атрибуты как фильтры

Атрибуты продуктов должны также быть среди фильтров поиска.
Поле visibleInFilter определяет будет ли введен атрибут в перечень фильтров.

Есть следующие типы фильтров в каталоге:

Поле typeID определяет тип фильтра.
Если вариант отображения - ползунок, то поле defValue необходимо обязательно заполнить по следующему шаблону - {минимум,максимум,шаг}
Для фильтра select необходимо в начале добавить элемент Не выбрано.
Чтобы назначить каждой категории свой набор фильтров, нужно прописать связи в as_cat_categoryFilters

 

Атрибуты отображаемые на обложке продукта

Если на атрибуте заполнен признак showForProductInList, то этот атрибут будет выводиться сразу на обложке товара в режиме отображения товаров Список

Добавление продуктов в корзину

При нажатии на соответствующую иконку на продукте, он попадает в корзину к пользователю, в количестве указанном в поле рядом.

 

Таблица корзин ord_carts. Если пользователь не авторизован, то поле username в ней будет равно null.
В таблице ord_cartItems лежат позиции, которые были добавлены в корзину.

 

О таблице ord_cartTypes

В ней лежит настройка того, какая корзина работает на каталоге

 

В поле cartInfoFormat можно задать формат вывода виджета корзины справа сверху на сайте.

Оформление заказа

 

Форма с кодом cartOrder, т. е. можно посмотреть её хранимки, и соответственно есть возможность её видоизменить.
В SaveItem прописано создание заказа. Все заказы хранятся в ord_orders, и через таблицу корзины выходят на позиции заказа (они же позиции корзины).


Как сделать, чтобы оформлялся единый заказ?

Добавление продуктов в Избранное

Добавить продукт в Избранное может только авторизованный пользователь, нажав на соответствующую иконку на продукте.
Физически запись об избранном продукте добавляется в ord_favorites.

Адрес Избранного https://marketplace.web-automation.ru/favorites

Основные Хранимые процедуры каталога

Подготовка фильтров при поиске cat_preSearch (обычно ее не требуется менять)

На входе: 

На выходе:

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

На входе: 

На выходе: 

SELECT 1  Товары

SELECT 2 Настройки вывода 

SELECT 3 - Атрибуты товара, которые будут выводиться в поиске

SELECT 4 - Виды сортировок

SELECT 5 - Состояния фильтров. Работают, если установлен FilterStateEnabled = 1. На базе этих данных в фильтрах отображается сколько товаров есть по данному фильтру при текущей конфигурации выбранных фильтров. 

SELECT 6 - состояния категорий. Можно скрыть категории, а также установить количество у категории (выводится справа от категории). 

Настройка SEO параметров для поиска - cat_search_getSeoParameters.

На входе: 

На выходе: 

нет выходных SELECT

Получить детали для карточки товара - cat_getItem

На входе: 

На выходе: 

SELECT 1 Настройки вывода 

SELECT 2 Категории товара (иерархия)

SELECT 3 Атрибуты

SELECT 4 Предложения поставщиков

Настройка SEO параметров для карточки товара - cat_getItem_getSeoParameters

На входе: 

На выходе: 

нет выходных SELECT

Управлять этими процедурами можно на /catSettings

Панели товаров

На желаемой странице (например, на главной) можно вывести некую выборку продуктов из каталога
(например, новинки или наиболее популярные) в виде специальной панели.

Сниппет:

 <div class="as-cat-panel" data-code="new" data-type="’card|slider’" data-colclass="col-12 col-sm-6 col-md-6"></div>
Указаны тип сниппета, код панели, и часть экрана для расположения.

По коду сниппета создаем соответствующую ХП для настройки отображения панели и выбора продуктов в неё:
CREATE PROCEDURE [dbo].cat_new_panel
   @langID int,
   @username nvarchar(256)
AS
BEGIN

   select 'Новые товары' Title,
          'http://ya.ru' Link,
          'Это нижний HTML под панелью' BottomHtml,
          5 CacheMinutes,
          '' ItemMakeup,
          '' Msg,
          1 Result

   select top 8 '111х' Name,
                '222х' Link,

'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNMNkquBwADcQF5wZiBLwAAAABJRU5ErkJggg==' Img,

                123 Price,
                '444х' [Desc]
   from as_cat_products

END

В ItemMakeup можно вставлять кастомизированную верстку для элемента.

Работает 2 режима - слайдер и панель товаров. Режим задается через data-type для сниппета.

How to по каталогу (catalog)

Как убрать категорию из каталога

Необходимо в панели управления у категории поставить признак Отключено (isDisabled=true).

Как сделать кастомную верстку для каталога

Для этого в SELECT 2 в cat_search указываем CustomMakeup - эта разметка может принимать следующие параметры: 

По дефолту используется такая верстка (если она не указана в CustomMakeup):
<div class="row cat-catalogCont">
   <div class="col-12 col-sm-12 col-md-3 col-lg-2 cat-filtersBlock"> {catalogCats}
   {catalogFilters} </div>
   <div class="col-12 col-sm-12 col-md-9 col-lg-10"> {catalogViewButtons} {catalogTitle}
   {catalogSortPanel} {catalogItems} {catalogPaging} {catalogText} </div>
</div> 

Также можно указать кастомную верстку для элементов каталога  для обоих видов (плитка и панель).
Для этого указываем в SELECT 2 в cat_search параметры ListItemMakeup, PanelItemMakeup:

По умолчанию {attrs} выводится в 2 колонки. Это можно изменить если указать в SELECT 2 параметр AttrTemplateMakeup с нужной разметкой. По умолчанию он имеет такой вид:
<div class="col-6 col-sm-7 col-md-7 col-lg-3 cat-itemAttrName">
    {title}
</div>
<div class="col-6 col-sm-5 col-md-5 col-lg-9 cat-itemAttrValue">
    {value}
</div>
Аналогично для страницы 1 товара можно изменить дефолтовую разметку для атрибута в SELECT 1 параметр AttrTemplateMakeup в GetItem. По умолчанию: 
<div class="col-md-8 col-sm-7 col-6">{title}</div>
<div class="col-md-4 col-sm-5 col-6">{value}</div>

Примечание: указывается в SELECT 2 в cat_search такую разметку для CustomMakeup и других разметок, чтобы отдельно редактировать HTML блок.
select dbo.as_htmlBlock(''catalogMakeup'', 0) CustomMakeup,
dbo.as_htmlBlock(''catalogListItemMakeup'', 0) ListItemMakeup,
dbo.as_htmlBlock(''catalogPanelItemMakeup'', 0) PanelItemMakeup

В GetItem:
select dbo.as_htmlBlock('catalogItemMakeup', @langID) CustomMakeup

Как кастомизировать страницу товара

Используем для этого кастомизированную верстку в параметре CustomMakeup в процедуре cat_GetItem

Параметры:

По умолчанию верстка имеет следующий вид:

<div class="row">
   <div class="col-12 col-md-12 col-lg-5"> {images} </div>
   <div class="col-12 col-md-12 col-lg-7"> {price} {name} {offers} {attrs}
         <div class="cat-shortDesc my-4"> {shortDesc} </div>
   </div>
</div>

Как сделать так, чтобы каталог работал по номенклатуре 1 к 1 с товаром поставщика

По умолчанию каталог работает как единая номенклатура. Для каждой позиции показываются предложения поставщиков на странице позиции (товара).
При этом кнопки Добавить товар нет на странице поиска товаров, и цены указаны как "От…".

Чтобы сделать представление 1 к 1 для позиций и предложений поставщиков (т.е. каждая позиция - это 1 предложение поставщика),
необходимо прописать в Процедурах Search и GetItem параметр настройки OneToOneProduct=1

Как скрыть цены в каталоге

Для этого в запросе укажите 0 для цен.

Как установить вид, который по умолчанию открывается в каталоге

По умолчанию ставится вид Плитка.
Укажите list или panel в DefaultView в SELECT 2 (процедура cat-search)

Как управлять внешним видом и расположением элементов каталога

Вывод элемента атрибута вы можете настроить через SQL (т.е. что выводится).
Расположение элемента вы можете задать через стили с position:absolute относительно элемента в каталоге.

Как сделать так, чтобы фильтрация происходила сразу при изменении одиночных элементов фильтра

Для body в Getlayout необходимо добавить класс instantCatalogFilter.

Как добавить микроразметку, стили или скрипты в каталог.

Используйте параметры headSection, bodyBottomSection в SELECT 2 в cat_search и аналогичные параметры в  cat_getItem.
Вы можете туда вставлять коды OpenGraph и JSON LD описание страниц.

Как настроить кеширование в каталоге

Для этого установите в WebConfig в разделе AppSettings параметр catalogCacheMinutes. Данный параметр указывает сколько минут будет кешироваться результат выдачи в каталоге
(кешируются все запросы по каталогу).

<add key="catalogCacheMinutes" value="60"></add>

Где хранятся картинки товаров

Для хранения картинок используется подсистема менеджера ресурсов с кодом product.

Коллбеки на странице корзины

Вы можете использовать коллбеки на странице корзины: при загрузке скрипта корзины (init - после as.cart.init), после обновления суммы для поставщика (updateTotal), после обновления общей суммы (updateAllTotal). 

as.cartcallbacks = as.cartcallbacks || {};
as.cartcallbacks["init"] = function(total, countTotal){

}
as.cartcallbacks["updateTotal"] = function(supplierID, noUpdateTotal){

}
as.cartcallbacks["updateAllTotal"] = function(total, countTotal){

}

Коллбеки для добавления в корзину и добавление в избранное

Можно заменить обработку результата операции по умолчанию

Добавление в избранное: 

as.cartAddToFavCallback  = function (data,btn){
         // так выглядит реализация по умолчанию 
         if (data.result) {
                    if (compare) {
                        // favUrl - old variant
                        as.sys.bootstrapAlert(as.lang("cart.addedToCompare", "Добавлено к Сравнению") + "
" + as.lang("cart.gotoCompare", "Перейти к сравнению") + "", { type: "success" });
                    } else {
                        as.sys.bootstrapAlert(as.lang("cart.addedToFav", "Добавлено в Избранное") + "
" + as.lang("cart.gotoFav", "Перейти в Избранное") + "", { type: "success" });
                    }
                } else {
                    as.sys.bootstrapAlert(data.msg || as.lang("cart.favAddError", "Ошибка при добавлении в Избранное"), { delay: 20000, type: "danger" });
                }
}

Добавление в корзину: 

as.cartAddToCartCallback = function(data, btn){
                    var msg = data.msg || as.lang("cart.addedToCartMessage", "");
                    msg = msg || (as.lang("cart.addedToCart", "Добавлено в корзину") + "
" + as.lang("cart.gotoCart", "Перейти в корзину") + "");
                    as.sys.bootstrapAlert(msg, { type: "success" });
}

Страница каталога падает, если выбрать 20+ фильтров

Это происходит из-за того, что система имеет ограничение по количеству символов в URL.
Для решения этой проблемы необходимо увеличить количество возможных символов в URL в web.config в разделе

<httpruntime maxurllength="1024" relaxedurltofilesystemmapping="true"></httpruntime>

Подробнее: https://stackoverflow.com/questions/8245843/how-do-i-increase-the-maxurllength-property-in-the-config-in-asp-net-mvc-3

Как полностью убрать каталог /catalog с сайта 

Для этого укажите настройку редиректа в /settings с кодом CatalogRedirect (например, /)

Как сделать так, чтобы вложенные категории наследовали установленные фильтры

Для этого укажите настройку  с кодом catalogAppendFiltersToCatUrl = 1.

Как получить канонический адрес некоторой страницы в каталоге

Если это страница товара, то адрес хранится в поле url в as_cat_products (либо использовать функцию [cat_getProductURL](productID)). 

Если это страница категории, то поле хранится в поле url в as_cat_categories (либо использовать функцию dbo.cat_getCatURL(catID)).

Если необходим адрес списка товаров с некоторыми фильтрами, то используйте функцию dbo.cat_getCatalogURL. Пример использования: 

declare @isCanonical bit = 1
declare @page int = 5
declare @sort nvarchar(20) = 'name'
declare @filters ExtendedDictionaryParameter  -- from as_cat_filters

insert into @filters ([Key], Value) 
select 'sostoyanie', 'Новое'
union 
select 'inStock', '1'

select dbo.[cat_getCatalogURL](1569, @filters, @sort, @page,  @isCanonical)

Если isCanonical=1, то в адресе не будет участвовать номер страницы @page и сортировка @sort. 

Страница-источник на сайте falconspace.ru