Как в MODx Revo сделать фильтр по группам товаров?

Question

[Casper969]

На странице с каталогом нужно сделать фильтр по группам товаров. Можете подсказать понятное решение или плагин?

Смысл в том, что есть определенное количество групп (создаваться новые не будут) - они будут выглядеть как обычные текстовые TV поля (чекбоксы)

Выглядеть должно так

Пример кода если нужен

<div class="sub-navigation">
    <div class="container">
      <nav class="navbar navbar-expand-md maxi">
        <div class="collapse navbar-collapse" id="navbarNav0">
          <ul class="navbar-nav mr-auto ml-auto">
            <li class="nav-item"><a class="nav-link active" href="#">Трансформер</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Подъем</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Выкатные </a></li>
            <li class="nav-item"><a class="nav-link" href="#">Дельфины</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Книжка</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Тик-Так </a></li>
            <li class="nav-item"><a class="nav-link" href="#">Поворота</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Прочие                                                            </a></li>
          </ul>
        </div>
      </nav>
    </div>
  </div>
  <div class="container content">
    <div class="col-12">
      <div class="row mt-4">
        <div class="col-md-6">
          <div class="row block">
            <div class="col-md-4 my-auto text-center"><img src="../assets/img/handle.png" alt=""/></div>
            <div class="col-md-8"><a href="product.html">
                <h4>Механизм трансформер 1205</h4></a><img src="../assets/img/hatch-line.png" alt=""/><span class="grey">Материал: <strong>Цинк   </strong></span><span class="grey">Цена: <strong>1,72 р    </strong></span></div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="row block">
            <div class="col-md-4 my-auto text-center"><img src="../assets/img/handle.png" alt=""/></div>
            <div class="col-md-8"><a href="product.html">
                <h4>Механизм трансформер 1205</h4></a><img src="../assets/img/hatch-line.png" alt=""/><span class="grey">Материал: <strong>Цинк   </strong></span><span class="grey">Цена: <strong>1,72 р                                   </strong></span></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-8 offset-md-2">
          <hr/>
        </div>
      </div>
      <div class="row mt-4">
        <div class="col-md-6">
          <div class="row block">
            <div class="col-md-4 my-auto text-center"><img src="../assets/img/handle.png" alt=""/></div>
            <div class="col-md-8"><a href="product.html">
                <h4>Механизм трансформер 1205 и еще что-то здесь</h4></a><img src="../assets/img/hatch-line.png" alt=""/><span class="grey">Материал: <strong>Цинк   </strong></span><span class="grey">Цена: <strong>1,72 р    </strong></span></div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="row block">
            <div class="col-md-4 my-auto text-center"><img src="../assets/img/handle.png" alt=""/></div>
            <div class="col-md-8"><a href="product.html">
                <h4>Механизм трансформер 1205</h4></a><img src="../assets/img/hatch-line.png" alt=""/><span class="grey">Материал: <strong>Цинк   </strong></span><span class="grey">Цена: <strong>1,72 р    </strong></span></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-8 offset-md-2">
          <hr/>
        </div>
      </div>
      <div class="row mt-4">
        <div class="col-md-6">
          <div class="row block">
            <div class="col-md-4 my-auto text-center"><img src="../assets/img/handle.png" alt=""/></div>
            <div class="col-md-8"><a href="product.html">
                <h4>Механизм трансформер 1205</h4></a><img src="../assets/img/hatch-line.png" alt=""/><span class="grey">Материал: <strong>Цинк   </strong></span><span class="grey">Цена: <strong>1,72 р    </strong></span></div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="row block">
            <div class="col-md-4 my-auto text-center"><img src="../assets/img/handle.png" alt=""/></div>
            <div class="col-md-8"><a href="product.html">
                <h4>Механизм трансформер 1205</h4></a><img src="../assets/img/hatch-line.png" alt=""/><span class="grey">Материал: <strong>Цинк   </strong></span><span class="grey">Цена: <strong>1,72 р                                                             </strong></span></div>
          </div>
        </div>
      </div>
    </div>

Answer 1

[Дмитрий]

Товаров немного, можно фильтровать на фронте методами JS.
Посмотрите этот плагин, например: https://isotope.metafizzy.co/
Если товаров будет много, логичнее писать ajax-обработчик, который будет при нажатии на нужную ссылку подгружать нужные товары.