Як верстати каталог товарів

35

Від автора: вітаю вас, друзі. У цій статті ми спробуємо в загальних рисах відповісти на питання, як верстати каталог товарів. Для цього ми відповімо на питання, що таке каталог товарів, що повинно бути в каталозі товарів і в чому відмінність сайту з каталогом товарів від інтернет-магазину. Почнемо?.

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

Виходячи з цього, можна визначитися, що обов’язково повинно бути в будь-якому каталозі товарів: категорії товарів і, власне, самі товари. Це два обов’язкових атрибуту будь-якого сайту з каталогом товарів.

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

Отже, наш сайт, нехай це буде каталог одягу, повинен припускати категорії та товари. Категорії я винесу в сайдбар, ну а товари будуть займати основне місце сайту — область контенту. Також категорії нерідко можна бачити і у вигляді меню між шапкою і контентом. Щоб не писати багато стилів, я використовую CSS фреймворк Bootstrap, який і підключу до нашої сторінці.

Футболки
Джинси
Штани
Сукні
Куртки
CONTENT

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

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

Cream jane jeans dress

Signature NYX cosmetics

Price: €10.00

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

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

Вихідні файли поточної статті ви можете завантажити за посиланням.

На цьому у мене все. Удачі!