Как верстать каталог товаров

Как верстать каталог товаров

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

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

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

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

Итак, наш сайт, пусть это будет каталог одежды, должен предполагать категории и товары. Категории я вынесу в сайдбар, ну а товары будут занимать основное место сайта — область контента. Также категории нередко можно видеть и в виде меню между шапкой и контентом. Чтобы не писать много стилей, я использую CSS фреймворк Bootstrap, который и подключу к нашей странице.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
<div class="container content">
 <div class="row">
  <div class="col-md-4">
 <div class="list-group">
 <a href="#" class="list-group-item">Футболки</a>
 <a href="#" class="list-group-item">Джинсы</a>
 <a href="#" class="list-group-item">Брюки</a>
 <a href="#" class="list-group-item">Платья</a>
 <a href="#" class="list-group-item">Куртки</a>
 </div>
  </div>
  <div class="col-md-8">CONTENT</div>
 </div>
</div>

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

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

<div class="col-md-8 products">
 <div class="row">
  <div class="col-sm-4">
 <div class="product">
 <div class="product-img">
 <a href="#"><img src="img/goods1.jpg" alt=""></a>
 </div>
 <p class="product-title">
 <a href="#">Cream jane jeans dress</a>
 </p>
 <p class="product-desc">Signature NYX cosmetics</p>
 <p class="product-price">Price: €10.00</p>
 </div>
  </div>
 </div>
</div>

Теперь приведу полный список стилей:

body{
 background: #ececec;
}
img {
 height: auto;
 max-width: 100%;
}
.content{
 margin-top: 50px;
}
.product {
 background: #fff none repeat scroll 0 0;
 border: 1px solid #c0c0c0;
 height: 390px;
 overflow: hidden;
 padding: 25px 15px;
 position: relative;
 text-align: center;
 transition: all 0.5s ease 0s;
 margin-bottom: 20px;
}
.product:hover {
 box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
}
.product-img {
 height: 200px;
}
.product-title a {
 color: #000;
 font-weight: 500;
 text-transform: uppercase;
}
.product-desc {
 max-height: 60px;
 overflow: hidden;
}
.product-price {
 bottom: 15px;
 left: 0;
 position: absolute;
 width: 100%;
 color: #d51e08;
 font-size: 18px;
 font-weight: 500;
}

Вот что у нас получилось в итоге:

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

Картинки товаров. Хотя картинки нужно готовить и стараться, чтобы они соответствовали установленным размерам, тем не менее администратор сайта вполне может в дальнейшем загрузить картинки разных размеров. Поэтому стоит позаботиться о том, чтобы картинки помещались в блок товара и не вылазили за определенные границы. Это помогут сделать два следующих правила:

img {
 height: auto;
 max-width: 100%;
}
.product-img {
 height: 200px;
}

Следующий нюанс связан с описанием товара. Описание может быть как небольшим, так и достаточно объемным. Поэтому стоит предусмотреть этот момент и сделать так, чтобы описание, как и картинка, находилось в определенных рамках. Этого мы добьемся следующим правилом:

.product-desc {
 max-height: 60px;
 overflow: hidden;
} 

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

.product-price {
 bottom: 15px;
 left: 0;
 position: absolute;
 width: 100%;
 color: #d51e08;
 font-size: 18px;
 font-weight: 500;
}

Вот, собственно, основные моменты, о которых не стоит забывать при верстке каталога товаров. Ну и поскольку мы используем Bootstrap, наша верстка будет адаптивной. Вот так она будет выглядеть на планшетах:

А так на небольших экранах смартфонов:

Неплохо, не так ли? Это что касается верстки каталога товаров. Однако не стоит забывать и о программной части. Здесь мы уже можем писать либо собственное решение, собственный движок, либо использовать готовую CMS. Если вы хотите попробовать написать собственную CMS для каталога товаров, тогда рекомендую познакомиться с курсом Создание каталога товаров.

Исходные файлы текущей статьи вы можете скачать по ссылке.

На этом у меня сегодня все. Удачи!

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Создай полноценный каталог товара для сайта

Прямо сейчас посмотрите курс по созданию каталога товара для сайта на PHP, MySQL и jQuery!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree