<div class="container">
  <h1>Сортировка товара JavaScript</h1>
  <hr>
  <button id="sort-asc">По возрастанию</button>
  <button id="sort-desc">По убыванию</button>
  <button id="sort-rating">По рейтингу</button>
  <hr>
  <div class="mag__inner">
    <nav>
      <ul class="list">
        <li class="li__item">
          <label>
            <input type="checkbox" data-f="f-img">
            <span>C изображением</span>
          </label>
        </li>
        <li class="li__item">
          <label>
            <input data-f="f-game" type="checkbox">
            <span>Игровые</span>
          </label>
        </li>
        <li class="li__item">
          <label>
            <input data-f="f-office" type="checkbox">
            <span>Офисные</span>
          </label>
        </li>
        <li class="li__item">
          <label>
            <input data-f="f-gc" type="checkbox">
            <span>144гц</span>
          </label>
        </li>

      </ul>
    </nav>
    <div class="goods-wrap" id="all">
      <div class="goods-card f-office" data-price="150" data-rating="3">
        <img src="https://img.icons8.com/plasticine/100/000000/orange.png" />
        <h1>Lorem ipsum dolor sit.</h1>
        <p>150 usd</p>
        <button class="buy">Купить</button>
      </div>
      <div class="goods-card f-office f-img" data-price="110" data-rating="3">
        <img src="https://img.icons8.com/cotton/64/000000/plum--v1.png" />
        <h1>Lorem ipsum dolor sit.</h1>
        <p>110 usd</p>
        <button class="buy">Купить</button>
      </div>
      <div class="goods-card f-game f-img f-gc" data-price="310" data-rating="6">
        <img src="https://img.icons8.com/dusk/64/000000/raspberry.png" />
        <h1>Lorem ipsum dolor sit.</h1>
        <p>310 usd</p>
        <button class="buy">Купить</button>
      </div>
      <div class="goods-card f-office" data-price="168" data-rating="4">
        <img src="https://img.icons8.com/cotton/64/000000/apricot--v1.png" />
        <h1>Lorem ipsum dolor sit.</h1>
        <p>168 usd</p>
        <button class="buy">Купить</button>
      </div>
      <div class="goods-card f-office" data-price="138" data-rating="10">
        <img src="https://img.icons8.com/officel/80/000000/apricot.png" />
        <h1>Lorem ipsum dolor sit.</h1>
        <p>138 usd</p>
        <button class="buy">Купить</button>
      </div>
      <div class="goods-card f-office" data-price="82" data-rating="5">
        <img src="https://img.icons8.com/cotton/64/000000/sweet-banana.png" />
        <h1>Lorem ipsum dolor sit.</h1>
        <p>82 usd</p>
        <button class="buy">Купить</button>
      </div>
      <div class="goods-card f-game f-img" data-price="220" data-rating="8">
        <img src="https://img.icons8.com/officel/80/000000/no-apple.png" />
        <h1>Lorem ipsum dolor sit.</h1>
        <p>220 usd</p>
        <button class="buy">Купить</button>
      </div>
      <div class="goods-card f-img" data-price="30" data-rating="10">
        <img src="https://img.icons8.com/plasticine/100/000000/watermelon.png" />
        <h1>Lorem ipsum dolor sit.</h1>
        <p>30 usd</p>
        <button class="buy">Купить</button>
      </div>
    </div>
  </div>
</div>
.container>h1 {
   text-align: center;
}

hr {
   margin: 20px 0;
}

ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

li {
   padding: 0;
   margin: 0;
}

.mag__inner {
   display: flex;
}

.goods-wrap {
   display: flex;
   flex-wrap: wrap;
}

.goods-card {
   width: 270px;
   margin: 20px 1.5%;
   border: 1px solid #c0c0c0;
   padding: 20px;
}

.goods-card img {
   max-width: 90%;
   display: block;
   height: 110px;
   margin: 20px auto;
}

.goods-card h1 {
   font-size: 14px;
   text-align: center;
}

.goods-card p {
   text-align: center;
   margin: 20px auto;
   font-weight: bold;
   color: green;
}

.goods-card .buy {
   display: block;
   margin: 20px auto;
   background: #00a046;
   border-radius: 4px;
   padding: 5px 10px;
   color: #fff;
   border: none;
}

nav {
   width: 17%;
   background-color: #eeeeee;
}

.list {
   padding: 20px 10px 0;
}

label  {
  cursor: pointer;
}

.li__item {
   padding: 10px 5px;
   margin: 10px 0;
   background-color: #fff;
   cursor: pointer;
}

.hide {
   display: none;
}

@media (max-width: 1200px) {
   nav {
      width: 30%;
   }

   .goods-card {
      width: 25%;
   }
}
// Сортировка по возрастанию/по убыванию/по рейтингу
document.querySelector("button#sort-asc").onclick = function () {
  mySort("data-price");
};
document.querySelector("button#sort-desc").onclick = function () {
  mySortDesc("data-price");
};
document.querySelector("button#sort-rating").onclick = function () {
  mySortDesc("data-rating");
};

// По возрастанию
function mySort(sortType) {
  let nav = document.querySelector(".goods-wrap");
  for (let i = 0; i < nav.children.length; i++) {
    for (let j = i; j < nav.children.length; j++) {
      if (
        +nav.children[i].getAttribute(sortType) >
        +nav.children[j].getAttribute(sortType)
      ) {
        replacedNode = nav.replaceChild(nav.children[j], nav.children[i]);
        insertAfter(replacedNode, nav.children[i]);
      }
    }
  }
}

// По убыванию и рейтингу
function mySortDesc(sortType) {
  let nav = document.querySelector(".goods-wrap");
  for (let i = 0; i < nav.children.length; i++) {
    for (let j = i; j < nav.children.length; j++) {
      if (
        +nav.children[i].getAttribute(sortType) <
        +nav.children[j].getAttribute(sortType)
      ) {
        replacedNode = nav.replaceChild(nav.children[j], nav.children[i]);
        insertAfter(replacedNode, nav.children[i]);
      }
    }
  }
}

function insertAfter(elem, refElem) {
  return refElem.parentNode.insertBefore(elem, refElem.nextSibling);
}

// Сортировка nav
const nav = document.querySelector("nav");
const checkBoxs = [...nav.querySelectorAll('input[type="checkbox"]')];
const filterBox = document.querySelectorAll(".goods-card");

nav.addEventListener("change", filterNav);

function filterNav(e) {
  if (e.target.type !== "checkbox") return;
  
  const checked = checkBoxs.filter(ch => ch.checked).map(ch => ch.dataset.f);
  
  // показать все, если ни один не выбран
  if (!checked.length) {
    filterBox.forEach(el => el.classList.remove("hide"));
    return;
  }
  
  // показать только выбранные
  for (let elem of filterBox) {
    const classList = [...elem.classList];
    if (checked.some(ch => classList.includes(ch))) {
      elem.classList.remove("hide");
    }
    else {
      elem.classList.add("hide");
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.