-
-
{{/if}}
+
+
diff --git a/src/scripts/components/cart/elements/left-cards/view/left-cards.scss b/src/scripts/components/cart/elements/left-cards/view/left-cards.scss
index 09930a8..a4501b7 100644
--- a/src/scripts/components/cart/elements/left-cards/view/left-cards.scss
+++ b/src/scripts/components/cart/elements/left-cards/view/left-cards.scss
@@ -16,9 +16,8 @@
}
&__image {
- width: parameters.$card-image-width;
padding: parameters.$micro-padding;
- min-width: parameters.$min-card-image-width;
+ width: parameters.$min-card-image-width;
img {
width: parameters.$width-max;
@@ -146,38 +145,7 @@
@include basic-mixins.checkbox;
- &__placeholder {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 30px;
- text-align: center;
- font-size: 20px;
- font-weight: bold;
- color: parameters.$default-text-color;
- background-color: #f9f9f9;
- border-radius: 12px;
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
- animation: fadeIn 1s ease-in-out;
- }
-
- &__icon {
- margin-bottom: 15px;
- opacity: 0.7;
- transition: transform 0.3s ease;
- }
-
- &__placeholder-text,
- &__placeholder-suggestion {
- font-size: 18px;
- color: #555;
- }
-
- &__placeholder:hover .cart-item__icon {
- transform: scale(1.1);
- opacity: 1;
- }
+ @include basic-mixins.placeholder;
&__left {
display: flex;
diff --git a/src/scripts/components/cart/elements/left-cards/view/left-cards.ts b/src/scripts/components/cart/elements/left-cards/view/left-cards.ts
index 5bedef1..00b8a6a 100644
--- a/src/scripts/components/cart/elements/left-cards/view/left-cards.ts
+++ b/src/scripts/components/cart/elements/left-cards/view/left-cards.ts
@@ -195,16 +195,10 @@ export class LeftCardsView {
* Отображает сообщение о том, что корзина пуста.
*/
public static displayEmptyCartMessage(): void {
- const cartContainer = document.querySelector('.cart-items');
- if (cartContainer) {
- cartContainer.innerHTML = 'Ваша корзина пуста
-Добавьте товары, чтобы увидеть их здесь!
-\n' +
- ' \n' +
- '
';
+ const placeholder = document.getElementById('empty-cart-placeholder');
+
+ if (placeholder) {
+ placeholder.style.display = "flex";
}
}
}
diff --git a/src/scripts/components/cart/elements/right-element-of-cart/presenter/calculate-cart-totals.ts b/src/scripts/components/cart/elements/right-element-of-cart/presenter/calculate-cart-totals.ts
index 0577606..219fdc6 100644
--- a/src/scripts/components/cart/elements/right-element-of-cart/presenter/calculate-cart-totals.ts
+++ b/src/scripts/components/cart/elements/right-element-of-cart/presenter/calculate-cart-totals.ts
@@ -42,7 +42,7 @@ export class RightCartPresenter {
* @returns {PromiseВаша корзина пуста
\n' + - 'Добавьте товары, чтобы увидеть их здесь!
\n' + - '- Всего: {{totalItems}} {{pluralize totalItems 'товар' 'товара' 'товаров'}}, {{totalWeight}}кг + Всего: {{totalItems}} {{pluralize totalItems 'товар' 'товара' 'товаров'}} {{totalPrice}}{{#if (isNotUndefined currency)}}{{currency}}{{else}}₽{{/if}}
diff --git a/src/scripts/components/cart/presenter/cart.ts b/src/scripts/components/cart/presenter/cart.ts index 30857af..aaa5bea 100644 --- a/src/scripts/components/cart/presenter/cart.ts +++ b/src/scripts/components/cart/presenter/cart.ts @@ -73,15 +73,19 @@ export class CartPresenter { */ async initializeCart() { csrf.fetchToken().then(() =>{ - // Инициализируем чекбоксы на основе данных корзины - this.cartView.initializeCheckboxes(this.cartData.products); + try { + // Инициализируем чекбоксы на основе данных корзины + this.cartView.initializeCheckboxes(this.cartData.products); - // Инициализируем работу с выборкой данных. - this.dataSamplingPresenter.initializeDataSampling(); + // Инициализируем работу с выборкой данных. + this.dataSamplingPresenter.initializeDataSampling(); - // Выполняем дополнительные настройки. - this.leftCardsPresenter.updateSelectedCount(); - this.rightCartPresenter.calculateCartTotals(this.cartData); + // Выполняем дополнительные настройки. + this.leftCardsPresenter.updateSelectedCount(); + this.rightCartPresenter.calculateCartTotals(this.cartData); + } catch (err) { + + } }); } } diff --git a/src/scripts/components/cart/view/cart-builder.ts b/src/scripts/components/cart/view/cart-builder.ts index 03f42f1..f537395 100644 --- a/src/scripts/components/cart/view/cart-builder.ts +++ b/src/scripts/components/cart/view/cart-builder.ts @@ -93,7 +93,7 @@ export class CartBuilder { await this.renderCart(); this.initializeCartPresenter(); } catch (error) { - console.error(error); + // console.error(error); } } diff --git a/src/scripts/components/category/api/category.ts b/src/scripts/components/category/api/category.ts index 3511456..9b99a10 100644 --- a/src/scripts/components/category/api/category.ts +++ b/src/scripts/components/category/api/category.ts @@ -40,7 +40,7 @@ export class CategoryApi implements CategoryApiInterface { return fetch(`${backurl}/categories`) .then((response) => response.json()) .then((data) => { - console.log(data); + // console.log(data); return data; }) .then((data: ApiResponseОшибка {{name}}
{{description}}
-Нажмите, сюда, чтобы вернуться на главную!
+Нажмите сюда, чтобы вернуться на главную!
Скоро
Будет добавлено позже.
-Нажмите, сюда, чтобы вернуться назад
+Нажмите сюда, чтобы вернуться назад
+
\ No newline at end of file
diff --git a/src/scripts/components/notice/view/csat.scss b/src/scripts/components/notice/view/csat.scss
new file mode 100644
index 0000000..2b793e8
--- /dev/null
+++ b/src/scripts/components/notice/view/csat.scss
@@ -0,0 +1,141 @@
+@use '../../../../../public/css/parametrs/basic-mixins';
+@use '../../../../../public/css/parametrs/parameters';
+
+$voting-frame-bg-color: #f4f4f4;
+$voting-frame-border-color: #cccccc;
+$voting-frame-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+$voting-frame-transition: 0.3s ease-in-out;
+$voting-frame-color-primary: #6a0dad;
+$voting-frame-color-gray: #8c8c8c;
+
+#voting-frame__title__text {
+ font-family: 'Ubuntu', sans-serif;
+ font-weight: 700;
+}
+
+.voting-frame {
+ position: fixed;
+ bottom: 1rem;
+ left: 1rem;
+ background: $voting-frame-bg-color;
+ border: 1px solid $voting-frame-border-color;
+ box-shadow: $voting-frame-shadow;
+ border-radius: 0.5rem;
+ overflow: hidden;
+ width: 450px;
+ max-width: 90%;
+ display: flex;
+ flex-direction: column;
+ z-index: 900;
+ transition: transform $voting-frame-transition, opacity $voting-frame-transition;
+ opacity: 1;
+ justify-content: space-between;
+ align-items: center;
+
+ &__title {
+ font-size: 1rem;
+ margin: 0;
+ font-weight: 400;
+ align-self: flex-start;
+ justify-content: space-between;
+ margin-bottom: 5px;
+
+ &__close {
+ position: absolute;
+ top: 10px;
+ right: 15px;
+ cursor: pointer;
+ font-size: 24px;
+ color: parameters.$text-color;
+ transition: color parameters.$short-duration ease;
+
+ &:hover {
+ color: black;
+ }
+ }
+ }
+
+ &__content {
+ padding: 1rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-width: 306px;
+ opacity: 1;
+ transition: opacity 0.3s ease, transform 0.3s ease;
+
+ &--hidden {
+ opacity: 0;
+ transform: scale(0.95);
+ pointer-events: none;
+ }
+ }
+
+ &__vote-button {
+ @include basic-mixins.checkout-btn();
+ width: 262px;
+ text-align: center;
+ font-size: 14px;
+ padding: 15px 0;
+ transition: background-color 0.2s ease;
+
+ &:hover {
+ background-color: $voting-frame-color-primary;
+ }
+ }
+
+ #back {
+ flex: 0 0 auto;
+ }
+}
+
+@for $i from 0 through 9 {
+ .rating-circles {
+ &__circle-#{$i} {
+ background: hsl((120 / 10) * $i, 100%, 50%);
+ }
+ }
+}
+
+.order-status {
+ margin-bottom: 10px;
+ font-size: 14px;
+
+ &__highlight {
+ color: $voting-frame-color-primary;
+ font-weight: bold;
+ }
+}
+
+@media (max-width: 350px) {
+ .voting-frame {
+ bottom: 0.5rem;
+ width: calc(100% - 20px);
+ max-width: none;
+
+ margin: 0 auto;
+ left: 0;
+ right: 0;
+ }
+
+ .voting-frame__title {
+ font-size: 0.9rem;
+ }
+
+ .rating-circles__labels span {
+ font-size: 12px;
+ }
+
+ .voting-frame__vote-button {
+ font-size: 12px;
+ padding: 10px 0;
+ }
+ .voting-frame__content {
+ min-width: calc(100% - 20px);
+ margin-top: 7px;
+ }
+
+ .order-status {
+ font-size: 12px;
+ }
+}
\ No newline at end of file
diff --git a/src/scripts/components/notice/view/csat.ts b/src/scripts/components/notice/view/csat.ts
new file mode 100644
index 0000000..d1b1cd1
--- /dev/null
+++ b/src/scripts/components/notice/view/csat.ts
@@ -0,0 +1,88 @@
+import Handlebars from 'handlebars';
+import csatTemplate from './csat.hbs'
+
+export interface csatViewInterface {
+ render(id: string, status: string): void;
+ switchOrderStatus(status: string): string;
+}
+
+export class csatView implements csatViewInterface {
+ private readonly compile: HandlebarsTemplates;
+ private readonly title: HTMLElement;
+ private readonly text: HTMLElement;
+ private container: HTMLElement | null;
+
+ constructor(containerId: string) {
+ this.compile = Handlebars.compile(csatTemplate)
+
+ this.container = document.getElementById(containerId);
+
+ this.container.innerHTML = this.compile({title: '', text: ''})
+
+ this.title = document.getElementById('voting-frame__title__text');
+ this.text = document.getElementById('content');
+
+ const backButton = document.getElementById('voting-frame__back');
+ const closeButton = document.getElementById('frame__title__close');
+
+ backButton.addEventListener('click', (data) => {
+ this.container.style.display = 'none';
+ });
+
+ closeButton?.addEventListener('click', () => {
+ this.container.style.display = 'none';
+ });
+ }
+
+ public switchOrderStatus(status: string): string {
+ switch (status) {
+ case 'awaiting_payment':
+ return 'Ожидает оплаты';
+ case 'paid':
+ return 'Оплачен';
+ case 'delivered':
+ return 'Доставлен';
+ case 'cancelled':
+ return 'Отменен';
+ default:
+ return '';
+ }
+ }
+
+ public render = (data_in: any) => {
+ let text: string = '';
+ let count: number = 0;
+
+ for (const key in data_in) {
+ text += `\n
+
+×
+
+
+
+
+
+
+
+ Статус заказа ${data_in[key].order_id} изменился на "${this.switchOrderStatus(data_in[key].new_status)}"
`;
+ count += 1;
+ }
+
+ const data = {
+ "title": (count === 1) ? `Обновление заказа` : `Обновления заказов`,
+ "text": text.trim(),
+ };
+
+ // Style container for mobile responsiveness
+ this.container.style.display = 'flex';
+ this.container.style.maxHeight = '400px';
+ this.container.style.overflowY = 'auto';
+ this.container.style.borderRadius = '10px';
+ this.container.style.padding = '10px';
+
+ // Adjust for mobile screens
+ if (window.innerWidth <= 768) {
+
+ }
+
+ this.title.innerHTML = data.title;
+ this.text.innerHTML = data.text;
+
+ // Ensure content does not overflow and IDs break correctly
+ this.text.style.wordWrap = 'break-word';
+ const orderIds = this.text.querySelectorAll('.order-id');
+ orderIds.forEach((id) => {
+ id.style.wordBreak = 'break-all';
+ });
+ }
+}
\ No newline at end of file
diff --git a/src/scripts/components/order-list/presenters/order-list.ts b/src/scripts/components/order-list/presenters/order-list.ts
index 3ae6624..341a039 100644
--- a/src/scripts/components/order-list/presenters/order-list.ts
+++ b/src/scripts/components/order-list/presenters/order-list.ts
@@ -17,7 +17,7 @@ export class OrderListPresenter {
this.orderData = await this.orderListApi.getOrderData()
this.orderListView.render(this.orderData);
} catch (error) {
- console.error('Не удалось инициализировать заказ', error)
+ // console.error('Не удалось инициализировать заказ', error)
}
}
}
\ No newline at end of file
diff --git a/src/scripts/components/order-list/views/order-list.hbs b/src/scripts/components/order-list/views/order-list.hbs
index d2de55b..bc419ae 100644
--- a/src/scripts/components/order-list/views/order-list.hbs
+++ b/src/scripts/components/order-list/views/order-list.hbs
@@ -1,25 +1,33 @@
Мои заказы
- {{#each orders}} -
- } Возвращает данные корзины.
+ */
+ static async getCartProductsWithPromocode(promocode: string): Promise {
+ return getWithCred(`${backurl}${ORDER_PLACEMENT_URLS.getCartProductsWithPromocode.route}${promocode}`)
+ .then(res => {
+ switch (res.status) {
+ case 200:
+ return this.transformCartData(res.body) as OrderData;
+ default:
+ throw new Error(`${res.status} - ${res.body.error_message}`);
+ }
+ })
+ .catch(err => {
+ // console.error('Ошибка получения данных: ', err);
+ throw err;
+ });
+ }
+
/**
* Обновление выбранного метода оплаты.
*
@@ -43,7 +64,7 @@ export class OrderPlacementApiInterface {
}
})
.catch(error => {
- console.error('Ошибка:', error);
+ // console.error('Ошибка:', error);
throw error;
});
}
@@ -54,12 +75,12 @@ export class OrderPlacementApiInterface {
* @async
* @returns {Promise} Промис без возвращаемого значения.
*/
- public static async placeOrder(address: string): Promise {
- console.log(address);
+ public static async placeOrder(address: string, promo: string): Promise {
+ // console.log(address);
- return csrf.post(`${backurl}${ORDER_PLACEMENT_URLS.placeOrder.route}`, { address: address })
+ return csrf.post(`${backurl}${ORDER_PLACEMENT_URLS.placeOrder.route}`, { address: address, promocode: promo })
.then(res => {
- console.log(res.status, res.body);
+ // console.log(res.status, res.body);
switch (res.status) {
case 200:
@@ -69,7 +90,7 @@ export class OrderPlacementApiInterface {
}
})
.catch(err => {
- console.error('Ошибка при отправке заказа:', err);
+ // console.error('Ошибка при отправке заказа:', err);
});
}
@@ -107,6 +128,7 @@ export class OrderPlacementApiInterface {
url: item.url,
})),
})),
+ promoStatus: data.promo_status
};
}
}
diff --git a/src/scripts/components/order-placement/view/elements/right-element-of-order-placement/right-element-of-order-placement.hbs b/src/scripts/components/order-placement/view/elements/right-element-of-order-placement/right-element-of-order-placement.hbs
index 41e92aa..c5db476 100644
--- a/src/scripts/components/order-placement/view/elements/right-element-of-order-placement/right-element-of-order-placement.hbs
+++ b/src/scripts/components/order-placement/view/elements/right-element-of-order-placement/right-element-of-order-placement.hbs
@@ -4,10 +4,16 @@
Всего: {{totalItems}} {{pluralize totalItems 'товар' 'товара' 'товаров'}} {{totalWeight}} кг
- + +
diff --git a/src/scripts/components/order-placement/view/elements/right-element-of-order-placement/right-element-of-order-placement.scss b/src/scripts/components/order-placement/view/elements/right-element-of-order-placement/right-element-of-order-placement.scss
index 6ce118f..d8b55aa 100644
--- a/src/scripts/components/order-placement/view/elements/right-element-of-order-placement/right-element-of-order-placement.scss
+++ b/src/scripts/components/order-placement/view/elements/right-element-of-order-placement/right-element-of-order-placement.scss
@@ -1,4 +1,6 @@
@use "../../../../../../../public/css/parametrs/parameters";
+@use "../../../../../../../public/css/parametrs/basic-mixins";
+@use "../../../../../../../public/css/parametrs/animations";
// Блок для карточки (корневая обертка)
.right-element-card {
@@ -46,7 +48,7 @@
border-radius: parameters.$card-border-radius;
color: parameters.$text-color;
padding: parameters.$chrckout-padding;
- width: parameters.$width-max;
+ width: 78%;
height: parameters.$right-order-height;
font-size: parameters.$input-font-size;
padding-left: parameters.$padding15;
@@ -54,6 +56,14 @@
&::placeholder {
color: parameters.$delete-color;
}
+
+ @media (max-width: 600px) {
+ width: 100%;
+ }
+
+ @media (min-width: 1350px) {
+ width: 100%;
+ }
}
&__payment-method {
@@ -104,6 +114,65 @@
font-weight: normal;
margin-bottom: parameters.$mini-gap;
}
+
+ &__promo-container {
+ display: flex;
+ align-items: center;
+ gap: parameters.$main-gap;
+
+ @media (max-width: 600px) {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ @media (min-width: 1350px) {
+ flex-direction: column;
+ align-items: stretch;
+ }
+ }
+
+ &__apply-promo-btn {
+ @include basic-mixins.checkout-btn;
+ flex-shrink: 0;
+ width: 20%;
+ height: 40px;
+ padding: 0;
+
+ @media (max-width: 600px) {
+ width: 100%;
+ margin-top: parameters.$mini-gap;
+ }
+
+ @media (min-width: 1350px) {
+ width: 100%;
+ margin-top: parameters.$mini-gap;
+ }
+ }
+
+ &__promo {
+ justify-content: space-around;
+ display: flex;
+
+ @media (max-width: 600px) {
+ display: contents;
+ }
+
+ @media (min-width: 1350px) {
+ display: contents;
+ }
+ }
+
+ &__promo-error {
+ display: none;
+ color: parameters.$error-color;
+ font-size: parameters.$error-font-size;
+ margin-top: parameters.$mini-gap;
+ animation: fade-in 0.3s ease-in-out;
+
+ &.visible {
+ display: block;
+ }
+ }
}
// Блок для кнопки
@@ -139,3 +208,16 @@
}
}
}
+
+#original-price {
+ position: absolute;
+ top: 0;
+ left: 0;
+ transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+ white-space: nowrap; /* Чтобы текст не переносился */
+}
+
+.right-element-card__promo-title {
+ margin-bottom: 10px;
+ font-size: 16px;
+}
diff --git a/src/scripts/components/order-placement/view/elements/right-element-of-order-placement/right-element-of-order-placement.ts b/src/scripts/components/order-placement/view/elements/right-element-of-order-placement/right-element-of-order-placement.ts
index 828cb06..68b51ea 100644
--- a/src/scripts/components/order-placement/view/elements/right-element-of-order-placement/right-element-of-order-placement.ts
+++ b/src/scripts/components/order-placement/view/elements/right-element-of-order-placement/right-element-of-order-placement.ts
@@ -1,6 +1,7 @@
import {OrderPlacementApiInterface} from "../../../api/order-placement";
import { router } from '../../../../../../services/app/init';
import { add } from 'husky';
+import {OrderPlacementBuilder} from "../../order-placement-builder";
/**
* Класс для управления элементами правой части страницы оформления заказа.
@@ -16,6 +17,8 @@ export class RightElementOfOrderPlacementView {
*/
private paymentMethods: NodeListOf
-
diff --git a/src/scripts/components/order-list/views/order-list.scss b/src/scripts/components/order-list/views/order-list.scss
index 4390a0a..25bee20 100644
--- a/src/scripts/components/order-list/views/order-list.scss
+++ b/src/scripts/components/order-list/views/order-list.scss
@@ -1,9 +1,18 @@
@use "../../../../../public/css/parametrs/parameters";
+@use "../../../../../public/css/parametrs/basic-mixins";
.order-list {
max-width: 1081px;
margin: auto;
+ @include basic-mixins.placeholder;
+
+ &__placeholder__icon {
+ width: 90px;
+ height: auto;
+ margin-bottom: 20px;
+ }
+
&__title {
font-size: parameters.$big-font-size;
text-align: left;
diff --git a/src/scripts/components/order-list/views/order-list.ts b/src/scripts/components/order-list/views/order-list.ts
index 88dd02d..71ec629 100644
--- a/src/scripts/components/order-list/views/order-list.ts
+++ b/src/scripts/components/order-list/views/order-list.ts
@@ -17,7 +17,7 @@ export class OrderListView {
public render(data: Order[]) {
this.rootElement = document.getElementById(this.rootId);
if (!this.rootElement) {
- console.error(`Root element with id ${this.rootId} not found`);
+ // console.error(`Root element with id ${this.rootId} not found`);
return;
}
diff --git a/src/scripts/components/order-placement/api/config.ts b/src/scripts/components/order-placement/api/config.ts
index 166bb1d..05ff5e4 100644
--- a/src/scripts/components/order-placement/api/config.ts
+++ b/src/scripts/components/order-placement/api/config.ts
@@ -27,6 +27,13 @@ export const ORDER_PLACEMENT_URLS = {
'Content-Type': 'application/json',
}
},
+ getCartProductsWithPromocode: {
+ route: '/cart/select/products?promocode=',
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ }
+ },
updatePaymentMethod: {
route: '/cart/pay-method',
method: 'PATCH',
diff --git a/src/scripts/components/order-placement/api/order-placement.ts b/src/scripts/components/order-placement/api/order-placement.ts
index 84a3e4d..bad4a1c 100644
--- a/src/scripts/components/order-placement/api/order-placement.ts
+++ b/src/scripts/components/order-placement/api/order-placement.ts
@@ -21,11 +21,32 @@ export class OrderPlacementApiInterface {
}
})
.catch(err => {
- console.error('Ошибка получения данных: ', err);
+ // console.error('Ошибка получения данных: ', err);
throw err;
});
}
+ /**
+ * Получение данных о продуктах в корзине с применением промокода.
+ *
+ * @returns {Promise
- Заказ от {{formatDate order_date}}
- Доставим {{formatDate delivery_date}}
- {{status}} {{total_price}}₽
+ {{#if orders.length}}
+ {{#each orders}}
+
+
- {{/each}}
+ {{/if}}
+
-
+ Заказ от {{formatDate order_date}}
+ Доставим {{formatDate delivery_date}}
+ {{status}} {{total_price}}₽
-
+
- {{#each products}}
-
+ {{/each}}
+ {{else}}
+
- 
+
+ {{#each products}}
+
- {{/each}}
+
+
+
+ {{/each}}
+ 
+
-
+ Пока что у вас нет заказов...
+Начните покупки, чтобы видеть их здесь!
- + +
Промокоды
+
+
+
+
+ Промокод не найден. Проверьте правильность ввода.
К оплате - {{finalPrice}} {{currency}} + {{finalPrice}} {{currency}}
только на мобильных устройствах br { - display: none; // Скрываем по умолчанию + display: none; } br.mobile-break { - display: block; // Показываем только на мобильных устройствах + display: block; } } @@ -115,11 +114,11 @@ &__pin-drop, &__favorite, &__shopping-basket { - font-size: 24px; // Уменьшаем иконки + font-size: 24px; } &__edit { - font-size: 20px; // Уменьшаем размер иконки редактирования + font-size: 20px; } } } diff --git a/src/scripts/components/product-page/api/product-page.ts b/src/scripts/components/product-page/api/product-page.ts index 63eb052..b3dcc69 100644 --- a/src/scripts/components/product-page/api/product-page.ts +++ b/src/scripts/components/product-page/api/product-page.ts @@ -1,5 +1,5 @@ import { backurl } from '../../../../services/app/config'; -import { getWithCred } from '../../../../services/api/without-csrf'; +import {get, getWithCred} from '../../../../services/api/without-csrf'; import { csrf } from '../../../../services/api/CSRFService'; interface ProductOption { @@ -43,8 +43,8 @@ interface ProductData { } export class ProductPageApi { - getProductData = (productId: string): Promise< { ok: boolean, body: ProductData }> => { - return getWithCred(`${backurl}/product/${productId}`) + getProductData = async (productId: string): Promise< { ok: boolean, body: ProductData }> => { + return await getWithCred(`${backurl}/product/${productId}`) .then((res) => { switch (res.status) { case 200: @@ -54,22 +54,22 @@ export class ProductPageApi { } }) .catch(e => { - console.error('Error fetching product data:', e); + // console.error('Error fetching product data:', e); return { ok: false }; }) } - addToCart = (productId: string): Promise<{ ok: boolean; unauthorized?: boolean }> =>{ + addToCart = async (productId: string): Promise<{ ok: boolean; unauthorized?: boolean; res?: any }> =>{ return csrf.post(`${backurl}/cart/product/${productId}`) .then((res) => { switch (res.status) { case 204: - return { ok: true }; + return { ok: true, unauthorized: false, res: res }; case 401: return { ok: false, unauthorized: true }; case 403: csrf.refreshToken() - .catch(err => console.log(err)); + .catch(err => {/*console.log(err)*/}); return { ok: false }; case 409: @@ -79,7 +79,7 @@ export class ProductPageApi { } }) .catch((error) => { - console.error('Error adding to cart:', error); + // console.error('Error adding to cart:', error); return { ok: false }; }); } @@ -95,7 +95,7 @@ export class ProductPageApi { return { ok: false, unauthorized: true }; case 403: csrf.refreshToken() - .catch(err => console.log(err)); + .catch(err => {/*console.log(err)*/}); return { ok: false }; default: @@ -103,7 +103,7 @@ export class ProductPageApi { } }) .catch((error) => { - console.error('Error removing from cart:', error); + // console.error('Error removing from cart:', error); return { ok: false }; }); } @@ -112,13 +112,13 @@ export class ProductPageApi { return csrf.patch(`${backurl}/cart/product/${productId}`, { count }) .then(res =>{ switch (res.status) { - case 204: - return; + case 200: + return res.body; case 403: csrf.refreshToken() - .catch(err => console.log(err)); + .catch(err => {/*console.log(err)*/}); - return; + return res.body; default: throw new Error(`${res.status} - ${res.body.error_message}`); } diff --git a/src/scripts/components/product-page/presenters/product-page.ts b/src/scripts/components/product-page/presenters/product-page.ts index 086ecb0..420b9d9 100644 --- a/src/scripts/components/product-page/presenters/product-page.ts +++ b/src/scripts/components/product-page/presenters/product-page.ts @@ -6,16 +6,30 @@ import { router } from '../../../../services/app/init'; import { ProductData } from '../types/types'; import { isAuth } from '../../../../services/storage/user'; import { csrf } from '../../../../services/api/CSRFService'; +import { ReviewsView } from '../../reviews/views/reviews'; +import { ReviewsPresenter } from '../../reviews/presenters/reviews'; +import { ReviewsApi } from '../../reviews/api/api'; +import { WishlistApi } from '../../wish-list/api/wish-list'; import {ReviewsView} from "../../reviews/views/reviews"; import {ReviewsPresenter} from "../../reviews/presenters/reviews"; import {ReviewsApi} from "../../reviews/api/api"; +import {Recommendations} from "../../recomendations/presenter/recommendations"; +import {RecommendationsView} from "../../recomendations/view/recomendations"; +import {CardView} from "../../card/view/card"; +import {RecommendationsApi} from "../../recomendations/api/recommendations"; +import {productData} from "./data"; export class ProductPageBuilder { private readonly reviewsId = 'reviews'; + private readonly recommendationsId = 'recommendations-page'; private productPage: ProductPage; private api = new ProductPageApi(); + private reviewsPresenter: ReviewsPresenter; + private wishlistModal: HTMLElement | null = null; + private wishlistCheckboxes: NodeListOf
+
+
+
+
+Выберите вишлисты
+ +
- {{> carousel-slider images=images }}
+ {{> carousel-slider images=images }}
{{seller.name}}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{{title}}
-
{{#each characteristics}}
- {{@key}}: {{this}}
+ {{@key}}: {{this}}
{{/each}}
-
-
-
-
-
-
-
{{price}} ₽
+
+
+
{{price}} ₽
+
+ {{original_price}} ₽
-
-
-
+
-
+
+
Описание
-{{description}}
+ Описание
+{{description}}
-
\ No newline at end of file
+
+
+
diff --git a/src/scripts/components/product-page/views/product-page.scss b/src/scripts/components/product-page/views/product-page.scss
index a25aa13..333af63 100644
--- a/src/scripts/components/product-page/views/product-page.scss
+++ b/src/scripts/components/product-page/views/product-page.scss
@@ -136,7 +136,7 @@
}
& .text-review {
- margin-left: parameters.$margin-left-material-icons;
+ margin-left: 45px;
}
& span {
@@ -247,8 +247,8 @@
margin-bottom: parameters.$big-margin-bottom;
font-size: 18px;
font-weight: 440;
- margin-top: parameters.$small-margin;
- margin-left: 10px;
+ margin-top: 10px;
+ margin-left: 20px;
}
&__description-item {
@@ -287,6 +287,7 @@
word-break: normal;
overflow-wrap: break-word;
hyphens: auto;
+ margin-left: 0.5px;
&__header {
font-size: 25px;
@@ -298,7 +299,7 @@
&__purchase-info {
flex: 0.75;
- width: 20%;
+ width: 300px;
margin-left: parameters.$big-margin;
}
@@ -314,6 +315,7 @@
padding: parameters.$big-margin;
margin-bottom: parameters.$big-margin;
position: relative;
+ width: 300px;
}
&__current-price-product-page {
@@ -421,7 +423,12 @@
width: 2/3 * 100%;
}
-@media screen and (max-width: 768px) {
+.recommendations-page {
+ width: 2/3 * 100%;
+ margin-left: 20px;
+}
+
+@media screen and (max-width: 1150px) {
.product {
flex-direction: column;
padding: 10px;
@@ -470,6 +477,7 @@
margin-bottom: 10px;
}
+ margin-left: 0.5px;
font-size: 14px;
padding: 10px;
}
@@ -525,11 +533,16 @@
&__slider {
width: 100% !important;
}
+
+ &__price-box {
+ width: 100% !important;
+ }
}
.product-page__description-product-page {
font-size: 14px;
- margin-top: 15px;
+ margin-top: 10px;
+ margin-left: 20px;
padding: 10px;
}
@@ -540,8 +553,209 @@
#reviews {
width: 100%;
}
+
+ .recommendations-page {
+ width: 100%;
+ margin-right: 0;
+ margin-left: 0;
+ }
+}
+
+.recommendations__catalog {
+ margin-right: 10px;
+ margin-left: 10px;
+}
+
+.cards-view-title {
+ transition: max-height 0.3s ease-in-out, white-space 0.5s ease-in-out;
+ max-height: 1.5em;
+
+ &:hover {
+ white-space: normal;
+ max-height: 10em;
+ }
+}
+
+@media screen and (max-width: parameters.$smallest-phone) {
+ .cards-view-title {
+ transition: max-height 0.3s ease-in-out, white-space 0.5s ease-in-out;
+ max-height: 10em;
+ white-space: normal !important;
+
+ &:hover {
+ white-space: normal;
+ max-height: 10em;
+ }
+ }
+}
+.modal-add-wish {
+ display: none; /* Скрыть модалку по умолчанию */
+ position: fixed;
+ z-index: 100;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.4);
+ padding-top: 60px;
+
+ &__content {
+ background-color: #fefefe;
+ margin: 5% auto;
+ padding: 20px;
+ border: 1px solid #888;
+ width: 55%;
+ border-radius: 20px;
+ }
+
+ &__header {
+ font-size: 1.5rem;
+ margin-bottom: 20px;
+ }
+
+ &__checkboxes {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 20px;
+
+ label{
+ font-size: 20px;
+ padding-left: 12px;
+ margin-bottom: 5px;
+ }
+ }
+
+ &__form {
+ display: flex;
+ flex-direction: column;
+ }
+
+ &__submit-button,
+ &__close-button {
+ padding: 10px;
+ margin: 10px;
+ cursor: pointer;
+ background-color: parameters.$base-background-color;
+ border-radius: 20px;
+ color: white;
+ border: none;
+ font-size: 1rem;
+
+ }
+
+ &__close-button {
+ background-color: #ccc;
+ color: black;
+ font-weight: 600;
+ }
+
+ &__submit-button:hover {
+ background-color: #4b0e8c;
+ font-weight: 600;
+ }
+
+ &__close-button:hover {
+ background-color: #999;
+ }
+
+ &--active {
+ display: block;
+ }
+}
+
+
+.product-page__price-and-favorite {
+ display: flex; // Используем flexbox для размещения элементов в одну строку
+ align-items: center; // Центрируем элементы по вертикали
+ gap: 10px; // Расстояние между ценой и кнопкой
+}
+
+.product-page__current-price-product-page {
+ font-size: 1.5rem;
+ font-weight: bold;
+}
+
+.product-page__favorite-button {
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 0;
+ display: flex;
+ align-items: center; // Центрируем SVG внутри кнопки
+}
+
+.product-page__favorite-button svg {
+ width: 24px;
+ height: 24px;
+ stroke: #ff4040;
}
+.modal-add-wish {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.5);
+ align-items: center;
+ justify-content: center;
+}
+.modal-add-wish--open {
+ display: flex;
+}
+
+.modal-add-wish__checkbox {
+ position: relative;
+ width: 24px; /* Увеличенный размер чекбокса */
+ height: 24px;
+ appearance: none; /* Убираем стандартный чекбокс */
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ border: 2px solid #6a5acd; /* Фиолетовая рамка */
+ border-radius: 5px; /* Скругленные края */
+ outline: none;
+ cursor: pointer;
+ background: #fff;
+ transition: all 0.3s ease; /* Плавный переход */
+}
+.modal-add-wish__checkbox:checked {
+ background: #6a5acd; /* Заполнение фиолетовым цветом */
+ border-color: #6a5acd;
+}
+
+.modal-add-wish__checkbox:checked::after {
+ content: '✔'; /* Галочка */
+ position: absolute;
+ top: 2px;
+ left: 4px;
+ font-size: 16px;
+ color: #fff; /* Цвет галочки */
+ transition: all 0.2s ease; /* Плавное появление */
+}
+
+/* Эффект при наведении */
+.modal-add-wish__checkbox:hover {
+ border-color: #9370db; /* Светлее фиолетовый */
+ box-shadow: 0 0 10px rgba(106, 90, 205, 0.5); /* Тень вокруг */
+}
+
+/* Анимация при клике */
+.modal-add-wish__checkbox:active {
+ transform: scale(0.9); /* Небольшое сжатие */
+}
+
+.recommendations__catalog {
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
+}
+
+.recommendations__catalog .product-page__rating {
+ justify-content: center;
+}
+
+.recommendations__catalog .catalog__wrap {
+ display: contents;
+}
diff --git a/src/scripts/components/product-page/views/product-view.ts b/src/scripts/components/product-page/views/product-view.ts
index b62b33d..6a0bc3d 100644
--- a/src/scripts/components/product-page/views/product-view.ts
+++ b/src/scripts/components/product-page/views/product-view.ts
@@ -11,9 +11,10 @@ export class ProductPage {
this.rootElement = document.getElementById(rootId);
if (!this.rootElement) {
- console.error(`Элемент root ${rootId} не найден`);
+ // console.error(`Элемент root ${rootId} не найден`);
return;
}
+
Handlebars.registerPartial('carousel-slider', carouselSliderTemplate);
this.rootElement.innerHTML = '';
const templateElement = document.createElement('div');
diff --git a/src/scripts/components/recomendations/api/config.ts b/src/scripts/components/recomendations/api/config.ts
new file mode 100644
index 0000000..fb77694
--- /dev/null
+++ b/src/scripts/components/recomendations/api/config.ts
@@ -0,0 +1,7 @@
+export const RECOMMENDATIONS_URLS = {
+ GET_PRODUCTS: {
+ route: '/product/',
+ name: 'Главная oxic',
+ REG_EXP:new RegExp(`^/product/$`),
+ },
+};
diff --git a/src/scripts/components/recomendations/api/recommendations.ts b/src/scripts/components/recomendations/api/recommendations.ts
new file mode 100644
index 0000000..c4348f1
--- /dev/null
+++ b/src/scripts/components/recomendations/api/recommendations.ts
@@ -0,0 +1,38 @@
+import { getWithCred } from '../../../../services/api/without-csrf';
+import { backurl } from '../../../../services/app/config';
+import { Product } from '../../card/api/card';
+import {RECOMMENDATIONS_URLS} from "./config";
+
+export interface RecommendationsApiInterface {
+ getProducts(id: number): Promise
- 
+
diff --git a/src/scripts/components/reviews/views/reviews.hbs b/src/scripts/components/reviews/views/reviews.hbs
index 7e9a966..94310f2 100644
--- a/src/scripts/components/reviews/views/reviews.hbs
+++ b/src/scripts/components/reviews/views/reviews.hbs
@@ -44,7 +44,7 @@
+ this.src='/assets/img/static/avatar.svg'" alt="">
diff --git a/src/scripts/components/reviews/views/reviews.ts b/src/scripts/components/reviews/views/reviews.ts
index e0e1398..5dcfcd7 100644
--- a/src/scripts/components/reviews/views/reviews.ts
+++ b/src/scripts/components/reviews/views/reviews.ts
@@ -69,13 +69,13 @@ export class ReviewsView implements ReviewsViewInterface {
const rootElement = document.getElementById(this.rootId);
if (!rootElement) {
- console.error(`Ошибка: rootElement не найден, rootId: ${this.rootId}`);
+ // console.error(`Ошибка: rootElement не найден, rootId: ${this.rootId}`);
return;
}
// Проверка структуры данных
if (!Array.isArray(data.reviews)) {
- console.error('Ошибка: data.reviews должен быть массивом, получено:', data.reviews);
+ // console.error('Ошибка: data.reviews должен быть массивом, получено:', data.reviews);
data.reviews = [];
}
@@ -91,7 +91,7 @@ export class ReviewsView implements ReviewsViewInterface {
const user = storageUser.getUserData();
- console.log('nen', user);
+ // console.log('nen', user);
// Генерация шаблона с проверкой и передачей параметров
templateElement.innerHTML = this.compiled({
@@ -180,7 +180,7 @@ export class ReviewsView implements ReviewsViewInterface {
const reviewListElement = document.getElementById('review-list');
if (!reviewListElement) {
- console.error('Ошибка: Элемент списка отзывов (review-list) не найден.');
+ // console.error('Ошибка: Элемент списка отзывов (review-list) не найден.');
return;
}
@@ -190,7 +190,7 @@ export class ReviewsView implements ReviewsViewInterface {
if (!data.reviews || data.reviews.length === 0) {
reviewListElement.innerHTML = ''; // Очищаем содержимое
- console.log('Нет отзывов для отображения.');
+ // console.log('Нет отзывов для отображения.');
return;
}
@@ -226,7 +226,7 @@ export class ReviewsView implements ReviewsViewInterface {
button.addEventListener("click", () => {
const isExpanded = card.style.maxHeight === "none";
- console.log("card: ", card)
+ // console.log("card: ", card)
card.style.maxHeight = isExpanded ? `${maxVisibleHeight}px` : "none";
button.innerHTML = isExpanded
@@ -247,11 +247,11 @@ export class ReviewsView implements ReviewsViewInterface {
*/
loadSortedReviews = async (id: string, sortBy: string, sortOrder: string) => {
try {
- console.log('data: ', sortBy, sortOrder)
+ // console.log('data: ', sortBy, sortOrder)
const user = storageUser.getUserData();
- console.log('nen', user);
+ // console.log('nen', user);
const response = await ReviewsApi.fetchReviews(id, sortBy, sortOrder)
.then((reviewsData: any) => {
@@ -272,12 +272,12 @@ export class ReviewsView implements ReviewsViewInterface {
};
})
.catch((err: Error) => {
- console.error(err);
+ // console.error(err);
this.renderError('Не удалось загрузить отзывы. Попробуйте позже.');
});
this.rerenderList(id, response);
} catch (error) {
- console.error('Ошибка при загрузке отсортированных отзывов:', error);
+ // console.error('Ошибка при загрузке отсортированных отзывов:', error);
this.renderError('Не удалось загрузить отзывы. Попробуйте позже.');
}
};
@@ -289,7 +289,7 @@ export class ReviewsView implements ReviewsViewInterface {
renderError = (errorMessage: string): void => {
const rootElement = document.getElementById(this.rootId);
if (!rootElement) {
- console.log(`Ошибка: rootElement ${rootElement} -- rootId ${this.rootId}`);
+ // console.log(`Ошибка: rootElement ${rootElement} -- rootId ${this.rootId}`);
return;
}
diff --git a/src/scripts/components/searcher/api/search.ts b/src/scripts/components/searcher/api/search.ts
index 7cf697d..e8adb62 100644
--- a/src/scripts/components/searcher/api/search.ts
+++ b/src/scripts/components/searcher/api/search.ts
@@ -15,7 +15,7 @@ export class SearcherApi implements SearcherApiInterface {
return res.body as Product[];
})
.catch((e) => {
- console.error(e);
+ // console.error(e);
return null;
});
};
@@ -30,12 +30,12 @@ export class SearcherApi implements SearcherApiInterface {
if (res.status === 200) {
return res.body.suggestions.map((suggestion: { title: string }) => suggestion.title) as Array;
} else {
- console.error(`Failed to fetch suggestions - ${res.status} - ${query} - ${backurl}/search?${param.toString()}`, res.body);
+ // console.error(`Failed to fetch suggestions - ${res.status} - ${query} - ${backurl}/search?${param.toString()}`, res.body);
return null;
}
})
.catch(e => {
- console.error('Error fetching suggestions:', e);
+ // console.error('Error fetching suggestions:', e);
return null;
});
};
diff --git a/src/scripts/components/searcher/presenter/search.ts b/src/scripts/components/searcher/presenter/search.ts
index c8fc30d..f3136e7 100644
--- a/src/scripts/components/searcher/presenter/search.ts
+++ b/src/scripts/components/searcher/presenter/search.ts
@@ -64,7 +64,7 @@ export class Searcher {
DropdownAPI.sortProducts(`${backurl}${this.apiEndpoint}?q=${query}`, sort, order)
.then((productsApi) => {
- console.log(productsApi);
+ // console.log(productsApi);
const products = productsApi.body;
products.forEach((card) => {
card.image_url = `${backurl}/${card.image_url}`;
@@ -74,7 +74,7 @@ export class Searcher {
this.view.renderProducts({products: products}, query, this.config);
})
.catch((error) => {
- console.error('Ошибка сортировки:', error);
+ // console.error('Ошибка сортировки:', error);
});
}
};
@@ -85,7 +85,7 @@ export class Searcher {
const suggestionsList = document.getElementById('suggestions') as HTMLUListElement;
if (!searchInput || !searchButton|| !suggestionsList) {
- console.error('Search input or button not found');
+ // console.error('Search input or button not found');
return;
}
@@ -154,7 +154,7 @@ export class Searcher {
public searchProducts(query: string, sort: string, order: string) {
const searchUrl = `${backurl}${this.apiEndpoint}?q=${query}&sort=${sort}&order=${order}`;
- console.log(sort, order);
+ // console.log(sort, order);
this.api
.getProductsByQuery(searchUrl)
@@ -168,11 +168,11 @@ export class Searcher {
this.view.renderProducts({ products }, query, this.config);
this.updateBreadcrumbs(`Результаты поиска: ${query}`, `/search/catalog?q=${query}&sort=${sort}&order=${order}`);
} else {
- console.error('No products found');
+ // console.error('No products found');
}
})
.catch((e) => {
- console.error('Error fetching products:', e);
+ // console.error('Error fetching products:', e);
});
}
@@ -188,7 +188,7 @@ export class Searcher {
this.view.displaySuggestions([]);
}
})
- .catch(e => console.error('Error fetching suggestions:', e));
+ .catch(e => {/*console.error('Error fetching suggestions:', e)*/});
} else {
this.view.displaySuggestions([]);
}
@@ -196,11 +196,11 @@ export class Searcher {
}
private updateBreadcrumbs = (label: string, url: string) => {
- console.log(`Updating breadcrumbs with label: ${label} and url: ${url}`);
+ // console.log(`Updating breadcrumbs with label: ${label} and url: ${url}`);
};
private hideSuggestions() {
- console.log(111111);
+ // console.log(111111);
this.view.displaySuggestions([]);
}
diff --git a/src/scripts/components/searcher/view/search.ts b/src/scripts/components/searcher/view/search.ts
index 2d3fdb5..810ac1c 100644
--- a/src/scripts/components/searcher/view/search.ts
+++ b/src/scripts/components/searcher/view/search.ts
@@ -30,7 +30,7 @@ export class SearcherView implements SearcherViewInterface {
const rootElement = document.getElementById(rootId);
if (!rootElement) {
- return console.error(`Элемент ID = ${rootId} не найден`);
+ return // console.error(`Элемент ID = ${rootId} не найден`);
}
rootElement.innerHTML = '';
diff --git a/src/scripts/components/searcher/view/searcher.scss b/src/scripts/components/searcher/view/searcher.scss
index 0fba973..728f3c3 100644
--- a/src/scripts/components/searcher/view/searcher.scss
+++ b/src/scripts/components/searcher/view/searcher.scss
@@ -41,35 +41,3 @@
cursor: pointer;
}
}
-
-.suggestions {
- position: absolute;
- top: 100%;
- left: 0;
- width: 100%;
- margin-top: 2px;
- background-color: white;
- border-radius: 10px;
- z-index: 10;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
- max-height: calc(7 * 40px + 15px);
- overflow-y: auto;
-
- &--active {
- display: block;
- }
-
- &__item {
- padding: 15px;
- cursor: pointer;
-
- &--link {
- text-decoration: none;
- color: inherit;
- }
-
- &:hover {
- background-color: #f0f0f0;
- }
- }
-}
diff --git a/src/scripts/components/searcher/view/suggestions.scss b/src/scripts/components/searcher/view/suggestions.scss
new file mode 100644
index 0000000..d2cc919
--- /dev/null
+++ b/src/scripts/components/searcher/view/suggestions.scss
@@ -0,0 +1,35 @@
+@use '../../../../../public/css/parametrs/parameters';
+
+.suggestions {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ margin-top: 2px;
+ background-color: white;
+ border-radius: 10px;
+ z-index: 10;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ max-height: calc(7 * 40px + 15px);
+ overflow-y: auto;
+
+ &--active {
+ display: block;
+ }
+
+ &__item {
+ padding: 15px;
+ cursor: pointer;
+
+
+
+ &--link {
+ text-decoration: none;
+ color: inherit;
+ }
+
+ &:hover {
+ background-color: #f0f0f0;
+ }
+ }
+}
diff --git a/src/scripts/components/single-order/api/single-order.ts b/src/scripts/components/single-order/api/single-order.ts
index 9c20c39..cae9496 100644
--- a/src/scripts/components/single-order/api/single-order.ts
+++ b/src/scripts/components/single-order/api/single-order.ts
@@ -13,7 +13,6 @@ export class SingleOrderApiInterface {
}));
const totalItems = products.reduce((sum, product) => sum + product.count, 0);
- const totalPrice = products.reduce((sum, product) => sum + product.cost * product.count, 0);
return {
id: data.id,
@@ -22,7 +21,7 @@ export class SingleOrderApiInterface {
address: data.address,
recipient: data.recipient,
totalItems: totalItems,
- totalPrice: totalPrice,
+ totalPrice: data.total_price,
products: products,
};
}
@@ -47,7 +46,7 @@ export class SingleOrderApiInterface {
.then(res => {
switch (res.status) {
case 200:
- console.log(res.body);
+ // console.log(res.body);
return SingleOrderApiInterface.transformSingleOrderData(res.body);
default:
@@ -55,7 +54,7 @@ export class SingleOrderApiInterface {
}
})
.catch(err => {
- console.error('Ошибка: ', err);
+ // console.error('Ошибка: ', err);
throw err;
})
}
diff --git a/src/scripts/components/single-order/presenter/single-order.ts b/src/scripts/components/single-order/presenter/single-order.ts
index 5ceb2c0..2ef3704 100644
--- a/src/scripts/components/single-order/presenter/single-order.ts
+++ b/src/scripts/components/single-order/presenter/single-order.ts
@@ -25,7 +25,7 @@ export class SingleOrderPresenter {
this.orderData = await this.singleOrderApi.getOrderData(orderId);
this.singleOrderView.render(this.orderData);
} catch (error) {
- console.error('Не удалось инициализировать заказ', error);
+ // console.error('Не удалось инициализировать заказ', error);
}
}
}
diff --git a/src/scripts/components/single-order/view/single-order.ts b/src/scripts/components/single-order/view/single-order.ts
index 0ab13a2..fe52d3a 100644
--- a/src/scripts/components/single-order/view/single-order.ts
+++ b/src/scripts/components/single-order/view/single-order.ts
@@ -18,7 +18,7 @@ export class SingleOrderView {
this.rootElement = document.getElementById(this.rootId);
if (!this.rootElement) {
- console.error(`Root element with id ${this.rootId} not found`);
+ // console.error(`Root element with id ${this.rootId} not found`);
return;
}
@@ -40,7 +40,7 @@ export class SingleOrderView {
if (productId) {
router.navigate(`/product/${productId}`);
} else {
- console.error('Product ID не найден');
+ // console.error('Product ID не найден');
}
});
});
diff --git a/src/scripts/components/wish-list/api/wish-list.ts b/src/scripts/components/wish-list/api/wish-list.ts
new file mode 100644
index 0000000..bad1db3
--- /dev/null
+++ b/src/scripts/components/wish-list/api/wish-list.ts
@@ -0,0 +1,198 @@
+import { apiResponse } from '../../../../services/api/utils';
+import { csrf } from '../../../../services/api/CSRFService';
+import { backurl } from '../../../../services/app/config';
+import { getWithCred } from '../../../../services/api/without-csrf';
+
+export class WishlistApi {
+ static async getWishlists() {
+ try {
+ const response = await getWithCred(`${backurl}/wishlists`);
+
+ if (response.status === 404 || response.status === 400) {
+ return [];
+ }
+
+ if (!response.status) {
+ throw new Error(`Ошибка при получении списка вишлистов: ${response.status}`);
+ }
+
+ console.log(response.body);
+
+ return await response.body;
+ } catch (error) {
+ console.error('Ошибка при получении списка вишлистов:', error);
+ // В случае любой другой ошибки возвращаем пустой массив
+ return [];
+ }
+ }
+
+ static async getWishlist(link: string) {
+ const response = await getWithCred(`${backurl}/wishlist/${link}`);
+ if (response.status === 400) {
+ return [];
+ }
+
+ return response.body;
+ }
+
+ /**
+ * Создаёт новый вишлист.
+ * @param name Название вишлиста.
+ */
+ static async createWishlist(name: string): Promise {
+ await csrf.refreshToken()
+
+ return csrf.post(`${backurl}/wishlists`, { 'name': name });
+ }
+
+ /**
+ * Удаляет вишлист.
+ * @param link Уникальная ссылка на вишлист.
+ */
+ static async deleteWishlist(link: string): Promise {
+ const body = { link };
+ await csrf.refreshToken()
+
+ return csrf.delete(`${backurl}/wishlists`, body);
+ }
+
+ /**
+ * Переименовывает вишлист.
+ * @param link Уникальная ссылка на вишлист.
+ * @param newName Новое название вишлиста.
+ */
+ static async renameWishlist(link: string, newName: string): Promise {
+ const body = { link, new_name: newName };
+ await csrf.refreshToken()
+
+ return csrf.patch(`${backurl}/wishlist`, body);
+ }
+
+ /**
+ * Добавляет продукт в указанные вишлисты.
+ * @param productId ID продукта.
+ * @param links Ссылки на вишлисты.
+ */
+ static async addProductToWishlist(productId: number, links: string[]): Promise {
+ const body = { product_id: productId, links };
+ await csrf.refreshToken()
+
+ return csrf.post(`${backurl}/wishlists/product`, body);
+ }
+
+ /**
+ * Удаляет продукт из указанных вишлистов.
+ * @param productId ID продукта.
+ * @param links Ссылки на вишлисты.
+ */
+ static async removeFromWishlist(productId: number, links: string[]): Promise {
+ const body = { product_id: productId, links };
+ await csrf.refreshToken()
+
+ return csrf.delete(`${backurl}/wishlists/product`, body);
+ }
+
+ /**
+ * Копирует вишлист.
+ * @param link Ссылка на вишлист.
+ */
+ static async copyWishlist(link: string): Promise {
+ const body = { link };
+ await csrf.refreshToken()
+
+ return csrf.post(`${backurl}/wishlist`, body);
+ }
+}
+
+
+export class WishlistApiMock {
+ async deleteItemFromWishlist(link: string, itemName: string) {
+
+
+ return Promise.resolve();
+ }
+
+ async createWishlist(name: string) {
+ console.log(`Создан вишлист с именем "${name}"`);
+ return Promise.resolve({
+ id: 'new-id',
+ link: 'new-unique-link',
+ name,
+ lastOrderImage: 'https://via.placeholder.com/100',
+ });
+ }
+
+
+ async getWishlists() {
+ return [
+ {
+ id: '1',
+ link: '123e4567-e89b-12d3-a456-426614174000',
+ name: 'Праздничный список',
+ lastOrderImage: 'https://via.placeholder.com/100',
+ },
+ {
+ id: '2',
+ link: '123e4567-e89b-12d3-a456-426614174001',
+ name: 'Новый год 2024',
+ lastOrderImage: 'https://via.placeholder.com/100',
+ },
+ {
+ id: '1',
+ link: '123e4567-e89b-12d3-a456-426614174000',
+ name: 'Праздничный список',
+ lastOrderImage: 'https://via.placeholder.com/100',
+ },
+ {
+ id: '2',
+ link: '123e4567-e89b-12d3-a456-426614174001',
+ name: 'Новый год 2024',
+ lastOrderImage: 'https://via.placeholder.com/100',
+ },
+ {
+ id: '1',
+ link: '123e4567-e89b-12d3-a456-426614174000',
+ name: 'Праздничный список',
+ lastOrderImage: 'https://via.placeholder.com/100',
+ },
+ {
+ id: '2',
+ link: '123e4567-e89b-12d3-a456-426614174001',
+ name: 'Новый год 2024',
+ lastOrderImage: 'https://via.placeholder.com/100',
+ },
+ ];
+ }
+
+ async getWishlist(link: string) {
+ return {
+ name: `Вишлист 111`,
+ items: [
+ { name: 'Ноутбук ASUS', image: 'https://via.placeholder.com/200', price: 2999 },
+ { name: 'Наушники Sony', image: 'https://via.placeholder.com/200', price: 1999 },
+ { name: 'Смартфон Samsung', image: 'https://via.placeholder.com/200', price: 3999 },
+ { name: 'Ноутбук ASUS', image: 'https://via.placeholder.com/200', price: 2999 },
+ { name: 'Наушники Sony', image: 'https://via.placeholder.com/200', price: 1999 },
+ { name: 'Смартфон Samsung', image: 'https://via.placeholder.com/200', price: 3999 },
+ { name: 'Ноутбук ASUS', image: 'https://via.placeholder.com/200', price: 2999 },
+ { name: 'Наушники Sony', image: 'https://via.placeholder.com/200', price: 1999 },
+ { name: 'Смартфон Samsung', image: 'https://via.placeholder.com/200', price: 3999 },
+ { name: 'Ноутбук ASUS', image: 'https://via.placeholder.com/200', price: 2999 },
+ { name: 'Наушники Sony', image: 'https://via.placeholder.com/200', price: 1999 },
+ { name: 'Смартфон Samsung', image: 'https://via.placeholder.com/200', price: 3999 },
+
+ ],
+ };
+ }
+
+ // Пустые заглушки для удаления и обновления
+ async deleteWishlist(link: string) {
+ console.log(`Вишлист с link: ${link} удалён`);
+ return Promise.resolve();
+ }
+
+ async renameWishlist(link: string, name: string) {
+ console.log(`Вишлист с link: ${link} переименован в ${name}`);
+ return Promise.resolve();
+ }
+}
diff --git a/src/scripts/components/wish-list/presenter/all-wish-list.hbs b/src/scripts/components/wish-list/presenter/all-wish-list.hbs
new file mode 100644
index 0000000..8506aee
--- /dev/null
+++ b/src/scripts/components/wish-list/presenter/all-wish-list.hbs
@@ -0,0 +1,35 @@
+ {
+ const container = document.getElementById('app');
+
+ try {
+ const wishlist = await WishlistApi.getWishlist(id);
+
+ wishlist.items.forEach(item => {
+ item.image_url = `${backurl}/${item.image_url}`;
+ });
+
+ console.log('123',wishlist);
+
+ container!.innerHTML = this.compiledWishlist(wishlist);
+ this.addEventListeners(id);
+ } catch (error) {
+ console.error('Ошибка при загрузке вишлиста:', error);
+ this.showNotification('Не удалось загрузить вишлист.', 'error');
+ }
+ }
+
+ private addEventListeners(id: string) {
+ const titleElement = document.getElementById('wishlist-title') as HTMLElement;
+
+ document.getElementById('back-btn')?.addEventListener('click', () => {
+ router.navigate('/wishlists'); // Перенаправляем пользователя на список вишлистов
+ });
+
+ document.getElementById('rename-btn')?.addEventListener('click', () => {
+ this.enableInlineEditing(titleElement, id);
+ });
+
+ document.getElementById('share-btn')?.addEventListener('click', () => {
+ navigator.clipboard.writeText(window.location.href);
+ this.showNotification('Ссылка скопирована!', 'success');
+ });
+
+ const deleteWishlistModal = document.getElementById('delete-wishlist-modal') as HTMLElement;
+ const confirmDeleteWishlistBtn = document.getElementById('confirm-delete-wishlist-btn') as HTMLButtonElement;
+ const cancelDeleteWishlistBtn = document.getElementById('cancel-delete-wishlist-btn') as HTMLButtonElement;
+
+ document.getElementById('delete-btn')?.addEventListener('click', () => {
+ this.showModal(deleteWishlistModal);
+ });
+
+ confirmDeleteWishlistBtn.addEventListener('click', async () => {
+ try {
+ await WishlistApi.deleteWishlist(id);
+ this.showNotification('Вишлист успешно удалён!', 'success');
+ router.navigate('/wishlists');
+ } catch (error) {
+ console.error('Ошибка при удалении вишлиста:', error);
+ this.showNotification('Не удалось удалить вишлист.', 'error');
+ } finally {
+ this.hideModal(deleteWishlistModal);
+ }
+ });
+
+ cancelDeleteWishlistBtn.addEventListener('click', () => {
+ this.hideModal(deleteWishlistModal);
+ });
+
+ const modal = document.getElementById('delete-confirmation-modal') as HTMLElement;
+ const confirmDeleteBtn = document.getElementById('confirm-delete-btn') as HTMLButtonElement;
+ const cancelDeleteBtn = document.getElementById('cancel-delete-btn') as HTMLButtonElement;
+
+ let itemNameToDelete: string | null = null;
+
+ document.querySelectorAll('.delete-item-btn').forEach((button) => {
+ button.addEventListener('click', (event) => {
+ const itemName = (event.currentTarget as HTMLElement).getAttribute('data-item-name');
+ if (itemName) {
+ itemNameToDelete = itemName;
+ this.showModal(modal);
+ }
+ });
+ });
+
+ confirmDeleteBtn.addEventListener('click', async () => {
+ if (itemNameToDelete) {
+ try {
+ const link = router.getRouteParams()
+ const l = link!["link"]
+
+ await WishlistApi.removeFromWishlist(Number(itemNameToDelete), [l]);
+ this.showNotification(`Товар "${itemNameToDelete}" успешно удалён!`, 'success');
+ this.renderWishlist(id);
+ } catch (error) {
+ console.error('Ошибка при удалении товара:', error);
+ this.showNotification('Не удалось удалить товар.', 'error');
+ } finally {
+ this.hideModal(modal);
+ itemNameToDelete = null;
+ }
+ }
+ });
+
+ cancelDeleteBtn.addEventListener('click', () => {
+ this.hideModal(modal);
+ itemNameToDelete = null;
+ });
+ }
+
+ private showModal(modal: HTMLElement) {
+ modal.classList.add('visible');
+ const outsideClickListener = (event: MouseEvent) => {
+ if (event.target === modal) {
+ this.hideModal(modal);
+ modal.removeEventListener('click', outsideClickListener);
+ }
+ };
+ modal.addEventListener('click', outsideClickListener);
+ }
+
+ private hideModal(modal: HTMLElement) {
+ modal.classList.remove('visible');
+ }
+
+ private enableInlineEditing(element: HTMLElement, id: string): void {
+ const currentTitle = element.innerText;
+
+ const input = document.createElement('input');
+ input.type = 'text';
+ input.value = currentTitle;
+ input.className = 'wishlist-title-editor';
+
+ const saveChanges = async () => {
+ const newTitle = input.value.trim();
+ if (newTitle && newTitle !== currentTitle) {
+ try {
+ await WishlistApi.renameWishlist(id, newTitle);
+ element.innerText = newTitle;
+ this.showNotification('Название успешно изменено!', 'success');
+ } catch (error) {
+ console.error('Ошибка при сохранении:', error);
+ this.showNotification('Не удалось сохранить изменения.', 'error');
+ element.innerText = currentTitle;
+ }
+ } else {
+ element.innerText = currentTitle;
+ }
+ element.style.display = '';
+ input.remove();
+ };
+
+ input.addEventListener('keydown', (event) => {
+ if (event.key === 'Enter') {
+ input.blur();
+ }
+ });
+
+ input.addEventListener('blur', saveChanges);
+
+ element.innerHTML = '';
+ element.style.display = 'block';
+ element.appendChild(input);
+
+ input.focus();
+ }
+
+ async renderWishlistList(): Promise {
+ const container = document.getElementById(rootId);
+
+ try {
+ const wishlists = await WishlistApi.getWishlists();
+ container!.innerHTML = this.compiledList({ wishlists });
+
+ document.querySelectorAll('.wishlist-link').forEach((link) => {
+ link.addEventListener('click', (event) => {
+ event.preventDefault();
+ const url = (event.currentTarget as HTMLAnchorElement).getAttribute('href');
+ router.navigate(url!);
+ });
+ });
+
+ document.querySelectorAll('.wishlist-title').forEach((title) => {
+ title.addEventListener('click', async () => {
+ const element = title as HTMLElement;
+ const link = element.closest('.wishlist-link')?.getAttribute('href')?.split('/').pop();
+ if (link) {
+ this.enableInlineEditing(element, link);
+ }
+ });
+ });
+
+ const createButton = document.getElementById('create-wishlist-btn') as HTMLButtonElement;
+ const nameInput = document.getElementById('wishlist-name-input') as HTMLInputElement;
+
+ createButton.addEventListener('click', async () => {
+ const name = nameInput.value.trim();
+ if (!name) {
+ this.showNotification('Введите название для нового вишлиста.', 'warning');
+ return;
+ }
+
+ try {
+ await WishlistApi.createWishlist(name);
+ this.showNotification(`Вишлист "${name}" создан!`, 'success');
+ await this.renderWishlistList();
+ } catch (error) {
+ console.error('Ошибка при создании вишлиста:', error);
+ this.showNotification('Не удалось создать вишлист.', 'error');
+ }
+ });
+
+ document.querySelectorAll('.wishlist-container__delete-btn').forEach((button) => {
+ button.addEventListener('click', async (event) => {
+ const link = (event.currentTarget as HTMLElement).getAttribute('data-id');
+ if (link) {
+ try {
+ await WishlistApi.deleteWishlist(link);
+ this.showNotification('Вишлист успешно удалён!', 'success');
+ await this.renderWishlistList(); // Перерисовываем список вишлистов
+ } catch (error) {
+ console.error('Ошибка при удалении вишлиста:', error);
+ this.showNotification('Не удалось удалить вишлист.', 'error');
+ }
+ }
+ });
+ });
+ } catch (error) {
+ console.error('Ошибка при загрузке списка вишлистов:', error);
+ console.log(error);
+ this.showNotification('Не удалось загрузить список вишлистов.', 'error');
+ }
+ }
+
+ private showNotification(message: string, type: 'success' | 'error' | 'warning') {
+ const notification = document.createElement('div');
+ notification.className = `notification ${type}`;
+ notification.textContent = message;
+
+ document.body.appendChild(notification);
+ setTimeout(() => {
+ notification.remove();
+ }, 3000);
+ }
+}
diff --git a/src/scripts/components/wish-list/presenter/wishlist-modal.scss b/src/scripts/components/wish-list/presenter/wishlist-modal.scss
new file mode 100644
index 0000000..ff8e247
--- /dev/null
+++ b/src/scripts/components/wish-list/presenter/wishlist-modal.scss
@@ -0,0 +1,62 @@
+.wishlist-modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background: rgba(0, 0, 0, 0.5); // Полупрозрачный фон
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 5000;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.3s ease-in-out;
+
+ &.visible {
+ opacity: 1;
+ pointer-events: all;
+ }
+
+ &-content {
+ background: #fff;
+ border-radius: 10px;
+ padding: 20px;
+ width: 300px;
+ text-align: center;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+ }
+
+ &-actions {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 20px;
+
+ .btn {
+ padding: 10px 20px;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ font-size: 14px;
+ transition: background 0.3s;
+
+ &.confirm {
+ background: #e74c3c;
+ color: white;
+
+ &:hover {
+ background: #c0392b;
+ }
+ }
+
+ &.cancel {
+ background: #ddd;
+ color: black;
+
+ &:hover {
+ background: #bbb;
+ }
+ }
+ }
+ }
+}
diff --git a/src/scripts/errors/error.ts b/src/scripts/errors/error.ts
index 5486523..24cf313 100644
--- a/src/scripts/errors/error.ts
+++ b/src/scripts/errors/error.ts
@@ -13,7 +13,7 @@ export const errors = {
* @param {Error} error - Объект ошибки, которая возникла при загрузке шаблона.
*/
TemplatizerError: (error: Error): void => {
- console.error('Ошибка загрузки шаблона:', error);
+ // console.error('Ошибка загрузки шаблона:', error);
},
/**
@@ -24,7 +24,7 @@ export const errors = {
* @param {Error} error - Объект ошибки, которая возникла при получении товаров.
*/
GetCardsError: (error: Error): void => {
- console.error('Не удалось получить товары с сервера:', error);
+ // console.error('Не удалось получить товары с сервера:', error);
},
/**
@@ -32,7 +32,7 @@ export const errors = {
* @function
*/
GetUsername: (): void => {
- console.error('Ошибка: username не найден в ответе');
+ // console.error('Ошибка: username не найден в ответе');
},
/**
@@ -41,6 +41,6 @@ export const errors = {
* @param {Error} error - Ошибка, возникшая при выполнении запроса.
*/
BadGet: (error: Error): void => {
- console.error('Ошибка при выполнении запроса:', error);
+ // console.error('Ошибка при выполнении запроса:', error);
},
};
diff --git a/src/scripts/layouts/body.hbs b/src/scripts/layouts/body.hbs
index 4f0c3da..72505ca 100644
--- a/src/scripts/layouts/body.hbs
+++ b/src/scripts/layouts/body.hbs
@@ -10,17 +10,23 @@
+
+
+
+
+
+
+
+ {{#if wishlists.length}}
+ {{#each wishlists as |w|}}
+
\ No newline at end of file
diff --git a/src/scripts/components/wish-list/presenter/all-wishlists.scss b/src/scripts/components/wish-list/presenter/all-wishlists.scss
new file mode 100644
index 0000000..2476f30
--- /dev/null
+++ b/src/scripts/components/wish-list/presenter/all-wishlists.scss
@@ -0,0 +1,203 @@
+.wishlist-container {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 30px;
+ justify-content: space-between;
+
+
+ &__card {
+ flex: 0 0 calc(50% - 20px);
+ max-width: calc(50% - 20px);
+ background: #fff;
+ border: 1px solid #e0e0e0;
+ border-radius: 12px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s;
+ padding: 20px;
+
+ &:hover {
+ transform: translateY(-5px);
+ }
+ }
+
+ &__link {
+ text-decoration: none; /* Убираем подчеркивание у ссылок */
+ color: inherit; /* Наследуем цвет текста */
+ }
+
+ &__content {
+ display: flex;
+ align-items: center; /* Центрируем по вертикали */
+ justify-content: space-between;
+ width: 100%;
+ }
+
+ &__title {
+ font-size: 24px;
+ font-weight: bold;
+ text-align: left;
+ flex: 1; /* Занимает доступное пространство слева */
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ &__image {
+ flex-shrink: 0; /* Картинка не сжимается */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: 20px;
+
+ img {
+ width: 100px;
+ height: 100px;
+ object-fit: cover;
+ border-radius: 12px; /* Закругляем углы картинки */
+ }
+ }
+
+ /* Мобильная версия */
+ @media (max-width: 1000px) {
+ &__card {
+ flex: 0 0 100%;
+ max-width: 100%;
+ padding: 15px;
+
+ .wishlist-container__title {
+ font-size: 20px;
+ }
+
+ .wishlist-container__image img {
+ width: 80px;
+ height: 80px;
+ }
+ }
+ }
+}
+
+.wishlist-create {
+ display: flex;
+ align-items: center;
+ gap: 10px; // Расстояние между полем ввода и кнопкой
+ margin: 20px 0;
+
+ &__input {
+ flex-grow: 1; // Поле ввода занимает всю доступную ширину
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ font-size: 14px;
+ outline: none;
+ transition: border-color 0.3s;
+
+ &:focus {
+ border-color: #7a16d5; // Цвет рамки при фокусе
+ }
+ }
+
+ &__btn {
+ background: #7a16d5;
+ color: #fff;
+ padding: 10px 20px;
+ border: none;
+ border-radius: 5px;
+ font-size: 14px;
+ cursor: pointer;
+ transition: background 0.3s;
+
+ &:hover {
+ background: #5e11b0;
+ }
+ }
+}
+
+.wishlist-container__empty {
+ text-align: center;
+ margin-top: 20px;
+ font-size: 16px;
+ color: #666;
+}
+
+.wishlist-container {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 30px;
+ justify-content: space-between;
+
+ &__placeholder {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ padding: 40px;
+ text-align: center;
+ font-size: 18px;
+ font-weight: bold;
+ color: #666;
+ background-color: #f9f9f9;
+ border-radius: 12px;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+ animation: fadeIn 1s ease-in-out;
+ }
+
+ &__icon {
+ margin-bottom: 15px;
+ opacity: 0.7;
+ transition: transform 0.3s ease;
+ }
+
+ &__placeholder-text,
+ &__placeholder-suggestion {
+ font-size: 16px;
+ color: #555;
+ }
+
+ &__placeholder:hover .wishlist-container__icon {
+ transform: scale(1.1);
+ opacity: 1;
+ }
+}
+
+.wishlist-container {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 30px;
+ justify-content: space-between;
+
+ &__card {
+ position: relative; // Для правильного позиционирования крестика
+ background: #fff;
+ border: 1px solid #e0e0e0;
+ border-radius: 12px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s;
+ padding: 20px;
+
+ &:hover {
+ transform: translateY(-5px);
+ }
+ }
+
+ &__delete-btn {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ background-color: transparent;
+ border: 2px solid red;
+ border-radius: 100%;
+ width: 24px;
+ height: 24px;
+ font-size: 18px;
+ font-weight: bold;
+ color: #e74c3c;
+ cursor: pointer;
+ transition: color 0.5s;
+
+ &:hover {
+ color: #c0392b;
+ border: 3px solid red;
+ }
+ }
+}
diff --git a/src/scripts/components/wish-list/presenter/wish-list.hbs b/src/scripts/components/wish-list/presenter/wish-list.hbs
new file mode 100644
index 0000000..96bad97
--- /dev/null
+++ b/src/scripts/components/wish-list/presenter/wish-list.hbs
@@ -0,0 +1,62 @@
+
+
+
+ {{/each}}
+ {{else}}
+
+
+
+
+
+ {{w.name}}
+
+
+
+
+ {{/if}}
+Ваш список вишлистов пуст
+Создайте свой первый вишлист, чтобы начать!
+
+
+
+
+
+
+
+
+
+
+
+
+
+{{name}}
+
+
+ {{#if is_creator}}
+
+
+ {{/if}}
+
+
+ {{#if items.length}}
+ {{#each items}}
+
diff --git a/src/scripts/components/wish-list/presenter/wish-list.scss b/src/scripts/components/wish-list/presenter/wish-list.scss
new file mode 100644
index 0000000..0463ea6
--- /dev/null
+++ b/src/scripts/components/wish-list/presenter/wish-list.scss
@@ -0,0 +1,256 @@
+@use "/public/css/parametrs/parameters";
+@use "/public/css/parametrs/basic-mixins" as mixins;
+
+.list__wishlist {
+ &-header {
+ display: flex;
+ align-items: center;
+ margin: 50px;
+ justify-content: space-between;
+ position: relative;
+
+
+ .list__wishlist-back {
+ margin-right: 20px;
+ }
+
+ .back-btn {
+ background: #ddd;
+ color: #000;
+ padding: 8px 15px;
+ border: none;
+ border-radius: 5px;
+ font-size: 14px;
+ cursor: pointer;
+ transition: background 0.3s ease;
+
+ &:hover {
+ background: #bbb;
+ }
+ }
+
+ .list__wishlist-back {
+ flex-shrink: 0;
+
+ }
+
+
+ &__title {
+ font-size: 24px;
+ margin-bottom: 15px;
+ font-weight: bold;
+ }
+
+ &__actions {
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+ flex-wrap: wrap;
+
+ .btn {
+ background: #7a16d5;
+ color: #fff;
+ padding: 8px 15px;
+ border: none;
+ border-radius: 8px;
+ font-size: 14px;
+ cursor: pointer;
+ transition: background 0.3s;
+
+ &:hover {
+ background: #5e11b0;
+ }
+ }
+ }
+
+ &__title-container {
+
+ background: #fff;
+ border-radius: 12px;
+ padding: 20px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ max-width: 600px;
+ width: 100%;
+
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+ }
+
+ &-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 2fr));
+ gap: 30px;
+ padding: parameters.$padding 0;
+ justify-content: center;
+
+ &__card {
+ @include mixins.card-styles(parameters.$color-card-background, parameters.$color-border, parameters.$color-shadow, parameters.$transition-duration);
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ text-align: center;
+ padding: parameters.$padding;
+ border-radius: parameters.$default-border-radius;
+ cursor: pointer;
+ position: relative;
+ width: 100%;
+ overflow: hidden;
+ max-width: 350px;
+ transition: transform parameters.$transition-duration ease, box-shadow parameters.$transition-duration ease;
+
+ &:hover {
+ transform: scale(1.05);
+ box-shadow: 0 4px 10px parameters.$color-shadow-hover;
+ z-index: parameters.$z-index-hover;
+ }
+
+ &-image {
+ width: 100%;
+ height: parameters.$image-height;
+ border-radius: parameters.$default-border-radius;
+ overflow: hidden;
+ background-color: #f0f0f0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: parameters.$gap;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform parameters.$transition-duration ease;
+ }
+ }
+
+ &:hover &-image img {
+ transform: scale(1.1);
+ }
+
+ &-info {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ text-align: center;
+
+ &__title {
+ font-size: 24px;
+ font-weight: parameters.$font-weight-bold;
+ color: parameters.$color-text;
+ margin-bottom: parameters.$gap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ max-width: 100%;
+ }
+
+ &__description {
+ font-size: parameters.$font-size-description;
+ color: white;
+ margin-bottom: parameters.$gap;
+ }
+ }
+ }
+ }
+
+ @media (max-width: 999px) {
+ &-container {
+ gap: 30px;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ padding: parameters.$padding 10px;
+
+ &__card {
+ height: auto;
+ }
+ }
+ }
+
+ @media (max-width: parameters.$smallest-phone) {
+ &__container {
+ grid-template-columns: 2fr;
+ }
+ }
+}
+
+.wishlist-title-editor {
+ font-size: 30px;
+ font-weight: bold;
+ border: none;
+ border-bottom: 2px solid #7a16d5;
+ outline: none;
+ background: transparent;
+ padding: 0;
+ width: 100%;
+ color: inherit;
+}
+
+.list__wishlist-container__card {
+ position: relative;
+ overflow: hidden;
+}
+
+.delete-item-btn {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ background: none;
+ border: 2px solid red;
+ color: red;
+ font-size: 16px;
+ font-weight: bold;
+ line-height: 24px;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ cursor: pointer;
+ transition: background 0.5s ease;
+
+ &:hover {
+ color: rgba(200, 0, 0, 1);
+ border: 3px solid rgba(200, 0, 0, 1);
+ }
+}
+
+.list__wishlist-back {
+ margin-bottom: 20px;
+}
+
+.list__wishlist-placeholder {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 50px;
+ text-align: center;
+ font-size: 18px;
+ font-weight: bold;
+ color: #666;
+ background-color: #f9f9f9;
+ border-radius: 12px;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+ animation: fadeIn 0.5s ease-in-out;
+}
+
+.list__wishlist-placeholder-icon {
+ margin-bottom: 15px;
+ opacity: 0.7;
+ transition: transform 0.3s ease;
+}
+
+.list__wishlist-placeholder-text,
+.list__wishlist-placeholder-suggestion {
+ font-size: 16px;
+ color: #555;
+}
+
+.list__wishlist-placeholder:hover .list__wishlist-placeholder-icon {
+ transform: scale(1.1);
+ opacity: 1;
+}
diff --git a/src/scripts/components/wish-list/presenter/wish-list.ts b/src/scripts/components/wish-list/presenter/wish-list.ts
new file mode 100644
index 0000000..7d1c852
--- /dev/null
+++ b/src/scripts/components/wish-list/presenter/wish-list.ts
@@ -0,0 +1,253 @@
+import wishlistListTemplate from './all-wish-list.hbs?raw';
+import wishlistTemplate from './wish-list.hbs?raw';
+import { router } from '../../../../services/app/init';
+import { WishlistApi } from '../api/wish-list';
+import { backurl, rootId } from '../../../../services/app/config';
+import Handlebars from 'handlebars';
+
+export class WishlistPresenter {
+ private readonly compiledList: any;
+ private readonly compiledWishlist: any;
+
+ constructor() {
+ this.compiledWishlist = Handlebars.compile(wishlistTemplate);
+ this.compiledList = Handlebars.compile(wishlistListTemplate);
+ }
+
+ async renderWishlist(id: string): Promise
+
+ {{/each}}
+ {{else}}
+
+
+
+
+
+
+ {{title}}
+ {{price}}
+
+
+
+ {{/if}}
+Ваш вишлист пуст
+Добавьте товары, чтобы они появились здесь!
+