Как добавить переключение вида представления товаров сетка/список в OkayCMS

Добрый день! Хотим рассказать, как можно добавить функцию изменнения вида представления списка товаров в OkayCMS.

Посмотрите на картинках, как это будет выглядеть. 

Для доработки на базе стандартной OkayCMS нужно сделать несколько изменнений:

1. Скачать архив с файлами для работы здесь.

2. В папку design/default/images/ положите два файла с картинками (имена не меняйте): grid.png и list.png.

Эти файлы Вы найдете в скаченном архиве в папке images.

grid.png

list.png

 3. Важно! Делайте это, если ранее в этот файл не вносились никакие изменения!

    Файл design/default/html/tiny_products.tpl замените на файл tiny_products.tpl из архива. 

 4. Важно! Делайте это, если ранее в этот файл не вносились никакие изменения!

    Файл design/default/html/products_sort.tpl замените на файл products_sort.tpl из архива.

 5. Если в файл design/default/js/okay.js раньше не вносилось никаких изменений, то можно заменить его файлом okay.js из архива.

     Если же в этом файле что-то менялось, то в начало файла design/default/js/okay.js добавьте код:

// view choise - begin of block
function view_pr(v){
	console.log(v);
  switch (v) {
  case "grid":
    $('#fn-products_content').children().removeClass();
    $('.grid').addClass('selected');
    $('.compact').removeClass('selected');
    $('.list').removeClass('selected');
	$('#fn-products_content').children().addClass('col-md-4 col-lg-6 col-xl-4 grid_view');
    break;
  case "list":
    $('.list').addClass('selected');
    $('.compact').removeClass('selected');
    $('.grid').removeClass('selected');
    $('#fn-products_content').children().removeClass();
	$('#fn-products_content').children().addClass('col-md-12 list_view');
    break;
  }
}
function view_choose(){
    $(document).on('click','.grid', function(){
    sessionStorage.setItem("view_ch","grid");
	view_pr(sessionStorage.getItem("view_ch"));
    });
    $(document).on('click', '.list', function(){
    sessionStorage.setItem("view_ch","list");
	view_pr(sessionStorage.getItem("view_ch"));
    });
};
$(document).ready(function(){
if(!sessionStorage.getItem("view_ch")){
	sessionStorage.setItem("view_ch","grid");
   };
view_pr(sessionStorage.getItem("view_ch"));	
view_choose();
});
// view choise - end of block

6. Если в файл design/default/css/bootstrap.css раньше не вносилось никаких изменений, то можно заменить его файлом bootstrap.css из архива.

    Если же в этом файле что-то менялось, то в конец файла design/default/css/bootstrap.css добавьте код:

/*view choise - begin of block*/
@media (max-width: 480px) {
  .view span {
    display: none;
      }
}
.view{
  float: right;
  font-size: 0;
}
.view span{
  display: inline-block;
  width: 23px;
  height: 23px;
  margin: 0 0 0 10px;
  cursor: pointer;
}
.view .grid:hover, .view .grid.selected {
    background: url(../images/grid.png) 0 100% no-repeat;
}
.view .grid {
    background: url(../images/grid.png) 0 0% no-repeat;
}
.view .list:hover, .view .list.selected {
    background: url(../images/list.png) 0 100% no-repeat;
}
.view .list {
    background: url(../images/list.png) 0 0% no-repeat;
}
.list_view{
  margin: 0;
  padding: 0;
}
.list_view .fn-product{
  box-sizing: border-box;
  border: 1px solid #C9E7FC;
}
.list_view .fn-product:hover {
  border: 1px solid #0095FF;
}
.list_view .fn-product:hover .card-block{
border: 1px solid transparent;
}
@media (max-width: 992px) {
  .list_view .fn-product:hover .card-block{
    border: none;
  }
}
.list_view .card-image{
  float: left;
  width: 25%;
}
.list_view .card-title{
  text-align: left;
}
.list_view .card-price-block{
  display: block;
  float: right;
  width: 25%;
}
.list_view .block-old-price,
.list_view .block-price{
  float: none;
  width: 100%;
  text-align: right;
  margin: 0 0 10px 0; 
}
.list_view .input-group-btn{
  width: auto;
}
.list_view .fn-comparison,
.list_view .fn-wishlist,
.list_view .i-add-cart{
  float: right;
}
.list_view .card-annotation{
  float: none;
  width: 75%;
  text-align: left;
}
.grid_view .card-annotation{
  display: none;
}
.list_view .block-prices-buttons{
  display: block;
  float: right;
  width: 75%;
}
.list_view .fn-variants{
  display: block;
  float: right;
}
/*view choise - end of block*/

Если что-то не получится или возникнут вопросы, обращайтесь к нам.