Товар выводится одной строкой

[antik21]

Добрый день.
Версия ocStore 2.1.0.2.1. Проблема заключается в том что товар в категориях выводится одной строкой http://prostoburger.ru/index.php?route=product/category&path=59 , а нужно что бы выводился по 4 товара в строке (в 4 колонки).
 

На форуме почитал что можно тут посмотреть,пробовал менять,ничего,все так же.

catalog/view/javascript/common.js 
 

// Product Grid
    $('#grid-view').click(function () {
        // What a shame bootstrap does not take into account dynamically loaded columns
        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 (cols1 == 2) {
        $('#content .product-layout:nth-child(2n+2)').after('<div class="clearfix visible-md visible-sm"></div>');
    } else if (cols1 == 1) {
        $('#content .product-layout:nth-child(3n+3)').after('<div class="clearfix visible-lg"></div>');
    } else {
        $('#content .product-layout:nth-child(4n+4)').after('<div class="clearfix"></div>');
    }

Видел этот способ,но у меня нет такого файла...
 

то идете сюда catalog/view/theme/default/template/module/product_tab.tpl

в других модулях или к примеру на странице категории по аналогии

находите отето

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

делаете как то так

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">

 

Вообщем я не знаю что еще попробовать,помогите плз!

[BuslikDrev]

В common.js поменять код grid на list. позже код сброшу. Включительно сеопро, чтобы дублей не было.
Вы свой 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 Grid
	$('#grid-view').click(function() {
		// What a shame bootstrap does not take into account dynamically loaded columns
		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');
		}

		$('#list-view').removeClass('active');
		$('#grid-view').addClass('active');

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

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

Либо в стилях после foreach
<div class="product-layout product-grid col-lg-3" >

[antik21]

Я чайник в этих делах...Как я понял нужно вставить 

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

после последней строки в // Product Grid ?

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

Или пометь ее? Поясните пожалуйста для "чайников" вместо или после чего..Заранее очень признателен.
Могу прикрепить файл.

common.rar

[jaffagold]

У вас разметка через flexbox

Там это не сработает. Нужен иной подход.

Типа:

html body main .products {

    display: flex;

    margin-top: 40px;

    flex-wrap: wrap;

}

Читать популярно тут 

раздел

1.5. Многострочность элементов flex-wrap

P.S.

Стили у вас написаны в таблице стилей немного странновато.

Достаточно было просто  .products, зачем это там:  html body main ?

[antik21]

Всем спасибо,решил проблему так:

в стили добавил

html body main .products .product {
margin-top: 10px;
}
html body main .products {
flex-wrap: wrap;
}

Еще раз спасибо.