Alexufo
@Alexufo
противоречивый, сложный, весь компьютерный.

Интернет магазин, адаптивный кататолог. Реализация

Если у пользователя имеется монитор 1900px шириной, то разумно ему добавлять пару товаров на экран, чего место терять.В случае 1000px ширины экрана, товары прячутся.

Вот что нашел из более менее логичной реализации www.svachon.com/wordpress/wp-content/demos/wrecker/advanced.html здесь от ширины добавляется новая колонка и сами элементы увеличиваются, раз появляется место. Хотя все тот же float:left

Есть конечно такие забавные вещи:
www.wookmark.com/jquery-plugin
masonry.desandro.com/
Но они плохо подходят в силу своей реализации.

Весь день думали вдвоем над добавлением товаров к широким мониторам, но все обламывается, когда начинается постраничная навигация.
По сути вся адаптивщина пойдет на всякие виджеты типа акции и новинки, а на каталог что-то не вяжется и проще float:left. не ложиться на алгоритм адаптивщина и динамические элементы.
Да и из крупных магазинов что то подобного не встретил.

Никто не сталкивался с подобным и к какому решению пришли?
  • Вопрос задан
  • 6982 просмотра
Решения вопроса 4
mrspd
@mrspd
media queries вам в помощь
Ответ написан
ilyaerin
@ilyaerin
ruby разработчик
А в чем проблема с постраничной навигацией? Всем управляет js, грузите ajax запросами нужные вам порции данных в зависимости от разрешения экрана. Или же адаптивная верстка с float: left; Так же можо посмотреть как это реализовано, скажем, в twitter bootstrap. Там есть примеры, где верстка адаптируется и для телефона.
Ответ написан
A3a
@A3a
Размещайте на странице изначально много товаров, а если разрешение монитора широкое, ставьте их в один или два ряда, чтобы они полностью все помещались в экран без надобности скроллинга. И обладателям широких экранов будет удобно(все товары на виду), остальных пользователей не обидите и реализуется это просто с помощью через float.
Ответ написан
Комментировать
estum
@estum
Мой первый опыт адаптации уже готового магазина был на Skeleton`е, сразу же разобрался с media query, получилось быстро и довольно неплохо. Единственное, пришлось заморачиваться с меню, с сеткой каталога проблем не было. Тогда Skeleton особо популярностью не пользовался, но сейчас, смотрю, уже на гитхабе много форков с разными фичами.

Теперь, конечно, юзаю Bootstrap. Он выручает, если проект делать изначально на нем, иначе можно нагромоздить кучу всего ненужного, особенно если впервые с ним работать.

Подсматриваю за более-менее крупными зарубежными интернет-магазинами в моей сфере (одежда) — адаптивная верстка встречается редко, в основном делают мобильные версии на поддоменах.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
RodgerFox
@RodgerFox
Вы меня простите, давно еще задавался этим вопросом и иногда возвращаюсь к нему снова.
Лучшее решение (имхо), сложилось в данном методе:

В каталоге самое важное. Это фильтр, удобная навигация по категориям и сам каталог товаров. Ну оки...
Имеется див с шириной 100% , туда загоняем 2 колонки. одна из них фиксированная (можно и не фиксированную) и вторая резиновая с отступом разным ширине первой колонки. Как вы могли уже догадаться, первая колонка имеет навигацию, фильтры и другие плюшки. Сам каталог товаров в резину пихаем. Манипуляцию удобная и изящная. При громадных экранах (4k+ / TV) можем поиграться с размерами товара, а лучше максимальную ширину для контейнера занять). Такой место удобен и для планшетов, что то поменьше прячем первую колонку... ну это уже ближе к UI.

Аминь.
p.s. Masonry не нужен, делайте удобно для клиента.
Если товар или какой то контент не помещается - это не значит стилизовать все "узкие места" (кажется Лебедев писал).
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы