От автора: приветствую вас, друзья. В этой статье мы попытаемся в общих чертах ответить на вопрос, как верстать каталог товаров. Для этого мы ответим на вопрос, что такое каталог товаров, что должно присутствовать в каталоге товаров и в чем отличие сайта с каталогом товаров от интернет-магазина. Начнем?.
Итак, начнем с определения того, что же такое каталог товаров. Думаю, ответить на этот вопрос сможет практически любой. Каталог — это, по сути, интернет-магазин без возможности купить, т.е. интернет-магазин без корзины. Посетитель такого сайта может смотреть товары, сравнивать их цены, но лишен возможности купить эти самые товары. Вот и вся разница.
Исходя из этого, можно определиться, что обязательно должно быть в любом каталоге товаров: категории товаров и, собственно, сами товары. Это два обязательных атрибута любого сайта с каталогом товаров.
Ну что же, давайте попробуем сверстать прототип каталога товаров. Обращаю ваше внимание на то, что у меня нет дизайна и моя задача не сделать красивую готовую верстку. Нет, моя задача просто набросать верстку каталога, не более.
Итак, наш сайт, пусть это будет каталог одежды, должен предполагать категории и товары. Категории я вынесу в сайдбар, ну а товары будут занимать основное место сайта — область контента. Также категории нередко можно видеть и в виде меню между шапкой и контентом. Чтобы не писать много стилей, я использую CSS фреймворк Bootstrap, который и подключу к нашей странице.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
Мы добавили в сайдбар одноуровневое менб категорий и выделили область под контент, т.е. под список товаров.
Теперь сверстаем блок товаров. В каждом блоке отдельного товара должно присутствовать название товара, его цена и, возможно, небольшое описание. Я здесь покажу верстку только одного товара в ряду, остальные просто продублирую изменяя данные каждого товара.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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> |
Теперь приведу полный список стилей:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
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; } |
Вот что у нас получилось в итоге:
Не смотря на то, что мы не ставили целью получить симпатичный дизайн, тем не менее, у нас он получился достаточно симпатичным, на мой взгляд. Что стоит учесть и на что нужно обратить внимание при верстке каталога товаров? Вот несколько основных моментов.
Картинки товаров. Хотя картинки нужно готовить и стараться, чтобы они соответствовали установленным размерам, тем не менее администратор сайта вполне может в дальнейшем загрузить картинки разных размеров. Поэтому стоит позаботиться о том, чтобы картинки помещались в блок товара и не вылазили за определенные границы. Это помогут сделать два следующих правила:
|
1 2 3 4 5 6 7 |
img { height: auto; max-width: 100%; } .product-img { height: 200px; } |
Следующий нюанс связан с описанием товара. Описание может быть как небольшим, так и достаточно объемным. Поэтому стоит предусмотреть этот момент и сделать так, чтобы описание, как и картинка, находилось в определенных рамках. Этого мы добьемся следующим правилом:
|
1 2 3 4 |
.product-desc { max-height: 60px; overflow: hidden; } |
Ну и, поскольку описание может занимать произвольную высоту, необходимо сделать так, чтобы при этом не плясала цена товара, которая идет после описания. Этого можно добиться абсолютным позиционированием цены:
|
1 2 3 4 5 6 7 8 9 |
.product-price { bottom: 15px; left: 0; position: absolute; width: 100%; color: #d51e08; font-size: 18px; font-weight: 500; } |
Вот, собственно, основные моменты, о которых не стоит забывать при верстке каталога товаров. Ну и поскольку мы используем Bootstrap, наша верстка будет адаптивной. Вот так она будет выглядеть на планшетах:
А так на небольших экранах смартфонов:
Неплохо, не так ли? Это что касается верстки каталога товаров. Однако не стоит забывать и о программной части. Здесь мы уже можем писать либо собственное решение, собственный движок, либо использовать готовую CMS. Если вы хотите попробовать написать собственную CMS для каталога товаров, тогда рекомендую познакомиться с курсом Создание каталога товаров.
Исходные файлы текущей статьи вы можете скачать по ссылке.
На этом у меня сегодня все. Удачи!
Комментарии (4)