mFilter2 и фильтрация через select по (Популярным товарам и их Ценам) / Готовые решения / MODX

mFilter2 и фильтрация через select по (Популярным товарам и их Ценам)



Вывод сниппета mFilter2 выглядит у нас следующим образом:

                {$_modx->runSnippet('!mFilter2', [
                    'parents' => $_modx->resource.id,
                    'limit' => 12,
                    'class' => 'msProduct',
                    'element' => 'msProducts',
                    'tpl' => 'tpl.Site.msFilter2.productTpl',
                    'tplOuter' => 'tpl.Site.mFilter2.outerTpl',
                    'tplPageWrapper' => '@INLINE [[+pages]]',
                    'tplPage' => '@INLINE <a href="[[+href]]">[[+pageNo]]</a>',
                    'tplPageActive' => '@INLINE <a class="selected" href="[[+href]]">[[+pageNo]]</a>',
                    'where' => '{"class_key":"msProduct"}',
                    'suggestions' => 'true',
                    'filters' => '
                        ms|width:select,
                        ms|height:select,
                        ms|length:select,
                        ms|made_in:checkbox,
                        ms|vendor:vendors,
                    ',
                    'sort' => '
                        ms|price:desc
                    ',
                    'tplFilter.outer.ms|vendor' => 'tpl.Site.mFilter2.filter.outer',
                    'tplFilter.row.ms|vendor' => 'tpl.Site.mFilter2.filter.checkbox',
                    'tplFilter.outer.ms|made_in' => 'tpl.Site.mFilter2.filter.outer',
                    'tplFilter.row.ms|made_in' => 'tpl.Site.mFilter2.filter.checkbox',
                    'tplFilter.outer.ms|width' => 'tpl.Site.mFilter2.filter.outer.whl',
                    'tplFilter.outer.ms|height' => 'tpl.Site.mFilter2.filter.outer.whl',
                    'tplFilter.outer.ms|length' => 'tpl.Site.mFilter2.filter.outer.whl',
                    'tplFilter.row.ms|width' => 'tpl.Site.mFilter2.filter.select.whl',
                    'tplFilter.row.ms|height' => 'tpl.Site.mFilter2.filter.select.whl',
                    'tplFilter.row.ms|length' => 'tpl.Site.mFilter2.filter.select.whl',
                    'tplFilter.outer.ms|popular' => 'tpl.Site.mFilter2.filter.outer.whl',
                    'tplFilter.row.ms|popular' => 'tpl.Site.mFilter2.filter.select.whl',
                ])}

Чанк tpl.Site.mFilter2.outerTpl у нас выглядит следующим образом:

                <div class="main-content-wrapper main-content-mobile-wrapper clearfix msearch2" id="mse2_mfilter">
                    <form action="[[~[[*id]]]]" method="post" id="mse2_filters">
                        <div class="options-wrapper clearfix">
                            <div id="breadcrumbs">
                                <div class="sort-select f-right">
                                    Показать по
                                    <select id="mse2_sort">
                                        <option class="sort" data-sort="ms|popular" value="asc">Популярности ↓</option>
                                        <option class="sort" data-sort="ms|popular" value="desc">Популярности ↑</option>
                                        <option class="sort" data-sort="ms|price" value="asc">Цене ↓</option>
                                        <option class="sort" data-sort="ms|price" value="desc">Цене ↑</option>
                                    </select>
                                </div>
                                {$_modx->runSnippet('!pdoCrumbs', [
                                    'exclude' => 8755,
                                    'showHome' => 1, 
                                    'outputSeparator' => '→',
                                    'tplWrapper' => $output,
                                    'tpl' => '@INLINE <span><a href="{$link}">{$menutitle}</a></span>',
                                    'tplCurrent' => '@INLINE {$menutitle}'
                                ])}
                            </div>
                        </div>
                    
                        <div class="category-aside f-right">
    			            [[+filters]]
                            <div class="separator"></div>
                            <div class="filter-title-wrapper">
                                <div class="filter-title chb-hidden">Поддон (высота)
                                    <span class="switcher"></span>
                                </div>
                                <div class="separator"></div>
                                <div class="select-chb-wrapper">
                                    <ul class="chb-list">
                                        <li>
                                            <input type="checkbox" value="Высокий" id="1">
                                            <label for="1">Высокий</label>
                                        </li>
                                        <li>
                                            <input type="checkbox" value="Низкий" id="2">
                                            <label for="2">Низкий</label>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="filter-title-wrapper">
                                <div class="filter-title">Форма
                                    <span class="switcher"></span>
                                </div>
                                <div class="separator"></div>
                                <div class="select-chb-wrapper chb-hidden">
                                    <ul class="list">
                                        <li>
                                            <input type="checkbox" value="Ассиметричная, правая / левая" id="prod228-1">
                                            <label for="prod228-1">Ассиметричная, правая / левая</label>
                                        </li>
                                        <li>
                                            <input type="checkbox" value="Квадратная" id="prod228-2">
                                            <label for="prod228-2">Квадратная</label>
                                        </li>
                                        <li>
                                            <input type="checkbox" value="Прямоугольная" id="prod228-3">
                                            <label for="prod228-3">Прямоугольная</label></li>
                                        <li>
                                            <input type="checkbox" value="Пятиугольная" id="prod228-4">
                                            <label for="prod228-4">Пятиугольная</label>
                                        </li>
                                        <li>
                                            <input type="checkbox" value="Угловая, четверть круга" id="prod228-5">
                                            <label for="prod228-5">Угловая, четверть круга</label>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="filter-title-wrapper">
                                <div class="filter-title">Тип дверей
                                    <span class="switcher chb-hidden"></span>
                                </div>
                                <div class="separator"></div>
                                <div class="select-chb-wrapper chb-hidden">
                                    <ul class="chb-list">
                                        <li>
                                            <input type="checkbox" value="Раздвижные" id="prod242-1">
                                            <label for="prod242-1">Раздвижные</label>
                                        </li>
                                        <li>
                                            <input type="checkbox" value="Распашные" id="prod242-2">
                                            <label for="prod242-2">Распашные</label>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="filter-title-wrapper">
                                <div class="filter-title">Крыша
                                    <span class="switcher chb-hidden"></span>
                                </div>
                                <div class="separator"></div>
                                <div class="select-chb-wrapper chb-hidden">
                                    <ul class="chb-list">
                                        <li>
                                            <input type="checkbox" value="Есть" id="prod227-1">
                                            <label for="prod227-1">Есть</label>
                                        </li>
                                        <li>
                                            <input type="checkbox" value="Нет" id="prod227-2">
                                            <label for="prod227-2">Нет</label>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="filter-title-wrapper">
                                <div class="filter-title">Электроника
                                    <span class="switcher chb-hidden"></span>
                                </div>
                                <div class="separator"></div>
                                <div class="select-chb-wrapper chb-hidden">
                                    <ul class="chb-list">
                                        <li>
                                            <input type="checkbox" value="Есть" id="prod239-1">
                                            <label for="prod239-1">Есть</label>
                                        </li>
                                        <li>
                                            <input type="checkbox" value="Нет" id="prod239-2">
                                            <label for="prod239-2">Нет</label>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="main-category-content ">
                        <div class="mblock category-content-block">
                            <p class="category-title">
                                {$_modx->resource.pagetitle}
                            </p>
                            {$_modx->runSnippet('pdoMenu', [
                                'parents' => $_modx->resource.id, 
                                'level' => 1,
                                'includeTVs' => 'image',
                                'outerClass' => 'list-sm-items',
                                'tpl' => 'tpl.Site.category.menuTpl',
                            ])}
                            <ul class="list-panel category-list-panel" id="mse2_results">
			                    [[+results]]
                            </ul>
    
                            <div class="pagination mse2_pagination">
                                [[!+page.nav]]
                            </div>
                            <div class="category-info-wrapper">
                                <div class="category-info-title">Полезная информация</div>
                                <div class="category-info-title">{$_modx->resource.pagetitle}</div>
                                {$_modx->resource.content}
                            </div>
                        </div>
                    </div>
                </div>

После чего остаётся добавить jQuery:

$(document).ready(function() {   
    $(document).on('change', '#mse2_sort', function() {
        var selected = $(this).find('option:selected');
        var sort = selected.data('sort');
        sort += mse2Config.method_delimeter + selected.val();
        mse2Config.sort =  sort;
        mSearch2.submit();
    });
});
28 марта 2018, 20:05    SEQUEL.ONE Готовые решения 1    481 +1

Отзывы ()

    Вы должны авторизоваться, чтобы оставлять комментарии.