[Решено?..] Количество товаров в одной строке

kavi · 15 листопада 2015

Всем привет! В категории в одну строку выводится по три товара. А как можно сделать выведение 3-4 товаров в строку?

http://demo.opencart.com/index.php?route=product/category&path=25_28

vasylkor · 22 листопада 2015

Ребята, у меня такая же проблема: как сделать 5-6 колонок вывода товара в категории в режиме "сетка"? Я смог уменьшить ширину товара, отображаемого в категории, но всё равно больше 3-х в одну строчку не размешается. Вот мой сайт - http://cprk.pp.ua/index.php?route=product/category&path=59_72

vasylkor · 22 листопада 2015

Сам задал вопрос и сам нашёл решение. Чтобы получить 6 колонок, надо:

1. В файле /Ваш сайт/catalog/view/javascript/bootstrap/css/bootstrap.min.css

меняете строку:

.col-lg-4{width:33.33333333%}

на строку

.col-lg-4{width:16.66666666%}

2. В файле /Ваш сайт/catalog/view/theme/default/stylesheet/stylesheet.css

Удаляете блок:

@media (min-width: 1200px) {

#content .col-lg-2:nth-child(6n+1),

#content .col-lg-3:nth-child(4n+1),

#content .col-lg-4:nth-child(3n+1),

#content .col-lg-6:nth-child(2n+1) {

clear:left;

}

@media (min-width: 992px) and (max-width: 1199px) {

#content .col-md-2:nth-child(6n+1),

#content .col-md-3:nth-child(4n+1),

#content .col-md-4:nth-child(3n+1),

#content .col-md-6:nth-child(2n+1) {

clear:left;

}

@media (min-width: 768px) and (max-width: 991px) {

#content .col-sm-2:nth-child(6n+1),

#content .col-sm-3:nth-child(4n+1),

#content .col-sm-4:nth-child(3n+1),

#content .col-sm-6:nth-child(2n+1) {

clear:left;

}

vasylkor · 22 листопада 2015

Подскажите другой способ выше поставленной задачи: правильный, лёгкий и простой.

vasylkor · 24 листопада 2015

Не всё так просто, как хотелось бы. После данной процедуры ширина ячейки с товаром уменьшится, но количество колонок всё-равно остаётся 3 и получается, что товары как бы смещаются влево, а справа получается пустоё место

duttyology · 25 грудня 2015

4 колонки :

1. В файле /Ваш сайт/catalog/view/javascript/bootstrap/css/bootstrap.min.css

меняете строку:

.col-lg-4{width:33.33333%} на
.col-lg-4{width:25%}

2. В файле /Ваш сайт/catalog/view/theme/default/stylesheet/stylesheet.css

#content .col-lg-4:nth-child(3n+1),

на

content .col-lg-4:nth-child(4n+1),

Lordaaa · 25 грудня 2015

еще как вариант отредактировать /catalog/view/javascript/common.js, изменив классы col-lg col-md col-sm на нужные значения.

Opencart 2
	// 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');
		}

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

mitandaster · 23 січня 2018

В 25.12.2015 в 10:45, duttyology сказал:

4 колонки :

1. В файле /Ваш сайт/catalog/view/javascript/bootstrap/css/bootstrap.min.css

меняете строку:

.col-lg-4{width:33.33333%} на
.col-lg-4{width:25%}

2. В файле /Ваш сайт/catalog/view/theme/default/stylesheet/stylesheet.css

#content .col-lg-4:nth-child(3n+1),

на

content .col-lg-4:nth-child(4n+1),

а если надо 5 товаров в ряд??

п. 2 - понятно: надо поставить 5

а п. 1 - сколько %? 16,66667% ???

hope · 28 березня 2018

Задается он в common.js
смотрите участки кода

Код:

    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>');
    }

Код:

        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');
        }

В первом задается через какое кол-во товара перепрыгивать на новую строку.

davayigrat · 30 квітня 2018

В 24.01.2018 в 15:12, nikifalex сказал:

вырвать программисту руки и запихуть куда и положено

Добрый день! а не подскажете как же все таки правильно делать?

В 28.03.2018 в 10:06, hope сказал:

Задается он в common.js
смотрите участки кода

Код:


    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>');
    }

Код:


        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');
        }

В первом задается через какое кол-во товара перепрыгивать на новую строку.

если использовать такой вариант - все работает, загвоздка только в том что у меня на сайте есть кнопка "показать еще", и когда жмешь на нее новый товар открывается 3 штуки в ряд, как было до изменений

сайт: https://davayigrat.ru/

legioner26 · 1 травня 2018

В 22.11.2015 в 13:57, nikifalex сказал:

боже зачем ты дал людям возможность редактировать bootstrap

Плюсую Зато заказов бууудет

legioner26 · 1 травня 2018

14 часов назад, davayigrat сказал:

Добрый день! а не подскажете как же все таки правильно делать?

если использовать такой вариант - все работает, загвоздка только в том что у меня на сайте есть кнопка "показать еще", и когда жмешь на нее новый товар открывается 3 штуки в ряд, как было до изменений

сайт: https://davayigrat.ru/

Правильно сделать так

1. Вырвать руки программисту как было описано выше

2. Отдать задачу в те руки которые не нужно вырывать потом

davayigrat · 1 травня 2018

12 часов назад, legioner26 сказал:

Правильно сделать так

1. Вырвать руки программисту как было описано выше

2. Отдать задачу в те руки которые не нужно вырывать потом

А сколько хотят получить те руки ?)))

megoydagi · 15 квітня 2020

Причем тут файл стилей бутстрап?

Меняете шаблон, там четко прописано col-sm-4 или col-sm-3

Ставите нужное значение и все. Ширина ряда 12, соответственно 12 делите на число неоободимых ячеек и прописываете в col.

Например если надо 6 ячеек в одном ряду ставите col-sm-2

Вхід

[Решено?..] Количество товаров в одной строке

Recommended Posts

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Important Information