Как организовать фильтрацию вывода материалов средствами pdoResources «на лету» без перезагрузки страницы?

Question

[Андрей Сверлин]

Здравствуйте.

Есть страница на MODX, куда выводятся карточки материалов средствами pdoResources из разных разделов. Вот код вывода (он стандартный):

[[pdoResources?
    &parents=`195, 239, 271, 280, 297`
    &tpl=`brick_item`
    &includeTVs=`mini_image, priceSHT, sort, format, marka, zavod`
    &tvFilters=`format==Одинарный` 
    &limit = `0`
    &prepareTVs=`1`
    &processTVs=`mini_image`
]]

Речь идёт о кирпичах и по умолчанию мы выводим все кирпичи с параметром format==Одинарный.

Так же сбоку на странице висит фильтр с другими параметрами: цвет, размер, завод и т.п. Фильтр реализован возможно не по фен-шую, но как есть так есть. Вот пример кода одного участка фильтра:

<div class="filter_block size">
        <ul>
            <li class="chkd">1х</li>
            <li>1,5х</li>
            <li>Евро 0,7</li>
            <li>Евро 0,9</li>
        </ul>
    </div>

Т.е. фильтр поделён на блоки filter_block с доп.классами size, color и т.д. А li class="chkd" - отмеченный параметр.

Вот собственно и задача. Надо реализовать фильтрацию по нажатию на параметры без перезагрузки страницы.
Сортировка вывода уже реализована по совсем другим критериям, и это тут не нужно. Пагинация так же написана уже давно и тут не нужна. Нужен только вывод по выбранным параметрам.

Я догадываюсь, что надо смотреть в сторону ajax, но к сожалению, я с ним не работал никогда и вообще не представляю откуда ноги растут. Много и долго гуглил, находил несколько похожих задач и решений, но так и не смог применить их под эту задачу, в виду того, что всё что касается аякса для меня пока что совсем тёмный лес.

Как мне видится это решение:
1. Надо написать скрипт на js который определял бы при клике на какой (какие) параметр(ы) нажали и какое значение выбрали (это я могу )))).
2. Надо передать эти значения куда-то, чтобы потом эти значения подставились в вывод pdoResources на странице отображения.
Вот куда и как их передать - вопрос для меня открытый. И как сделать чтобы всё это работало ещё и без перезагрузки страницы.

Был бы весьма признателен за помощь.

Answer 1

[Froggyweb]

Например https://webdesign-master.ru/blog/modx/2016-05-03-m...
для сложных фильтров есть https://modstore.pro/packages/ecommerce/msearch2

Comments

[Андрей Сверлин]

Да, спасибо. Видел это решение, но не смог применить. Сейчас вот сижу как раз ковыряюсь с ним.

[Андрей Сверлин]

Добавил к своему фильтру форму с радио кнопками. Написал скрипт, чтобы при нажатии на мои элементы фильтра (которые у меня в li) отмечались соответствующие радио кнопки. С этим вроде всё ок.

При нажатии запускается скрипт из примера, который Вы скинули. С этим тоже всё ок.
Но сниппет не хочет ничего показывать. Добавил параметр showLog туда, чтобы посмотреть, что вооще происходит. Ну и как ожидалось, ничего не понял.

Вот лог:

0.0000451: pdoTools loaded
0.0000129: xPDO query object created
0.0002530: Included list of tvs: format, color, zavod, priceSHT, marka, show_cat, mini_image, sort
0.0000970: leftJoined modTemplateVarResource as TVformat
0.0000739: leftJoined modTemplateVarResource as TVcolor
0.0000710: leftJoined modTemplateVarResource as TVzavod
0.0000720: leftJoined modTemplateVarResource as TVpricesht
0.0000799: leftJoined modTemplateVarResource as TVmarka
0.0000720: leftJoined modTemplateVarResource as TVshow_cat
0.0000720: leftJoined modTemplateVarResource as TVmini_image
0.0000720: leftJoined modTemplateVarResource as TVsort
0.0000470: Added selection of modResource: `id`, `pagetitle`, `introtext`, `content`
0.0000041: Added selection of modTemplateVarResource: IFNULL(`value`, '') AS `tv.format`
0.0000021: Added selection of modTemplateVarResource: IFNULL(`value`, '') AS `tv.color`
0.0000021: Added selection of modTemplateVarResource: IFNULL(`value`, '') AS `tv.zavod`
0.0000019: Added selection of modTemplateVarResource: IFNULL(`value`, '0') AS `tv.priceSHT`
0.0000031: Added selection of modTemplateVarResource: IFNULL(`value`, '') AS `tv.marka`
0.0000031: Added selection of modTemplateVarResource: IFNULL(`value`, '') AS `tv.show_cat`
0.0000019: Added selection of modTemplateVarResource: IFNULL(`value`, '') AS `tv.mini_image`
0.0000019: Added selection of modTemplateVarResource: IFNULL(`value`, '999') AS `tv.sort`
0.0000050: Replaced TV conditions
0.0000110: Replaced TV conditions
0.0003150: Processed additional conditions
0.0005062: Added where condition: 0(`TVformat`.`value`=Одинарный), modResource.parent:IN(195,239,271,280,297,8,194,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,272,273,274,275,276,277,278,279,295,296,281,282,283,284,285,286,287,288,289,290,291,292,293,294,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321), modResource.published=1, modResource.deleted=0
0.0000041: Replaced TV conditions
0.0000448: Sorted by modResource.pagetitle, asc
0.0001812: SQL prepared "SELECT `modResource`.`id`, `modResource`.`pagetitle`, `modResource`.`introtext`, `modResource`.`content`, IFNULL(`TVformat`.`value`, '') AS `tv.format`, IFNULL(`TVcolor`.`value`, '') AS `tv.color`, IFNULL(`TVzavod`.`value`, '') AS `tv.zavod`, IFNULL(`TVpricesht`.`value`, '0') AS `tv.priceSHT`, IFNULL(`TVmarka`.`value`, '') AS `tv.marka`, IFNULL(`TVshow_cat`.`value`, '') AS `tv.show_cat`, IFNULL(`TVmini_image`.`value`, '') AS `tv.mini_image`, IFNULL(`TVsort`.`value`, '999') AS `tv.sort` FROM `bsm_site_content` AS `modResource` LEFT JOIN `bsm_site_tmplvar_contentvalues` `TVformat` ON `TVformat`.`contentid` = `modResource`.`id` AND `TVformat`.`tmplvarid` = 7 LEFT JOIN `bsm_site_tmplvar_contentvalues` `TVcolor` ON `TVcolor`.`contentid` = `modResource`.`id` AND `TVcolor`.`tmplvarid` = 8 LEFT JOIN `bsm_site_tmplvar_contentvalues` `TVzavod` ON `TVzavod`.`contentid` = `modResource`.`id` AND `TVzavod`.`tmplvarid` = 9 LEFT JOIN `bsm_site_tmplvar_contentvalues` `TVpricesht` ON `TVpricesht`.`contentid` = `modResource`.`id` AND `TVpricesht`.`tmplvarid` = 11 LEFT JOIN `bsm_site_tmplvar_contentvalues` `TVmarka` ON `TVmarka`.`contentid` = `modResource`.`id` AND `TVmarka`.`tmplvarid` = 13 LEFT JOIN `bsm_site_tmplvar_contentvalues` `TVshow_cat` ON `TVshow_cat`.`contentid` = `modResource`.`id` AND `TVshow_cat`.`tmplvarid` = 15 LEFT JOIN `bsm_site_tmplvar_contentvalues` `TVmini_image` ON `TVmini_image`.`contentid` = `modResource`.`id` AND `TVmini_image`.`tmplvarid` = 17 LEFT JOIN `bsm_site_tmplvar_contentvalues` `TVsort` ON `TVsort`.`contentid` = `modResource`.`id` AND `TVsort`.`tmplvarid` = 37 WHERE  ( `TVformat`.`value`=Одинарный AND `modResource`.`parent` IN (195,239,271,280,297,8,194,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,272,273,274,275,276,277,278,279,295,296,281,282,283,284,285,286,287,288,289,290,291,292,293,294,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321) AND `modResource`.`published` = 1 AND `modResource`.`deleted` = 0 )  ORDER BY modResource.pagetitle asc "
0.0003979: Could not process query, error #1054: Unknown column 'Одинарный' in 'where clause'
0.0021970: Total time
2 097 152: Memory usage

Вот код сниппета из примера с моими именами инпутов:

<?php
//Filter Fields Settings
$filter = array();

//Radio, Select & Text Fields Type
if($_GET['show_cat']) {
	$filter[] = 'show_cat='.$_GET['show_cat'];
}

if($_GET['color']) {
	$filter[] = 'color='.$_GET['color'];
}

if($_GET['format']) {
	$filter[] = 'format='.$_GET['format'];
}

if($_GET['zavod']) {
	$filter[] = 'zavod='.$_GET['zavod'];
}


//End Settings

//Sort
if($_GET['sortby']) {
	$sortby = $_GET['sortby'];
} else {
	$sortby = 'pagetitle';
}
if($_GET['sortdir']) {
	$sortdir = $_GET['sortdir'];
} else {
	$sortdir = 'asc';
}
//End Sort

//Offset
$offset = 0;
if($_GET['offset']){
	$offset = $_GET['offset'];
}

if($filter) {
	$where = $modx->toJSON(array($filter));
} else {
	$where = '';
}

$params_count = array(
	'parents' => $parents,
	'limit' => 0,
	'tpl' => '@INLINE ,',
	'select' => 'id',
	'includeTVs' => $fields,
	'showHidden' => '1',
	'where' => $where
	);

$count = $modx->runSnippet('pdoResources',$params_count);
$count = count(explode(',',$count))-1;
$modx->setPlaceholder('count',$count);

$params = array(
	'parents' => $parents,
	'limit' => $limit,
	'offset' => $offset,
	'tpl' => $tpl,
	'select' => 'id,pagetitle,introtext,content',
	'includeTVs' => $fields,
	'showHidden' => '1',
	'sortby' => $sortby,
	'sortdir' => $sortdir,
	'where' => $where,
    'showLog' => '1'
	);

return $modx->runSnippet('pdoResources',$params);

Вот код js из примера (я убрал оттуда всё ненужное мне, типа сортировки и разбиения на страницы):

$(function() {

	//MODx pdoResources Ajax Filter
	//Filter Settings
	var fadeSpeed             = 200, // Fade Animation Speed
			ajaxContainerSelector = '.bricks_items', // CSS Selector of Ajax Container
			ajaxItemSelector      = '.brick_item', // CSS Selector of Ajax Item
			ajaxFormSelector      = '.ajax-form'; // CSS Selector of Ajax Filter Form


	$('' + ajaxFormSelector + '').submit(function() {
		return false;
	});


	function ajaxMainFunction() {
		$.ajax({
			data: $(ajaxFormSelector).serialize()
		}).done(function(response) {
			var $response = $(response);
			$(ajaxContainerSelector).fadeOut(fadeSpeed);
			setTimeout(function() {
				$(ajaxContainerSelector).html($response.find(ajaxContainerSelector).html()).fadeIn(fadeSpeed);			
			}, fadeSpeed);
		});
	}
	$(''+ajaxFormSelector+' input').change(function() {
		ajaxMainFunction();
	})
});

При загрузке страницы карточки кирпичей выводятся. По при нажатии на фильтр всё исчезает. На что ругается видно в логе.

0.0003979: Could not process query, error #1054: Unknown column 'Одинарный' in 'where clause'

Странно, что он не может найти этот параметр, ведь TV поле с таким параметром есть.

[Froggyweb]

Смотри что у тебя в $where
Должно быть примерно так
&where=`{"format: == "Одинарный"}`

[Андрей Сверлин]

Froggyweb, Спасибо. Но не в этом проблема была. Надо было просто проставить дополнительные кавычки в value радио кнопок.

А то что Вы пишите мне тоже пригодится. Как бы надо, чтобы по умолчанию загружались только одинарные кирпичи. Но ваша запись &where=`{"format: == "Одинарный"}` тут не подходит, потому что разместить её нужно в сниппете. Как мне кажется вот тут:

if($filter) {
  $where = $modx->toJSON(array($filter));
} else {
  $where = ' вот тут  ';
}

Но как написать её правильно, я что-то нигде найти не могу.

[Froggyweb]

Жестко зашивать в сниппет не стоит. Параметр надо передавать в сниппете.

[[!catalogFilter?
	&tpl=`tplCatItem`
	&limit=`3`
	&parents=`5`
	&fields=`image,area,floor,garage,price`
        &where='{"format" == "Одинарный"}'
]]

но надо проверять синтаксис where и будет ли работать фильтр
в PHP я не силен честно говоря

[Андрей Сверлин]

Froggyweb, ок. Спасибо. Буду ковырять