grid-view

При выборе категории вывод товаров может осуществляться двумя способами:
1. Список;
2. Сетка.

В opencart 2.0.1.1 для управление переключением между видом вывода используется библиотека bootstrap.
Я бы хотел оставить только вывод сеткой и отключить возможность переключения (с чем проблем нет, достаточно удалить кнопки из шаблона). Но не могу разобраться, каким образом я могу всегда по умолчанию выводить товары только в режиме сетки?
Буду благодарен за советы.

 

В файле \catalog\view\javascript\common.js
находим

Code:

    if (localStorage.getItem('display') == 'list') {

из перед этим, вставляем

Code:

     localStorage.setItem('display', 'grid');

 

Спасибо!

 

Добрый день, опишите плиз подробнее где и что нужно вставить, пробовал по всякому ни как не выходит. Opencart 2.0.2

 

выше описанный способ не помогает разве? Вроде все проще некуда.
Может у вас шаблон не стандартный и может править надо не common.js ??

 

Стандартный шаблон.
Я правильно понял что перед:

Code:

if (localStorage.getItem('display') == 'list') {

Нужно вставить вот это:

Code:

localStorage.setItem('display', 'grid');

 

да

 

Странно, сейчас еще раз испробую

 

К сожалению не помогло, как только я удаляю кнопки из category.tpl, у меня по дефолту отображается список.
Вот кусок скрипта, как я понимаю, отвечающий за отображение:

Code:

// Product List
    $('#list-view').click(function() {
        $('#content .product-layout > .clearfix').remove();

        //$('#content .product-layout').attr('class', 'product-layout product-list col-xs-12');
        $('#content .row > .product-layout').attr('class', 'product-layout product-list col-xs-12');
      
        localStorage.setItem('display', 'list');
    });

    // Product Grid
    $('#grid-view').click(function() {
        $('#content .product-layout > .clearfix').remove();

        // What a shame bootstrap does not take into account dynamically loaded columns
        cols = $('#column-right, #column-left').length;

        if (cols == 2) {
            $('#content .product-layout').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-12');
        } else if (cols == 1) {
            $('#content .product-layout').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12');
        } else {
            $('#content .product-layout').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
        }

         localStorage.setItem('display', 'grid');
    });
    localStorage.setItem('display', 'grid');
    if (localStorage.getItem('display') == 'list') {
        $('#list-view').trigger('click');
    } else {
        $('#grid-view').trigger('click');
    }

 

не удаляйте кнопки, просто добавьте класс hide или через стили скрыть в display:none

 

Уффф действительно заработало, спасибо за помощь =)

 

Ну еще вариант для полной картины.

Можно просто закоментировать строчки события (это для списка)

// $('#list-view').click(function() {

        $('#content .product-layout > .clearfix').remove();

        $('#content .row > .product-layout').attr('class', 'product-layout product-list col-xs-12');

        localStorage.setItem('display', 'list');

// });

тогда событие наступит сразу. Для таблицы по аналогии.

 

OpenCart 2.2.0.0
После этих исправлений заметил проблему. Если результат выдачи переключить на 2-ю и далее страницы, а также попытаться переключить результат с 25 на более, то выдаёт всякую козябру. И не повлиял ли здесь переход c http на https. Не поможете?

 

Не должны эти исправления на что то повлиять.. тем более на поиск с крякозябрами. Ваша ошибка в другом, в хостере. Это уже описывалось в одной из тем.

 

v OpenCart 2.3.0.2 находим catalog/view/theme/Ваша тема/template/product/category.tpl
<?php if ($products) { ?>
<div class="row"> 56 строка добавляем класс class = "hidden_content"
<div class="col-md-2 col-sm-6 hidden-xs">
и прописуем style.css
.hidden_content {
display:none;
}
Итог выведет сеткой товари,уберет сортировку.

 

Ну если использовать такой метод, то проще в строчке <div class="col-md-2 col-sm-6 hidden-xs"> изменить hidden-xs на hidden и не надо править style.css. Этот класс в bootstrap уже прописан, зачем его дублировать, хотя этот метод мне не очень нравиться, ведь серверу приходиться обрабатывать эти события а потом прятать. Может кто знает другой метод? Как в 1.5 было, изменить умолчание и удалить лишний код из шаблона

 

Решил добавить еще один способ показа товара прайсом. Вот таким скриптом. Добавил price-view в tpl, кнопочки появились. С прайса переключаться на сетку, при нажатии кнопки лист, снова отображается сетка,

<script type="text/javascript">

$('#price-view').click(function() {
$('.price-view').show();
$('#grid-view').removeClass('active');
$('#list-view').removeClass('active');
$('#table-view').addClass('active');
$('.product-layout.product-list').hide();
$('.product-layout.product-grid').hide();
});

$('#list-view').click(function() {
$('#price-view').removeClass('active');
$('.price-view').hide();
$('.product-layout.product-list').show();
$('.product-layout.product-grid').show();
});

$('#grid-view').click(function() {
$('#price-view').removeClass('active');
$('.price-view').hide();
$('.product-layout.product-list').show();
$('.product-layout.product-grid').show();
});

$(document).ready(function() {
$('#price-view').trigger('click');
});

</script>
Убрал из common.js строки

// Product List
$('#list-view').click(function() {
$('#content .product-grid > .clearfix').remove();

$('#content .row > .product-grid').attr('class', 'product-layout product-list col-xs-12');
$('#grid-view').removeClass('active');
$('#list-view').addClass('active');

localStorage.setItem('display', 'list');
});
Получается переключаться с прайса на лист и сетку а вот с сетки или листа только на прайс. Как решить проблему?

 

Версия движка какая? Сайт покажите, чтобы не повторять то что написали.

 

Мой вариант оставить только сетку:

удаляем
// Product List
$('#list-view').click(function() {
$('#content .product-grid > .clearfix').remove();

$('#content .row > .product-grid').attr('class', 'product-layout product-list col-xs-12');
$('#grid-view').removeClass('active');
$('#list-view').addClass('active');

localStorage.setItem('display', 'list');
});

далее убираем событие click оставляем как ниже
// Product Grid
var cols = $('#column-right, #column-left').length;

if (cols == 2) {
$('#content .product-list').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-12');
} else if (cols == 1) {
$('#content .product-list').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12');
} else {
$('#content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
}
и убираем проверку так как она не нужна
if (localStorage.getItem('display') == 'list') {
$('#list-view').trigger('click');
$('#list-view').addClass('active');
} else {
$('#grid-view').trigger('click');
$('#grid-view').addClass('active');
}

 

В общем я примерно так и сделал, оставил два вида прайс и сетку.