@Againts7
Сайты

Как сделать такой каталог лендинга?

Подскажите самый простой способ сделать такой каталог postelshop.com товара, чтобы также можно было переключать категории товара. Я чайник! Что-то типа замены блоков при нажатии. Не получается.
  • Вопрос задан
  • 86 просмотров
Решения вопроса 1
  • yellow79
    @yellow79
    Senior Software Engineer
    Для всех товаров проставляете тэги, можно не один
    <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>

    Далее, при клике по кнопкам сортировки проходитесь по всем товарам и задаёте видимость согласно выбранного тега. Как-то примерно вот так:
    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";
      }
    }


    Кнопки сортировки примерно вот так выглядят
    <button onclick="sortItems('cat1')">категория 1</button>
    <button onclick="sortItems('cat2')">категория 2</button>
    <button onclick="sortItems('catN')">категория N</button>
    Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы