49 Модуль 10 Реальные проекты 20 мин урок 24 из 25

Проект: интернет-магазин

Каталог с фильтрами без единой строки скрипта, галерея товара на якорях, состояние «нет в наличии» и микроразметка для поисковиков.

Что ты научишься делать

Сделаешь работающие фильтры каталога на :has() и чекбоксах
Соберёшь галерею товара с превью без JavaScript
Разметишь товар так, чтобы поисковик показал цену прямо в выдаче

#Что собираем

Каталог кофейни: список товаров, фильтры сбоку, карточка товара с галереей. Всё интерактивное — на CSS, потому что здесь это честно работает.

Оговорка сразу: настоящий магазин фильтрует на сервере, иначе на тысяче товаров страница станет неподъёмной. Приём из этого урока хорош для каталога на два-три десятка позиций — и как способ понять, насколько далеко зашёл современный CSS.

#Шаг 1. Сетка каталога

Карточки должны хорошо выглядеть и в широкой сетке, и в узкой колонке рядом с фильтрами. Это ровно задача из двадцать восьмого урока — контейнерные запросы.

CSScatalog.css

1@layer layout {2  .shop {3    display: grid;4    grid-template-columns: 240px minmax(0, 1fr);5    gap: var(--space-6);6  }78  @media (max-width: 860px) {9    .shop { grid-template-columns: minmax(0, 1fr); }10  }1112  .catalog {13    display: grid;14    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));15    gap: var(--space-4);16  }1718  /* Каждая ячейка — контейнер: карточка сама решит,19     как ей собраться в доставшейся ширине */20  .catalog > * {21    container-type: inline-size;22    container-name: product;23  }24}2526@container product (min-width: 320px) {27  .product { grid-template-columns: 110px 1fr; }28  .product__desc { display: block; }29}

#Шаг 2. Фильтры без скриптов

Приём держится на трёх вещах: чекбоксы с состоянием, :has() у контейнера и правило, прячущее неподходящие карточки.

Логика читается почти словами: «если у каталога есть отмеченный фильтр по молочным напиткам, спрячь все карточки, которые не молочные».

Рабочие фильтры на чистом CSS

<div class="shop">  <form class="filters">    <fieldset>      <legend>Тип напитка</legend>      <label><input type="checkbox" id="f-milk"> С молоком</label>      <label><input type="checkbox" id="f-black"> Без молока</label>    </fieldset>    <fieldset>      <legend>Наличие</legend>      <label><input type="checkbox" id="f-stock"> Только в наличии</label>    </fieldset>  </form>  <div class="catalog">    <article class="product" data-type="milk" data-stock="yes">      <h3>Латте</h3><p class="price">210 ₽</p>    </article>    <article class="product" data-type="black" data-stock="yes">      <h3>Эспрессо</h3><p class="price">120 ₽</p>    </article>    <article class="product" data-type="milk" data-stock="no">      <h3>Раф</h3><p class="price">240 ₽</p><p class="out">Нет в наличии</p>    </article>    <article class="product" data-type="black" data-stock="no">      <h3>Фильтр</h3><p class="price">180 ₽</p><p class="out">Нет в наличии</p>    </article>  </div></div>

<div class="shop">
  <form class="filters">
    <fieldset>
      <legend>Тип напитка</legend>
      <label><input type="checkbox" id="f-milk"> С молоком</label>
      <label><input type="checkbox" id="f-black"> Без молока</label>
    </fieldset>

<fieldset>
      <legend>Наличие</legend>
      <label><input type="checkbox" id="f-stock"> Только в наличии</label>
    </fieldset>
  </form>

<div class="catalog">
    <article class="product" data-type="milk" data-stock="yes">
      <h3>Латте</h3><p class="price">210 ₽</p>
    </article>
    <article class="product" data-type="black" data-stock="yes">
      <h3>Эспрессо</h3><p class="price">120 ₽</p>
    </article>
    <article class="product" data-type="milk" data-stock="no">
      <h3>Раф</h3><p class="price">240 ₽</p><p class="out">Нет в наличии</p>
    </article>
    <article class="product" data-type="black" data-stock="no">
      <h3>Фильтр</h3><p class="price">180 ₽</p><p class="out">Нет в наличии</p>
    </article>
  </div>
</div>

/* Фильтр отмечен — прячем всё, что ему не подходит */.shop:has(#f-milk:checked) .product:not([data-type="milk"]) { display: none; }.shop:has(#f-black:checked) .product:not([data-type="black"]) { display: none; }.shop:has(#f-stock:checked) .product:not([data-stock="yes"]) { display: none; }/* Оба типа отмечены — показываем всё: условия гасят друг друга */.shop:has(#f-milk:checked):has(#f-black:checked) .product { display: grid; }.shop:has(#f-milk:checked):has(#f-black:checked):has(#f-stock:checked)  .product:not([data-stock="yes"]) { display: none; }.shop { display: grid; grid-template-columns: 170px 1fr; gap: 20px; }.filters { display: grid; gap: 14px; align-content: start; }.filters fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }.filters legend { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #7a7f8c; margin-bottom: 4px; }.filters label { display: flex; align-items: center; gap: 8px; font-size: 14px; }.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; align-content: start; }.product {  display: grid;  gap: 4px;  align-content: start;  padding: 12px;  background: #f5f5fa;  border-radius: 10px;}.product h3 { margin: 0; font-size: 15px; }.price { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }.out { margin: 0; font-size: 12px; color: #c8394a; }/* Нет в наличии — приглушаем, но оставляем читаемым */.product[data-stock="no"] .price { color: #7a7f8c; text-decoration: line-through; }

/* Фильтр отмечен — прячем всё, что ему не подходит */
.shop:has(#f-milk:checked) .product:not([data-type="milk"]) { display: none; }
.shop:has(#f-black:checked) .product:not([data-type="black"]) { display: none; }
.shop:has(#f-stock:checked) .product:not([data-stock="yes"]) { display: none; }

/* Оба типа отмечены — показываем всё: условия гасят друг друга */
.shop:has(#f-milk:checked):has(#f-black:checked) .product { display: grid; }
.shop:has(#f-milk:checked):has(#f-black:checked):has(#f-stock:checked)
  .product:not([data-stock="yes"]) { display: none; }

.shop { display: grid; grid-template-columns: 170px 1fr; gap: 20px; }

.filters { display: grid; gap: 14px; align-content: start; }
.filters fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.filters legend { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #7a7f8c; margin-bottom: 4px; }
.filters label { display: flex; align-items: center; gap: 8px; font-size: 14px; }

.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; align-content: start; }

.product {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 12px;
  background: #f5f5fa;
  border-radius: 10px;
}

.product h3 { margin: 0; font-size: 15px; }
.price { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.out { margin: 0; font-size: 12px; color: #c8394a; }

/* Нет в наличии — приглушаем, но оставляем читаемым */
.product[data-stock="no"] .price { color: #7a7f8c; text-decoration: line-through; }

В песочницу

#Шаг 3. Сортировка порядком

Сортировку на CSS тоже можно изобразить — свойством order у флекс- или грид-элементов. Значение берётся из данных товара.

CSSСортировка по цене

1/* Каждой карточке при генерации проставлен --price */2.shop:has(#sort-price:checked) .product {3  order: var(--price);4}

#Шаг 4. Галерея товара

Крупная картинка и полоса превью. Без скриптов это делается прокруткой с привязкой: превью — обычные якорные ссылки, лента прокручивается к нужному снимку и фиксируется на нём.

Галерея на якорях и scroll-snap

<div class="gallery">  <div class="gallery__strip">    <figure class="shot" id="shot-1"><span>Снимок 1</span></figure>    <figure class="shot" id="shot-2"><span>Снимок 2</span></figure>    <figure class="shot" id="shot-3"><span>Снимок 3</span></figure>  </div>  <nav class="gallery__thumbs" aria-label="Снимки товара">    <a href="#shot-1">1</a>    <a href="#shot-2">2</a>    <a href="#shot-3">3</a>  </nav></div>

.gallery__strip {  display: flex;  overflow-x: auto;  /* Лента останавливается ровно на снимке */  scroll-snap-type: x mandatory;  scroll-behavior: smooth;  border-radius: 12px;}.shot {  flex: 0 0 100%;  margin: 0;  height: 200px;  display: grid;  place-items: center;  scroll-snap-align: center;  color: #fff;  font-weight: 600;}#shot-1 { background: linear-gradient(135deg, #6544e0, #b06cff); }#shot-2 { background: linear-gradient(135deg, #0f8f6a, #4bd1a0); }#shot-3 { background: linear-gradient(135deg, #c8394a, #f2777a); }.gallery__thumbs {  display: flex;  gap: 8px;  margin-top: 10px;}.gallery__thumbs a {  width: 40px;  height: 32px;  display: grid;  place-items: center;  font-size: 13px;  color: #16181d;  text-decoration: none;  background: #f4f4f8;  border-radius: 8px;}.gallery__thumbs a:focus-visible {  outline: 3px solid #6544e0;  outline-offset: 2px;}@media (prefers-reduced-motion: reduce) {  .gallery__strip { scroll-behavior: auto; }}

.gallery__strip {
  display: flex;
  overflow-x: auto;
  /* Лента останавливается ровно на снимке */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: 12px;
}

.shot {
  flex: 0 0 100%;
  margin: 0;
  height: 200px;
  display: grid;
  place-items: center;
  scroll-snap-align: center;
  color: #fff;
  font-weight: 600;
}

#shot-1 { background: linear-gradient(135deg, #6544e0, #b06cff); }
#shot-2 { background: linear-gradient(135deg, #0f8f6a, #4bd1a0); }
#shot-3 { background: linear-gradient(135deg, #c8394a, #f2777a); }

.gallery__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.gallery__thumbs a {
  width: 40px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: #16181d;
  text-decoration: none;
  background: #f4f4f8;
  border-radius: 8px;
}

.gallery__thumbs a:focus-visible {
  outline: 3px solid #6544e0;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .gallery__strip { scroll-behavior: auto; }
}

В песочницу

#Шаг 5. Состояние «нет в наличии»

Товара нет — карточку не прячут, а помечают. Иначе человек будет искать её и думать, что ошибся.

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

CSSСостояние товара

1@layer components {2  /* Состояние в data-атрибуте: видно, что оно временное */3  .product[data-stock="out"] .product__media {4    filter: grayscale(1);5    opacity: .6;6  }78  .product[data-stock="out"] .product__price {9    color: var(--color-muted);10    text-decoration: line-through;11  }1213  /* Кнопка меняется целиком: покупать нечего,14     но можно попросить сообщить о поступлении */15  .product[data-stock="out"] .product__buy { display: none; }16  .product:not([data-stock="out"]) .product__notify { display: none; }17}

#Шаг 6. Микроразметка товара

Микроразметка — это данные о товаре в машиночитаемом виде. Благодаря ей поисковик показывает в выдаче цену, наличие и рейтинг прямо под ссылкой.

Проще всего добавить её отдельным блоком в формате JSON-LD: он не смешивается с вёрсткой и не мешает менять разметку.

HTMLВ конце страницы товара

1<script type="application/ld+json">2{3  "@context": "https://schema.org",4  "@type": "Product",5  "name": "Раф на кокосовом молоке",6  "description": "Мягкий напиток на растительном молоке",7  "brand": { "@type": "Brand", "name": "Полка" },8  "offers": {9    "@type": "Offer",10    "price": "240",11    "priceCurrency": "RUB",12    "availability": "https://schema.org/InStock"13  }14}15</script>

#Корзина и её состояния

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

Состояние	Что нужно предусмотреть
Пустая	Объяснение и ссылка в каталог, а не просто «0 товаров»
Один товар	Раскладка не должна выглядеть сломанной из-за одной строки
Много товаров	Прокрутка внутри списка, итог всегда виден
Товар кончился, пока лежал в корзине	Пометка и предложение убрать — самая забываемая ситуация
Изменение количества	Итог пересчитывается, число не дёргается: `tabular-nums`
Отправка заказа	Кнопка блокируется, показывается ход выполнения

#Счётчик товаров в шапке

Мелочь, на которой видно разницу между «работает» и «сделано хорошо». Счётчик меняется во время работы страницы — значит это живая область из сорок третьего урока.

HTMLДоступный счётчик

1<a class="cart" href="/cart">2  <svg class="icon" aria-hidden="true"><use href="#i-cart"/></svg>34  <!-- Число видно глазами -->5  <span class="cart__count" aria-hidden="true">3</span>67  <!-- А это слышит читалка: полная фраза вместо голой цифры -->8  <span class="visually-hidden" role="status">9    Корзина: 3 товара10  </span>11</a>

#Грабли этого проекта

Что случилось	Почему	Решение
Фильтры перестали складываться	Комбинаций условий больше, чем правил	Ограничить число фильтров либо перенести на сервер
Карточка сжалась в узкой колонке	Медиазапрос смотрит на экран, а не на колонку	Контейнерные запросы у ячеек каталога
Сортировка сбила порядок чтения	`order` меняет вид, но не разметку	Сортировать на сервере или менять сам порядок элементов
Галерея не листается с клавиатуры	Превью сделаны из `div`	Настоящие ссылки на якоря снимков
Поисковик не показал цену	Данные в разметке расходятся с видимыми	Привести к одному значению
Пропавшие товары путают	Отсутствующие позиции скрыты полностью	Помечать, а не прятать

Где спотыкаются почти все

Фильтры на CSS в большом каталоге

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

Как надо До нескольких десятков позиций — можно. Дальше только сервер.

Сортировка через <code>order</code>

Почему Видимый порядок расходится с порядком обхода клавиатурой и чтения голосом.

Как надо Менять сам порядок элементов, а не только их отображение.

Товар без наличия скрыт из каталога

Почему Человек помнит, что видел позицию, и решает, что ошибся страницей.

Как надо Показывать с пометкой и предложением сообщить о поступлении.

Микроразметка не совпадает со страницей

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

Как надо Генерировать разметку из тех же данных, что и видимую цену.

Привязка прокрутки scroll-snap: Остановка прокрутки на заданных точках — основа галерей без скриптов.
Микроразметка structured data: Данные о содержимом в машиночитаемом виде для поисковиков.
Фасетный фильтр faceted filter: Набор независимых условий отбора, работающих совместно.
Расширенные сведения rich results: Цена, рейтинг и наличие в поисковой выдаче под ссылкой.

Задание

Фильтр каталога

В каталоге четыре товара с атрибутами data-type и data-stock. Фильтры уже размечены, но не работают.

Напиши правила на :has(): отмеченный фильтр «С молоком» прячет всё, что не молочное; «Только в наличии» — всё, чего нет. Плюс оформи состояние «нет в наличии»: перечёркнутая приглушённая цена.

<div class="shop">  <form class="filters">    <label><input type="checkbox" id="f-milk"> С молоком</label>    <label><input type="checkbox" id="f-stock"> Только в наличии</label>  </form>  <div class="catalog">    <article class="product" data-type="milk" data-stock="yes"><h3>Латте</h3><p class="price">210 ₽</p></article>    <article class="product" data-type="black" data-stock="yes"><h3>Эспрессо</h3><p class="price">120 ₽</p></article>    <article class="product" data-type="milk" data-stock="no"><h3>Раф</h3><p class="price">240 ₽</p></article>    <article class="product" data-type="black" data-stock="no"><h3>Фильтр</h3><p class="price">180 ₽</p></article>  </div></div>

/* 1. Фильтр «С молоком» прячет немолочные *//* 2. Фильтр «Только в наличии» прячет отсутствующие *//* 3. Цена отсутствующего товара — приглушённая и перечёркнутая */.shop { display: grid; grid-template-columns: 150px 1fr; gap: 18px; }.filters { display: grid; gap: 8px; align-content: start; font-size: 14px; }.filters label { display: flex; align-items: center; gap: 8px; }.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; align-content: start; }.product {  display: grid;  gap: 4px;  align-content: start;  padding: 12px;  background: #f5f5fa;  border-radius: 10px;}.product h3 { margin: 0; font-size: 15px; }.price { margin: 0; font-weight: 700; }

Открыть в песочнице

Подсказка 1

Условие вешается на общий контейнер: .shop:has(#f-milk:checked) .product:not([data-type="milk"]) { display: none; }

Подсказка 2

Второй фильтр — по тому же образцу, только с #f-stock и [data-stock="yes"].

Подсказка 3

Состояние: .product[data-stock="no"] .price { color: #7a7f8c; text-decoration: line-through; }

Показать решение

HTMLindex.html

1<div class="shop">2  <form class="filters">3    <label><input type="checkbox" id="f-milk"> С молоком</label>4    <label><input type="checkbox" id="f-stock"> Только в наличии</label>5  </form>67  <div class="catalog">8    <article class="product" data-type="milk" data-stock="yes"><h3>Латте</h3><p class="price">210 ₽</p></article>9    <article class="product" data-type="black" data-stock="yes"><h3>Эспрессо</h3><p class="price">120 ₽</p></article>10    <article class="product" data-type="milk" data-stock="no"><h3>Раф</h3><p class="price">240 ₽</p></article>11    <article class="product" data-type="black" data-stock="no"><h3>Фильтр</h3><p class="price">180 ₽</p></article>12  </div>13</div>

CSSstyle.css

1/* Отмечен фильтр — прячем то, что ему не подходит */2.shop:has(#f-milk:checked) .product:not([data-type="milk"]) {3  display: none;4}56.shop:has(#f-stock:checked) .product:not([data-stock="yes"]) {7  display: none;8}910/* Товара нет: помечаем, но не прячем */11.product[data-stock="no"] .price {12  color: #7a7f8c;13  text-decoration: line-through;14}1516.shop { display: grid; grid-template-columns: 150px 1fr; gap: 18px; }17.filters { display: grid; gap: 8px; align-content: start; font-size: 14px; }18.filters label { display: flex; align-items: center; gap: 8px; }19.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; align-content: start; }2021.product {22  display: grid;23  gap: 4px;24  align-content: start;25  padding: 12px;26  background: #f5f5fa;27  border-radius: 10px;28}2930.product h3 { margin: 0; font-size: 15px; }31.price { margin: 0; font-weight: 700; }

Чек-лист сдачи магазина

Карточка корректна и в широкой сетке, и в узкой колонке
Фильтры работают с клавиатуры
Галерея листается табом и стрелками
Отсутствующие товары помечены, а не скрыты
Цена в микроразметке совпадает с видимой
У всех картинок товаров осмысленный alt
Проверено без скриптов: каталог читается

Проект: интернет-магазин

Что ты научишься делать

#Что собираем

#Шаг 1. Сетка каталога

#Шаг 2. Фильтры без скриптов

#Шаг 3. Сортировка порядком

#Шаг 4. Галерея товара

#Шаг 5. Состояние «нет в наличии»

#Шаг 6. Микроразметка товара

#Корзина и её состояния

#Счётчик товаров в шапке

#Грабли этого проекта

Где спотыкаются почти все

Фильтры на CSS в большом каталоге

Сортировка через <code>order</code>

Товар без наличия скрыт из каталога

Микроразметка не совпадает со страницей

Проверь себя

Фильтр каталога

Чек-лист сдачи магазина

Горячие клавиши

В редакторе кода

#Что собираем

#Шаг 1. Сетка каталога

#Шаг 2. Фильтры без скриптов

#Шаг 3. Сортировка порядком

#Шаг 4. Галерея товара

#Шаг 5. Состояние «нет в наличии»

#Шаг 6. Микроразметка товара

#Корзина и её состояния

#Счётчик товаров в шапке

#Грабли этого проекта

Где спотыкаются почти все

Фильтры на CSS в большом каталоге

Сортировка через <code>order</code>

Товар без наличия скрыт из каталога

Микроразметка не совпадает со страницей

Проверь себя

Чек-лист сдачи магазина

Рядом по теме