К содержанию

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

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

Вот сайт примера:
nosi.ru/majki-futbolki/?tv|pol=мужской
Александр Иващенко
Александр Иващенко
11 марта 2018, 16:27
modx.pro
2 747
Реклама

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

snyadanak
snyadanak Старожил
11 марта 2018, 19:35
куки
    Александр Иващенко
    11 марта 2018, 19:40
    А пример с фильром где то существует?
      snyadanak
      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
        можете дать ссылку на сайт где это реализовано? у меня не получается что то
          Александр Иващенко
          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
                        Максим Кузнецов
                        Максим Кузнецов Проверенный
                        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
                просто переменную объявить нужно?
              Александр Иващенко
              01 апреля 2018, 14:35
              помогите новичку пожалуйста
                Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                30