Пример проекта. Петрова / Прототипирование
.docx
Рисунок 1. Страница с Клиниками
Рисунок 2. Страница с Календарем
Рисунок 3. Страница с Корзиной
Работа функции корзины:
// Корзина
function addToCart(clinicId, serviceId) {
const clinic = clinicsData.find(c => c.id === clinicId);
const service = clinic.services.find(s => s.id === serviceId);
cart.push({
clinicId: clinicId,
clinicName: clinic.name,
serviceId: service.id,
serviceName: service.name,
price: service.price
});
renderCart();
alert(`Услуга "${service.name}" добавлена в корзину`);
}
function removeFromCart(clinicId, serviceId) {
const index = cart.findIndex(item => item.clinicId === clinicId && item.serviceId === serviceId);
if (index !== -1) {
cart.splice(index, 1);
renderCart();
}
}
function renderCart() {
const cartEmpty = document.getElementById('cartEmpty');
const cartContent = document.getElementById('cartContent');
const cartItems = document.getElementById('cartItems');
const cartTotalPrice = document.getElementById('cartTotalPrice');
if (cart.length === 0) {
cartEmpty.style.display = 'block';
cartContent.style.display = 'none';
return;
}
cartEmpty.style.display = 'none';
cartContent.style.display = 'block';
cartItems.innerHTML = '';
const clinicsInCart = {};
cart.forEach(item => {
if (!clinicsInCart[item.clinicId]) {
clinicsInCart[item.clinicId] = {
clinicName: item.clinicName,
services: [],
total: 0
};
}
clinicsInCart[item.clinicId].services.push(item);
clinicsInCart[item.clinicId].total += item.price;
});
Object.keys(clinicsInCart).forEach(clinicId => {
const clinicData = clinicsInCart[clinicId];
const clinicGroup = document.createElement('div');
clinicGroup.className = 'cart-clinic-group';
clinicGroup.innerHTML = `<div class="cart-clinic-name">${clinicData.clinicName}</div>`;
clinicData.services.forEach(item => {
const cartItem = document.createElement('div');
cartItem.className = 'cart-item';
cartItem.innerHTML = `
<div>
<div class="service-name">${item.serviceName}</div>
</div>
<div>
<span class="service-price">${item.price} ₽</span>
<button class="btn" onclick="removeFromCart(${item.clinicId}, ${item.serviceId})" style="margin-left: 10px;">Удалить</button>
</div>
`;
clinicGroup.appendChild(cartItem);
});
const clinicTotal = document.createElement('div');
clinicTotal.className = 'cart-clinic-total';
clinicTotal.textContent = `Итого по клинике: ${clinicData.total} ₽`;
clinicGroup.appendChild(clinicTotal);
cartItems.appendChild(clinicGroup);
});
const totalPrice = cart.reduce((sum, item) => sum + item.price, 0);
cartTotalPrice.textContent = totalPrice;
}
1. Функция addToCart(clinicId, serviceId)
function addToCart(clinicId, serviceId) {
// 1. Поиск клиника по ID
const clinic = clinicsData.find(c => c.id === clinicId);
// 2. Поиск услуги в найденной клинике по ID услуги
const service = clinic.services.find(s => s.id === serviceId);
// 3. Добавление услуги в корзину
cart.push({
clinicId: clinicId, // ID клиники для группировки
clinicName: clinic.name, // Название клиники для отображения
serviceId: service.id, // ID услуги для идентификации
serviceName: service.name, // Название услуги для отображения
price: service.price // Цена услуги для подсчета суммы
});
// 4. Обновление отображения корзины
renderCart();
// 5. Уведомление пользователя
alert(Услуга "${service.name}" добавлена в корзину);
}
Пояснение:
· clinicsData.find() - ищет клиник в массиве по ID
· clinic.services.find() - ищет услугу в массиве услуг клиника
· cart.push() - добавляет объект с данными услуги в массив корзины
· Каждая услуга хранит всю необходимую информацию для отображения и группировки
2. Функция removeFromCart(clinicId, serviceId)
function removeFromCart(clinicId, serviceId) {
// 1. Поиск индекса услуги в корзине
const index = cart.findIndex(item =>
item.clinicId === clinicId && item.serviceId === serviceId
);
// 2. Если услуга найдена, удаляем ее
if (index !== -1) {
cart.splice(index, 1); // Удаляем 1 элемент по найденному индексу
renderCart(); // Обновляем отображение
}
}
Пояснение:
· findIndex() - ищет индекс элемента в массиве по условию
· Условие проверяет совпадение и clinicId, и serviceId для точной идентификации
· splice(index, 1) - удаляет один элемент из массива по указанному индексу
· index !== -1 проверяет, что элемент был найден (-1 означает "не найдено")
3. Функция renderCart() - основная логика отображения
function renderCart() {
// 1. Получение DOM-элементов
const cartEmpty = document.getElementById('cartEmpty');
const cartContent = document.getElementById('cartContent');
const cartItems = document.getElementById('cartItems');
const cartTotalPrice = document.getElementById('cartTotalPrice');
// 2. Проверка на пустую корзину
if (cart.length === 0) {
cartEmpty.style.display = 'block'; // Показываем сообщение "Корзина пуста"
cartContent.style.display = 'none'; // Скрываем содержимое корзины
return; // Выходим из функции
}
// 3. Если корзина не пустая
cartEmpty.style.display = 'none'; // Скрываем сообщение о пустой корзине
cartContent.style.display = 'block'; // Показываем содержимое корзины
cartItems.innerHTML = ''; // Очищаем контейнер для перерисовки
// 4. Группировка услуг по клиникам
const clinicsInCart = {};
cart.forEach(item => {
// Если клиник еще нет в объекте группировки - создаем
if (!clinicsInCart[item.clinicId]) {
clinicsInCart[item.clinicId] = {
clinicName: item.clinicName, // Название клиники
services: [], // Массив услуг этой клиники
total: 0 // Общая сумма услуг клиники
};
}
// Добавляем услугу в массив услуг клиники
clinicsInCart[item.clinicId].services.push(item);
// Увеличиваем общую сумму клиники на цену услуги
clinicsInCart[item.clinicId].total += item.price;
});
Пояснение группировки:
· Создается объект clinicsInCart, где ключи - это ID клиник
· Для каждой услуги в корзине проверяется, есть ли уже запись для ее клиника
· Если нет - создается новая группа с начальными значениями
· Услуга добавляется в массив services соответствующей групп
· Сумма цены услуги добавляется к total группы
4. Функция отображения сгруппированных услуг
Object.keys(clinicsInCart).forEach(clinicId => {
const clinicData = clinicsInCart[clinicId];
// Создаем контейнер для группы услуг одной клиники
const clinicGroup = document.createElement('div');
clinicGroup.className = 'cart-clinic-group';
// Добавляем заголовок с названием клиники
clinicGroup.innerHTML = <div class="cart-clinic-name">${clinicData.clinicName}</div>;
// Добавляем каждую услугу клиники
clinicData.services.forEach(item => {
const cartItem = document.createElement('div');
cartItem.className = 'cart-item';
cartItem.innerHTML =
<div>
<div class="service-name">${item.serviceName}</div>
</div>
<div>
<span class="service-price">${item.price} ₽</span>
<button class="btn" onclick="removeFromCart(${item.clinicId}, ${item.serviceId})" style="margin-left: 10px;">Удалить</button>
</div>
;
clinicGroup.appendChild(cartItem);
});
// Добавляем итоговую сумму по клинике
const clinicTotal = document.createElement('div');
clinicTotal.className = 'cart-clinic-total';
clinicTotal.textContent = Итого по клинике: ${clinicData.total} ₽;
clinicGroup.appendChild(clinicTotal);
// Добавляем готовую группу в общий контейнер
cartItems.appendChild(clinicGroup);
});
Пояснение отображения:
· Object.keys(clinicsInCart) - получает массив ID клиник из объекта группировки
· Для каждого клиника создается отдельный блок с классом cart-clinic-group
· Внутри блока отображаются все услуги этого клиника с кнопками удаления
· Под списком услуг выводится суммарная стоимость всех услуг данной клиники
5. Функция расчета и отображения общей суммы всех услуг
const totalPrice = cart.reduce((sum, item) => sum + item.price, 0);
cartTotalPrice.textContent = totalPrice;
}
Пояснение расчета общей суммы:
· reduce() - метод массива, который последовательно обрабатывает каждый элемент
· Начальное значение аккумулятора sum = 0
· Для каждого элемента item к сумме добавляется item.price
· Результат - общая стоимость всех услуг в корзине