Шаблон сортировки менять в зависимости от размера экрана

Разработчикам Общение разработчиков
1

Доболго времени суток.
Шаблон сортировки в стандартной теме находится в design/themes/responsive/templates/common/sorting.tpl

Стоит зада в зависимости от размера экрана переключатся между видом категории мультиколонки и один товар на одну линию

Более 425px экран - показывать товары как мультиколонки,
т.е. если экран 425px и меньше, то мультиколонки автоматом менять на один товар на одну линию

Подозреваю что нужно использовать JS для этой задачи? Есть ли стандартный способ в CS-Сart для этого?

2

Если у вас Юни, то там есть такие настройки.

%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5
%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B51244×230 8.6 KB

3

что такое Юни ?

4

https://unitheme.net/
шаблон такой гибкий

5

у нас уже куплен другой шаблон. вобщем так понимаю без js скрипта тут не получится сделать переключение типа сортировки в каталоге

6

image
image495×910 81.8 KB

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

7

А настройки как на скрине из 2 поста сделаны? Это возможность темы, но ее нужно предварительно включить

8

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

$(document).ready(function(){
let size = $(window).width();

if (size <= 425) {
    let grid = $('.ty-sort-container__views-icons>a');

    grid.each(function( index ) {
        is_active = $( this ).hasClass('active');
        item = this.firstElementChild.className;

        if (item === 'ty-icon-products-without-options' && !is_active) {
            this.click();
        }
    });
} else {
    let grid = $('.ty-sort-container__views-icons>a');

    grid.each(function( index ) {
        is_active = $( this ).hasClass('active');
        item = this.firstElementChild.className;

        if (item === 'ty-icon-products-multicolumns' && !is_active) {
            this.click();
        }
    });
}

});

1 лайк