Помощь Вывод кол-ва "последних" товаров в зависимости от разрешения экрана

[ggnk]

Всем доброго времени суток!
Имеется модуль последние ( latest ) в админке ocStore (v1.5.4.1), в этом модуле можно задать количество выводимых товаров:

Ширина блока с контентом, в котором реализован вывод этого модуля - тянется в зависимости от разрешения.

Как сделать вывод последних товаров нефиксированного размера - таким образом, чтоб выводилось то кол-во товаров, которое позволяет разрешение экрана посетителя. Верстка резиновая и на минимальном разрешении в одном ряду помещается 3 товара, а на максимальном - 4 товара. Если задать в админке через настройку модуля 3 товара, то получается на широких разрешениях пустота в последней колонке модуля. Если в настройках указать вывод 4-х товаров, то модуль будет хорошо смотрется на широком экране (ряд заполнен), но на разрешении менее 1600px будет выводится в два ряда и второй ряд будет заполнен лишь частично.
Нужно, чтоб модуль сам высчитывал сколько товаров показать.

Спойлер: иллюстрации

вот так выглядит вывод модуля на обычном экране:

А вот так выглядит вывод модуля на широком экране, ряд получается заполнен не до конца:

Посоветуйте, решать этот вопрос средствами CSS/Javascript или есть какое-то общеизвестное решение?

 

[eanknd]

средствами css:

overflow: hidden;
display: block;
width: 2024px /* ставьте нужное Вам */

Можете прикрутить карусель, например, OwlCarousel, тогда можете задать лимит хоть 10 товаров и видны будут все при прокрутке.

 

[ggnk]

Про оверфлоу хидден сразу подумал, но сомневался не будет ли горбылей при масштабировании.
А вот OwlCarousel это интересно. Её можно юзать многократно на одной странице? Например, сверху карусель лидеров продаж, снизу последних поступивших?

 

[eanknd]

Если будете использовать OwlCarousel, то overflow:hidden по-любому будет нужен. У меня на главной стоит на разных модулях, использую Bootstrap, при масштабировании все норм, однако не знаю как поведут себя те же модули в левой/правой колонке, будут ли отображаться товары каруселью или будут видны все товары, нужно со стилями будет поэкспериментировать.

 

[ggnk]

С этим вопросом в принципе все понятно,
я сейчас на сайте сделал так:

#content .latest-prod {height:287px;overflow:hidden;display:block !important;}

Всё работает на разных разрешениях. Вывод в сайдбаре не задевает, ибо обозначил родительский #content, а в сайдбаре #column-left.

Было бы здорово ещё разобраться как менять на лету кол-во товаров, выводимых на витрину.

Спойлер: иллюстрация

А то в одном случае товаров по 4 в ряд, а в другом по 3 и если выбрать число не кратное обоим , то в случае разбивки категории на страницы будет оставаться одно свободное место в конце.
12 товаров на странице для данного сайта это мало, а 24 уже много.
Есть идеи как "на лету" менять? Я сначала подумал на vqmod потом его отбросил, он ведь не будет срабатывать при изменении размера окна. А javascript опять же работает только на клиентской части и не может влиять на разбивку на страницы. Остается ajax ? Или это гиблое дело?

 

[Mihael-Vlz]

А ajax по Вашему это не javascript? ajax это всего лишь метод из javascript. Тут только если скрипт на javascript писать, чтобы он получал и делил ширину контент блока на ширину блока товара, а затем лишние отсекал.
Например на десктопе будет, 800px / 200px = 4 блока, а на мобильнике 400px / 200px = 2 блока. Лишние блоки просто скрываем методом javascript или CSS.

 

[ggnk]

А ajax по Вашему это не javascript? ajax это всего лишь метод из javascript. Тут только если скрипт на javascript писать, чтобы он получал и делил ширину контент блока на ширину блока товара, а затем лишние отсекал.
Например на десктопе будет, 800px / 200px = 4 блока, а на мобильнике 400px / 200px = 2 блока. Лишние блоки просто скрываем методом javascript или CSS.

если так сделать, то при переходе на вторую страницу - не будет тех товаров, которые были скрыты на первой.

Про ajax я имел ввиду родную пагинацию из opencarta заменить разбивкой на страницы ajax-ом

 

[Mihael-Vlz]

если так сделать, то при переходе на вторую страницу - не будет тех товаров, которые были скрыты на первой.

Про ajax я имел ввиду родную пагинацию из opencarta заменить разбивкой на страницы ajax-ом

К сожалению с пагинацией и кол-вом товаров на странице ничего адекватного не сделать, просто смириться. Если неймется, то можно городить огород и сделать всю пагинацию из javascript, чтобы он подсчитывал свободные места при каждом разрешении и подгружал весь контент на ajax. Но стоит ли овчинка выделки? Думаете покупатель будет зацикливаться на этом пустом блоке? Главное в магазине концентрироваться на прибыли, а не на всяких мелочах. Сам раньше занимался всякими мелочами и понял, что концентрироваться нужно совсем на другом, так как потраченное время вряд ли окупится в итоге.

 

[Mihael-Vlz]

У себя сделал так, сделал 3 ширины сайта методом CSS min-width & max-width, подсчитал кол-во блоков при каждой ширине, получилось что в самом широком варианте сайта 4, в среднем (для планшетов) 3, в последнем (для мобил) 2 и вычислил, что оптимальное кол-во товар на странице 24, не много и не мало.

 

[ggnk]

У себя сделал так, сделал 3 ширины сайта методом CSS min-width & max-width, подсчитал кол-во блоков при каждой ширине, получилось что в самом широком варианте сайта 4, в среднем (для планшетов) 3, в последнем (для мобил) 2 и вычислил, что оптимальное кол-во товар на странице 24, не много и не мало.

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