Динамическое изменение количества товаров в строке [альтернативное решение]

В настройках магазина можно выставить количество отображения товаров в строке, а как быть если у вас резиновый сайт, и при уменьшении размеров окна браузера, товары съезжают друг на друга?! Задача ставилась, чтоб лишние позиции переносились на следующую строку.

Перерыв кучу сайтов решения так и не нашел, советы по использованию выравнивания блоков float:left оказались не эффективными, поэтому я решил подогнать товары под минимальную ширину контента 1024px, а при просмотре на широких мониторах товары растягивались по всей ширине.

Для отображения в категории я выбрал шаблон browse_3.php (\components\com_virtuemart\themes\default\templates\browse) и отредактировал под свои нужды:

Спойлер

[свернуть]

т.е. сначала идет изображение 180х180px (при клике открывается большая картинка в лайтбоксе), далее название товара, далее краткое описание высотой 70px (высоту можно задать любую), и последняя строчка цены с кнопкой "Заказать".
Все это выстраивается в строки по 5 позиций, каждая по 19% шириной. На моем сайте нет боковых модулей и основное содежимое имеет отступы от краев по 20px, поэтому если у вас есть правые или левые модули, то вам необходимо изменить количество отображения товаров в настройках магазина и изменить ширину ячейки соответственно количеству (4 товара - 24%, 3 товара 29% и т.д.). От карточек товаров решили отказаться (скрыл подробнее), так же как и от поля выбора количества. Еще один важный момент - я использую безтабличную верстку, в настройках магазина во вкладке "сайт", кнопка "настройки" нужно выбрать Product list (no-table, div-based) и отредактировать отвечающий за это файл browse_notables.tpl.php (\components\com_virtuemart\themes\default\templates\browse\includes)
в 33 строке

Код

echo "<div style=\"margin-right: 5px; width:". intval(round(100/$cell_count)-2)."%; float:left;\" id=\"".uniqid( "row_" )."\">";

меняем ширину ячейки как описано выше

Код

echo "<div style=\"margin-right: 5px; width: 19%; clear: none; display:inline-block;\" id=\"".uniqid( "row_" )."\">";

В итоге получился результат близкий к желаемому. (ссылку добавлю позже)

1024

Спойлер

[свернуть]

1600

Спойлер

[свернуть]

[download] Модуль вывода товаров для VirtueMart (1.2.3 и 2.1) Автор beliyadm	Ответов: 1448 Просмотров: 411755	21.07.2015, 06:21:55 от Серегин
Альтернативный модуль вывода категорий товаров (mod_kdz_vm_categories) Автор kordima	Ответов: 89 Просмотров: 36120	19.02.2015, 22:02:14 от kordima
Отображение товаров в виде таблицы Автор Doppelganger	Ответов: 183 Просмотров: 69124	15.04.2014, 23:27:29 от 4ifir
Пагинация в категории товаров Автор chgr73	Ответов: 0 Просмотров: 2506	20.02.2014, 16:06:50 от chgr73
Сортировка товаров по цене Автор Batyabest	Ответов: 2 Просмотров: 2379	10.01.2014, 13:37:55 от Batyabest

Динамическое изменение количества товаров в строке [альтернативное решение] - [VM1] Дизайн, оформление

Новости Joomla

Вышли релизы безопасности Joomla 6.1.3 и Joomla 5.4.8

👩‍💻 WT Otpravkapochtaru - библиотека сервиса Отправка Почты России для Joomla-разработчиков.

👩‍💻 В Joomla 6.2 появятся встроенный функционал мультикатегорий.

profitural

Динамическое изменение количества товаров в строке [альтернативное решение]

Похожие темы