Перейти к содержанию
kavi

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

Рекомендуемые сообщения

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Сам задал вопрос и сам нашёл решение. Чтобы получить 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-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-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-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;

    }

}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

сменить класс элемента на col-lg-2

у которого как раз  

.col-lg-2 {
    width: 16.66666667%;
  }
 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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),

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

еще как вариант отредактировать /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');
	});

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 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% ???

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 25.12.2015 в 13:45, duttyology сказал:

1. В файле /Ваш сайт/catalog/view/javascript/bootstrap/css/bootstrap.min.css
 
меняете строку:

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

 

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Задается он в 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');
        }

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 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/

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 22.11.2015 в 13:57, nikifalex сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
14 часов назад, davayigrat сказал:

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

 

 

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

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
12 часов назад, legioner26 сказал:

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.