grid-view

Тема в разделе "Дизайн, оформление и шаблоны", создана пользователем Lorn, 12 фев 2015.

  1. Lorn

    Lorn Новичок

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

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

    Ravilr Специалист

    Сообщения:
    3.981
    Симпатии:
    1.087
    В файле \catalog\view\javascript\common.js
    находим
    Код:
        if (localStorage.getItem('display') == 'list') {
    из перед этим, вставляем
    Код:
         localStorage.setItem('display', 'grid');
     
    sibrus, tsap и Lorn нравится это.
  3. Lorn

    Lorn Новичок

    Сообщения:
    6
    Симпатии:
    0
    Спасибо!
     
  4. jflex

    jflex Новичок

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

    Ravilr Специалист

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

    jflex Новичок

    Сообщения:
    7
    Симпатии:
    0
    Стандартный шаблон.
    Я правильно понял что перед:
    Код:
    if (localStorage.getItem('display') == 'list') {
    Нужно вставить вот это:
    Код:
    localStorage.setItem('display', 'grid');
     
  7. Ravilr

    Ravilr Специалист

    Сообщения:
    3.981
    Симпатии:
    1.087
    да
     
  8. jflex

    jflex Новичок

    Сообщения:
    7
    Симпатии:
    0
    Странно, сейчас еще раз испробую
     
  9. jflex

    jflex Новичок

    Сообщения:
    7
    Симпатии:
    0
    К сожалению не помогло, как только я удаляю кнопки из category.tpl, у меня по дефолту отображается список.
    Вот кусок скрипта, как я понимаю, отвечающий за отображение:
    Код:
    // 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');
        }
     
  10. Ravilr

    Ravilr Специалист

    Сообщения:
    3.981
    Симпатии:
    1.087
    не удаляйте кнопки, просто добавьте класс hide или через стили скрыть в display:none
     
    jflex нравится это.
  11. jflex

    jflex Новичок

    Сообщения:
    7
    Симпатии:
    0
    Уффф действительно заработало, спасибо за помощь =)
     
  12. Ravilr

    Ravilr Специалист

    Сообщения:
    3.981
    Симпатии:
    1.087
    Ну еще вариант для полной картины.

    Можно просто закоментировать строчки события (это для списка)
    // $('#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');
    // });


    тогда событие наступит сразу. Для таблицы по аналогии.
     
    Ален нравится это.
  13. Андрей Быстров

    Андрей Быстров Пользователь

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

    Вложения:

    • 25.jpg
      25.jpg
      Размер файла:
      113,1 КБ
      Просмотров:
      38
  14. Vlad

    Vlad Эксперт

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

    Vladegg Новичок

    Сообщения:
    7
    Симпатии:
    0
    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;
    }
    Итог выведет сеткой товари,уберет сортировку.
     
    Последнее редактирование: 11 сен 2017
  16. maluu233

    maluu233 Новичок

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

    mracula Пользователь

    Сообщения:
    64
    Симпатии:
    2
    Решил добавить еще один способ показа товара прайсом. Вот таким скриптом. Добавил 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');
    });
    Получается переключаться с прайса на лист и сетку а вот с сетки или листа только на прайс. Как решить проблему?
     
  18. karpov

    karpov Продвинутый пользователь

    Сообщения:
    1.524
    Симпатии:
    243
    Версия движка какая? Сайт покажите, чтобы не повторять то что написали.
     
  19. vortex

    vortex Новичок

    Сообщения:
    1
    Симпатии:
    1
    Мой вариант оставить только сетку:

    удаляем
    // 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');
    }
     
    mracula нравится это.
  20. mracula

    mracula Пользователь

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