Как сделать кастом каталог на базе формы для фильтров и механизма лендингов

Введение

В платформе есть 2 типа каталогов - catalog (со своей структурой данных в БД на основе таблиц as_cat_) и list (гибкий каталог, где данные могут браться из любого испочника). 

У каталога есть несколько органичений: 

  • адресация URL - она строится по определенной схеме и используется слова catalog, list (к примеру нельзя перенести каталог на главную) и т.д.
  • набор фильтров и их функционирование. 

Таблицы нельзя использовать для каталога, т.к он должен быть виден поисковым системам (для SEO), т.к. выводится статично на странице, а не через JS.

В этой статье покажем как можн сделать подобный каталог через мезанизм ленда и формы для фильтров. 

Демостенд с подобным каталогом

Как все устроено

Есть ленд (пусть с URL /customlist). 

На нем 2 секции на лендинге

  • filter - в ней мы кладем форму customlistFilter.
  • items - здесь будут выводиться элементы каталога. 

Форма customlistFilter определяет состав фильтров и сортировку. 

В GetItem формы определяется @url, парсится на параметры и заполняет значения фильтров.

в SaveItem формы мы формируем URL и переходим на него (на ту же самую страницу, но с выбранными параметрами).

В примере адресация строится следующим образом: /customlist/--s1=111--s2=222--s3=333--page=4

Т.е. каждый параметр добавляется как --{name}={value}.

page - спец параметр, определяющий номер текущей страницы.  

В секции items мы парсим URL на фильтры, извлекаем нужные нам данные и выводим их в виде разметки. 

Исходные коды

Форма customlistFilter GetItem (у формы 3 фильтра s1, s2, s3).

CREATE PROCEDURE [dbo].[fm_customListFilter_getItem]
    @itemID nvarchar(256),	
	@username nvarchar(256)
AS
BEGIN	
	declare @url nvarchar(max) = @itemID   -- '--s1=111--s2=222--s3=333'
    -- парсим URL и ставим значения фильтров 
    declare @filters table(name nvarchar(max), value nvarchar(max))
    insert into @filters (name, value)
    select dbo.str_splitpart(value, '=', 1) name, dbo.str_splitpart(value, '=', 2) value
 	from dbo.split(@url, '--') where len(value)>0
   
    
	-- SELECT 1
	select 
    	isnull((select top 1 value from @filters where name='s1'),'') s1, 
    	isnull((select top 1 value from @filters where name='s2'),'') s2, 
    	isnull((select top 1 value from @filters where name='s3'),'') s3 
    	
	-- SELECT 2
	select '' Title, '' Subtitle,
    	'save' EnterKeyMode, -- next
    	'h5' HeaderTag, 1 LineLabel
	
END

 Форма customlistFilter SaveItem  

CREATE PROCEDURE [dbo].[fm_customListFilter_saveItem]
   @username nvarchar(256), 
   @itemID nvarchar(256),
   @parameters ExtendedDictionaryParameter readonly
AS
BEGIN

	declare @s1 nvarchar(max) = isnull((select Value2 from @parameters where [key]='s1'), '')
	declare @s2 int = isnull((select try_cast(Value2 as int) from @parameters where [key]='s2'), 0)
	declare @s3 bit = isnull((select try_cast(Value2 as bit) from @parameters where [key]='s3'), 0)
	-- собираем URL и переходим на него 
    declare @url nvarchar(max) = '/customlist/' 
    if(@s1<>'') set @url = @url + '--s1='+@s1
    if(@s2>0) set @url = @url + '--s2='+cast(@s2 as nvarchar)
    if(@s3=1) set @url = @url + '--s3='+cast(@s3 as nvarchar)
    
	-- SELECT 1
	select 1 Result, ' ' Msg, @url SuccessUrl, 0 HideFormAfterSubmit, '' RefreshContainer, 1 EnableSaveAlert
END

Секция ленда Filter - sql от блока: https://pastebin.com/9B3fxSHE

Секция ленда Items- sql от блока: https://pastebin.com/r8Q4y8NR

В реальном приложении лучше разделить код на функции (например, выделить генерацию разметки пагинации в sql функцию). 

Также управление SEO Title, Description можно сделать на уровне редактирования страницы лендинга. Через SQL страницы ленда получить параметры фильтров в URL и сформировать нужные title, description (в SELECT 2 процедуры pg_crumbs_XXXPageCode).

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

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

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

В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
Нужна бесплатная консультация?
Планируете делать веб-проект?
Сайт использует Cookie. Правила конфиденциальности OK