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

#javascript #ajax #веб_программирование #django

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


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






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

Ответы

Ответ 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%;
}




  

  

  

  

  

  

  

  

  

  




Ответ 2

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

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