mFilter2 + AjaxForm

mFilter2.filter.checkbox.tpl

{var $key = $table ~ $delimeter ~ $filter}
 <input type="hidden" name="{$filter}[]" value="" />
<label for="mse2_{$key}_{$idx}" class="checkbox-label {$disabled}">
    <input type="checkbox" name="{$filter}[]" id="mse2_{$key}_{$idx}" value="{$value}" {$checked} {$disabled}
    {('fi.' ~ $filter) | placeholder | FormItIsChecked : $value}>
    <span class="checkmark"></span>
    {$title}
</label>{*$num*}

mFilter2.number.tpl

{var $key = $table ~ $delimeter ~ $filter}
{if $idx == 0}
	<label><span>от</span>
	    <input type="text" name="{$filter}[]" id="mse2_{$key}_{$idx}" value="{$value}" data-current-value="{$current_value}" class="inp js-from" />
         <input type="hidden" name="{$filter}[]" value="" />
    </label>
    <script>
        let startFrom = {$value};
    </script>
{/if}
{if $idx == 1}
	<label><span>до</span>
	    <input type="text" name="{$filter}[]" id="mse2_{$key}_{$idx}" value="{$value}" data-current-value="{$current_value}" class="inp js-to" />
         <input type="hidden" name="{$filter}[]" value="" />
    </label>
    <script>
        let startTo = {$value};
    </script>
{/if}

order.report.tpl

<h3>Подбор специалистом {'site_name' | config}</h3>
<p><b>Имя:</b> {$name}</p>
<p><b>Email:</b> {$email}</p>
<p><b>Телефон:</b> {$phone}</p>
<p><b>Сообщение:</b> {$message}</p>

<p><b>Цена:</b> {$price} руб.</p>
<p><b>Материал:</b> {$material}</p>
<p><b>Фактура:</b> {$texture}</p>
<p><b>Применение:</b> {$application}</p>
<p><b>Назначение:</b> {$purpose}</p>
<p><b>Поверхность:</b> {$surface}</p>
<p><b>Форма:</b> {$form}</p>

spec.tpl

  {'!mFilter2' | snippet : [
  'parents' => 2,
  'element' => 'pdoResources',
  'showLog' => 0,
  'ajax' => 0,
  'limit' => 1,
  'returnIds' => 1,
  'filterOptions' => '{"autoLoad":0}',
  'toPlaceholders' => 'mf2_',
  'toSeparatePlaceholders' => 'mf2_',
  'filters' => 'ms|price:number,
                  ms|material,
                  ms|texture,
                  ms|application,
                  ms|purpose,
                  ms|style,
                  ms|surface,
                  ms|form',
  'tplFilter.outer.default' => 'mFilter2.filter.outer',
  'tplFilter.row.default' => '@FILE chunks/mFilter/mFilter2.filter.checkbox.tpl',

  'tplFilter.outer.ms|price'=>'mFilter2.filter.slider',
  'tplFilter.row.ms|price'=>'@FILE chunks/mFilter/mFilter2.number.tpl'


  ]}

  <section class="master-help projects catalog msearch2" id="mse2_mfilter">
  <div class="container">
  <div class="text-block">
    <h1>{$_modx->resource.pagetitle}</h1>
    {$_modx->resource.introtext}
  </div>

  {'!AjaxForm' | snippet : [
      'hooks' => 'email,FormItSaveForm',
      'form' => '@INLINE <form action="{$_modx->resource.id | url}" method="post" class="ajax_form ask_form master-form" enctype="multipart/form-data">

          <div class="form-filter-wrap">

              <a href="#" id="open-filter">Подбор по параметрам</a>

              <div class="form-filter-block"> 
              <div class="form-filter sort-wrap">

                  {"mf2_ms|price"|placeholder}

                  {"mf2_ms|material"|placeholder}

                  {"mf2_ms|texture"|placeholder}

                  {"mf2_ms|application"|placeholder}

                  {"mf2_ms|purpose"|placeholder}

                  {"mf2_ms|style"|placeholder}

                  {"mf2_ms|surface"|placeholder}

                  {"mf2_ms|form"|placeholder}

                  </div>

              </div>
              </div>

              <div class="sort-tags-wrap" id="mse2_selected_wrapper">
                  <div id="mse2_selected" style="background: #fff;padding: 0;">

                  </div>
                  {if "mf2_filters" | placeholder ?} 
                      <button type="reset" class="button hidden sort-tag clear">
                      {"mse2_reset" | lexicon}
                      <span class="close"><svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M11.8337 1.34297L10.6587 0.167969L6.00033 4.8263L1.34199 0.167969L0.166992 1.34297L4.82533 6.0013L0.166992 10.6596L1.34199 11.8346L6.00033 7.1763L10.6587 11.8346L11.8337 10.6596L7.17533 6.0013L11.8337 1.34297Z"/></svg></span>
                      </button>
                      <button type="submit" style="display:none;" class="btn btn-success pull-right hidden">{"mse2_submit" | lexicon}</button>
                      <div class="clearfix"></div>
                  {/if}

              </div>

              <div class="inputs-wrap">
                  <div>
                  <label><span>Имя<sup>*</sup></span><input type="text" name="name" placeholder="Константин"></label>
                  <label><span>E-mail<sup>*</sup></span><input type="text" name="email" placeholder="[email protected]"></label>
                  <label><span>Телефон<sup>*</sup></span><input type="text" name="phone" placeholder="+7" class="phone-mask"></label>
                  <label><span>Ваш вопрос</span><textarea name="message" placeholder="Введите ваше сообщение..."></textarea></label>
                  </div>
                  <div>
                  <span class="capt">Добавить фото</span>
                  <span class="desc">Добавьте фото плитки, которая вам понравилась,<br/> и мы подберем для вас точно такую же.</span>
                  <label class="file-wrap">
                  <input type="file" name="file" id="drop-file" oninput="output.src=window.URL.createObjectURL(this.files[0])">
                  <img src="/make/img/icons/upload-photo.svg" id="output" alt=""> <span>Загрузить фото</span></label>
                  </div>
              </div>
              <input type="submit" value="Отправить" class="btn orange">

          </div>
          </form>
      ',
      'emailTpl' => '@FILE chunks/ajaxform/order.report.tpl',
      'emailFrom' => $_modx->config.emailsender,
      'emailFromName' => $_modx->config.site_name,
      'emailSubject' => 'Подбор специалистом ' ~ $_modx->config.site_name,
      'emailTo' => $_modx->config.email_sender,
      'validationErrorMessage' => 'В форме содержаться ошибки!',
      'validate' => 'name:required,
                      phone:required,
                      email:email:required',
      'formName' => 'Подбор специалистом',
      'formFields' => 'name,email,price,material,texture,application,purpose,surface,form',
      'successMessage' => '<div id="thanks">
                              <div class="title-inner">Спасибо!</div>
                              <p>Ваша заявка успешно отправлена. Скоро с вами свяжется наш менеджер.</p>
                          </div>',
      'fieldNames' => 'name==Имя,
                          email==Email,
                          phone==Телефон,
                          price==Цена,
                          material==Материал,
                          texture==Фактура,
                          application==Применение,
                          purpose==Назначение,
                          surface==Поверхность,
                          form==Форма,
                          file==Файл
                      '
  ]}

  </div>
</section>