Как добавить переключение вида представления товаров сетка/список в OkayCMS
Добрый день! Хотим рассказать, как можно добавить функцию изменнения вида представления списка товаров в OkayCMS.
Посмотрите на картинках, как это будет выглядеть.
![]() |
![]() |
Для доработки на базе стандартной OkayCMS нужно сделать несколько изменнений:
1. Скачать архив с файлами для работы здесь.
2. В папку design/default/images/ положите два файла с картинками (имена не меняйте): grid.png и list.png.
Эти файлы Вы найдете в скаченном архиве в папке images.
![]() |
![]() |
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*/
Если что-то не получится или возникнут вопросы, обращайтесь к нам.
Комментарии
Пока нет комментариев
Оставить комментарий