Вывод товаров в CMS

Необходимо сделать вывод товаров для каждого раздела по примеру сайта https://www.pinterest.ru

==============================

Работа для ответственного, аккуратного специалиста с опытом работы.

Движок Open Cart.

==============================

Необходимо сделать вывод товаров для каждого раздела по примеру сайта https://www.pinterest.ru - http://prntscr.com/qlo55v

https://woodz.pro/stol-reka/?page=3 - то, как сейчас выглядит страница товаров.

Нужно удалить левых блок фильтра и верхний блок сортировки со страницы вывода товаров - http://prntscr.com/qlo5i9

И сделать что-то похожее на это. Только нужно выводить все товары из раздела, а не фиксировано 15. Следовательно разбития на страницы тоже не должно быть. http://prntscr.com/qlo5oz

http://prntscr.com/qlo5wh

При наведении на карточку товара, должна выводиться информация: Цена товара, размеры товара, и кнопка "подробнее", при клике на которую откроется подробная страница товара.

Стили для карточки товара уже есть в файле, который будет приложен к сообщению.

Также в файле есть тестовый скрипт, который можно было бы дописать и выполнить работу. Или можете сделать так, как видите это вы.

Моя идея заключалась в следующем - Получать кол-во всех товаров, и делить это кол-во на 5, так как в строчку максимально будет вмещаться 5 товаров. Таким образом мы получим кол-во строчек в блоке и его размер. Каждая строчка прибавляет к его высоте по 300px. Сам блок представляет из себя flex-контейнер со свойством flex-direction: wrap и расположением элементов в столбец. Так как карточки товаров должны быть как на пинтересте, а именно - разной высоты, то я получал случайный размер карточки товара от 245, до 285px. После получения таких карточек товара, я считаю занятое кол-во занятых пикселей в блоке, и кол-во незанятых, деля получившееся расстояние поровну между всеми строками, и прибавляя полученный результат к текущей высоте блока карточки товара.

Все это закомментировано в файле, прилагаемом к сообщению.

Можете доработать эту систему под вывод всех товаров, или сделать свой вариант.

В мобильной версии (Размер экрана меньше 550px) все товары должны следовать в 1 столбец друг за другом.

На сайте установлен bootstrap, так, что можете использовать и его, при необходимости.

==============================

Нужно сделать работу в срок до 07.02.2020.

==============================

Способы оплаты: внутренний счет Weblancer, WMR, WMZ, QIWI, Яндекс.Деньги, карта Сбербанк, ВТБ.