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

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

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

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

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

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

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

<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 для каталога товаров, тогда рекомендую познакомиться с курсом Создание каталога товаров.

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

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

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

Прямо сейчас посмотрите курс по созданию каталога товара для сайта на 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