mFilter2 вывод фильтров в другом блоке



Всем привет. Возможно кто-то уже сталкивался с такой задачей, когда фильтры могут идти не только в одном блоке поочерёдно, но и находится выше контентной части (как показано на скриншоте). Как это можно реализовать простым и понятным путём? Не хочется городить велосипеды.
SEQUEL.ONE
22 сентября 2018, 00:51
3
120
+2

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

Баха Волков
22 сентября 2018, 01:15
0
Точно не могу сказать на счет кроссбраузерности, но такого рода задачи должен решать тег <fieldset>. Этот тег как раз кроме группировки полей формы еще и подразумевает его использование вне формы. Проведите тест на разных браузерах, если на данный момент он корректно работает во всех, то и вашу проблему можно считать решенной.
Konstantin
22 сентября 2018, 07:19
+2
В документации же сказано как, открыли бы разок для разнообразия
В вызове сниппета указываешь
'toPlaceholders' => 'my_',
'toSeparatePlaceholders' => 'my_',
и не указываешь tplOuter. Для удобства копируешь этот чанк куда надо. Для правильной работы нужно чтобы все фильтры находились внутри формы:
<div class="msearch2 " id="mse2_mfilter">
		<form action="{$_modx->makeUrl($_modx->resource.id)}" method="post" id="mse2_filters">
                </form>
</div>
а сами фильтры внутри этой формы выводишь в любом порядке и где угодно – с префиксом:
{'my_resource|pagetitle' | placeholder}, {'my_msoption|pol_rebenka' | placeholder}, {'my_results' | placeholder}
    SEQUEL.ONE
    22 сентября 2018, 16:19
    +1
    Не знал что можно форму задать общему блоку. Работает как надо. Этот параметр ещё не приходиломь юзать, по этому было немного не понятно как оно всё функционирует, а посидев минут 10 уже разобрался. Спасибо.
    SEQUEL.ONE
    22 сентября 2018, 18:02
    0
    А что делать с параметром tpls? Как выводить его? Сейчас вот как выглядит вызов mFilter:

    {'!mFilter2' | snippet : [
        'parents' => $_modx->resource.id,
        'limit' => 21,
        'class' => 'msProduct',
        'element' => 'msProducts',
        'tpls' => '@FILE components/msearch2/mfilter/item.tpl, @FILE components/msearch2/mfilter/item-ext.tpl',
        'tplPageWrapper' => '@INLINE <ul class="pages-list d-flex justify-content-center">[[+pages]]</ul>',
        'tplPage' => '@INLINE <li><a href="[[+href]]">[[+pageNo]]</a></li>',
        'tplPageActive' => '@INLINE <li class="current"><a href="[[+href]]">[[+pageNo]]</a></li>',
        'suggestions' => 'true',
    	'toPlaceholders' => 'my_',
    	'toSeparatePlaceholders' => 'my_',
        'filters' => '
    		ms|price:number,
    		msoption|gender:select,
    		msoption|clothes_type:select,
    		ms|season:select,
    		ms|composition:select,
    		ms|textile:select,
    		ms|collection:select,
    		msoption|color:select,
    		msoption|size:radio,
            ms|hypoallergenic:boolean,
    		ms|design:boolean,
    		ms|sleeve:boolean,
    		ms|lightning:boolean,
    		ms|chevron:boolean,
    		ms|formaldehydes:boolean,
    		ms|cotton:boolean
        ',
        'sort' => '
            ms|product_num:asc
        ',
    	'tplFilter.outer.default' => '@FILE components/msearch2/mfilter/options/outer.tpl',
    	'tplFilter.outer.ms|price' => '@FILE components/msearch2/mfilter/options/slider.tpl',
    	'tplFilter.outer.msoption|gender' => '@FILE components/msearch2/mfilter/options/select.tpl',
    	'tplFilter.row.msoption|gender' => '@FILE components/msearch2/mfilter/options/option.tpl',
    	'tplFilter.outer.ms|season' => '@FILE components/msearch2/mfilter/options/select.tpl',
    	'tplFilter.row.ms|season' => '@FILE components/msearch2/mfilter/options/option.tpl',
        'tplFilter.row.ms|price' => 'tpl.mFilter2.filter.number',
        'suggestionsRadio' => 'ms|hypoallergenic,ms|design,ms|sleeve,ms|lightning,ms|chevron,ms|formaldehydes,ms|cotton'
    ]}
    А сами чанки из параметра tpls выводятся ниже вот таким образом:

    [[+tpls:notempty=`
        			<div id="mse2_tpl" class="span4 pr-0">
        				<a href="#" data-tpl="0" class="[[+tpl0]] form-btn form-btn-x1"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 viewBox="0 0 290 290" style="enable-background:new 0 0 290 290;" xml:space="preserve">
    <g>
    	<rect y="220" width="70" height="70"/>
    	<rect y="110" width="70" height="70"/>
    	<rect width="70" height="70"/>
    	<rect x="110" y="220" width="70" height="70"/>
    	<rect x="110" y="110" width="70" height="70"/>
    	<rect x="110" width="70" height="70"/>
    	<rect x="220" y="220" width="70" height="70"/>
    	<rect x="220" y="110" width="70" height="70"/>
    	<rect x="220" width="70" height="70"/>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    </svg></a> 
        				<a href="#" data-tpl="1" class="[[+tpl1]] form-btn form-btn-x2"><?xml version="1.0" encoding="iso-8859-1"?>
    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 width="344.339px" height="344.339px" viewBox="0 0 344.339 344.339" style="enable-background:new 0 0 344.339 344.339;"
    	 xml:space="preserve">
    <g>
    	<g>
    		<g>
    			<rect y="46.06" width="344.339" height="29.52"/>
    		</g>
    		<g>
    			<rect y="156.506" width="344.339" height="29.52"/>
    		</g>
    		<g>
    			<rect y="268.748" width="344.339" height="29.531"/>
    		</g>
    	</g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    </svg>
    </a>
        			</div>
        			`]]
    Кнопки с изменениями вывода товаров в блоках отсутствуют. Как это поправить?
      SEQUEL.ONE
      22 сентября 2018, 20:36
      0
      Всё оказалось куда проще, надо было сделать так:

      {if $_modx->getPlaceholder('my_tpls') == 1}
      					<div id="mse2_tpl" class="span4 pr-0">
      						<a href="#" data-tpl="0" class="[[+tpl0]] form-btn form-btn-x1"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      		 viewBox="0 0 290 290" style="enable-background:new 0 0 290 290;" xml:space="preserve">
      	<g>
      		<rect y="220" width="70" height="70"/>
      		<rect y="110" width="70" height="70"/>
      		<rect width="70" height="70"/>
      		<rect x="110" y="220" width="70" height="70"/>
      		<rect x="110" y="110" width="70" height="70"/>
      		<rect x="110" width="70" height="70"/>
      		<rect x="220" y="220" width="70" height="70"/>
      		<rect x="220" y="110" width="70" height="70"/>
      		<rect x="220" width="70" height="70"/>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	</svg></a> 
      						<a href="#" data-tpl="1" class="[[+tpl1]] form-btn form-btn-x2"><?xml version="1.0" encoding="iso-8859-1"?>
      	<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
      	<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
      	<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      		 width="344.339px" height="344.339px" viewBox="0 0 344.339 344.339" style="enable-background:new 0 0 344.339 344.339;"
      		 xml:space="preserve">
      	<g>
      		<g>
      			<g>
      				<rect y="46.06" width="344.339" height="29.52"/>
      			</g>
      			<g>
      				<rect y="156.506" width="344.339" height="29.52"/>
      			</g>
      			<g>
      				<rect y="268.748" width="344.339" height="29.531"/>
      			</g>
      		</g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	<g>
      	</g>
      	</svg>
      	</a>
      					</div>
      				{/if}