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

Создание каталога товаров в формате HTML5
Наиболее совместимый формат со всеми устройствами, экранами, браузерами.
Публикация, отсылка по email

Вы можете сделать HTML как всех товаров, так и только отмеченных в списке.
Не требует специальных шаблонов, вы можете использовать те же, которые уже используете для печати или создания PDF.
Есть возможность сделать HTML каталог одним файлом, легко переслать и разместить, а можно постранично, с кнопками навигации.
Во втором случае вы можете отослать по запросу избранные листы каталога.
При онлайн размещении, хорошо индексируется поисковыми системами.

Для выбора/изменения шаблона каталога выберите пункт «Изменить шаблон»

Применение: публикация на сайте, отсылка по email клиенту. Использование как альтернатива PDF каталогу. HTML каталог предлагается к использованию практически во всех областях бизнеса независимо он наличия сайта или интернет-магазина.

MyBusinessCatalog

(function(i,s,o,g,r,a,m),i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) >)(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’); ga(‘create’, ‘UA-107915-1’, ‘.mybusinesscatalog.com’, ); ga(‘require’, ‘linkid’, ‘linkid.js’); ga(‘require’, ‘linker’); ga(‘require’, ‘displayfeatures’); ga(‘send’, ‘pageview’);

We use cookies to improve the site and its user experience. By continuing to use the site, you consent to the use of cookies. You can always disable cookies in your browser settings.

Верстка интернет-магазина: список товаров

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

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

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

Адаптивная сетка

Итак, начнем с создания адаптивных плиток — будущих карточек товаров. У нас будет 8 комнатных растений:

Оберткой для товаров послужат блоки, занимающие 100% ширины родителя на мобильных устройствах.

.product-wrapper

Теперь используем медиа-запросы, чтобы разместить по две, три и четыре плитки в ряд при больших разрешениях монитора.

@media only screen and (min-width: 450px) < .product-wrapper < width: 50%; >> @media only screen and (min-width: 768px) < .product-wrapper < width: 33.333%; >> @media only screen and (min-width: 1000px) < .product-wrapper < width: 25%; >> 

И зададим стили карточек товаров.

.product

Из-за того, что карточки имеют margin-right равный 20px , весь список имеет нежелательный отступ справа.

Исправим это с помощью отрицательного значения margin-right у родителя.

.products

Теперь все в порядке. Посмотреть на получившуюся сетку можно на страничке демо. Для наглядности блокам в демо задана фиксированная высота.

Фото товаров

Следующим интересным моментом является верстка блоков с фотографиями растений. Разметка в данном случае будет такой:

Сделаем родителя тега img квадратом с помощью свойства padding-bottom со значением 100%. Вот все стили для данного блока.

.product-photo

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

.product-photo img

Осталось немного увеличивать фото при наведении.

.product:hover .product-photo img

Как все это работает можно посмотреть на примере демо.

Описание товара

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

Первую задачу можно решить, задав высоту параграфа с описанием, равную четырем line-heigth .

.product p

А эффекта размытия последних букв четвертой строки мы добьемся с помощью псевдоэлемента :after с линейным градиентом в качестве фона.

.product p:after

Перечеркнутые цены

Чтобы перечеркнуть цену линией отличной по цвету от текста, задаем блоку с ценой значение color равное #ff3535 и text-decoration — line-through . При этом устанавливаем для вложенных элементов серый цвет текста.

.product-price-old b, .product-price-old small

Всплывающие кнопки

Что касается кнопки «Быстрый просмотр», ее реализация сравнительно проста. Кнопка абсолютно позиционирована относительно блока с классом .product-photo , скрыта с помощью opacity: 0 и немного сдвинута вниз за счет transition: translateY(2em) . При наведении курсора на карточку товара стили кнопки меняются следующим образом.

.product:hover .product-preview

Несколько сложнее дело обстоит с кнопками «В корзину» и «Купить в 1 клик». Здесь внешний контейнер .product-buttons-wrap абсолютно позиционирован в блоке .product и равен родителю по ширине и высоте.

.product-buttons-wrap

Далее мы стилизуем псевдоэлемент .product-buttons-wrap:before таким образом, чтобы он вытеснял любой контент блока вниз, под нижнюю границу, блока-родителя.

.product-buttons-wrap:before

Теперь можно добавить собственно контент — кнопки, размещенные в блоке .buttons .

.buttons

Благодаря правилу float: left у псевдоэлемента .product-buttons-wrap:before , кнопки расположены ниже основного контента, и блок .buttons занимает всю площадь карточки.

Чтобы лучше разобраться с кнопками, можно посмотреть это демо.

Переключение вида карточек товаров

Для переключения между плиткой и табличным видом каталога мы создаем две кнопки.

По клику на кнопки у списка товаров удаляется и добавляется класс .table-layout .

$productList.toggleClass('table-layout'); 

Таким образом, прописав стили для карточек-дочерних элементов блока ul.table-layout , мы можем «превратить» список в таблицу только с помощью CSS, без перезагрузки страницы. Для этого задается ширина карточек равная 100%. А вложенные блоки теперь займут только часть ширины карточки, например:

.table-layout .product-main

Далее абсолютно позиционированные элементы занимают свое «естественное» положение. Например, так происходит с кнопками.

.table-layout .product-buttons-wrap

Это был последний момент, которым хотелось с вами поделиться. С праздниками и всего доброго.

Создание каталога товаров на сайте

Компонент каталог позволяет быстро поднять типовой каталог с использованием только MS SQL и верстки Bootstrap.

Вид каталога:

Карточка товара:

Корзина и заказ:

Возможности каталога

Каталог на демо имеет следующие возможности:

• Вложенные категории (без ограничений по вложенности).
• Фильтры для категорий. Фильтры наследуются от родительских категорий.
• Кастомизация вида каталога, элемента каталога и карточки каталога.
• Человекопонятный URL (ЧПУ).
• Вывод тегов выбранных фильтров.
• Гибкие настройки под SEO — h1, title, keywords, description, микроразметка. Все генерируется через процедуры SQL с учетом всех входящих параметров (выбранная категория, фильтры).
• Два вида каталога — плитка и панели.
• Адаптивность под мобильные устройства.
• Мультикорзина. Учет различных поставщиков. Отдельное оформление заказов для разных поставщиков.
• Избранное.
• Кеширование выборки каталога. Возможность настроить длительность кеширования.
• Форма заказа с возможностью адаптации под свои потребности.
• Форма быстрого заказа.
• Возможность сортировки по разным параметрам.
• Возможность менять бизнес-логику выборки через SQL.
• Рейтинг товара, количество заказов, отзывы.
• Страница поставщика, рейтинг поставщика.
• Характеристики товаров.
• Кастомизация при заказе — выбор определенных характеристик.
• Вывод остатков.

Структура каталога

Основная номенклатура хранится в as_cat_products. Товары могут находиться в различных категориях (as_cat_categories). У категории есть свои атрибуты (они представлены в каталоге фильтрами) — as_cat_filters. Фильтры могут быть различных типов — текстовый, галочки, выбор, переключатель, диапазон (as_cat_filterTypes).

У товаров есть атрибуты (as_cat_productAttrs) и они соответствуют атрибутам категории (as_cat_categoryFilters). У каждого товарного предложения поставщика есть набор кастомизируемых атрибутов — майка синяя, красная, XL, S (as_cat_supplierProductAttrs).

Каждый поставщик (as_cat_suppliers) связан с определенными категориями каталога (as_cat_supplierCategories) и размещает в каталоге свои товары (as_cat_supplierProducts), связанные с единой номенклатурой. Поставщик использует общую номенклатуру и только указывает свои остатки и стоимость для определенной конфигурации атрибутов товара.

Корзина хранится в ord_carts, а заказы в ord_orders

Построение адресов URL каталога

Построение URL для поиска

Адрес поиска строится следующим образом /catalog/[catName-catID]/[catName-catID]/f/[filterCode-val1,val2. ]/[filterCode-val1,val2. ]

Блоки с категориями показывают вложенность категорий.

Параметр /f/ говорит системе, что дальше идет блок фильтров. Значения фильтров указываются через запятую.

Пример адреса для поиска:

• Нельзя кардинально поменять роутинг каталога. Движок использует опорные элементы для разбора адреса (/catalog, /p /f, фильтры через запятую).
• Нельзя использовать в выводимых значениях фильтров множественного выбора (например checks) символ «,» (она используется как разделитель значений при обработке в процедуре Search). Заменяйте его на «.» или другой символ.
• Если в фильтрах приходят спецсимволы (например, /\*), то они кодируются в URL через «-s-«. Далее на стороне сервера они восстанавливаются и выводятся в первоначальном виде на странице. Это мера необходима из-за того, что не все спецсимволы можно вставлять в URL.

Построение URL для карточки товара

Адрес товара строится следующим образом /catalog/[сatName-catID]/[catName=catID]/p/[prodName-prodID]

В начале адреса идет иерархия категорий, в которых находится товар.

Параметр /p/ говорит системе, что это товар.

После /p/ идет блок с идентификацией товара по prodID.

• адрес товара хранится в as_cat_products.url и задается при создании товара.
• можно убрать из адреса карточки товара элементы категорий, тогда адрес будет короче. В этом случае надо внести изменения в функцию cat_getProductURL и обновить поле URL у всех товаров.

Управление бизнес-логикой и видом каталога

Управление логикой работы каталога осуществляется на странице /catSettings (в меню выбираем пункт «Компоненты», затем «Настройки каталога») (доступна системному администратору)

На данной странице вы можете:

• Управлять категориями, атрибутами, товарами
• Делать импорт/экспорт через Excel
• Управлять процедурами для страницы поиска — search, preSearch и getSeoParameters
• Управлять процедурами для страницы карточки товара — getItem, getSeoParameters
• Управлять блоками разметки для страниц поиска и карточки товара
• Также на этой странице вы можете изменить бизнес-логику работы с корзиной (добавление в корзину, идентификация/создание корзины, получение корзины).

Атрибуты продуктов (фильтры)

Все возможные атрибуты продуктов лежат в as_cat_filters.
Атрибуты назначаются категории в таблице as_cat_categoryFilters, а продукты уже в свою очередь наследуют атрибуты всех родительских категорий.
Тип данных значений атрибута указывается в dataTypeID (строка, целое число, дробное число).
Заполнение атрибутов значениями для конкретного продукта идет в as_cat_productAttrs.

В этой таблице заполняется одна из трех колонок согласно установленному типу атрибута.

Значение Атрибута как выбор значения из списка (справочника)

Если на атрибуте заполнено поле sqlGetValues, значит он имеет конечное число установленных значений, и для каждого продукта будет выбор из списка одного из этих значений.
В sqlGetValues указана хранимая процедура для выбора списка значений атрибута.
Соответственно в БД необходимо создать дополнительные таблицы-справочники по таким атрибутам в виде as_cat_cust_ (id, name)
В as_cat_productAttrs тогда будет заполнена колонка intValue - ID записи из таблицы указанной в sqlGetValues.

Атрибуты как фильтры

Атрибуты продуктов должны также быть среди фильтров поиска.
Поле visibleInFilter определяет будет ли введен атрибут в перечень фильтров.

Есть следующие типы фильтров в каталоге:

• checkbuttons — кнопки для множественного выбора
• checks — галочки
• color — выбор цвета
• radio — радио-переключатели
• radiobuttons — кнопки для одиночного выбора
• range — выбор диапазона
• select — выбор из списка с поиском
• selectmultiple — множественный выбор из списка с поиском
• switch — переключатель да-нет
• text — строка для ввода

Поле typeID определяет тип фильтра.
Если вариант отображения - ползунок, то поле defValue необходимо обязательно заполнить по следующему шаблону - 
Для фильтра select необходимо в начале добавить элемент Не выбрано. 
Чтобы назначить каждой категории свой набор фильтров, нужно прописать связи в as_cat_categoryFilters

Атрибуты отображаемые на обложке продукта

Если на атрибуте заполнен признак showForProductInList , то этот атрибут будет выводиться сразу на обложке товара в режиме отображения товаров Список

Добавление продуктов в корзину

При нажатии на соответствующую иконку на продукте, он попадает в корзину к пользователю, в количестве указанном в поле рядом.

Таблица корзин ord_carts . Если пользователь не авторизован, то поле username в ней будет равно null .
В таблице ord_cartItems лежат позиции, которые были добавлены в корзину.

О таблице ord_cartTypes

В ней лежит настройка того, какая корзина работает на каталоге

В поле cartInfoFormat можно задать формат вывода виджета корзины справа сверху на сайте.

Оформление заказа

Форма с кодом cartOrder, т. е. можно посмотреть её хранимки, и соответственно есть возможность её видоизменить.
В SaveItem прописано создание заказа. Все заказы хранятся в ord_orders, и через таблицу корзины выходят на позиции заказа (они же позиции корзины).

Как сделать, чтобы оформлялся единый заказ?

• Когда оформленный заказ идёт напрямую к поставщику, то кнопка Оформить заказ будет выставлена напротив каждого производителя в Корзине. В этом случае

• указываем ord_cartTypes.isSingleOrder = 0
• и в cartOrder будет передаваться itemID = ’_’

• Чтобы сделать единую кнопку Оформить заказ в Корзине, например когда заказ должен уйти на Склад, то есть независимо от того у скольких поставщиков мы выбрали товар, то необходимо

• указать в ord_cartTypes.isSingleOrder = 1
• и в cartOrder будет передаваться itemID = ’_0’

Добавление продуктов в Избранное

Добавить продукт в Избранное может только авторизованный пользователь, нажав на соответствующую иконку на продукте.
Физически запись об избранном продукте добавляется в ord_favorites.

Основные Хранимые процедуры каталога

Поиск по каталогу — cat_search

• @filters ExtendedDictionaryParameter READONLY, — коллекция фильтров с Key, Value
• @selectedCatID int, — текущая выбранная категория
• @sort nvarchar(24), — выбранная сортировка
• @page int, — текущая страница
• @username nvarchar(32), — текущий пользователь (если зарегистрирован)
• @langID int = 0 — язык интерфейса пользователя
• @parameters ExtendedDictionaryParameter readonly — опционально, содержит langID, falconGuid, url (только часть после /catalog/) и другие параметры в виде Key,Value2

SELECT 1 Товары

• ID — ID товара
• Img — URL картинки товара
• Name — наименование товара
• ShortDesc — краткое описание
• SupplierCount — сколько поставщиков предлагают товар
• Price — стоимость
• Url — URL товара

SELECT 2 Настройки вывода

• AttrTemplateMakeup — разметка для вывода атрибута товара в разметке List
• BannerImage — картинка баннера URL
• BannerText — текст к баннеру
• BodyBottomSection — разметка перед
• CustomMakeup — кастомная разметка основного каталога
• DefaultView — какой вид грузить по умолчанию? (list, panel)
• EmptyText — сообщение, что нет товаров
• FilterStateEnabled — если 1, то у фильтров будут проставляться доступность/недоступность фильтров и показываться количество товаров.
• HeadSection — разметка в (например, для счетчиков или микроразметки)
• itemsClass, itemClass — CSS классы для контейнеров всего каталога и 1 элемента (иногда требуется установить для этих блоков свои классы, например row).
• ListItemMakeup — кастомная разметка элемента в каталоге в виде
• ListPanelItemMakeup — кастомная разметка элемента в каталоге в виде Panel
• MetaDescription — метатег Description
• MetaKeywords — метатег Keywords
• MetaTitle — тег Title в Head
• OneToOneProduct — если 1, то режим работы без номенклатуры (каждое предложение от 1 поставщика)
• Page — текущая страница
• PageSize — размер пагинации
• RedirectUrl, RedirectStatusCode — если указан адрес, то страница сделает редирект с указанным статусом (по умолчанию 301)
• RightBreadcrumb — разметка для вставки в хлебные крошки справа (вспомогательные ссылки)
• RightBreadcrumbDropdownMakeup — некая HTML разметка всплывающей панели в хлебных крошках справа
• Sort — выбранная сортировка
• SortView — тип вывода элемента сортировки (по умолчанию кнопки). Если указать select — то выбор будет в виде выпадающего списка
• Text — текст описания к странице
• Title — заголовок страницы h1
• Total — сколько всего найдено товаров

SELECT 3 — Атрибуты товара, которые будут выводиться в поиске

• AttrCode — код атрибута
• AttrID — ID атрибута
• CacheMinutes — как долго минут кешируется список возможных вариантов из хранимой процедуры. Если 0, то не кешируется.
• Category — категория атрибута
• CategoryOrd — порядок категории
• DataType — тип данных, которые хранит атрибут
• ProductID — ID товара к которому привязан атрибут
• SqlGetValues — хранимая процедура, которая дает возможные варианты для списковых параметров
• Title — название атрибута
• TypeCode — тип атрибута
• Value — значение (если несколько, то через запятую)

SELECT 4 — Виды сортировок

SELECT 5 — Состояния фильтров. Работают, если установлен FilterStateEnabled = 1. На базе этих данных в фильтрах отображается сколько товаров есть по данному фильтру при текущей конфигурации выбранных фильтров.

• Count — количество найденных товаров для данного значения данного фильтра.
• FilterCode — код фильтра
• Value — значение фильтра

Настройка SEO параметров для поиска — cat_search_getSeoParameters.

• bannerImage — картинка баннера. Выходной параметр
• bannerText — текст при баннере. Выходной параметр
• bodyBottomSection — разметка перед. Выходной параметр
• filters — выбранные фильтры
• headSection — разметка в. Выходной параметр
• langID — выбранный язык
• metaDescription — метатег Description. Выходной параметр
• metaKeywords — метатег Keywords. Выходной параметр
• metaTitle — тег title. Выходной параметр
• preBreadcrumbs — что поставить вперед в хлебные крошки перед структурой каталога в форме name||url. Выходной параметр
• selectedCatID — текущая категория
• title — заголовок h1. Выходной параметр
• username — текущий пользователь

нет выходных SELECT

Получить детали для карточки товара — cat_getItem

• itemID — ID товара
• langID — выбранный язык
• username — текущий пользователь
• parameters ExtendedDictionaryParameter readonly — опционально, содержит langID, falconGuid, url (только часть после /list//) и другие параметры в виде Key,Value2

SELECT 1 Настройки вывода

• AttrTemplateMakeup — кастом разметка для вывода списка атрибутов товара
• BodyBottomSection — секция разметки перед закрывающим тегом body
• CustomMakeup — кастом разметка каталога
• HeadSection — секция разметки в head
• ID — ID товара
• MetaDescription — мета тег Description
• MetaKeywords — мета тег Keywords
• MetaTitle — мета тег Title
• Name — наименование
• OneToOneProduct — если 1, то включается режим Без номенклатуры
• PreBreadcrumbs — первый элемент в хлебных крошках
• Price — стоимость
• Rating — рейтинг товара
• RedirectUrl, RedirectStatusCode — если указан адрес, то страница сделает редирект с указанным статусом (по умолчанию 301)
• RightBreadcrumb — разметка для вставки в хлебные крошки справа (вспомогательные ссылки)
• RightBreadcrumbDropdownMakeup — некая HTML разметка всплывающей панели в хлебных крошках справа
• ShortDesc — краткое описание
• ValutaSigh — обозначение валюты

SELECT 2 Категории товара (иерархия)

SELECT 3 Атрибуты

• AttrID — ID атрибута
• Category — категория (для группировки вывода атрибутов)
• CategoryOrd — Порядок категории
• DataType — тип данных фильтра
• TypeCode — тип атрибута
• Title — название атрибута
• Value — Значение

SELECT 4 Предложения поставщиков

• Price — стоимость
• SupplierLink — ссылка на страницу поставщика
• SupplierName — наименование поставщика
• SupplierProductID — ID предложения

Настройка SEO параметров для карточки товара — cat_getItem_getSeoParameters

• bodyBottomSection — разметка перед. Выходной параметр
• headSection — разметка в. Выходной параметр
• itemID — ID товара
• langID — выбранный язык
• metaDescription — метатег Description. Выходной параметр
• metaKeywords — метатег Keywords. Выходной параметр
• metaTitle — тег title. Выходной параметр
• parameters — дополнительные системные параметры (например, falconGuid)
• preBreadcrumbs — что поставить вперед в хлебные крошки перед структурой каталога в форме name||url. Выходной параметр
• title — заголовок h1. Выходной параметр
• username — текущий пользователь

нет выходных SELECT

Управлять этими процедурами можно на /catSettings

Панели товаров

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

Сниппет:

Указаны тип сниппета, код панели, и часть экрана для расположения.

По коду сниппета создаем соответствующую ХП для настройки отображения панели и выбора продуктов в неё:

CREATE PROCEDURE [dbo].cat_new_panel @langID int, @username nvarchar(256) AS BEGIN select 'Новые товары' Title, 'http://ya.ru' Link, 'Это нижний HTML под панелью' BottomHtml, 5 CacheMinutes, '' ItemMakeup, '' Msg, 1 Result select top 8 '111х' Name, '222х' Link, 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNMNkquBwADcQF5wZiBLwAAAABJRU5ErkJggg==' Img, 123 Price, '444х' [Desc] from as_cat_products END

В ItemMakeup можно вставлять кастомизированную верстку для элемента.

Работает 2 режима — слайдер и панель товаров. Режим задается через data-type для сниппета.

How to по каталогу (catalog)

Как убрать категорию из каталога

Необходимо в панели управления у категории поставить признак Отключено (isDisabled=true).

Как сделать кастомную верстку для каталога

Для этого в SELECT 2 в cat_search указываем CustomMakeup - эта разметка может принимать следующие параметры: 

Верстка каталога товаров ч.2

Весь каталог помещен в список . Здесь задано сразу 2 класса imdiz-products и imdiz-products_row . Тег ul в свою очередь помещен в контейнер . Для чего здесь класс products__container Вы увидите чуть позже в style.css.

Вы имеете право в начале имени класса не указывать префикс «imdiz-«. Но он удобен тем, что, если Вы работаете с чьей-то уже готовой версткой (вносите изменения), то благодаря префиксу Ваши имена не будут совпадать с чужими именами. Не будет конфликтов имен. Вы можете придумать свой префикс.

Итак, я задал для списка ul сразу 2 класса. Для чего? Первый класс будет для товаров в столбец, второй — для товаров в строку. Просто в готовом интернет-магазине страница товаров одна, и когда Вы нажимаете на кнопку , то у тега ul удаляется класс imdiz-products_row, и товары выстраиваются в столбец. А при нажатии на кнопку тегу ul класс возвращается обратно.

Посмотрите в style.css. Естественно, смотрите код под строкой /* Products_row page */.

Сперва переопределяется свойство justify-content класса container:

.products__container

Это сделано, чтобы весь список товаров сдвинуть вправо.

Переопределение Вы можете видеть в инструментах разработчика:

Ниже идут стили для классов .imdiz-products и .imdiz-products_row . Почему в названиях классов я использую и дефис, и знак подчеркивания, я объясню позже.

В первую очередь задается ширина для списка товаров равная 860px. Конечно, в каждом новом проекте ширина может меняться. Здесь же задается margin-right: -10px; , и вот для чего. Дело в том, что у каждой карточки товара будут отступы в 10 пикселей. И каждая правая карточка будет неровно смотреться на странице, потому что она будет сдвинута влево на эти самые 10 пикселей. Чтобы всё выровнять прибегают к такой хитрости. Для ВСЕГО списка товаров (для тега ul) задают отрицательный правый отступ margin-right: -10px;. Вы сейчас у себя его можете удалить и посмотреть, как сдвинутся карточки.

Потом для .imdiz-products_row задается CSS-свойство display: flex; . И, возможно, Вы помните из бесплатных уроков, что именно благодаря flex товары выстраиваются в строку. Следующее свойство flex-wrap: wrap; указывает, чтобы товары могли переноситься в новую строку. Если не указать flex-wrap, то все товары встанут в одну строку, и естественно будут очень сжатые.

Но вернитесь в файл products_row.html. Разберем полностью карточку первого товара. Обычно именно так верстается весь каталог. Сперва верстается карточка первого товара, а потом ее просто дублируют (ведь карточки идентичные). Если нужно в дублированные карточки вносят изменения, например, цена, называние товара, наличие. Это зависит от дизайна.

Карточка товара помещается в тег с классом imdiz-product . Далее вся информация о товаре оборачивается в . С английского inner переводится как «внутренний».

, и поэтому в строку помещается ровно 3 карточки.

Если бы не было внутреннего блока , то ширину пришлось бы задавать ровно в пикселях, и еще задавать отступы. А для левых карточек отступы высчитывать отдельно.

В браузере в окне инструментов разработчика можно навести курсор мыши на тег и увидеть полные размеры этого тега:

Еще здесь же стоит отметить свойство list-style: none; . В HTML как и в Word каждый пункт списка слева отмечается точкой. Чтобы эту точку убрать, нужно использовать list-style: none; .

CSS-свойство border

Каким образом задана рамка у . Задается она CSS-свойством border. В style.css для .imdiz-product__inner задано свойство border: 1px solid #ededed; . С английского border переводится как «граница». Здесь 1-ое значение указывает толщину рамки (1 пиксель); 2-ое значение указывает, что рамка должны быть в виде простой линии; 3-е значение — цвет рамки (цвет задан в HEX-формате, это наиболее частый формат в CSS). Добавлю, что кроме solid еще может быть dashed — пунктирная линия, dotted — рамка будет состоять из точек.

Каждое из значений свойства border можно задать отдельным свойством:

• border-width — толщина рамки;
• border-style — рамки в виде сплошной линии, пунктирной или точек (solid, dashed, dotted);
• border-color — цвет рамки.

Изменение цвета рамки при наведении курсора мыши

Чтобы цвет рамки изменялся плавно при наведении, для .imdiz-product__inner задано свойство transition: all .3s; . Здесь all означает, что transition распространяется на все CSS-свойства класса .imdiz-product__inner . Свойство transition можно задавать для каждого свойства отдельно, например, transition: padding .3s; или transition: border-width .3s;.

Значение .3s означает, что плавное изменение будет происходить в течение 0,3 секунды. Поиграйтесь с этим значение поставьте например 5s (без точки). Вы увидите, что цвет рамки стал меняться очень медленно.

Ну, а чтобы цвет рамки менялся при наведении, нужно использовать свойство :hover (переводится «зависать»). Для этого в style.css прописан код:

.imdiz-product__inner:hover

Здесь написано, что при наведении курсора нужно изменить цвет рамки на #cb2d41.

Иконочный шрифт Font Awesome

Информация о наличии помещена в тег . В HTML — это тег для каждого нового абзаца текста. В данном случае информацию о наличии можно поместить в этот тег. В имени класса imdiz-product__av сокращение av от слова availability, что означает «наличие».

Иконка наличия задана иконочным шрифтом Font Awesome, о котором написано в бесплатном уроке.

Вы уже подключили иконочный шрифт к своей верстке. Но все-же я повторю алгоритм подключения шрифта Font Awesome. Сперва нужно создать папку fonts и скачать в нее сам шрифт (это несколько файлов). Затем нужно в папку css добавить файл font-awesome.min.css. Ну, и наконец, в HTML-файле в теге подключить шрифт строкой типа . То есть нужно выполнить 3 шага.

Иконки вставляются в HTML-файл тегом . Каждая иконка зависит от второго класса, например, здесь иконка галочки благодаря классу fa-check. Еще пример, иконка youtube задается классом fa-youtube. Все иконки можно посмотреть здесь fontawesome.ru/all-icons.

Далее, текст «В наличии» помещается в тег . Так как теги и строчные, то иконка и текст разместятся в одну строку.

Отцентрировать текст внутри блочного элемента

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

Информация о наличии помещена в тег . Тег

— блочный, поэтому он занимает всю ширину своего родительского тега . Чтобы отцентрировать текст внутри любого блочного тега, нужно этому тега задать CSS-свойство text-align: center;. Поэтому в style.css для .imdiz-product__av прописано text-align: center; .

Начните зарабатывать версткой сайтов до 50 000 р./месяц уже через 5 дней

Решили зарабатывать самостоятельно?

Читайте мою статью для самозанятых