mfilter2 как запомнить фильтр?

Подскажите как раализовать:
Есть у меня категории(вывел их pdoresources) и есть фильтр «мужское» и «женское»(галочками).
Как запомнить выбранный фильтр при переходах по категориям?

Вот сайт примера:
nosi.ru/majki-futbolki/?tv|pol=мужской

Александр Иващенко

11 марта 2018, 16:27

2 151

Комментарии: 30

snyadanak

11 марта 2018, 19:35

куки

Александр Иващенко

11 марта 2018, 19:40

А пример с фильром где то существует?

snyadanak

11 марта 2018, 20:46

Лично я не встречал)

Александр Иващенко

13 марта 2018, 01:44

Кто то еще подскажет вариант решения? или примером поможет?

Максим Кузнецов

13 марта 2018, 02:11

1. Подключается любая библиотека для работы с куками (например)
2. В js создается событие на изменение всех или только нужных вам фильтров, в котором будет запоминаться их состояние, примерно таким образом:

$(document).on('change', '.filter-class', function(e) {
	//В примере все состояния фильтров хранятся в одной переменной куков 'filters_condition' в json-формате
	var filters_condition = $.cookie('filters_condition');
			
	//Смотрим, существует ли она уже, чтобы не затирать другие значения
	if (typeof filters_condition !== 'undefined' && filters_condition !== null) {
		var params = filters_condition != "" ? $.parseJSON(filters_condition) : {};
	}
	else {
		var params = {};
	}
	
	var filter_condition;
			
	if ($(this).is(':checked')) {
		filter_condition = 'checked';
	}
	else {
		filter_condition = 'not_checked';
	}

	//Уникальный атрибут, по которому будет находиться фильтр, в моем случае - name
	//Если есть риск существования одинаковых значений инпутов/селекторов в разных формах, то можно переназначить на id
	params[$(this).attr('name')] = current_condition;
		
	$.cookie('filters_condition', JSON.stringify(params));
});

3. В чанках, отображающие фильтры в mFilter2 перехватываем нужные данные в куках, после чего выставляем результат:

{var $filters_condition = $.cookie['filters_condition'] | fromJSON}

//$filter_key - переменная чанка mFilter2, содержащая name фильтра
{var $filter_condition = $filters_condition[$filter_key]}

//...
//В нужном месте инпута/селектора выводим состояние:
{$filter_condition == 'checked' ? 'checked' : ''}

Пример демонстрационный, для наибольшей наглядности. То же состояние $filters_condition в шаблоне лучше единожды распарсить из JSON-a, после чего записывать в плейсхолдер, чтобы в последствии данные дергать уже из него.

Александр Иващенко

30 марта 2018, 16:23

-1

можете дать ссылку на сайт где это реализовано? у меня не получается что то

Александр Иващенко

01 апреля 2018, 15:01

main.js:31 Uncaught ReferenceError: current_condition is not defined
ругается на:

//Уникальный атрибут, по которому будет находиться фильтр, в моем случае - name
	//Если есть риск существования одинаковых значений инпутов/селекторов в разных формах, то можно переназначить на id
	params[$(this).attr('value')] = current_condition;

Максим Кузнецов

01 апреля 2018, 15:05

Замените current_condition на filter_condition, недоглядел.)

Александр Иващенко

01 апреля 2018, 15:09

посмотрите тут я сделал так как написали но после перехода по ссылке категории на пример с обувь в одежду у меня обнуляется значение… я тут скрипт написал ваш я не понимаю что то а есил просто на той же странице убираю /?tv|pol=мужской и нажимаю enter то переменная остается

Максим Кузнецов

01 апреля 2018, 15:14

Так… первое: когда у вас не работает что-то с js-скиптами, крайне рекомендуется открыть консоль браузера (f12 в хроме) и посмотреть наличие ошибок.

В вашем случае:
— у вас не работает функция tooltip
— у вас 2 формы #mse2_filters (со всеми вложенными фильтрами). Так делать нельзя, потому что id — параметр, значение которого должно быть уникальным в рамках одной страницы.

Александр Иващенко

01 апреля 2018, 15:23

спасибо, исправил ошибки.

{$filter_condition == 'checked' ? 'checked' : ''}

ничего не добавляет.

Максим Кузнецов

01 апреля 2018, 15:50

Конечно не добавляет.

$.cookie is not a function

— вы не подключили скрипт, работающий с куками.

github.com/js-cookie/js-cookie/blob/master/src/js.cookie.js

Александр Иващенко

01 апреля 2018, 16:49

dev.nosi.ru/obuv/
включил dev.nosi.ru/html/js/js.cookie.js

Максим Кузнецов

01 апреля 2018, 16:56

Я так понимаю, в приложенной библиотке куков, вызывать её нужно так:

Cookies.set('name', 'value');
Cookies.get('name');

— замените методы $.cookie в скрипте выше и будет вам счастье.

UPD: или можете попробовать подключить библиотеку, для которой был написан код выше:
oil-rf.ru/assets/global/js/lib/cookie.js

Александр Иващенко

01 апреля 2018, 17:00

так текущий код

$.cookie('filters_condition')

выдает

"{"tv|pol":"","mse2_tv|pol_1":"checked","mse2_tv_pol_0":"checked"}"

Максим Кузнецов

01 апреля 2018, 17:05

Значит js-часть отрабатывает корректно.

Вы модифицировали шаблоны фильтров в вызове mFilter2?
Код из шага 3 внутри чанков теперь должен проставлять checked-статус для нужных фильтров.

Александр Иващенко

01 апреля 2018, 17:03

подлючил библиотеку, что вы дали и не работает.
checked не передается.
а куда нужно писать:

{var $filters_condition = $.cookie['filters_condition'] | fromJSON}

//$filter_key - переменная чанка mFilter2, содержащая name фильтра
{var $filter_condition = $filters_condition[$filter_key]}

это я понял куда (tpl.mFilter2.filter.checkbox):

//В нужном месте инпута/селектора выводим состояние:
{$filter_condition == 'checked' ? 'checked' : ''}

Максим Кузнецов

01 апреля 2018, 17:06

Примерно сюда:

{var $filters_condition = $.cookie['filters_condition'] | fromJSON}
{var $filter_condition = $filters_condition[$filter_key]}

//Многоточие копировать не нужно - заместо них у вас будут родные переменные чанка для инпута
<input type="checkbox" ... {$filter_condition == 'checked' ? 'checked' : ''}  />

Александр Иващенко

01 апреля 2018, 17:10

вот содержимое чанка tpl.mFilter2.filter.checkbox

<label for="mse2_[[+table]]_[[+filter]]_[[+idx]]" class="[[+disabled]]">
{var $filters_condition = $.cookie['filters_condition'] | fromJSON}
{var $filter_condition = $filters_condition[$filter_key]}
	<input type="checkbox" {$filter_condition == 'checked' ? 'checked' : ''} class="filter-class" name="[[+table]]_[[+filter]]" id="mse2_[[+table]]_[[+filter]]_[[+idx]]" value="[[+value]]" [[+checked]] [[+disabled]]/> [[+title]] <sup>[[+num]]</sup>
</label>

который у меня тут:
[[!mFilter2?
&class=`msProduct`
…
&tplFilter.row.default=`tpl.mFilter2.filter.checkbox`
…
]]

Максим Кузнецов

01 апреля 2018, 17:14

Заместо $filter_key пропишите так:

{var $filter_condition = $filters_condition[$table ~ '_' ~ $filter]}

Александр Иващенко

01 апреля 2018, 17:18

ничего не изменилось

<label for="mse2_[[+table]]_[[+filter]]_[[+idx]]" class="[[+disabled]]">
{var $filters_condition = $.cookie['filters_condition'] | fromJSON}
{var $filter_condition = $filters_condition[$table ~ '_' ~ $filter]}

	<input type="checkbox" {$filter_condition == 'checked' ? 'checked' : ''} class="filter-class" name="[[+table]]_[[+filter]]" id="mse2_[[+table]]_[[+filter]]_[[+idx]]" value="[[+value]]" [[+checked]] [[+disabled]]/> [[+title]] <sup>[[+num]]</sup>
</label>

Максим Кузнецов

01 апреля 2018, 17:23

Так… смотрите:

1. Содержимое $.cookie('filters_condition') хранит json-строку с шаблоном
«name-фильтра»:«состояние фильтра».
2. Ваша задача в шаблоне фильтра получить нужную переменную куки и преобразовать её в массив:

$.cookie['filters_condition'] | fromJSON

3. Далее, вам нужно получить состояние конкретного фильтра по ключу массива (по-умолчанию, поле name):

{var $filter_condition = $filters_condition[$table ~ '_' ~ $filter]}

4. И, наконец, в зависимости от полученного состояния, проставить checked для фильтра.

Сейчас вы на шаге 3 — смотрите содержимое получаемого массива и, в частности, значение $filter_condition.
Скорее всего, мы ищем не по тому ключу (сравните передаваемое значение со значением name фильтра).

Александр Иващенко

01 апреля 2018, 17:28

я видимо чего то не понимаю. спасибо, что помогаете
вот код js:

$(document).on('change', '.filter-class', function(e) {
	//В примере все состояния фильтров хранятся в одной переменной куков 'filters_condition' в json-формате
	var filters_condition = $.cookie('filters_condition');
			
	//Смотрим, существует ли она уже, чтобы не затирать другие значения
	if (typeof filters_condition !== 'undefined' && filters_condition !== null) {
		var params = filters_condition != "" ? $.parseJSON(filters_condition) : {};
	}
	else {
		var params = {};
	}
	
	var filter_condition;
			
	if ($(this).is(':checked')) {
		filter_condition = 'checked';
	}
	else {
		filter_condition = 'not_checked';
	}

	//Уникальный атрибут, по которому будет находиться фильтр, в моем случае - name
	//Если есть риск существования одинаковых значений инпутов/селекторов в разных формах, то можно переназначить на id
	params[$(this).attr('value')] = filter_condition;
		
	$.cookie('filters_condition', JSON.stringify(params));
});

вот чанк tpl.mFilter2.filter.checkbox:

<label for="mse2_[[+table]]_[[+filter]]_[[+idx]]" class="[[+disabled]]">
{var $filters_condition = $.cookie['filters_condition'] | fromJSON}
{var $filter_condition = $filters_condition[$table ~ '_' ~ $filter]}

	<input type="checkbox" {$filter_condition == 'checked' ? 'checked' : ''} class="filter-class" name="[[+table]]_[[+filter]]" id="mse2_[[+table]]_[[+filter]]_[[+idx]]" value="[[+value]]" [[+checked]] [[+disabled]]/> [[+title]] <sup>[[+num]]</sup>
</label>

Максим Кузнецов

01 апреля 2018, 17:31

params[$(this).attr('value')] = filter_condition;

Для чего вы ставите ключ массива, равный значению фильтра?

Для начала, замените 'value' на 'name'.

Александр Иващенко

01 апреля 2018, 17:34

заменил. теперь:

$.cookie('filters_condition')

выдает:

"{"tv_pol_1":"checked"}"

я перехожу с dev.nosi.ru/noski/
на dev.nosi.ru/majki-futbolki/
и

$.cookie('filters_condition')

выдает

"{"mse2_tv_pol_1":"checked","мужской":"checked"}"

Максим Кузнецов

01 апреля 2018, 17:39

Последняя попытка, если не поможет — мой скайп justbekami, давайте туда.

У вас сейчас при переключении фильтров записывается его id (вы смотрите результат с примесью старых записей, их нужно очистить):

"{"mse2_tv_pol_0":"checked","mse2_tv_pol_1":"checked"}"

(смотрю по dev.nosi.ru)

А в чанке мы ищем по name. Или замените в скрипте .attr('value') на .attr('name') или в чанке ищите по айди:

{var $filter_condition = $filters_condition['mse2_' ~ $table ~ '_' ~ $filter ~ '_' ~ $idx]}

Александр Иващенко

01 апреля 2018, 15:13

наверное я как то 3 шаг не делаю правильно

Александр Иващенко

01 апреля 2018, 15:14

у меня тут tpl.mFilter2.filter.checkbox так:

<label for="mse2_[[+table]][[+delimeter]][[+filter]]_[[+idx]]" class="[[+disabled]]">
{var $filters_condition = $.cookie['filters_condition'] | fromJSON}

{var $filter_condition = $filters_condition[$filter_key]}
	<input type="checkbox" {$filter_condition == 'checked' ? 'checked' : ''} class="filter-class" name="[[+table]][[+delimeter]][[+filter]]" id="mse2_[[+table]][[+delimeter]][[+filter]]_[[+idx]]" value="[[+value]]" [[+checked]] [[+disabled]]/> [[+title]] <sup>[[+num]]</sup>
</label>

Александр Иващенко

01 апреля 2018, 15:07