На этом уроке мы создадим для нашего блога, который работает под управлением CMF MODX Revolution, систему поиска с помощью компонента mSearch.

  1. Скачаем и установим компонент "mSearch".

    MODX - установка компонента mSearch


  2. Проиндексируем страницы нашего сайта.

    Индексация существующих страниц блога осуществляется посредством нижеприведённого кода, который необходимо добавить в любой шаблон.

    [[!mSearch?
      &indexer=`1`
      &offset=`1`
      &limit=`500`
    ]]
    

    После этого необходимо открыть любую страницу, которая использует данный шаблон, в браузере.

    Например, вставим вышеприведённый код в содержимое главной страницы:

    MODX - индексирование ресурсов с помощью сниппета mSearch

    Откроем главную страницу нашего блога и увидим результат индексирования ресурсов сниппетом mSearch:

    MODX - результат индексирования ресурсов с помощью сниппета mSearch

    После этого данный код можно удалить из содержимого главной страницы.

    Во время исполнения данный сниппет проиндексирует первые 500 ресурсов нашего блога. Первый параметр (indexer) указывает на то, что сниппет mSearch будет выполнять не поиск, а индексацию ресурсов блога. Второй и третий параметр (offset и limit) задаёт ограничение на выборку ресурсов, которые необходимо проиндексировать. Если на Вашем блоге содержится больше чем 500 ресурсов (например, 1200), то производить их индексацию придётся в несколько запусков:

    MODX - индексирование большого количества ресурсов

    Индексацию ресурсов достаточно выполнить только один раз, после установки компонента mSearch. Ресурсы, которые будут добавляться уже после установки компонента mSearch индексировать с помощью сниппета не надо. Они будут индексироваться автоматически с помощью плагина, который идёт в комплекте с данным компонентом.


  3. Изменим название плейсхолдеру total в сниппете mSearch. Это необходимо сделать для того, чтобы избежать конфликтов, т.к. данное имя плейсхолдера также использует компонент Tickets.

    MODX - редактирование сниппета mSearch


  4. Создадим ресурс (страницу) "Поиск" и запомним его идентификатор (id). В дальнейшем он нам пригодится для создания формы поиска.

    MODX - создание ресурса Search


  5. Создадим шаблон "Поиск".

    MODX - создадим шаблон поиск


    • Скопируем код из любого другого шаблона (например, блог). Удалим из него лишний код, т.е. оставим только код, формирующий основную структуру веб-страницы.

      <!DOCTYPE html>
      <html lang="ru">
      [[$chunk.head]]
      <body>
        <div class="container"> 
          <div class="row">
            [[$chunk.header]]
            [[$chunk.navbar]]
            <div class="main-block col-md-8">
              <h1 class="h2 page-header">[[*pagetitle]]</h1>
              
            </div>
            <div class="col-md-4">
            </div>
          </div>
        </div>
        [[$chunk.footer]]
      </body>
      </html>
      

    • Разработаем форму поиска:

      MODX - форма поиска

      <!-- Контейнер, который будет содержать форму -->
      <div class="well">
        <!-- Форма поиска -->
        <!-- 14 - это id ресурса, в котором будут отображаться результаты поиска -->
        <form action="[[++site_url]][[~14]]" method="get">
          <div class="row">
            <div class="form-group col-md-10">
              <input id="inputSearch" type="text" class="form-control" name="query" maxlength="50" value="[[+mse.query]]" placeholder="Найти">
            </div>
            <button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-search"></i> Поиск</button>
          </div>
        </form>
      </div>
      

    • Разработаем код, который будет выводить результаты поиска с помощью сниппетов pdoResources и mSearch:

      [[!pdoResources?
        &parents=`2`
        &showHidden=`1`
        &resources=`[[!mSearch? &parents=`2` &showHidden=`1` &returnIds=`1`]]`
        &limit=`10`
        &tpl=`searchTpl`
        &tplWrapper=`@INLINE <h2 class="h3 page-header">Результаты поиска по запросу: [[+mse.query]] ([[+mse.total]])</h2> [[+mse.total:isnot=`0`:and:isnot=``:then=`[[+output]]`]]`
      ]]
      

      где:

      • parents=`2` - указывает сниппету mSearch на то, что поиск необходимо производить только в ресурсах, имеющих в качестве родителя ресурс с id=2.

      • &showHidden=`1` - указывает сниппетам на то, что необходимо выбирать ресурсы, скрытые для меню.

      • returnIds=`1` - указывает сниппету mSearch на то, что необходимо возвращать вместо оформленных результатов идентификаторы (id) ресурсов.

      • tpl=`searchTpl` - указываем сниппету pdoResources на то, что в качестве шаблона для вывода каждого найденного результата (ресурса) необходимо использовать чанк searchTpl.

      • limit=`10` - указывает сниппету pdoResources на то, что необходимо ограничить количество результатов выборки до 10.

      • resources - указывает сниппету pdoResources на то, что необходимо использовать ресурсы предоставленные сниппетом mSearch.

      • tplWrapper - шаблон, который предназначен для оборачивания результатов работы сниппета pdoResources. Код [[+mse.total... выполняет следующее: он проверяет, не является ли значение плейсхолдера [[+mse.total]] равным нулю и пустой строке. Если это условие выполняется, то выводятся результаты работы сниппета с помощью плейсхолдера [[+output]]. В противном случае ничего не выводится. Данное условие необходимо из-за того, что когда сниппет mSearch не находит не один подходящий ресурс, то он выводит все ресурсы сайта.

      • [[+mse.total]] - плейсхолдер, который содержит число найденных ресурсов сниппетом mSearch.

      • [[+mse.query]] - плейсхолдер, который содержит текст запроса.


    • Итоговый код шаблона "Поиск":

    • <!DOCTYPE html>
      <html lang="ru">
      [[$chunk.head]]
      <body>
        <div class="container"> 
          <div class="row">
            [[$chunk.header]]
            [[$chunk.navbar]]
            <div class="main-block col-md-8">
              <h1 class="h2 page-header">[[*pagetitle]]</h1>
              <div class="well">
                <form action="[[++site_url]][[~14]]" method="get">
                  <div class="row">
                    <div class="form-group col-md-10">
                      <input id="inputSearch" type="text" class="form-control" name="query" maxlength="50" value="[[+mse.query]]" placeholder="Найти">
                    </div>
                    <button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-search"></i> Поиск</button>
                  </div>
                </form>
              </div>
              [[!pdoResources?
               &parents=`2`
               &showHidden=`1`
               &resources=`[[!mSearch? &parents=`2` &showHidden=`1` &returnIds=`1`]]`
               &limit=`10`
               &tpl=`searchTpl`
               &tplWrapper=`@INLINE <h2 class="h3 page-header">Результаты поиска по запросу: [[+mse.query]] ([[+mse.total]])</h2> [[+mse.total:isnot=`0`:and:isnot=``:then=`[[+output]]`]]`
              ]]
            </div>
            <div class="col-md-4">
            </div>
          </div>
        </div>
        [[$chunk.footer]]
      </body>
      </html>
      

  6. Создадим чанк searchTpl со следующим содержимым:

    MODX - шаблон, на основе которого выводится каждый найденный результат

    <div class="panel panel-default">
      <div class="panel-body">
        <a href="[[++site_url]][[~[[+id]]]]">[[+pagetitle]]</a>
      </div>
      <div class="panel-footer">[[+description]]</div>
    </div>
    

  7. Установим ресурсу (странице) "Поиск" шаблон "Поиск".

    MODX - установка ресурсу Поиск шаблон Поиск


  8. Создадим форму "Поиск" для остальных страниц блога.

    • Создадим чанк "search" со следующим содержимым:

      <div class="last-comment">
        <h4 class="page-header text-center">Поиск</h4>
        <form action="[[++site_url]][[~14]]" method="get">
          <div class="input-group">
            <input type="text" class="form-control" name="query" maxlength="50" value="" placeholder="Найти">
            <span class="input-group-btn">
              <button type="submit" class="btn btn-default">Найти</button>
            </span>
          </div>
        </form>
      </div>
      

    • Добавим чанк "search" в необходимые шаблоны нашего блога:

      MODX - добавление чанка search в шаблон Пост

Результаты урока представим в виде следующих изображений:

MODX - форма поиска на странице поста

MODX - страница для поиска и отображения результатов поиска

MODX - найденные страницы по запросу