Код-ревью

42. Галерея фото из отзывов на карточке Ozon

Лёгкая

JavaScript · 41 строк

Под карточкой товара — лента фото из отзывов. При прокрутке к низу страницы подгружается следующая страница по 24 фото, по клику фото открывается крупно с оценкой и текстом.

Сайт — SPA: при переходе на другой товар старая галерея вызывает destroy(), создаётся новая. Отзывы-вопросы с фото приходят с rating: null. Отметьте строки с ошибками.

В работе: Блок «Фото покупателей» на карточке товара в веб-версии.

Как проверяем Нажмите на строку с ошибкой и коротко напишите, что не так. Баг засчитан, если отмечена хотя бы одна его строка. Зачёт — найдено не меньше 60 % багов с учётом серьёзности (критичный весит 3, обычный 2, мелкий 1), а лишних отметок не больше, чем багов в коде. Пустые строки, скобки и комментарии лишними не считаем. Ответ один на подход: после него показываем разбор.

DOMXSSобработчики событийfetchбесконечная прокрутка

Источник: наша задача на данных Ozon: отзывы и карточка товара. Условие пересказано своими словами.

Нужен JavaScript

Отметки и ответы работают в браузере. Условие и материал задачи открыты и без него.

// Галерея фото из отзывов на карточке товара, подгрузка при прокрутке
class ReviewGallery {
constructor(root, productId) {
this.root = root;
this.productId = productId;
this.page = 1;
this.loading = false;
window.addEventListener("scroll", () => this.onScroll());
}
async onScroll() {
const nearBottom = window.innerHeight + window.scrollY > document.body.offsetHeight - 600;
if (!nearBottom || this.loading) return;
this.loading = true;
const resp = await fetch(`/api/products/${this.productId}/review-photos?page=${this.page}`);
const data = await resp.json();
this.page++;
this.loading = false;
this.render(data.items);
}
render(items) {
for (const item of items) {
const card = document.createElement("figure");
card.innerHTML = `<img src="${item.thumb}" alt="">
<figcaption>${item.author}: ${item.text}</figcaption>`;
card.addEventListener("click", () => this.open(item));
this.root.appendChild(card);
}
}
open(item) {
const rating = item.rating.toFixed(1);
document.getElementById("viewer-img").src = item.full;
document.getElementById("viewer-caption").textContent = `${rating} ★ ${item.text}`;
}
destroy() {
this.root.innerHTML = "";
}
}