Как правильно делать фильтр на сайте?

Question

[licvis]

Добрый день. Поскольку человек к этой области новичок и могу криво и косо сверстать что-то xD
Интересна тема фильтра на странице. Конкретнее: Есть категория "Диваны", "Шкафы" и также есть общая страница, где все эти две категории. Вопрос: Как реализовать так, что при нажатие на категорию "Диван", в общей странице скроется все, кроме нужной мне категории ( тобишь останется только категория "диван" с классом "divan" ).
Догадываюсь как это делается, но в силу маленьких знаний в этой области не могу реализовать или найти действительно годную статью.
Результат интересует как behance. Когда при выборе категории меняется страница работ, url из "behance.ru" превращается "behance.ru/kate", но визуально нет переадресации на новую страницу.
Заранее спасибо :D

Answer 1

[Михаил Р.]

Результат интересует как behance. Когда при выборе категории меняется страница работ, url из "behance.ru" превращается "behance.ru/kate", но визуально нет переадресации на новую страницу.

Если брать пример с behance.ru, то у них на сайте используется vuejs, который предварительно был отрендерен на сервере.

Если Вы хотите на обычном js такое реализовать, то Вам необходимо менять url при клике на определенный элемент:

// listeners
document.querySelector('.showDivan').addEventListener('click', () => filter('divan'));
document.querySelector('.showShkaf').addEventListener('click', () => filter('shkaf'));
document.querySelector('.showAll').addEventListener('click', () => filter('all'));

// filtering
const filter = category => {
  const items = document.querySelectorAll('.product');

  items.forEach(item => {
    item.style.display = category === 'all' || item.classList.contains(category) ? 'block' : 'none';
  });

  // change url
  history.pushState({}, '', `/category/${category}`);
}

Стоит ли делать на чистом js? Ради фана - можно, в остальных случаях - не рекомендуется, т.к. для этого изобрели тот же самый vuejs/reactjs.

Comments

[licvis]

Спасибо! помогло