Руководства
Введение в веб-платформу Falcon Space. C чего начать?Мануал для начинающего разработчика Falcon SpaceВидео о создании сайтов на Falcon SpaceВопросы и ответы для тех, кто начал разрабатывать на Falcon SpaceТиповые ситуации для админа-разработчика в панели управления Как создать таблицу на сайте по шагамКак создать форму на сайте по шагамКак создать дашборд в личном кабинете пользователяПример создания системы по учету Кадры (HR) на сайтеКак улучшить свой код - заметки по ревизии кодаКак сделать аналитический отчет или таблицу на сайтеПодробное описание процесса создания формы Обратная связьСоздание системы уведомлений из внешних источников (через API)Как отслеживать историю действий пользователя или историю событий по объекту системыКак сделать отслеживание посещений сайта конкретными людьми?Как сделать перевод сайта на другой язык для нетехнического специалистаКак сделать функционал оценки полезности материалаСоздание из под editor структуры личных кабинетов (роли, страницы)Улучшение адаптивности страниц под мобильные устройстваСоблюдение порядка в проекте в процессе сопровождения сайтаКак считать показатели год-к-году (YoY) в отчете по периодамКак добирать данные по объекту из внешних источников по API
Основа Falcon SpaceОсновные компонентыВозможностиКоммуникация пользователейДизайн, стилизация, юзабилити
Гид по стилям Falcon SpaceРуководство по юзабилити сайтов на Falcon SpaceЭлементы стилизации в разметке страниц кабинетов на Falcon SpaceУправление темами сайта. Как создать новую тему дизайна сайтаКак внедрять готовую верстку в страницуКак внедрить форму настроек внешнего вида сайтаГорячие клавиши Falcon SpaceСоздание своей темы для сайтаОграничения по изменению дизайнаКак сделать дизайн сайта со скругленными элементами (или без скруглений)Как сделать свою верхнюю полоску сайта (customHeader)Как внедрить новый шрифтКак через CSS управлять стилями конкретных страницКак показать элемент увеличенным при наведении (например ячейка таблицы)Изменение стилизации через CSSКак поменять столбцы местами на смартфоне (order-1 order-md-2)Как сделать анимацию иконокАнимация элементов. Как работать с анимациейДобавление анимацииУправление анимацией для форм, таблицКастомные CSS файлы для страницыПанели с тенью и со скруглением Как внедрить свой CSS на каждой странице порталаКак сделать основное меню горизонтальнымКак убрать все тени и сделать дизайн плоскимКастом разметка верхней панели (TopMakeup)Интерфейс кабинета - это не методы репозитория CRUD!Как сделать липкую панель сверху страницыКак сделать основное меню белымВывод справа на странице float панелиКак поменять степень затемнения фона у диалогового окнаУправление иконкой в окне alert справа вверху окнаКак стилизовать иконкуВывод на экран денежных сумм (отображение рублей, валюты) - as-moneyКак увеличить картинку на страницеВизуализация воронки на основе данныхКак сделать модальное окно определенной шириныПанели показа подсказок (для базовых инструкций по странице)Как сделать левое меню по умолчанию свернутым?
Лендинги
Работа с лендингами (lands)Как создать новый лендинг?Как максимально быстро создать лендинг на базе Falcon SpaceКак внедрить лендинг со своим шаблоном и стилямиКак создать сайт полностью на лендингах?Как устроен механизм лендингов внутриКак переместить лендинг на главную страницу (или на любую другую)Как сделать набор типовых лендингов (например, карточки товаров)?Как сделать копию лендинга с другим адресом или перенести лендинг на другой сайтКак использовать много раз одну секцию в разных лендахКак отключить секцию лендинга или менять их порядок на лендингеКак задать высоту/подложку секции лендингаКак для ленда подключить скрипты или CSSКак прописать SEO параметры для лендаКак создать свой шаблон новой секции лендинга?Как редактировать секцию лендингаГде посмотреть список лендингов?Как сделать меню лендинга или меню сайта на лендахКак сделать подстановочными фавикон, seo title у лендингаКак сделать так, чтобы PWA работал для лендингов
Универсальный APIИнтеграции
Подключение к удаленным серверам SQL Server через Linked ServerZapier интеграция на платформе Falcon SpaceПрием платежей через Яндекс.КассуИнтеграция с Робокассой (платежный шлюз)Пополнение средств через Yookassa (Юкасса)Прием платежей на сайте через CloudPaymentsИнтеграция с платежным шлюзом LifePayУведомление от ТБанка по операциям с расчетным счетомИнтернет-эквайринг Тинькоф БанкИнтеграция API DaData.ru подсказки по адресамИнтеграция коллтрекинга МАНГО ОФИС (режим Площадка)Интеграция API Курсы валют Центрального Банка РФИнтеграция API Почта РФИнтеграция API Служба доставки СДЭК (CDEK)Интеграция API Служба доставки Деловые линииИнтеграция API IpGeoBase Город по IP-адресуИнтеграция API DaData.ru Город по IP-адресуКак вычислить расстояние между 2 геоточками через Google MapsКак сделать интеграцию с Мой СкладКак сделать вебхук для передачи данных с Тильды на Falcon SpaceСканирование штрихкодов и QR кодов через камеру смартфонаПолучение данных контрагента по ИННВнедрение подсказок dadata на сайтВывод точек на карте Яндекс. Интеграция с Яндекс КартыИнтеграция с телефонией Zadarma.comПолучение данных о контрагенте - интеграция ЗаЧестныйБизнесИнтеграция с AMO CRMИмпорт контактов в CRM из Google КонтактыВход/регистрация через ВКонтакте(vk.com)Интеграция CRM с онлайн чатом на сайте (Replain)Как связать yandex metrika clientID с пользователем сайта?Как сделать обработку входящей почты (создание клиента в CRM из Email)Интеграция сайта с ChatGPT (openAI)Интеграция с Яндекс МетрикаИнтеграция с Youtube. Получение роликов каналаИнтеграция с Ozon, Wildberries - извлечение статистикиИнтеграция с API Яндекс Вебмастер
КаталогиНавигацияДокументыДополнительные компонентыПродвижение, SEOСистемные моменты
Отслеживание изменений хранимых процедур и страниц (logChanges)Логирование изменений объектов на примере хранимых процедурРабота с редактором кода в личном кабинете разработчикаЛогирование событий в приложении (trace)Действия в браузере actions JSONКак быстро перенести решение (таблицы, формы, страницы) на другую базу?Настройка диалоговых окон и alert окошекМелкие удобства для разработчика в личном кабинетеКак отследить и ограничить большое количество однородных запросов на сайтеИзменение процедуры поиска, процедуры общих элементов Layout, процедуры периодического запускаКак изменить длительность показа сообщенийФорма обратной связи по ошибкам, предложениям suggestionКак разграничивать права на уровне бизнес-логики хранимых процедурБезопасная обработка данных и проверка доступа в хранимых процедурахИспользование типовой разметки в виде сниппетов для решения различных задачКак логировать клики на определенных элементах в системеОбработка старых браузеров (сообщение об устаревшем браузере)Безопасность. Как скрыть некоторые заголовки (http headers) в запросахОтображение сообщения об offline (Нет сети)Рабочее место разработчика через терминалОбновляемые метки времени в сообщениях на сайтеПодсказка по интерфейсам хранимых процедур компонентовЗащита от CSRF атак через дополнительный токен в формахДополнительные параметры в @parameters (во многих хранимых процедурах)Как логировать события в Falcon в другую базу (чтобы ограничить рост основной базы данных)Сообщение об использовании куки (Cookies)Как искать код некоего компонента (таблицы, формы и т.д.) на страницеКак сделать так, чтобы почта отправлялась асинхронно без задержекРабота со сниппетами кодаУниверсальная кнопка действия as_submitРежим показа таблицы/формы в alert окнеРеализация системы анализа IP посетителей
Системное администрированиеHOWTO
Как сделать отдельный универсальный поискМодальная ссылка (as-modal)Как идентифицировать анонимного пользователя (по куки)?Дашборды. Как вызвать коллбек после загрузки дашбордаКак вынести правила редиректа в отдельный файл configСтраницы. Как сделать редирект на другую страницу при загрузкеСтраницы. Как изменить текст на главнойСтраницы. Как использовать дополнительные параметры на страницеСтраницы. Как выводить списковые данные в теле страницы (repeater)Страницы. Настройки страницы для формирования главного менюСтраницы. Мне нужен в URL параметр itemID, но там передается из-за сущностей InstanceIDСтраницы. Как сделать мастер описания функционала страницыКак добавить событие в календарь GoogleКак сделать кнопку определенного действияКак сделать горячие клавиши для событий (нажатие кнопки)Как показывать баланс пользователя вверху кабинета?Где взять фото пользователяКак сделать поддомены с разными языками для сайтаКак управлять страницей “404 Страница не найдена”Отслеживание всех действий пользователя в системеКак выводить денежные данныеКак дать возможность некоторым ролям вводить html в формах?Что делать если открытая вкладка (tab) сбрасывается при перезагрузке страницы?Как реализовать создание периодического отчета на почтуПопап (popup) окна - показ модальной формы по событию или таймаутуКак быстро просматривать типовые отчеты с возможностью редактирования SQLКак максимизировать показатели Google PageSpeed для сайта на Falcon SpaceКак реализовать окно уведомления об использовании куки (cookies)Вывод на странице штрихкода (barcode) и QR кодаКак в тексте сделать ссылки кликабельнымиКак внедрить на сайте автоопределение города с возможностью выбораКак внедрить оглавление в текстКак вставить универсальный поиск в любое место страницыКак определить координаты lat lng пользователя в текущий моментКак сделать сортировку дерева с Drag-and-DropКак обновить часть страницы по клику на кнопкеЗагрузка дашборда по ссылке as-dashboard-linkКак запретить копировать текст с сайта. Как добавлять ссылку копирайта в текст при копировании с сайтаКак изменить шаблоны хранимых процедур для Формы, Таблицы и др.Определение местоположения пользователя по IP через API (as-ip)Форма Нашли ошибку по Ctrl+EnterКак определить откуда пришел пользователь на сайт? Фиксация источника посещения пользователем сайтаКак сделать ссылку, которая скроллит к элементу на страницеКак показать/скрыть область на странице по ссылке - as-collapseКак сделать обновление интрефейса у другого пользователя по некоему событию
Таблицы
Как сделать таблицу в модальном окне (открывается в диалоговом окне)Как реализовать подтаблицу (вложенная таблица), подформу в таблицеКак связать 2 таблицы Загрузка таблицы по ссылкеКак связать таблицу и редактирование сущности (зависимая страница)Как использовать комментарии в таблицахКак добавить в фильтре значение Не выбрано со значениемКак установить ширину колонки в таблице Как добавить диапазон даты или чисел (слайдер) в фильтрКак сделать операции только для некоторых строкКак делать различный набор столбцов одной таблицы для разных ролейКак убрать показ количества строк результата в заголовке таблицы? Как сделать сортировку в таблицеКак сделать Editable для галочки (Да/Нет) в AS CRUDКак редактировать колонку с датойКак скрыть строчные операции в таблице для определенных строкКак добавить коллбек после загрузки таблицыОтображение таблиц на смартфонеКак работать с галочками в таблицеЧастые ошибки при настройке таблицы (почему не работает таблица)Как обновить подтаблицу после выполнения некой операцииКак обрабатывать групповые операции через модальную формуКак создать предустановленные фильтры для таблицыКак сделать сворачивание таблицы (collapse table)Как убрать старые dict процедуры в формах и таблицахКак сделать фильтр с деревом галочекКак отключить сохранение состояния таблицы (фильтры)Как сделать ссылку на всю строку таблицыКак передать через URL значение фильтраКак сделать обрезание ячеек таблицыСортировка строк в таблицеСоздание сущности с учетом значений фильтровОптимизация запроса SQL - извлечение данных для таблицыКастомная разметка в таблицеРежим кастом вывода через JS (custom)Как настроить дополнительные шапку и подвал у таблицыКак сделать зависимые фильтры в таблицеИмпорт данных в формате файлов txt, csv через таблицуКак гибко управлять видимостью столбцов таблицыКак сделать раскрытие подстроки через любую ссылкуРежим быстрой фильтрации строк без обращения на серверВыпадающая панель рядом с названием таблицы dropdownPanelКак убрать при загрузке установку фокуса ввода на фильтр (data-nofocus)?Как сделать аналитику по периодам (таблица с интервалами дат)Кастомизация вида операций таблицыСтилизация фильтров таблицы
Формы
Как вывести форму во всплывающем окне рядом с кнопкой (popover)Загрузка формы по ссылкеКак принимать в форму не 1 параметр (itemID), а несколько входящих параметров? data-param-p1Как сделать модальную форму Как добавить коллбек после загрузки формы и после сохранения формы.Как показывать на форме прогресс заполнения (прогресс заполнения формы)Как сделать форму в виде мастера шаговКак сделать подтверждение действия в СМС (SMS) в формеКак установить поля в форме по умолчанию при загрузкеКак показывать изменяющуюся информацию при изменении полейФормы. Как сделать в форме более 1 кнопки действий (несколько кнопок действий на форме)Как правильно обрабатывать цены (дробные числа) на формеКак передать в форму скрытый параметрКак в форме добавить примеры заполнения полей (example)Как выбрать значение списка через справочник в модальном окнеКак сделать окно подтверждения действия формыДинамическое изменение itemID у формы в зависимости от других элементов страницыКак скрывать/показывать, обновлять область на странице при изменении поля формыКак добавить новый элемент, если в списке на форме его нетКак перезагрузить страницу после сохранения формыКак вывести списковые данные или таблицу внутри формыКак сделать зависимые поля в форме (Страна, Город)Как сделать кастомную HTML разметку для формы (jsRender)Как создать кастом форму с подтверждением действия по Email или SMSУстановка фоновой панели для формыКак сделать задержку при сохранении формы (saveDelay)Подсказки-ограничители длины для полей в формеКак динамически изменять тип поля формыКак сохранить значение поля в браузере, чтобы каждый раз его не вбивать при загрузке (оставлять последнее сохраненное). Запоминание поля формы в браузереКак выводить разные данные на одной форме для разных ролейКак сделать форму с сохранением состоянияКак сделать поля с анимацией значенийИспользование Google Recaptcha в формахКак обновить таблицу после сохранения формы в модальном окнеКак указать произвольную маску для поля ввода в формеКастом проверка полей формы через JSКак в выборе даты (datepicker) задать доступные датыКак создать форму для редактирования сущностиЗагрузка формы в выпадающем окне (dropdown)Добавление смайликов (emoji) в поля формКак у формы сделать progress bar при загрузке формыРабота с датами в формахПоказ количества символов рядом с полем в формеКнопка очистки формы ResetКонтроль заполнения ключевых форм на сайтеКак сделать форму с простым подтверждением действия (confirm)Как поменять соотношение длины метки и поляКак при сохранении формы вывести сообщение printlog, а не alert
Поля формы
Поле Список поиска значения (autocomplete, search-select) Как в форме вывести список галочек (множественный выбор поля)Как сделать списки select и chosen с категориями (optgroup)Как сделать выбор адреса и сохранение координат места (lat,lng).Установка графика работы (поле формы weekTime)Как в форму в SaveItem передать некий скрытый параметр (например Куки или параметр URL)Как работать с полем типа Слайдер (ползунок)Как использовать в форме поле Выбор файлов. Типы полей формы files, remoteFile, fileContentКак редактировать текст элементов  HTML в Rich-редактореУправление настройками поля через options_ поляВставка ссылок по шаблону (ютуб ссылка, patternString)Как использовать Флажки и выбор радио с картинкойКак работать с полем ТаймерКак сделать выбор цвета в формеКак вывести дерево с выбором галочекКак выводить и сохранять множественный список через chosen поле.Обработка даты из поля datetime-localРедактор текста - код поля формы html2Как работать с полем Дробное числоКак настроить выбор вариантов для поля Интервал датВыбор из элементов с табуляцией - поле формы tabsТип поля imageCheckbox (флажок-картинка)Поле формы Градиент (gradient)
Загрузка файлов, картинок
Работа с ресурсами. Загрузка картинок, файловУправление файлами на сервере (файловый менеджер)Загрузка на форме текстовых файлов и обработка их в процедуре SaveItemКак добавить в колонку таблицы управление файламиЗагрузка файлов с drop областью и гибкой разметкой (компонент as-files)Как приводить картинки к заданным размерам при загрузке на сайтИмпорт и парсинг файла CSVЧем отличается код типа ресурса от типа объектаКак получить ссылку на ресурсКак установить права доступа на менеджер ресурсов?Как загружать фото с обрезкой Как увеличить размер подгружаемых файлов (как загружать большие файлы)Передача файлов по FTPКак искать битые ресурсы, картинкиПодбор оптимальных параметров менеджера ресурсовПодгружаемые файлыМассовая загрузка картинок в систему ресурсовНе грузится файл через менеджер ресурсовФайлы загружаются на сервер, но при скачивании выходит ошибка 404.3 (загрузка ODT, Проблема с MIME типами)Поддержка Webp формата для оптимизации картинокМассовая оптимизация картинок в менеджерах ресурсовНе выводятся картинки на сайте (401, 403 ошибка при загрузке картинок)Как установить JS callback после выполнения crop картинкиНе отображается картинка юзера справа вверхуКак изменить текст "Нет файлов" в as-resourceManager?Обработка спецсимволов в названии файлов Как поставить водяной знак на картинку при загрузкеКак оптимизировать качество картинок при загрузке на сайтКак создавать для загружаемой картинки копии с разными размерамиКак загружать файл, когда задействовано диалоговое окноКак загрузить файл по конкретному путиКак сделать возможность грузить только 1 фотоКак поставить фильтр на типы файлов и ограничить форматы загрузки картинок?Как обработать событие после удаления или добавления файлов? Не выводятся картинки в менеджере ресурсов. Что делать?Как вставить менеджер ресурсов в форму с заданным itemID
HOWTO SQLHOWTO JSHOWTO ВерсткаРешение проблем

Выгода от использования Falcon Space

В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности

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

Оглавление

Введение

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

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

 
Каталог на демо имеет следующие возможности: 
  • Вложенные категории (без ограничений по вложенности).
  • Фильтры для категорий. Фильтры наследуются от родительских категорий. 
  • Кастомизация вида каталога, элемента каталога и карточки каталога.
  • Человекопонятный 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.url и задается при создании товара.
  • можно убрать из адреса карточки товара элементы категорий, тогда адрес будет короче. В этом случае надо внести изменения в функцию 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 указана хранимая процедура для выбора списка значений атрибута.
Соответственно в БД необходимо создать дополнительные таблицы-справочники по таким атрибутам в виде 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.

Адрес Избранного https://marketplace.web-automation.ru/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 - размер пагинации
  • RedirectUrlRedirectStatusCode - если указан адрес, то страница сделает редирект с указанным статусом (по умолчанию 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 - рейтинг товара
  • RedirectUrlRedirectStatusCode - если указан адрес, то страница сделает редирект с указанным статусом (по умолчанию 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

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

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

Сниппет:

 <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 - эта разметка может принимать следующие параметры: 
  • {catalogCats} Вложенные категории
  • {catalogFilters} Колонка фильтров
  • {catalogFilterTags} Теги выбранных фильтров (с возможностью их сбросить)
  • {catalogViewButtons} Кнопки переключения вида
  • {catalogTitle} Заголовок (с выводимым количеством)
  • {catalogBanner} Баннер для категории (использует Search.Select2 поля BannerText и BannerImage)
  • {catalogSortPanel} Кнопки сортировки
  • {catalogItems} Элементы каталога
  • {catalogPaging} Пагинация
  • {catalogText} Текст о категории

По дефолту используется такая верстка (если она не указана в 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:
  • {id} - Идентификатор номенклатуры товара
  • {name} - Наименование товара
  • {url} - URL страницы товара
  • {img} - ссылка на картинку
  • {supplierName} - наименование поставщика
  • {supplierLink} - ссылка на Поставщика
  • {price} - цена товара
  • {shortDesc} - краткое описание товара
  • {supplierCount} - количество поставщиков (если Товар к поставщику не 1 к 1)
  • {supplierProductID} - если Товар и Поставщик 1 к 1, то это ID товара поставщика (для использования в корзине).
  • {attrs} - атрибуты товара, которые помещены ForList=1

По умолчанию {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

Параметры:

  • {id} - id товара
  • {name} - наименование товара
  • {images} - картинки (галерея с возможностью показа увеличенной картинки)
  • {price} - цена товара
  • {offers} - предложения поставщиков по данному товару с возможностью добавить в корзину
  • {attrs} - таблица атрибутов товаров
  • {shortDesc} - краткое описание товара
  • {attr-code1} - передача дополнительных отдельных атрибутов для отдельной вставки в верстке

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

<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. 

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Нужна бесплатная консультация?
Планируете делать веб-проект?
Если видео Youtube плохо грузится, то попробуйте найти видео в ВК видео на канале Falcon Space
Сайт использует Cookie. Правила конфиденциальности OK
Подождите...