Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

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

Дата добавления: 13.01.2017 - 21:19
Добавил: Buger
Количество просмотров: 537
Количество комментариев: 0
Рейтинг материала: 5.0 / 1
Верстка интернет-магазина: список товаров
БЕСПЛАТНО
рейтинг 5.0
/
голосов 1

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

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

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

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



Итак, начнем с создания адаптивных плиток — будущих карточек товаров. У нас будет 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-decoration line-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);
}


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

Источник: https://habrahabr.ru/post/319280/
Добавлять комментарии могут только зарегистрированные пользователи.