How to make such a landing catalog?

Question

JavaScript

Tell me the easiest way to make such a postelshop.com product catalog so that you can also switch product categories. I'm a kettle! Something like replacing blocks on click. Does not work.

Answer 1

For all products put down tags, you can not just one

<div class="thing-item" data-tags="cat1">
  <!-- тут содержимое блока с товаром -->
</div>
<div class="thing-item" data-tags="cat1,catN">
  <!-- тут содержимое блока с товаром -->
</div>
<div class="thing-item" data-tags="cat2,catN">
  <!-- тут содержимое блока с товаром -->
</div>
<div class="thing-item" data-tags="cat1,cat2">
  <!-- тут содержимое блока с товаром -->
</div>

Next, when you click on the sort buttons, go through all the products and set the visibility according to the selected tag. Something like this:

function sortItems(tag){
  var items = document.querySelectorAll(".thing-item");
  for(var i = 0, max = items.length; i < max i++) {
    items[i].style.display = items[i].getAttribute("data-tags").indexOf(tag) != -1 ? "block" : "none";
  }
}

Sort buttons look something like this

<button onclick="sortItems('cat1')">категория 1</button>
<button onclick="sortItems('cat2')">категория 2</button>
<button onclick="sortItems('catN')">категория N</button>

Answer 2

Very simple: MixItUp