11 января в 11:09

Верстка интернет-магазина: список товаров



Требования к верстке каталогов интернет-магазинов имеют свойство повторяться из проекта в проект. Поэтому у меня выработался набор стандартных приемов, которыми я хочу поделиться в этой статье.


Некоторые приемы уже были рассмотрены в различных статьях. Однако у меня возникло желание объединить их и проиллюстрировать отдельными демо. Надеюсь, в таком виде наработки окажутся полезны верстальщикам, которым часто приходится работать над интернет-магазинами.


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


Адаптивная сетка


Итак, начнем с создания адаптивных плиток — будущих карточек товаров. У нас будет 8 комнатных растений:


<ul class="products clearfix">
	<li class="product-wrapper">
		<a href="" class="product"></a>
	</li>
	<li class="product-wrapper">
		<a href="" class="product"></a>
	</li>
	<li class="product-wrapper">
		<a href="" class="product"></a>
	</li>
	<li class="product-wrapper">
		<a href="" class="product"></a>
	</li>
	<li class="product-wrapper">
		<a href="" class="product"></a>
	</li>
	<li class="product-wrapper">
		<a href="" class="product"></a>
	</li>
	<li class="product-wrapper">
		<a href="" class="product"></a>
	</li>
	<li class="product-wrapper">
		<a href="" class="product"></a>
	</li>
</ul>

Оберткой для товаров послужат блоки, занимающие 100% ширины родителя на мобильных устройствах.


.product-wrapper {
	display: block;
	width: 100%;
	float: left;
	transition: width .2s;
}

Теперь используем медиа-запросы, чтобы разместить по две, три и четыре плитки в ряд при больших разрешениях монитора.


@media only screen and (min-width: 450px) {
	.product-wrapper {
		width: 50%;
	}
}

@media only screen and (min-width: 768px) {
	.product-wrapper {
		width: 33.333%;
	}
}

@media only screen and (min-width: 1000px) {
	.product-wrapper {
		width: 25%;
	}
}

И зададим стили карточек товаров.


.product {
	display: block;
	border: 1px solid #b5e9a7;
	border-radius: 3px;
	position: relative;
	background: #fff;
	margin: 0 20px 20px 0;
	text-decoration: none;
	color: #474747;
	z-index: 0;
	height: 300px;
}

Из-за того, что карточки имеют margin-right равный 20px, весь список имеет нежелательный отступ справа.




Исправим это с помощью отрицательного значения margin-right у родителя.


.products {
	list-style: none;
	margin: 0 -20px 0 0;
	padding: 0;
}

Теперь все в порядке. Посмотреть на получившуюся сетку можно на страничке демо. Для наглядности блокам в демо задана фиксированная высота.


Фото товаров


Следующим интересным моментом является верстка блоков с фотографиями растений. Разметка в данном случае будет такой:


<div class="product-photo">
	<img src="images/roses/1.jpg" alt="">
</div>

Сделаем родителя тега img квадратом с помощью свойства padding-bottom со значением 100%. Вот все стили для данного блока.


.product-photo {
	position: relative;
	padding-bottom: 100%;
	overflow: hidden;
}

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


.product-photo img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	transition: transform .4s ease-out;
}

Осталось немного увеличивать фото при наведении.


.product:hover .product-photo img {
	transform: scale(1.05);
}

Как все это работает можно посмотреть на примере демо.


Описание товара


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

Первую задачу можно решить, задав высоту параграфа с описанием, равную четырем line-heigth.



.product p {
	position: relative;
	margin: 0;
	font-size: 1em;
	line-height: 1.4em;
	height: 5.6em;
	overflow: hidden;
}

А эффекта размытия последних букв четвертой строки мы добьемся с помощью псевдоэлемента :after с линейным градиентом в качестве фона.


.product p:after {
	content: '';
	display: inline-block;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 4.2em;
	height: 1.6em;
	background: linear-gradient(to left top, #fff, rgba(255, 255, 255, 0));
}

Перечеркнутые цены


Чтобы перечеркнуть цену линией отличной по цвету от текста, задаем блоку с ценой значение color равное #ff3535 и text-decorationline-through. При этом устанавливаем для вложенных элементов серый цвет текста.


.product-price-old b,
.product-price-old small {
	color: #888;
}

Всплывающие кнопки


Что касается кнопки «Быстрый просмотр», ее реализация сравнительно проста. Кнопка абсолютно позиционирована относительно блока с классом .product-photo, скрыта с помощью opacity: 0 и немного сдвинута вниз за счет transition: translateY(2em). При наведении курсора на карточку товара стили кнопки меняются следующим образом.


.product:hover .product-preview {
	transform: translateY(0);
	opacity: 1;
}

Несколько сложнее дело обстоит с кнопками «В корзину» и «Купить в 1 клик». Здесь внешний контейнер .product-buttons-wrap абсолютно позиционирован в блоке .product и равен родителю по ширине и высоте.


.product-buttons-wrap {
	position: absolute;
	top: 0;
	left: -1px;
	right: -1px;
	bottom: 0;
	visibility: hidden;
	opacity: 0;
	transform: scaleY(.8);
	transform-origin: top;
	transition: transform .2s ease-out;
	z-index: -1;
	backface-visibility: hidden;
}

Далее мы стилизуем псевдоэлемент .product-buttons-wrap:before таким образом, чтобы он вытеснял любой контент блока вниз, под нижнюю границу, блока-родителя.


.product-buttons-wrap:before {
	content: "";
	float: left;
	height: 100%;
	width: 100%;
}

Теперь можно добавить собственно контент — кнопки, размещенные в блоке .buttons.


.buttons {
	position: relative;
	top: -1px;
	padding: 20px;
	background: #fff;
	box-shadow: 0 0 20px rgba(0, 0, 0, .5);
	border: 1px solid #56bd4b;
	border-radius: 3px;
}

Благодаря правилу float: left у псевдоэлемента .product-buttons-wrap:before, кнопки расположены ниже основного контента, и блок .buttons занимает всю площадь карточки.



Чтобы лучше разобраться с кнопками, можно посмотреть это демо


Переключение вида карточек товаров


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


<div class="layout-buttons">
	<span class="active icon icon-list"></span>
	<span class="icon icon-table"></span>
</div>

По клику на кнопки у списка товаров удаляется и добавляется класс .table-layout.


$productList.toggleClass('table-layout');

Таким образом, прописав стили для карточек-дочерних элементов блока ul.table-layout, мы можем «превратить» список в таблицу только с помощью CSS, без перезагрузки страницы. Для этого задается ширина карточек равная 100%. А вложенные блоки теперь займут только часть ширины карточки, например:


.table-layout .product-main {
	width: 50%;
	float: left;
	background: #fff;
}

Далее абсолютно позиционированные элементы занимают свое «естественное» положение. Например, так происходит с кнопками.


.table-layout .product-buttons-wrap {
	position: static;
	visibility: visible;
	opacity: 1;
	transform: scaleY(1);
}

Это был последний момент, которым хотелось с вами поделиться. С праздниками и всего доброго.

Марина Кузнецова @aegnis
карма
14,0
рейтинг 0,0
Веб-технолог
Самое читаемое Разработка

Комментарии (60)

  • 0
    При ховере есть неприятный скачёк — видимо из-за тени.
    В версии для телефона невозможно нажать на кнопки — их просто нет.
  • 0
    При масштабе 150% и наведении мышки на плитку:
    Скриншот с Оперы
    image
    • +1
      А что делать, если контент-менеджер ввёл в названии 2-3 строки текста, а у соседей только по одной?
      Заголовок спойлера

      • 0
        Я вот тоже об этом подумал. Автору надо использовать Flex.
  • +4
    Я одного не пойму, почему как только нужна группа каких-то однородных элементов, так сразу непременно используется ul и его друзья? В каждой второй верстке обязательно ul. Особенно на плагинах, которые должны выдавать иерархию, будь то меню или дерево — обязательно висит ul. Да в половине сладеров-крутилок — обязательно ul. Сидишь и наблюдаешь, как дерево с точками красиво трансформируется в то что надо.

    Почему бы не использовать просто div? И не надо ничего обнулять, ничего не надо очищать, стилизуй сразу как надо, не задумываясь о том, как списки в том или ином браузере отображаются по умолчанию.

    Загадка…

    • +2
      Что работает как список, выглядит как список или подразумевается как список — должно быть списком. Если есть еще более глубокая семантика, выбираем, например, nav или menu.
      • +5
        Мне кажется, что понятие список настолько растяжимое, что лично я бы не стал в данном случае говорить о семантике. Анонсы статей на сайте — список? Логотипы компаний-рекламодетелей список? Аватары топовых авторов? Номера страниц? Список тегов?

        Особенно, я не стал бы говорить про то, как выглядит список. По мне выглядит как список только, собственно, список и все. То есть тот самый, который по умолчанию, нумерованный-ненумерованный с некоторой степенью стилизации. Это и есть список, для которого используются эти теги.

        Список товаров так, как он представлен на картинках, это не список.

        Мне так кажется.

        • 0
          Мысленно сотрите css, оставив только браузерные стили. Как лучше представить товар?
          Правильно, таблицами. Но таблицы в вебе крайне неадекватны.
          На втором месте будет список. Визуально отделен для людей, логически является списком для роботов и скриптов.

          Никогда не путайте 'чем является' и 'как выглядит'. Меню — всегда список, акцентрирование внимания — strong, и т.д. А то, что визульно я сделал меню в виде бегающих анимированых человечков, а важные элементы обвожу рамочкой — это уже работа по юзабилити и дизайну, что не касается html.

          Если вы придумали более удобные универсальные теги — поделитесь. Никто не доволен li, но лучше пока что то не получается. Конкретно Div сливаются с текстом без доп стилей и не несет в себе логическое заключение 'мой сосед — такой же, как я'. Т.е. допустим плагин на браузер, позволяющий свернуть большие объемы однотипных данных, уже не сработает. А кому то может очень надо. Ну и т.д.
        • 0
          Здесь к вопросу можно подойти с другой стороны: вы просто реализуете товар в виде div, а затем всю эту пачку div'ов оборачиваете либо в список, либо в таблицу, либо еще во что то, в зависимости от того, как вы хотите их представить — списком, таблично, иерархией и т.д.
          • +3
            Обернуть можно, да, но мне до сих пор непонятно, зачем в данном случае использовать этот списочный неудобный тег. Неудобный по причине дефолтных стилей, которые придется специально обрабатывать и все.

            Доводы DrMeJI мне не показались убедительными. Например я не считаю,, что меню это список. Это иерархия — да, и списки тоже могут быть иерархическими да, но я не считаю что всю подряд иерархию нужно оформлять списочным тегом.

            И я не считаю, что нужно мысленно стирать CSS, зачем? Если у меня должен получится список, я использую списочный тег. Если мое меню должно выглядеть как список, как раньше делали во фреймах, то я использую тег списка. Если у меня есть список категорий, которые должны выглядеть как список, то я использую тег списка. Но если у меня выпадающее меню в шапке зачем я должен использовать теги списка и мучится с обнулением их свойств? Не понимаю.

            Помогают ли эти теги роботам? Сомневаюсь. Для людей — соглашусь, по тегам сразу видно иерархию и 'мой сосед — такой же, как я'. Но я тоже самое гораздо внятней увижу по классам.

            Ну вот зачем в каждом слайдере-крутилке с плоским набором картинок понатыкан ul+li?

            Поэтому мое мнение пока неизменно: списки — для списков. Если список похож на то, что выдают эти теги по умолчанию, используем ul а если нет, то и ну их к бесу.

            • 0
              Но если у меня выпадающее меню в шапке зачем я должен использовать теги списка и мучится с обнулением их свойств? Не понимаю.

              Что в правиле list-style: none; такого мучительного?

  • –1
    Кстати, а почему автор не воспользовался для вёрстки каким-нибудь фреймворком? Например — Bootstrap?
    • +1

      Добрый день.


      Думаю, что данный пост больше как для практики и поделиться опытом. Для сетки использовать целый фреймворк или библиотеку, это уж слишком

    • +2
      А можно врспользоваться еще и верстальщиком.

      Ну а если серьезно, то в вебе большинство магазинов на 100 — 300 товаров с посещаемрстью в 100 -500 чел. в день. И если вы не поставили на него готовый шаблон, а пишите сами, то использовать bootsrtrap, это как пушкой по воробьям. Ставить фреймворк, чтобы использовать 5% от его возможностей — это лишние байты, более сложная архитектура и поддержка.
      • +1
        А разве bootstrap запрещает использовать его модульно?
        • –1
          Он для этого вообще не приспособлен.
          • 0

            С препроцессором можно тянуть части (модули) бутстрапа. Единственное, что нужно вытягивать и зависимости используемых модулей, которые не всегда очевидны.

          • 0
      • +1
        Использование всем известного фреймворка как раз упрощает поддержку — нет необходимости тратить время на то, чтобы понять что было в голове у человека, который это навоял…
        • 0
          это список товаров на css, как тут можно что-то непонятное сделать? Обычно стили фреймворка не подходят под дизайн и он больше мешает чем помогает.
  • 0
    В Chrome(Версия 55.0.2883.87 m) скачков не наблюдаю.
    Решить бы еще проблему с заголовком в две строки.
    • +5
      Типичная ошибка, когда дизайнер и верстальщик полагают, что название всегда поместится в одну строку, а описание товара всегда будет не больше 4х строчек.
      Скриншот проблемы

      • +2

        Надо оборачивать каждый ряд во враппер. Или использовать flexbox

        • +1
          Можно еще сделать через display: table, table-cell
          • +1
            Почему никто не использует inline-block? Гибче же, чем врапперы на каждую строку или display: table.
            • 0

              Потому что inline-block рендерит пробел после элемента по умолчанию. От пробела можно избавиться через колдунство, но зачем?

              • 0
                Не по умолчанию, а когда после элемента есть пробельные символы в HTML-коде. Если их убрать каким-либо образом, то пробела не будет.
                • 0

                  А вы уверены, что их там никогда не будет?

                  • 0
                    Если у вас сколь-либо приличный шаблонизатор, который вы контролируете, то да.
              • 0
                Затем, чтобы не случалось «вёрстки лесенкой» например.
                На мой взгляд clearfix куда большее колдунство, чем «font-size: 0».
                • 0
                  это же всего один дополнительный класс в html и одно правило в css, а фонт сайз надо прописывать и родителю и потомкам, так сказать, дублирование кода)
                  • 0
                    Ну если писать модульный css, то стили потомков не будут зависеть от стилей контейнера. Да и «вёрстка лесенкой» даже с clearfix никуда не денется.
  • +2
    Красиво, но плохо. Кнопка «В корзину» пропадает. А что это за магазин такой в котором нужно ловить самую важную кнопку для него? Вот если бы она была постоянно, а при наведении выплывала другая маловажная информация, то было бы лучше.
  • +2
    А по поводу верстки, не пробовали через flexbox? В последнее время для такого рода задач только ее и использую.
    • –1
      Пробовала, очень удобно. В последних проектах использовали Pure.css, в котором адаптивные сетки выполнены на flexbox.
  • 0

    Добрый день.


    Исправим это с помощью отрицательного значения margin-right у родителя.

    А как вы с этим боритесь на разных разрешениях, мобильных девайсах?

    • 0
      Добрый день. На мобильных девайсах отрицательный margin тоже хорошо работает.
  • 0
    А почему бы не сделать вот так
    .product-wrapper { display: inline-block; vertical-align:top; }
    
    Тогда плитки не будет играть в лесенку.
  • –1
    Спустя уже почти 8мь лет перетирается всё та же тема
    • 0

      А в чем проблема?

  • 0

    При создании сетки, ее свойства лучше абстрагировать в отдельные классы, а не смешивать с дизайном. Тогда в итоге получится сетка Bootstrap.

  • 0
    <img src="images/roses/1.jpg" alt="">
    



    И это все? PageSpeed выдаст не больше 50 из 100 для мобильной версии.

    Можете добавить в статью про использование srcset/picture? Я обновил свой проект на использование этих тэгов и теперь на большом каталоге получаю отличный результат(https://instasell.ru). Не говоря о том, что страница с большим количеством картинок товаров теперь грузится заметно быстрее.
    • 0
      Интересная идея про srcset, спасибо за наводку.

      Но грузится все-таки медленно… почти три секунды — и это же еще через СDN, да?
      ну и верстка в стиле деревенского забора = криво-косо 8-) Все элементы разные по высоте. надо бы поправить 8-)
  • +5
    Статья по созданию карточек полезна, но то, что в 2017 году мы упорно по инерции продолжаем использовать float-сетку с костылями типа margin: 0 -20px 0 0; меня печалит.
    Не пора ли уже использовать flexbox? Поддержка устройств доросла до 97%. Пора бы.
  • 0
    Насчет фото товаров: давно использую технику через background-image и background-size: contain. Мне кажется, она более универсальная — красивее, когда все фотки квадратные, даже если оригиналы вытянуты (предпочтительнее сцентрировать и обрезать выступающие за края части а не вписывать прямоугольники). Типа https://jsfiddle.net/kasheftin/avqdpsgs/. Тег img имеет opacity:0 и нужен только чтобы фотку можно было потащить мышкой.
    • +3
      А еще есть классная штука для картинок.
      Называется object-fit быстро накиданный пример
      Для ie есть простенькие полифиллы весом в ~1кб.
  • 0

    Где поддержка нескольких строк в названии? Где поддержка нескольких строк в описании?
    Где, балин, приложенная машина времени, чтобы отвезти этот макет в девяностые?? Когда же современные UX "специалисты" осознают, что мы живём в мире мобильников и планшетов с тач-экранами? Сколько можно делать интерфейсы, которые при использовании на телефоне вызывают один негатив?

  • –1
    Автор просто поделилась идеями, наработками, которые помогут кому-то. Не нужно использовать приведенный пример в качестве шаблона. Допиливайте сами и главное не забывать про тестирование)
    Спасибо за статью.
  • 0
    Хотелось бы еще узнать мнение по поводу скачков выпадающих кнопок. Появляются они плавно, однако исчезают резко. Если сделать плавное исчезание, то вылезет баг с z-index, при ховере на нижний элемент будет резкое перекрытие. Кто как решает подобную проблему?
  • 0
    margin -20px у родителя напрочь убивает всю красоту решения.
  • 0

    кто-нибудь может поделиться примером реализации сего чуда на флексе?

    • +1

      https://jsfiddle.net/yaLkw88v/1/ буквально за 20 секунд (правда тут без медиа квери, хотяяяя и без них вполне ок. И без рюшек в виде цветного фона и анимашек, но, как и ожидалось, с поддержкой разной высоты блоков)

      • 0
        спасибо!)
  • 0
    Не хочется придераться, но на мобилке если отображать товары списком, верстка немного плавает.
    Все же решение flex в данном случае будет рациональным
  • 0
    Простите, это ниочем.
    Тут не затронуты самые важные вопросы витрины инетмага: что делать с разнородными товарами. например, что делать, если фотографии разные по высоте? Что, если одно описание состоит из 2 строк, а другое — из 5? Что, если на экране количество объектов не кратно сетке (например, 7)?

    Высоту прибить гвоздями всякий сумеет. А вот отобразить витрину с разными товарами культурно — это уже сложнее. Но тоже можно 8-)
  • +1
    .product {height: 300px}

    Жесткое задание высоты блока может вызвать ситуацию, когда из-за длинного описания товара контент выйдет за границы блока. Если переписать вашу сетку на flexbox, подобных проблем можно избежать.
  • +1
    Насчёт многострочного текста. Всё решается простейшим способом:

    Для обрезки текста
    .product .cut {
    	white-space: nowrap;
    	text-overflow: ellipsis;
    	/*overflow: auto;*/
    }
    .product:hover .cut {
    	white-space: normal;
    	text-overflow: initial;
    	overflow: hidden;
    }
    


    ...
    <h2 class="produvt-name cut">Хавортия Хавортия Хавортия Хавортия Хавортия</h2>
    ...
    


    В этом случае плитки всё же разъезжаются, это уже надо переверстать саму плитку.
  • 0
    Друзья, а кто может подсказать, как сделать Переключение вида карточек товаров на флексе?

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.