Фильтр товаров msearch2 выпадающим списком через не через select->option,а через ul->li

Всех приветствую, есть такой HTML:

<div class="filter filter-size">
                        <h3 class="filtertitle">
                            By size
                        </h3>
                        <div class="filter-content">
                            <div class="dropdown">
                                <button class="btn dropdown-toggle" type="button" data-toggle="dropdown">Choose any size...
                                    <span class="caret"></span></button>
                                <ul class="dropdown-menu">
                                    <li><a href="#">XXL</a></li>
                                    <li><a href="#">XL</a></li>
                                    <li><a href="#">L</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

Чанк filterSelectOuter:

{var $key = $table ~ $delimeter ~ $filter}
<div class="filter filter-size">
<fieldset id="mse2_{$key}">
<h3 class="filtertitle">{('mse2_filter_' ~ $table ~ '_' ~ $filter) | lexicon}:</h3>
    <div class="filter-content">
        <div class="dropdown">
            <button class="btn dropdown-toggle" type="button" data-toggle="dropdown">[[%mse2_select]]<span class="caret"></span></button>
                <ul class="dropdown-menu" name="[[+filter_key]]" id="[[+table]][[+delimeter]][[+filter]]_0">
                {$rows}
                </ul>
        </div>
    </div>
</fieldset>
</div><!--/ .table_cell -->

Чанк filterSelectRow:

<li><option value="{$value}" {$selected} {$disabled} class="{$disabled}">{$title} {if !$selected}({$num}){/if}</option></li>

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

Скриншот: disk.yandex.ru/i/PNgxc25X4F5W1Q

Константин

28 июля 2022, 18:01

622

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

Артур Шевченко

28 июля 2022, 20:32

Ну явно это всё функционирует с помощью js, надо проверить, точно ли блоки с фильтрами появляются до того как вешаются обработчики. Если это не так, то нужно вешать обработчики при наступлении события mse2_load

Константин

29 июля 2022, 09:28

Да, до обработчиков. К примеру фильтр по чекбоксам работает. Не работает эта конструкция, не кликается <option value="{$value}" {$selected} {$disabled} class="{$disabled}">{$title} {if !$selected}({$num}){/if}

Артур Шевченко

29 июля 2022, 15:01

Тогда возможно плагин не триггерит изменение в оригинальном селекте.

Константин

29 июля 2022, 15:07

А что это значит? Как можно обойти?

Артур Шевченко

29 июля 2022, 21:41

Это значит, что событие change на элементе select не срабатывает, возможно.

Роман

29 июля 2022, 15:15

msearch2 как у вас прописан вызов сниппета?

'filters' => 'ms|size:boolean

Можете сделать как radio
Только нужно указать, обязательно: &suggestionsRadio=`resource|parent`

<li><input id="mse2_{$table}{$delimeter}{$filter}_{$idx}" name="{$filter_key}" type="radio" value="{$value}" {$checked} {$disabled}><label for="mse2_{$table}{$delimeter}{$filter}_{$idx}">{$title} {if !$selected}({$num}){/if}</label></li>

Константин

29 июля 2022, 15:33

{$_modx->runSnippet('!mFilter2', [
	'element' => 'msProducts',
	'class' => 'msProduct',
	'limit' => 12,
	'tplOuter' => 'mFilter2OuterTpl',
	'tpl' => 'gridProductTpl',
	'includeTVs' => 'available',
	'includeThumbs' => 'medium',
	'sortby' => '{ "parent":"ASC","menuindex":"ASC" }',
	'tplPagePrev' => '@INLINE <li><a class="" href="{$href}"><i class="fa fa-angle-left" aria-hidden="true"></i></a></li>',
	'tplPageNext' => '@INLINE <li><a class="" href="{$href}"><i class="fa fa-angle-right" aria-hidden="true"></i></a></li>',
	'tplPagePrevEmpty' => '@INLINE <li><a class="" href="{$href}"><i class="fa fa-angle-left" aria-hidden="true"></i></a></li>',
	'tplPageNextEmpty' => '@INLINE <li><a class="" href="{$href}"><i class="fa fa-angle-right" aria-hidden="true"></i></a></li>',
	'tplPageFirst' => '',
	'tplPageLast' => '',
	'tplPageFirstEmpty' => '',
	'tplPageLastEmpty' => '',
	'filters' => 'msoption|marka,
		          msoption|model,
            	ms|vendor:vendors,
            	parent:parents',
            	
	'aliases' => 'ms|vendor==vendor,
			     msoption|marka==marka,
				 msoption|model==model',
			'tplFilter.outer.default' => 'filterSelectOuter',
	        'tplFilter.row.default' => 'filterSelectRow',
	        
			'tplFilter.outer.vendor' => 'filterCheckboxOuter',
	        'tplFilter.row.vendor' => 'filterCheckboxRow',
	        
	        'tplFilter.outer.marka' => 'filterSelectOuter',
	        'tplFilter.row.marka' => 'filterSelectRow',
	        
	        'tplFilter.outer.model' => 'filterSelectOuter',
	        'tplFilter.row.model' => 'filterSelectRow',
	        
	        'tplFilter.outer.resource|parent:parents' => 'filterSelectOuter',
	        'tplFilter.row.resource|parent:parents' => 'filterSelectRow',
	
])}

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.