Изменение вида продуктов через javascript

420

31 августа 2017, 22:10

Задача заключается в следующем.

Нужно сделать кнопку, которая переключает вид товаров на сайте(кубиками или списком).
Из моих идей:

Через ajax посылать запрос, а в ответ получать страницу с товарами в требуемом стиле
Через js редактировать html код товаров(какой-то костыль, кажется)
Другая страница в требуемом формате(самый худший вариант, как понимаете)

Прошу помочь с этой задачей. Как ее лучше решить? Может есть более простой способ?

Answer 1

В данном случае стоит просто манипулировать стилями:

var products = document.getElementById('products'); 
 
document.getElementById('grid').addEventListener('click', function(){ 
  products.classList.add('grid'); 
}); 
 
document.getElementById('list').addEventListener('click', function(){ 
  products.classList.remove('grid'); 
});

.product { 
  background: #CCC; 
  width: 100%; 
  height: 50px; 
  border: 1px solid #FFF; 
  box-sizing: border-box; 
  float: left; 
} 
.grid .product { 
  width: 50%; 
}

<button id="list">Список</button> 
<button id="grid">Сетка</button> 
 
<div id="products"> 
  <div class="product"></div> 
  <div class="product"></div> 
  <div class="product"></div> 
  <div class="product"></div> 
  <div class="product"></div> 
  <div class="product"></div> 
  <div class="product"></div> 
  <div class="product"></div> 
  <div class="product"></div> 
  <div class="product"></div> 
</div>

Answer 2

А в чем, собственно, заключается костыльность второго варианта?

Ставите две кнопки, которые будут переключать стили у блоков товара. И делаете количество выдаваемых единиц кратное количеству столбцов при изменении на "сетку". Насколько я знаю, таким способом пользуются все популярные торговые площадки.