Как сверстать карточку товара с оценкой и привязать к БД

При создании интернет-магазина часто требуется выводить не только характеристики товара, но и его рейтинг. Оценка от 1 до 5 в виде полосок или звезд делает карточку наглядной и повышает доверие пользователя. Разберём, как правильно сверстать такой шаблон и связать его с базой данных.

Структура базы данных для хранения оценки

Для хранения рейтинга товара добавьте в таблицу products целочисленное поле rating (тип TINYINT или INT). Значение может быть от 1 до 5. Пример SQL-запроса:

ALTER TABLE products ADD COLUMN rating TINYINT DEFAULT 0;

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

Верстка карточки товара с рейтингом

Создайте HTML-шаблон, который выводит название, характеристики и полоски рейтинга. Используйте CSS для отображения заполненных и пустых полосок. Пример структуры:

<div class='product-card'>
  <h3>Название товара</h3>
  <ul class='specs'>
    <li>Характеристика 1</li>
    <li>Характеристика 2</li>
  </ul>
  <div class='rating'>
    <div class='rating-fill' style='width: 60%'></div>
  </div>
</div>

В CSS задайте классы .rating (контейнер серых полосок) и .rating-fill (заполненная часть). Ширина заполнения вычисляется как (оценка / 5) * 100%.

Динамическое отображение через PHP/шаблонизатор

При выводе из базы данных подставьте значение rating в атрибут style. Пример на PHP:

<?php
$rating = $product['rating']; // от 1 до 5
$width = ($rating / 5) * 100;
?>
<div class='rating-fill' style='width: <?= $width ?>%'></div>

Для шаблонизаторов (Twig, Blade) логика аналогична: передаёте переменную rating и вычисляете процент.

Пример готового шаблона верстки

Вот минимальный CSS-код для полосок рейтинга:

.rating {
  height: 12px;
  background: #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
}
.rating-fill {
  height: 100%;
  background: #f5a623;
  border-radius: 6px;
  transition: width 0.3s;
}

Такой шаблон легко адаптировать под любые характеристики: добавьте блок .specs для списка параметров. Все данные подгружаются из БД через SQL-запрос SELECT name, rating, ... FROM products WHERE id = ?.

Часто задаваемые вопросы

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