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

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

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

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

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

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

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

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

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

Узнать подробнее

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

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

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

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

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

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

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

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

Узнать подробнее

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

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

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

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree