BivekiGroup/protekauto-frontend
4
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

1234 #23

Merged
egortriston merged 8 commits from 1234 into main 2025-07-11 03:02:40 +03:00
Conversation 0 Commits 8 Files Changed 31 +1578 -372
31 changed files with 1578 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/CartList.tsx
View File

@ -84,7 +84,7 @@ const CartList: React.FC<CartListProps> = ({ isSummaryStep = false }) => {
}, [state.error, clearError]); }, [state.error, clearError]);
return ( return (
<div className="w-layout-vflex flex-block-48"> <div className="w-layout-vflex flex-block-48" style={{ minHeight: '420px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
{/* Отображение ошибок корзины */} {/* Отображение ошибок корзины */}
{state.error && ( {state.error && (
<div className="alert alert-error mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded"> <div className="alert alert-error mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
@ -145,9 +145,15 @@ const CartList: React.FC<CartListProps> = ({ isSummaryStep = false }) => {
</div> </div>
)} )}
{displayItems.length === 0 ? ( {displayItems.length === 0 ? (
<div className="empty-cart-message" style={{ textAlign: 'center', padding: '2rem', color: '#666' }}> <div className="empty-cart-message" style={{ textAlign: 'center', width: '100%' }}>
<p>Ваша корзина пуста</p> <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '20px', justifyContent: 'center' }}>
<p>Добавьте товары из каталога</p> <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 90, height: 90, borderRadius: '50%', background: '#f3f4f6', marginBottom: 8 }}>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 36C14.3431 36 13 37.3431 13 39C13 40.6569 14.3431 42 16 42C17.6569 42 19 40.6569 19 39C19 37.3431 17.6569 36 16 36ZM6 8V12H10.68L16.44 24.016L14.16 28.08C13.7647 28.8001 13.5556 29.6352 13.5556 30.5C13.5556 32.1569 14.8987 33.5 16.5556 33.5H39V30.5H17.1756C17.0891 30.5 17.0178 30.4287 17.0178 30.3422L17.04 30.25L18.88 27H34.8C36.0212 27 37.1042 26.2627 37.6 25.16L43.048 14.352C43.1746 14.0993 43.2382 13.8132 43.2302 13.5242C43.2222 13.2352 43.1428 12.9538 42.9992 12.7087C42.8556 12.4636 42.6532 12.2632 42.4136 12.1302C42.174 11.9972 41.9062 11.9376 41.64 11.96H12.24L10.84 8H6ZM36 36C34.3431 36 33 37.3431 33 39C33 40.6569 34.3431 42 36 42C37.6569 42 39 40.6569 39 39C39 37.3431 37.6569 36 36 36Z" fill="#222"/>
</svg>
</span>
<div style={{ fontSize: '1.7rem', fontWeight: 700, color: '#222' }}>Ваша корзина пуста</div>
</div>
</div> </div>
) : ( ) : (
displayItems.map((item, idx) => { displayItems.map((item, idx) => {

8
src/components/CartSummary.tsx
View File

@ -285,7 +285,7 @@ const CartSummary: React.FC<CartSummaryProps> = ({ step, setStep }) => {
onClick={() => setShowLegalEntityDropdown(!showLegalEntityDropdown)} onClick={() => setShowLegalEntityDropdown(!showLegalEntityDropdown)}
style={{ cursor: 'pointer', justifyContent: 'space-between', alignItems: 'center' }} style={{ cursor: 'pointer', justifyContent: 'space-between', alignItems: 'center' }}
> >
<div className="text-block-31"> <div className="text-block-31" style={{ fontSize: '14px', color: '#333' }}>
{isIndividual ? 'Физическое лицо' : selectedLegalEntity || 'Выберите юридическое лицо'} {isIndividual ? 'Физическое лицо' : selectedLegalEntity || 'Выберите юридическое лицо'}
</div> </div>
<div className="code-embed w-embed" style={{ transform: showLegalEntityDropdown ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }}> <div className="code-embed w-embed" style={{ transform: showLegalEntityDropdown ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }}>
@ -325,7 +325,7 @@ const CartSummary: React.FC<CartSummaryProps> = ({ step, setStep }) => {
borderBottom: '1px solid #f0f0f0', borderBottom: '1px solid #f0f0f0',
backgroundColor: isIndividual ? '#f8f9fa' : 'white', backgroundColor: isIndividual ? '#f8f9fa' : 'white',
fontSize: '14px', fontSize: '14px',
fontWeight: isIndividual ? 500 : 400
}} }}
onMouseEnter={(e) => { onMouseEnter={(e) => {
if (!isIndividual) { if (!isIndividual) {
@ -538,7 +538,9 @@ const CartSummary: React.FC<CartSummaryProps> = ({ step, setStep }) => {
cursor: 'pointer', cursor: 'pointer',
borderBottom: '1px solid #f0f0f0', borderBottom: '1px solid #f0f0f0',
backgroundColor: paymentMethod === 'yookassa' ? '#f8f9fa' : 'white', backgroundColor: paymentMethod === 'yookassa' ? '#f8f9fa' : 'white',
fontSize: '14px' fontSize: '14px',
fontWeight: paymentMethod === 'yookassa' ? 500 : 400,
color: '#222'
}} }}
onMouseEnter={(e) => { onMouseEnter={(e) => {
if (paymentMethod !== 'yookassa') { if (paymentMethod !== 'yookassa') {

4
src/components/Header.tsx
View File

@ -414,7 +414,7 @@ const Header: React.FC<HeaderProps> = ({ onOpenAuthModal = () => console.log('Au
onClick={() => setMenuOpen((open) => !open)} onClick={() => setMenuOpen((open) => !open)}
style={{ cursor: "pointer" }} style={{ cursor: "pointer" }}
> >
<div className="code-embed-5 w-embed"><svg width="30" height="18" viewBox="0 0 30 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <div className="code-embed-5 w-embed"><svg width="currentwidth" height="currenthieght" viewBox="0 0 30 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H30V3H0V0Z" fill="currentColor"></path> <path d="M0 0H30V3H0V0Z" fill="currentColor"></path>
<path d="M0 7.5H30V10.5H0V7.5Z" fill="currentColor"></path> <path d="M0 7.5H30V10.5H0V7.5Z" fill="currentColor"></path>
<path d="M0 15H30V18H0V15Z" fill="currentColor"></path> <path d="M0 15H30V18H0V15Z" fill="currentColor"></path>
@ -759,7 +759,7 @@ const Header: React.FC<HeaderProps> = ({ onOpenAuthModal = () => console.log('Au
<div className="w-layout-hflex flex-block-76"> <div className="w-layout-hflex flex-block-76">
<Link href="/profile-history" className="button_h w-inline-block"> <Link href="/profile-history" className="button_h w-inline-block">
<img src="/images/union.svg" alt="История заказов" width={22} height={10} /> <img src="/images/union.svg" alt="История заказов" width={20} />
</Link> </Link>
<Link href="/profile-gar" className="button_h w-inline-block"> <Link href="/profile-gar" className="button_h w-inline-block">

4
src/components/LKMenu.tsx
View File

@ -64,7 +64,7 @@ const LKMenu = React.forwardRef<HTMLDivElement>((props, ref) => {
<div <div
className={`flex gap-2.5 items-center px-2.5 py-2 w-full whitespace-nowrap rounded-lg ${ className={`flex gap-2.5 items-center px-2.5 py-2 w-full whitespace-nowrap rounded-lg ${
isActive ? 'bg-slate-200' : 'bg-white' isActive ? 'bg-slate-200' : 'bg-white'
}`} } hover:bg-slate-200`}
> >
<img <img
loading="lazy" loading="lazy"
@ -93,7 +93,7 @@ const LKMenu = React.forwardRef<HTMLDivElement>((props, ref) => {
<div <div
className={`flex gap-2.5 items-center px-2.5 py-2 w-full whitespace-nowrap rounded-lg ${ className={`flex gap-2.5 items-center px-2.5 py-2 w-full whitespace-nowrap rounded-lg ${
isActive ? 'bg-slate-200' : 'bg-white' isActive ? 'bg-slate-200' : 'bg-white'
}`} } hover:bg-slate-200`}
> >
<img <img
loading="lazy" loading="lazy"

2
src/components/Layout.tsx
View File

@ -33,7 +33,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
</header> </header>
<main className="pt-[62px] md:pt-[63px]"> <main className="pt-[62px] md:pt-[63px]">
<IndexTopMenuNav /> <IndexTopMenuNav isIndexPage={router.pathname === '/'} />
{children}</main> {children}</main>
<MobileMenuBottomSection onOpenAuthModal={() => setAuthModalOpen(true)} /> <MobileMenuBottomSection onOpenAuthModal={() => setAuthModalOpen(true)} />
</> </>

45
src/components/TopSalesItem.tsx
View File

@ -1,3 +1,4 @@
import Link from "next/link";
import React from "react"; import React from "react";
import { useCart } from "@/contexts/CartContext"; import { useCart } from "@/contexts/CartContext";
import { useFavorites } from "@/contexts/FavoritesContext"; import { useFavorites } from "@/contexts/FavoritesContext";
@ -11,6 +12,7 @@ interface TopSalesItemProps {
article?: string; article?: string;
productId?: string; productId?: string;
onAddToCart?: (e: React.MouseEvent) => void; onAddToCart?: (e: React.MouseEvent) => void;
discount?: string; // Новый пропс для лейбла/скидки
} }
const TopSalesItem: React.FC<TopSalesItemProps> = ({ const TopSalesItem: React.FC<TopSalesItemProps> = ({
@ -21,37 +23,31 @@ const TopSalesItem: React.FC<TopSalesItemProps> = ({
article, article,
productId, productId,
onAddToCart, onAddToCart,
discount = 'Топ продаж', // По умолчанию как раньше
}) => { }) => {
const { addItem } = useCart(); const { addItem } = useCart();
const { addToFavorites, removeFromFavorites, isFavorite, favorites } = useFavorites(); const { addToFavorites, removeFromFavorites, isFavorite, favorites } = useFavorites();
// Проверяем, есть ли товар в избранном
const isItemFavorite = isFavorite(productId, undefined, article, brand); const isItemFavorite = isFavorite(productId, undefined, article, brand);
// Функция для парсинга цены из строки
const parsePrice = (priceStr: string): number => { const parsePrice = (priceStr: string): number => {
const cleanPrice = priceStr.replace(/[^\d.,]/g, '').replace(',', '.'); const cleanPrice = priceStr.replace(/[^\d.,]/g, '').replace(',', '.');
return parseFloat(cleanPrice) || 0; return parseFloat(cleanPrice) || 0;
}; };
// Обработчик клика по корзине
const handleAddToCart = (e: React.MouseEvent) => { const handleAddToCart = (e: React.MouseEvent) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
if (onAddToCart) { if (onAddToCart) {
onAddToCart(e); onAddToCart(e);
return; return;
} }
try { try {
if (!article || !brand) { if (!article || !brand) {
toast.error('Недостаточно данных для добавления товара в корзину'); toast.error('Недостаточно данных для добавления товара в корзину');
return; return;
} }
const numericPrice = parsePrice(price); const numericPrice = parsePrice(price);
addItem({ addItem({
name: title, name: title,
brand: brand, brand: brand,
@ -63,7 +59,6 @@ const TopSalesItem: React.FC<TopSalesItemProps> = ({
image: image, image: image,
isExternal: true isExternal: true
}); });
toast.success('Товар добавлен в корзину'); toast.success('Товар добавлен в корзину');
} catch (error) { } catch (error) {
console.error('Ошибка добавления в корзину:', error); console.error('Ошибка добавления в корзину:', error);
@ -71,25 +66,20 @@ const TopSalesItem: React.FC<TopSalesItemProps> = ({
} }
}; };
// Обработчик клика по иконке избранного
const handleFavoriteClick = (e: React.MouseEvent) => { const handleFavoriteClick = (e: React.MouseEvent) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
if (isItemFavorite) { if (isItemFavorite) {
// Находим товар в избранном и удаляем
const favoriteItem = favorites.find((fav: any) => { const favoriteItem = favorites.find((fav: any) => {
if (productId && fav.productId === productId) return true; if (productId && fav.productId === productId) return true;
if (fav.article === article && fav.brand === brand) return true; if (fav.article === article && fav.brand === brand) return true;
return false; return false;
}); });
if (favoriteItem) { if (favoriteItem) {
removeFromFavorites(favoriteItem.id); removeFromFavorites(favoriteItem.id);
toast.success('Товар удален из избранного'); toast.success('Товар удален из избранного');
} }
} else { } else {
// Добавляем в избранное
const numericPrice = parsePrice(price); const numericPrice = parsePrice(price);
addToFavorites({ addToFavorites({
productId, productId,
@ -104,23 +94,24 @@ const TopSalesItem: React.FC<TopSalesItemProps> = ({
} }
}; };
// Ссылка на карточку товара (если нужно)
const cardUrl = article && brand
? `/card?article=${encodeURIComponent(article)}&brand=${encodeURIComponent(brand)}`
: '/card';
return ( return (
<div className="w-layout-vflex flex-block-15"> <div className="w-layout-vflex flex-block-15-copy">
<div <div
className={`favcardcat${isItemFavorite ? ' favorite-active' : ''}`} className={`favcardcat${isItemFavorite ? ' favorite-active' : ''}`}
onClick={handleFavoriteClick} onClick={handleFavoriteClick}
style={{ style={{ cursor: 'pointer', color: isItemFavorite ? '#ff4444' : '#ccc' }}
cursor: 'pointer',
color: isItemFavorite ? '#ff4444' : '#ccc'
}}
> >
<div className="icon-setting w-embed"> <div className="icon-setting w-embed">
<svg width="currenWidth" height="currentHeight" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="currentwidth" height="currentheight" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.5996 3.5C15.8107 3.5 17.5 5.1376 17.5 7.19629C17.5 8.46211 16.9057 9.65758 15.7451 11.0117C14.8712 12.0314 13.7092 13.1034 12.3096 14.3311L10.833 15.6143L10.832 15.6152L10 16.3369L9.16797 15.6152L9.16699 15.6143L7.69043 14.3311C6.29084 13.1034 5.12883 12.0314 4.25488 11.0117C3.09428 9.65758 2.50003 8.46211 2.5 7.19629C2.5 5.1376 4.18931 3.5 6.40039 3.5C7.6497 3.50012 8.85029 4.05779 9.62793 4.92188L10 5.33398L10.3721 4.92188C11.1497 4.05779 12.3503 3.50012 13.5996 3.5Z" fill="currentColor" stroke="currentColor"></path> <path d="M13.5996 3.5C15.8107 3.5 17.5 5.1376 17.5 7.19629C17.5 8.46211 16.9057 9.65758 15.7451 11.0117C14.8712 12.0314 13.7092 13.1034 12.3096 14.3311L10.833 15.6143L10.832 15.6152L10 16.3369L9.16797 15.6152L9.16699 15.6143L7.69043 14.3311C6.29084 13.1034 5.12883 12.0314 4.25488 11.0117C3.09428 9.65758 2.50003 8.46211 2.5 7.19629C2.5 5.1376 4.18931 3.5 6.40039 3.5C7.6497 3.50012 8.85029 4.05779 9.62793 4.92188L10 5.33398L10.3721 4.92188C11.1497 4.05779 12.3503 3.50012 13.5996 3.5Z" fill="currentColor" ></path>
</svg> </svg>
</div> </div>
</div> </div>
<div className="div-block-4"> <div className="div-block-4">
<img <img
src={image} src={image}
@ -130,17 +121,18 @@ const TopSalesItem: React.FC<TopSalesItemProps> = ({
alt={title} alt={title}
className="image-5" className="image-5"
/> />
<div className="text-block-7">Топ продаж</div> <div className="text-block-7">{discount}</div>
</div> </div>
<div className="div-block-3"> <div className="div-block-3">
<div className="w-layout-hflex flex-block-16"> <div className="w-layout-hflex flex-block-16">
<div className="text-block-8">{price}</div> <div className="text-block-8">{price}</div>
{/* <div className="text-block-9">oldPrice</div> */}
</div> </div>
<div className="w-layout-hflex flex-block-122">
<div className="w-layout-vflex">
<div className="text-block-10">{title}</div> <div className="text-block-10">{title}</div>
<div className="text-block-11">{brand}</div> <div className="text-block-11">{brand}</div>
</div> </div>
<a <a
href="#" href="#"
className="button-icon w-inline-block" className="button-icon w-inline-block"
@ -148,16 +140,17 @@ const TopSalesItem: React.FC<TopSalesItemProps> = ({
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
aria-label="Добавить в корзину" aria-label="Добавить в корзину"
> >
<div className="div-block-25"> <div className="div-block-26">
<div className="icon-setting w-embed"> <div className="icon-setting w-embed">
<svg width="currentWidht" height="currentHeight" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="currentWidht" height="currentHeight" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.1998 22.2C8.8798 22.2 7.81184 23.28 7.81184 24.6C7.81184 25.92 8.8798 27 10.1998 27C11.5197 27 12.5997 25.92 12.5997 24.6C12.5997 23.28 11.5197 22.2 10.1998 22.2ZM3 3V5.4H5.39992L9.71977 14.508L8.09982 17.448C7.90783 17.784 7.79984 18.18 7.79984 18.6C7.79984 19.92 8.8798 21 10.1998 21H24.5993V18.6H10.7037C10.5357 18.6 10.4037 18.468 10.4037 18.3L10.4397 18.156L11.5197 16.2H20.4594C21.3594 16.2 22.1513 15.708 22.5593 14.964L26.8552 7.176C26.9542 6.99286 27.004 6.78718 26.9997 6.57904C26.9955 6.37089 26.9373 6.16741 26.8309 5.98847C26.7245 5.80952 26.5736 5.66124 26.3927 5.55809C26.2119 5.45495 26.0074 5.40048 25.7992 5.4H8.05183L6.92387 3H3ZM22.1993 22.2C20.8794 22.2 19.8114 23.28 19.8114 24.6C19.8114 25.92 20.8794 27 22.1993 27C23.5193 27 24.5993 25.92 24.5993 24.6C24.5993 23.28 23.5193 22.2 22.1993 22.2Z" fill="currentColor"></path> <path d="M10.1998 22.2C8.8798 22.2 7.81184 23.28 7.81184 24.6C7.81184 25.92 8.8798 27 10.1998 27C11.5197 27 12.5997 25.92 12.5997 24.6C12.5997 23.28 11.5197 22.2 10.1998 22.2ZM3 3V5.4H5.39992L9.71977 14.508L8.09982 17.448C7.90783 17.784 7.79984 18.18 7.79984 18.6C7.79984 19.92 8.8798 21 10.1998 21H24.5993V18.6H10.7037C10.5357 18.6 10.4037 18.468 10.4037 18.3L10.4397 18.156L11.5197 16.2H20.4594C21.3594 16.2 22.1513 15.708 22.5593 14.964L26.8552 7.176C26.9542 6.99286 27.004 6.78718 26.9997 6.57904C26.9955 6.37089 26.9373 6.16741 26.8309 5.98847C26.7245 5.80952 26.5736 5.66124 26.3927 5.55809C26.2119 5.45495 26.0074 5.40048 25.7992 5.4H8.05183L6.92387 3H3ZM22.1993 22.2C20.8794 22.2 19.8114 23.28 19.8114 24.6C19.8114 25.92 20.8794 27 22.1993 27C23.5193 27 24.5993 25.92 24.5993 24.6C24.5993 23.28 23.5193 22.2 22.1993 22.2Z" fill="currentColor"></path>
</svg> </svg>
</div> </div>
</div> </div>
<div className="text-block-6">Купить</div>
</a> </a>
</div> </div>
</div>
</div>
); );
}; };

36
src/components/UnitDetailsSection.tsx
View File

@ -28,6 +28,7 @@ const UnitDetailsSection: React.FC<UnitDetailsSectionProps> = ({
const [imageLoadTimeout, setImageLoadTimeout] = useState<NodeJS.Timeout | null>(null); const [imageLoadTimeout, setImageLoadTimeout] = useState<NodeJS.Timeout | null>(null);
const [isBrandModalOpen, setIsBrandModalOpen] = useState(false); const [isBrandModalOpen, setIsBrandModalOpen] = useState(false);
const [selectedDetail, setSelectedDetail] = useState<LaximoUnitDetail | null>(null); const [selectedDetail, setSelectedDetail] = useState<LaximoUnitDetail | null>(null);
const [highlightedDetailId, setHighlightedDetailId] = useState<string | null>(null);
// Отладочная информация для SSD // Отладочная информация для SSD
console.log('🔍 UnitDetailsSection получил SSD:', { console.log('🔍 UnitDetailsSection получил SSD:', {
@ -165,11 +166,31 @@ const UnitDetailsSection: React.FC<UnitDetailsSectionProps> = ({
d.detailid === coord.codeonimage d.detailid === coord.codeonimage
); );
if (detail) {
console.log('✅ Найдена деталь для выделения:', detail.name, 'ID:', detail.detailid);
// Выделяем деталь в списке
setHighlightedDetailId(detail.detailid);
} else {
console.log('⚠️ Деталь не найдена в списке по коду:', coord.codeonimage);
setHighlightedDetailId(null);
}
};
const handleCoordinateDoubleClick = (coord: LaximoImageCoordinate) => {
console.log('🖱️ Двойной клик по интерактивной области:', coord.codeonimage);
// Сначала пытаемся найти деталь в списке
const detail = unitDetails.find(d =>
d.detailid === coord.detailid ||
d.codeonimage === coord.codeonimage ||
d.detailid === coord.codeonimage
);
if (detail && detail.oem) { if (detail && detail.oem) {
console.log('✅ Найдена деталь для выбора бренда:', detail.name, 'OEM:', detail.oem); console.log('✅ Найдена деталь для выбора бренда:', detail.name, 'OEM:', detail.oem);
// Показываем модал выбора бренда // Переходим на страницу выбора бренда
setSelectedDetail(detail); const url = `/vehicle-search/${catalogCode}/${vehicleId}/part/${detail.oem}/brands?detailName=${encodeURIComponent(detail.name || '')}`;
setIsBrandModalOpen(true); router.push(url);
} else { } else {
// Если деталь не найдена в списке, переходим к общему поиску по коду на изображении // Если деталь не найдена в списке, переходим к общему поиску по коду на изображении
console.log('⚠️ Деталь не найдена в списке, переходим к поиску по коду:', coord.codeonimage); console.log('⚠️ Деталь не найдена в списке, переходим к поиску по коду:', coord.codeonimage);
@ -461,7 +482,8 @@ const UnitDetailsSection: React.FC<UnitDetailsSectionProps> = ({
borderRadius: coord.shape === 'circle' ? '50%' : '0' borderRadius: coord.shape === 'circle' ? '50%' : '0'
}} }}
onClick={() => handleCoordinateClick(coord)} onClick={() => handleCoordinateClick(coord)}
title={detail ? `${coord.codeonimage}: ${detail.name}` : `Деталь ${coord.codeonimage}`} onDoubleClick={() => handleCoordinateDoubleClick(coord)}
title={detail ? `${coord.codeonimage}: ${detail.name} (Клик - выделить, двойной клик - перейти к выбору бренда)` : `Деталь ${coord.codeonimage} (Клик - выделить, двойной клик - поиск)`}
> >
<div className="absolute -top-6 left-1/2 transform -translate-x-1/2 bg-red-600 text-white text-xs px-2 py-1 rounded font-bold"> <div className="absolute -top-6 left-1/2 transform -translate-x-1/2 bg-red-600 text-white text-xs px-2 py-1 rounded font-bold">
{coord.codeonimage} {coord.codeonimage}
@ -612,7 +634,11 @@ const UnitDetailsSection: React.FC<UnitDetailsSectionProps> = ({
{unitDetails.map((detail, index) => ( {unitDetails.map((detail, index) => (
<div <div
key={`detail-${unitId}-${index}-${detail.detailid}`} key={`detail-${unitId}-${index}-${detail.detailid}`}
className="border border-gray-200 rounded-lg p-4 hover:border-red-300 hover:shadow-md transition-all duration-200 cursor-pointer" className={`border rounded-lg p-4 hover:border-red-300 hover:shadow-md transition-all duration-200 cursor-pointer ${
highlightedDetailId === detail.detailid
? 'border-red-500 bg-red-50 shadow-md'
: 'border-gray-200'
}`}
onClick={() => handleDetailClick(detail)} onClick={() => handleDetailClick(detail)}
> >
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">

32
src/components/index/BestPriceSection.tsx
View File

@ -1,4 +1,4 @@
import React from "react"; import React, { useRef } from "react";
import { useQuery } from "@apollo/client"; import { useQuery } from "@apollo/client";
import BestPriceItem from "../BestPriceItem"; import BestPriceItem from "../BestPriceItem";
import { GET_BEST_PRICE_PRODUCTS } from "../../lib/graphql"; import { GET_BEST_PRICE_PRODUCTS } from "../../lib/graphql";
@ -19,8 +19,22 @@ interface BestPriceProductData {
}; };
} }
const SCROLL_AMOUNT = 340; // px, ширина одной карточки + отступ
const BestPriceSection: React.FC = () => { const BestPriceSection: React.FC = () => {
const { data, loading, error } = useQuery(GET_BEST_PRICE_PRODUCTS); const { data, loading, error } = useQuery(GET_BEST_PRICE_PRODUCTS);
const scrollRef = useRef<HTMLDivElement>(null);
const scrollLeft = () => {
if (scrollRef.current) {
scrollRef.current.scrollBy({ left: -SCROLL_AMOUNT, behavior: 'smooth' });
}
};
const scrollRight = () => {
if (scrollRef.current) {
scrollRef.current.scrollBy({ left: SCROLL_AMOUNT, behavior: 'smooth' });
}
};
if (loading) { if (loading) {
return ( return (
@ -97,11 +111,25 @@ const BestPriceSection: React.FC = () => {
<div className="text-block-58">Подборка лучших предложенийпо цене</div> <div className="text-block-58">Подборка лучших предложенийпо цене</div>
<a href="#" className="button-24 w-button">Показать все</a> <a href="#" className="button-24 w-button">Показать все</a>
</div> </div>
<div className="w-layout-hflex flex-block-121"> <div className="carousel-row">
<button className="carousel-arrow carousel-arrow-left" onClick={scrollLeft} aria-label="Прокрутить влево">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
<div className="w-layout-hflex flex-block-121 carousel-scroll" ref={scrollRef}>
{bestPriceItems.map((item, i) => ( {bestPriceItems.map((item, i) => (
<BestPriceItem key={i} {...item} /> <BestPriceItem key={i} {...item} />
))} ))}
</div> </div>
<button className="carousel-arrow carousel-arrow-right" onClick={scrollRight} aria-label="Прокрутить вправо">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
</div>
</div> </div>
</div> </div>
</section> </section>

61
src/components/index/BrandSelectionSection.tsx
View File

@ -1,8 +1,9 @@
import React, { useState } from "react"; import React, { useState, useMemo, useRef } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useQuery } from "@apollo/client"; import { useQuery } from "@apollo/client";
import { GET_LAXIMO_BRANDS } from "@/lib/graphql"; import { GET_LAXIMO_BRANDS } from "@/lib/graphql";
import { LaximoBrand } from "@/types/laximo"; import { LaximoBrand } from "@/types/laximo";
import { Combobox } from '@headlessui/react';
const tabs = [ const tabs = [
"Техническое обслуживание", "Техническое обслуживание",
@ -15,7 +16,8 @@ type Brand = { name: string; code?: string };
const BrandSelectionSection: React.FC = () => { const BrandSelectionSection: React.FC = () => {
const [activeTab, setActiveTab] = useState(0); const [activeTab, setActiveTab] = useState(0);
const [selectedBrand, setSelectedBrand] = useState<string>(""); const [selectedBrand, setSelectedBrand] = useState<Brand | null>(null);
const [brandQuery, setBrandQuery] = useState('');
const router = useRouter(); const router = useRouter();
const { data, loading, error } = useQuery<{ laximoBrands: LaximoBrand[] }>(GET_LAXIMO_BRANDS, { const { data, loading, error } = useQuery<{ laximoBrands: LaximoBrand[] }>(GET_LAXIMO_BRANDS, {
@ -42,6 +44,12 @@ const BrandSelectionSection: React.FC = () => {
console.warn('Laximo API недоступен, используются статические данные:', error.message); console.warn('Laximo API недоступен, используются статические данные:', error.message);
} }
// Combobox фильтрация
const filteredBrands = useMemo(() => {
if (!brandQuery) return brands;
return brands.filter(b => b.name.toLowerCase().includes(brandQuery.toLowerCase()));
}, [brands, brandQuery]);
const handleBrandClick = (brand: Brand) => { const handleBrandClick = (brand: Brand) => {
if (brand.code) { if (brand.code) {
router.push(`/brands?selected=${brand.code}`); router.push(`/brands?selected=${brand.code}`);
@ -53,7 +61,7 @@ const BrandSelectionSection: React.FC = () => {
const handleSubmit = (e: React.FormEvent) => { const handleSubmit = (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
if (selectedBrand) { if (selectedBrand) {
const found = brands.find(b => b.code === selectedBrand || b.name === selectedBrand); const found = brands.find(b => b.code === selectedBrand.code || b.name === selectedBrand.name);
if (found && found.code) { if (found && found.code) {
router.push(`/brands?selected=${found.code}`); router.push(`/brands?selected=${found.code}`);
return; return;
@ -123,19 +131,44 @@ const BrandSelectionSection: React.FC = () => {
<h1 className="heading-21">ПОДБОР АВТОЗАПЧАСТЕЙ ПО МАРКЕ АВТО</h1> <h1 className="heading-21">ПОДБОР АВТОЗАПЧАСТЕЙ ПО МАРКЕ АВТО</h1>
<div className="form-block-4 w-form"> <div className="form-block-4 w-form">
<form id="email-form" name="email-form" data-name="Email Form" method="post" data-wf-page-id="685be6dfd87db2e01cbdb7a2" data-wf-element-id="e673036c-0caf-d251-3b66-9ba9cb85064c" onSubmit={handleSubmit}> <form id="email-form" name="email-form" data-name="Email Form" method="post" data-wf-page-id="685be6dfd87db2e01cbdb7a2" data-wf-element-id="e673036c-0caf-d251-3b66-9ba9cb85064c" onSubmit={handleSubmit}>
<select <div style={{ width: 180, marginBottom: 16 }}>
id="field-7" <Combobox value={selectedBrand} onChange={setSelectedBrand} nullable>
name="field-7" <div className="relative">
data-name="Field 7" <Combobox.Input
className="select-copy w-select" className="w-full px-6 py-4 bg-white rounded border border-stone-300 text-sm text-gray-950 placeholder:text-neutral-500 outline-none focus:shadow-none focus:border-stone-300 transition-colors"
value={selectedBrand} displayValue={(brand: Brand | null) => brand?.name || ''}
onChange={e => setSelectedBrand(e.target.value)} onChange={e => setBrandQuery(e.target.value)}
placeholder="Марка"
autoComplete="off"
/>
<Combobox.Button className="absolute inset-y-0 right-0 flex items-center px-3 focus:outline-none w-12">
<svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 9l6 6 6-6" />
</svg>
</Combobox.Button>
<Combobox.Options
className="absolute left-0 top-full z-10 bg-white border-x border-b border-stone-300 rounded-b-lg shadow-lg w-full max-h-60 overflow-auto scrollbar-none"
style={{ scrollbarWidth: 'none' }}
data-hide-scrollbar
> >
<option value="">Марка</option> {filteredBrands.length === 0 && (
{brands.map((brand, idx) => ( <div className="px-6 py-4 text-gray-500">Бренды не найдены</div>
<option value={brand.code || brand.name} key={idx}>{brand.name}</option> )}
{filteredBrands.map(brand => (
<Combobox.Option
key={brand.code || brand.name}
value={brand}
className={({ active, selected }) =>
`px-6 py-4 cursor-pointer hover:!bg-[rgb(236,28,36)] hover:!text-white text-sm transition-colors ${selected ? 'bg-red-50 font-semibold text-gray-950' : 'text-neutral-500'}`
}
>
{brand.name}
</Combobox.Option>
))} ))}
</select> </Combobox.Options>
</div>
</Combobox>
</div>
<div className="div-block-10-copy"> <div className="div-block-10-copy">
<input type="submit" data-wait="Please wait..." className="button-3-copy w-button" value="Далее" /> <input type="submit" data-wait="Please wait..." className="button-3-copy w-button" value="Далее" />
</div> </div>

4
src/components/index/IndexTopMenuNav.tsx
View File

@ -1,8 +1,8 @@
import React from 'react'; import React from 'react';
import Link from 'next/link'; import Link from 'next/link';
const IndexTopMenuNav = () => ( const IndexTopMenuNav = ({ isIndexPage = false }: { isIndexPage?: boolean }) => (
<section className="topmenub"> <section className={`topmenub${!isIndexPage ? ' topmenub-white' : ''}`} style={!isIndexPage ? { background: '#fff' } : undefined}>
<div className="w-layout-blockcontainer tb nav w-container"> <div className="w-layout-blockcontainer tb nav w-container">
<div className="w-layout-hflex flex-block-107"> <div className="w-layout-hflex flex-block-107">
<Link href="/about" className="link-block-8 w-inline-block"> <Link href="/about" className="link-block-8 w-inline-block">

37
src/components/index/NewArrivalsSection.tsx
View File

@ -1,4 +1,4 @@
import React from "react"; import React, { useRef } from "react";
import ArticleCard from "../ArticleCard"; import ArticleCard from "../ArticleCard";
import { PartsAPIArticle } from "@/types/partsapi"; import { PartsAPIArticle } from "@/types/partsapi";
@ -36,21 +36,52 @@ const newArrivalsArticles: PartsAPIArticle[] = [
const imagePath = "images/162615.webp"; const imagePath = "images/162615.webp";
const NewArrivalsSection: React.FC = () => ( const SCROLL_AMOUNT = 340; // px, ширина одной карточки + отступ
const NewArrivalsSection: React.FC = () => {
const scrollRef = useRef<HTMLDivElement>(null);
const scrollLeft = () => {
if (scrollRef.current) {
scrollRef.current.scrollBy({ left: -SCROLL_AMOUNT, behavior: 'smooth' });
}
};
const scrollRight = () => {
if (scrollRef.current) {
scrollRef.current.scrollBy({ left: SCROLL_AMOUNT, behavior: 'smooth' });
}
};
return (
<section className="main"> <section className="main">
<div className="w-layout-blockcontainer container w-container"> <div className="w-layout-blockcontainer container w-container">
<div className="w-layout-vflex inbt"> <div className="w-layout-vflex inbt">
<div className="w-layout-hflex flex-block-31"> <div className="w-layout-hflex flex-block-31">
<h2 className="heading-4">Новое поступление</h2> <h2 className="heading-4">Новое поступление</h2>
</div> </div>
<div className="w-layout-hflex core-product-search"> <div className="carousel-row">
<button className="carousel-arrow carousel-arrow-left" onClick={scrollLeft} aria-label="Прокрутить влево">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
<div className="w-layout-hflex core-product-search carousel-scroll" ref={scrollRef}>
{newArrivalsArticles.map((article, i) => ( {newArrivalsArticles.map((article, i) => (
<ArticleCard key={article.artId || i} article={{ ...article, artId: article.artId }} index={i} image={imagePath} /> <ArticleCard key={article.artId || i} article={{ ...article, artId: article.artId }} index={i} image={imagePath} />
))} ))}
</div> </div>
<button className="carousel-arrow carousel-arrow-right" onClick={scrollRight} aria-label="Прокрутить вправо">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
</div>
</div> </div>
</div> </div>
</section> </section>
); );
};
export default NewArrivalsSection; export default NewArrivalsSection;

37
src/components/index/NewsAndPromos.tsx
View File

@ -1,8 +1,24 @@
import React from "react"; import React, { useRef } from "react";
import NewsCard from "@/components/news/NewsCard"; import NewsCard from "@/components/news/NewsCard";
import Link from "next/link"; import Link from "next/link";
const NewsAndPromos = () => ( const SCROLL_AMOUNT = 340; // px, ширина одной карточки + отступ
const NewsAndPromos = () => {
const scrollRef = useRef<HTMLDivElement>(null);
const scrollLeft = () => {
if (scrollRef.current) {
scrollRef.current.scrollBy({ left: -SCROLL_AMOUNT, behavior: 'smooth' });
}
};
const scrollRight = () => {
if (scrollRef.current) {
scrollRef.current.scrollBy({ left: SCROLL_AMOUNT, behavior: 'smooth' });
}
};
return (
<section className="main"> <section className="main">
<div className="w-layout-blockcontainer container w-container"> <div className="w-layout-blockcontainer container w-container">
<div className="w-layout-vflex news-index-block"> <div className="w-layout-vflex news-index-block">
@ -15,7 +31,14 @@ const NewsAndPromos = () => (
</Link> </Link>
</div> </div>
</div> </div>
<div className="w-layout-hflex flex-block-6-copy-copy"> <div className="carousel-row">
<button className="carousel-arrow carousel-arrow-left" onClick={scrollLeft} aria-label="Прокрутить влево">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
<div className="w-layout-hflex flex-block-6-copy-copy carousel-scroll" ref={scrollRef}>
<NewsCard <NewsCard
title="Kia Syros будет выделяться необычным стилем" title="Kia Syros будет выделяться необычным стилем"
description="Компания Kia готова представить новый кроссовер Syros" description="Компания Kia готова представить новый кроссовер Syros"
@ -45,9 +68,17 @@ const NewsAndPromos = () => (
image="/images/news_img.png" image="/images/news_img.png"
/> />
</div> </div>
<button className="carousel-arrow carousel-arrow-right" onClick={scrollRight} aria-label="Прокрутить вправо">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
</div>
</div> </div>
</div> </div>
</section> </section>
); );
};
export default NewsAndPromos; export default NewsAndPromos;

4
src/components/index/ProductOfDaySection.tsx
View File

@ -236,11 +236,11 @@ const ProductOfDaySection: React.FC = () => {
{product.name} {product.name}
</div> </div>
{/* Счетчик товаров если их больше одного */} {/* Счетчик товаров если их больше одного */}
{activeProducts.length > 1 && ( {/* {activeProducts.length > 1 && (
<div className="text-xs text-gray-500 mt-2"> <div className="text-xs text-gray-500 mt-2">
{currentSlide + 1} из {activeProducts.length} {currentSlide + 1} из {activeProducts.length}
</div> </div>
)} )} */}
</div> </div>
{productImage && ( {productImage && (

80
src/components/index/TopSalesSection.tsx
View File

@ -1,4 +1,4 @@
import React from "react"; import React, { useRef } from "react";
import { useQuery } from "@apollo/client"; import { useQuery } from "@apollo/client";
import TopSalesItem from "../TopSalesItem"; import TopSalesItem from "../TopSalesItem";
import { GET_TOP_SALES_PRODUCTS } from "../../lib/graphql"; import { GET_TOP_SALES_PRODUCTS } from "../../lib/graphql";
@ -18,8 +18,22 @@ interface TopSalesProductData {
}; };
} }
const SCROLL_AMOUNT = 340; // px, ширина одной карточки + отступ
const TopSalesSection: React.FC = () => { const TopSalesSection: React.FC = () => {
const { data, loading, error } = useQuery(GET_TOP_SALES_PRODUCTS); const { data, loading, error } = useQuery(GET_TOP_SALES_PRODUCTS);
const scrollRef = useRef<HTMLDivElement>(null);
const scrollLeft = () => {
if (scrollRef.current) {
scrollRef.current.scrollBy({ left: -SCROLL_AMOUNT, behavior: 'smooth' });
}
};
const scrollRight = () => {
if (scrollRef.current) {
scrollRef.current.scrollBy({ left: SCROLL_AMOUNT, behavior: 'smooth' });
}
};
if (loading) { if (loading) {
return ( return (
@ -29,9 +43,23 @@ const TopSalesSection: React.FC = () => {
<div className="w-layout-hflex flex-block-31"> <div className="w-layout-hflex flex-block-31">
<h2 className="heading-4">Топ продаж</h2> <h2 className="heading-4">Топ продаж</h2>
</div> </div>
<div className="w-layout-hflex core-product-search"> <div className="carousel-row">
<button className="carousel-arrow carousel-arrow-left" onClick={scrollLeft} aria-label="Прокрутить влево">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
<div className="w-layout-hflex core-product-search carousel-scroll" ref={scrollRef}>
<div className="text-block-58">Загрузка...</div> <div className="text-block-58">Загрузка...</div>
</div> </div>
<button className="carousel-arrow carousel-arrow-right" onClick={scrollRight} aria-label="Прокрутить вправо">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
</div>
</div> </div>
</div> </div>
</section> </section>
@ -47,9 +75,23 @@ const TopSalesSection: React.FC = () => {
<div className="w-layout-hflex flex-block-31"> <div className="w-layout-hflex flex-block-31">
<h2 className="heading-4">Топ продаж</h2> <h2 className="heading-4">Топ продаж</h2>
</div> </div>
<div className="w-layout-hflex core-product-search"> <div className="carousel-row">
<button className="carousel-arrow carousel-arrow-left" onClick={scrollLeft} aria-label="Прокрутить влево">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
<div className="w-layout-hflex core-product-search carousel-scroll" ref={scrollRef}>
<div className="text-block-58">Ошибка загрузки</div> <div className="text-block-58">Ошибка загрузки</div>
</div> </div>
<button className="carousel-arrow carousel-arrow-right" onClick={scrollRight} aria-label="Прокрутить вправо">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
</div>
</div> </div>
</div> </div>
</section> </section>
@ -70,9 +112,23 @@ const TopSalesSection: React.FC = () => {
<div className="w-layout-hflex flex-block-31"> <div className="w-layout-hflex flex-block-31">
<h2 className="heading-4">Топ продаж</h2> <h2 className="heading-4">Топ продаж</h2>
</div> </div>
<div className="w-layout-hflex core-product-search"> <div className="carousel-row">
<button className="carousel-arrow carousel-arrow-left" onClick={scrollLeft} aria-label="Прокрутить влево">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
<div className="w-layout-hflex core-product-search carousel-scroll" ref={scrollRef}>
<div className="text-block-58">Нет товаров в топ продаж</div> <div className="text-block-58">Нет товаров в топ продаж</div>
</div> </div>
<button className="carousel-arrow carousel-arrow-right" onClick={scrollRight} aria-label="Прокрутить вправо">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
</div>
</div> </div>
</div> </div>
</section> </section>
@ -86,7 +142,14 @@ const TopSalesSection: React.FC = () => {
<div className="w-layout-hflex flex-block-31"> <div className="w-layout-hflex flex-block-31">
<h2 className="heading-4">Топ продаж</h2> <h2 className="heading-4">Топ продаж</h2>
</div> </div>
<div className="w-layout-hflex core-product-search"> <div className="carousel-row">
<button className="carousel-arrow carousel-arrow-left" onClick={scrollLeft} aria-label="Прокрутить влево">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
<div className="w-layout-hflex core-product-search carousel-scroll" ref={scrollRef}>
{activeTopSalesProducts.map((item: TopSalesProductData) => { {activeTopSalesProducts.map((item: TopSalesProductData) => {
const product = item.product; const product = item.product;
const price = product.retailPrice const price = product.retailPrice
@ -113,6 +176,13 @@ const TopSalesSection: React.FC = () => {
); );
})} })}
</div> </div>
<button className="carousel-arrow carousel-arrow-right" onClick={scrollRight} aria-label="Прокрутить вправо">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
</div>
</div> </div>
</div> </div>
</section> </section>

2
src/components/profile/LegalEntityListBlock.tsx
View File

@ -92,7 +92,7 @@ const LegalEntityListBlock: React.FC<LegalEntityListBlockProps> = ({ legalEntiti
<div <div
key={entity.id} key={entity.id}
layer-name="legal" layer-name="legal"
className="flex relative flex-col gap-8 items-start self-stretch px-5 py-3 rounded-lg bg-slate-50 max-sm:px-4 max-sm:py-2.5" className="flex relative flex-col gap-8 items-start self-stretch px-5 py-3 rounded-lg bg-slate-50 max-sm:px-4 max-sm:py-2.5 hover:bg-slate-200 transition-colors cursor-pointer"
> >
<div className="flex relative justify-between items-center self-stretch max-sm:flex-col max-sm:gap-4 max-sm:items-start"> <div className="flex relative justify-between items-center self-stretch max-sm:flex-col max-sm:gap-4 max-sm:items-start">
<div className="flex relative gap-5 items-center max-md:flex-wrap max-md:gap-4 max-sm:flex-col max-sm:gap-2.5 max-sm:items-start"> <div className="flex relative gap-5 items-center max-md:flex-wrap max-md:gap-4 max-sm:flex-col max-sm:gap-2.5 max-sm:items-start">

4
src/components/profile/ProfileActsMain.tsx
View File

@ -78,14 +78,14 @@ const ProfileActsMain = () => {
<div <div
key={tab} key={tab}
layer-name="Tabs_button" layer-name="Tabs_button"
className={`flex relative gap-5 items-center self-stretch rounded-xl flex-[1_0_0] min-w-[200px] max-md:gap-4 max-md:w-full max-md:min-w-[unset] max-sm:gap-2.5 ${activeTab === tab ? "" : "bg-slate-200"}`} className={`flex relative gap-5 items-center self-stretch rounded-xl flex-[1_0_0] min-w-[200px] text-[14px] max-md:gap-4 max-md:w-full max-md:min-w-[unset] max-sm:gap-2.5 ${activeTab === tab ? "" : "bg-slate-200 hover:bg-slate-200"}`}
onClick={() => setActiveTab(tab)} onClick={() => setActiveTab(tab)}
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
> >
<div className={`flex relative gap-5 justify-center items-center px-6 py-3.5 rounded-xl flex-[1_0_0] ${activeTab === tab ? "bg-red-600" : "bg-slate-200"}`}> <div className={`flex relative gap-5 justify-center items-center px-6 py-3.5 rounded-xl flex-[1_0_0] ${activeTab === tab ? "bg-red-600" : "bg-slate-200"}`}>
<div <div
layer-name="Курьером" layer-name="Курьером"
className={`relative text-lg font-medium leading-5 text-center max-sm:text-base ${activeTab === tab ? "text-white" : "text-gray-950"}`} className={`relative font-medium leading-5 text-center text-[14px] max-sm:text-base ${activeTab === tab ? "text-white" : "text-gray-950"}`}
> >
{tab} {tab}
</div> </div>

6
src/components/profile/ProfileGarageMain.tsx
View File

@ -179,7 +179,7 @@ const ProfileGarageMain = () => {
{!vehiclesLoading && filteredVehicles.map((vehicle) => ( {!vehiclesLoading && filteredVehicles.map((vehicle) => (
<div key={vehicle.id} className="mt-8"> <div key={vehicle.id} className="mt-8">
<div className="flex flex-col justify-center px-5 py-3 w-full rounded-lg bg-slate-50 max-md:max-w-full"> <div className="flex flex-col justify-center px-5 py-3 w-full rounded-lg bg-slate-50 max-md:max-w-full hover:bg-slate-200 transition-colors cursor-pointer">
<div className="flex flex-wrap gap-8 items-center w-full max-md:max-w-full"> <div className="flex flex-wrap gap-8 items-center w-full max-md:max-w-full">
<div className="flex gap-8 items-center self-stretch my-auto min-w-[240px] max-md:flex-col max-md:min-w-0 max-md:gap-2"> <div className="flex gap-8 items-center self-stretch my-auto min-w-[240px] max-md:flex-col max-md:min-w-0 max-md:gap-2">
<div className="self-stretch my-auto text-xl font-bold leading-none text-gray-950"> <div className="self-stretch my-auto text-xl font-bold leading-none text-gray-950">
@ -400,10 +400,10 @@ const ProfileGarageMain = () => {
{!historyLoading && searchHistory.length > 0 && ( {!historyLoading && searchHistory.length > 0 && (
<div className="flex flex-col mt-8 w-full max-md:max-w-full"> <div className="flex flex-col mt-8 w-full max-md:max-w-full">
{searchHistory.map((historyItem) => ( {searchHistory.map((historyItem) => (
<div key={historyItem.id} className="flex flex-col justify-center px-5 py-3 mb-2.5 w-full rounded-lg bg-slate-50 min-h-[44px] max-md:max-w-full"> <div key={historyItem.id} className="flex flex-col justify-center px-5 py-3 mb-2.5 w-full rounded-lg bg-slate-50 min-h-[44px] max-md:max-w-full hover:bg-slate-200 transition-colors cursor-pointer">
<div className="flex flex-wrap gap-10 justify-between items-center w-full max-md:max-w-full"> <div className="flex flex-wrap gap-10 justify-between items-center w-full max-md:max-w-full">
<div className="flex gap-8 items-center self-stretch my-auto min-w-[240px] max-md:flex-col max-md:min-w-0 max-md:gap-2"> <div className="flex gap-8 items-center self-stretch my-auto min-w-[240px] max-md:flex-col max-md:min-w-0 max-md:gap-2">
<div className="self-stretch my-auto text-lg font-bold leading-none text-gray-950"> <div className="self-stretch my-auto text-lg font-bold leading-none text-gray-950 w-[300px]">
{historyItem.brand && historyItem.model {historyItem.brand && historyItem.model
? `${historyItem.brand} ${historyItem.model}` ? `${historyItem.brand} ${historyItem.model}`
: 'Автомобиль найден'} : 'Автомобиль найден'}

38
src/components/profile/ProfileHistoryItem.tsx
View File

@ -1,4 +1,5 @@
import React from "react"; import React from "react";
import { useRouter } from "next/router";
interface VehicleInfo { interface VehicleInfo {
brand?: string; brand?: string;
@ -15,6 +16,10 @@ interface ProfileHistoryItemProps {
vehicleInfo?: VehicleInfo; vehicleInfo?: VehicleInfo;
resultCount?: number; resultCount?: number;
onDelete?: (id: string) => void; onDelete?: (id: string) => void;
// Добавляем новые пропсы для поиска
searchType?: 'TEXT' | 'ARTICLE' | 'OEM' | 'VIN' | 'PLATE' | 'WIZARD' | 'PART_VEHICLES';
articleNumber?: string;
brand?: string;
} }
const ProfileHistoryItem: React.FC<ProfileHistoryItemProps> = ({ const ProfileHistoryItem: React.FC<ProfileHistoryItemProps> = ({
@ -26,7 +31,12 @@ const ProfileHistoryItem: React.FC<ProfileHistoryItemProps> = ({
vehicleInfo, vehicleInfo,
resultCount, resultCount,
onDelete, onDelete,
searchType,
articleNumber,
brand,
}) => { }) => {
const router = useRouter();
const handleDeleteClick = (e: React.MouseEvent) => { const handleDeleteClick = (e: React.MouseEvent) => {
e.stopPropagation(); e.stopPropagation();
if (onDelete) { if (onDelete) {
@ -34,6 +44,28 @@ const ProfileHistoryItem: React.FC<ProfileHistoryItemProps> = ({
} }
}; };
const handleItemClick = () => {
// Определяем куда перенаправлять в зависимости от типа поиска
if (searchType === 'VIN' || searchType === 'PLATE') {
// Для VIN и госномера перенаправляем на vehicle-search-results
router.push(`/vehicle-search-results?q=${encodeURIComponent(name)}`);
} else if (searchType === 'ARTICLE' || searchType === 'OEM' || (searchType === 'TEXT' && articleNumber)) {
// Для поиска по артикулу/OEM или текстового поиска с артикулом
const searchBrand = brand || manufacturer || '';
const searchArticle = articleNumber || name;
router.push(`/search-result?article=${encodeURIComponent(searchArticle)}&brand=${encodeURIComponent(searchBrand)}`);
} else if (searchType === 'TEXT') {
// Для обычного текстового поиска
router.push(`/search?q=${encodeURIComponent(name)}&mode=parts`);
} else if (searchType === 'PART_VEHICLES') {
// Для поиска автомобилей по детали
router.push(`/vehicles-by-part?partNumber=${encodeURIComponent(name)}`);
} else {
// По умолчанию - обычный поиск
router.push(`/search?q=${encodeURIComponent(name)}&mode=parts`);
}
};
const getSearchTypeDisplay = (article: string) => { const getSearchTypeDisplay = (article: string) => {
if (article.includes('TEXT')) return 'Текстовый поиск'; if (article.includes('TEXT')) return 'Текстовый поиск';
if (article.includes('ARTICLE')) return 'По артикулу'; if (article.includes('ARTICLE')) return 'По артикулу';
@ -48,7 +80,11 @@ const ProfileHistoryItem: React.FC<ProfileHistoryItemProps> = ({
return ( return (
<> <>
<div className="mt-1.5 w-full border border-gray-200 border-solid min-h-[1px] max-md:max-w-full" /> <div className="mt-1.5 w-full border border-gray-200 border-solid min-h-[1px] max-md:max-w-full" />
<div className="flex justify-between items-center px-5 pt-1.5 pb-2 mt-1.5 w-full bg-white rounded-lg max-md:max-w-full max-md:flex-col max-md:min-w-0 hover:bg-gray-50 transition-colors"> <div
className="flex justify-between items-center px-5 pt-1.5 pb-2 mt-1.5 w-full bg-white rounded-lg max-md:max-w-full max-md:flex-col max-md:min-w-0 hover:bg-slate-200 transition-colors"
onClick={handleItemClick}
style={{ cursor: 'pointer' }}
>
<div className="flex flex-wrap flex-1 shrink gap-5 items-center self-stretch pr-5 my-auto w-full basis-0 max-md:max-w-full max-md:flex-col max-md:gap-2 max-md:p-0 max-md:min-w-0"> <div className="flex flex-wrap flex-1 shrink gap-5 items-center self-stretch pr-5 my-auto w-full basis-0 max-md:max-w-full max-md:flex-col max-md:gap-2 max-md:p-0 max-md:min-w-0">
<div className="self-stretch my-auto w-40 max-md:w-full text-sm"> <div className="self-stretch my-auto w-40 max-md:w-full text-sm">
<div className="font-medium text-gray-900">{date}</div> <div className="font-medium text-gray-900">{date}</div>

6
src/components/profile/ProfileHistoryTabs.tsx
View File

@ -69,7 +69,7 @@ const ProfileHistoryTabs: React.FC<ProfileHistoryTabsProps> = ({
{tabs.map((tab) => ( {tabs.map((tab) => (
<div <div
key={tab} key={tab}
className={`flex flex-1 shrink gap-5 items-center h-full text-center rounded-xl basis-12 min-w-[200px] ${ className={`flex flex-1 shrink gap-5 items-center h-full text-center rounded-xl basis-12 min-w-[160px] text-[14px] ${
activeTab === tab activeTab === tab
? "text-white" ? "text-white"
: "bg-slate-200 text-gray-950" : "bg-slate-200 text-gray-950"
@ -78,7 +78,7 @@ const ProfileHistoryTabs: React.FC<ProfileHistoryTabsProps> = ({
onClick={() => onTabChange(tab)} onClick={() => onTabChange(tab)}
> >
<div <div
className={`flex-1 shrink gap-5 self-stretch px-6 py-3.5 my-auto w-full rounded-xl basis-0 min-w-[200px] max-md:px-5 ${ className={`flex-1 shrink gap-5 self-stretch px-6 py-3.5 my-auto w-full rounded-xl basis-0 min-w-[160px] text-[14px] max-md:px-5 ${
activeTab === tab activeTab === tab
? "text-white bg-red-600" ? "text-white bg-red-600"
: "bg-slate-200 text-gray-950" : "bg-slate-200 text-gray-950"
@ -94,7 +94,7 @@ const ProfileHistoryTabs: React.FC<ProfileHistoryTabsProps> = ({
tabIndex={0} tabIndex={0}
> >
<div <div
className="flex justify-between items-center px-6 py-4 text-sm leading-snug bg-white rounded border border-solid border-stone-300 text-neutral-500 cursor-pointer select-none w-full min-w-[200px]" className="flex justify-between items-center px-6 py-3 text-sm leading-snug bg-white rounded border border-solid border-stone-300 text-neutral-500 cursor-pointer select-none w-full min-w-[200px]"
onClick={() => setIsDropdownOpen((prev) => !prev)} onClick={() => setIsDropdownOpen((prev) => !prev)}
> >
<span className="truncate">{selectedManufacturer}</span> <span className="truncate">{selectedManufacturer}</span>

4
src/components/profile/ProfileOrdersMain.tsx
View File

@ -172,12 +172,12 @@ const ProfileOrdersMain: React.FC<ProfileOrdersMainProps> = (props) => {
{tabs.map((tab, idx) => ( {tabs.map((tab, idx) => (
<div <div
key={tab.label} key={tab.label}
className={`flex flex-1 shrink gap-5 items-center h-full rounded-xl basis-0 ${activeTab === idx ? "bg-red-600 text-white" : "bg-slate-200 text-gray-950"}`} className={`flex flex-1 shrink gap-5 items-center h-full rounded-xl basis-0 text-[14px] ${activeTab === idx ? "bg-red-600 text-white" : "bg-slate-200 text-gray-950"}`}
style={{ cursor: "pointer" }} style={{ cursor: "pointer" }}
onClick={() => setActiveTab(idx)} onClick={() => setActiveTab(idx)}
> >
<div <div
className={`flex-1 shrink gap-5 self-stretch px-6 py-3.5 my-auto w-full rounded-xl basis-0 max-md:px-5 ${activeTab === idx ? "bg-red-600 text-white" : "bg-slate-200 text-gray-950"}`} className={`flex-1 shrink gap-5 self-stretch px-6 py-3.5 my-auto w-full rounded-xl basis-0 max-md:px-5 text-[14px] ${activeTab === idx ? "bg-red-600 text-white" : "bg-slate-200 text-gray-950"}`}
> >
{tab.label} {tab.label}
</div> </div>

41
src/components/vin/InfoVin.tsx
View File

@ -1,4 +1,5 @@
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef } from "react";
import VehicleAttributesTooltip from './VehicleAttributesTooltip';
interface VehicleAttribute { interface VehicleAttribute {
key: string; key: string;
@ -206,42 +207,14 @@ const InfoVin: React.FC<InfoVinProps> = ({
</section> </section>
{/* Tooltip с фиксированным позиционированием */} {/* Tooltip с фиксированным позиционированием */}
{showTooltip && vehicleAttributes.length > 0 && ( <VehicleAttributesTooltip
<div show={showTooltip && vehicleAttributes.length > 0}
className="fixed w-[500px] max-w-[90vw] bg-white border border-gray-200 rounded-lg shadow-xl z-[9999] p-4 animate-in fade-in-0 zoom-in-95 duration-200" position={tooltipPosition}
style={{ vehicleName={vehicleName}
left: `${tooltipPosition.x}px`, vehicleAttributes={vehicleAttributes}
top: `${tooltipPosition.y}px`,
}}
onMouseEnter={handleMouseEnter} onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
> />
{/* Заголовок */}
<div className="mb-3 pb-2 border-b border-gray-100">
<h3 className="text-sm font-semibold text-gray-900">
Полная информация об автомобиле
</h3>
<p className="text-xs text-gray-600 mt-1">{vehicleName}</p>
</div>
{/* Атрибуты в сетке */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
{vehicleAttributes.map((attr, index) => (
<div key={index} className="flex flex-col">
<dt className="text-xs font-medium text-gray-500 mb-1">{attr.name}</dt>
<dd className="text-xs text-gray-900 break-words">{attr.value}</dd>
</div>
))}
</div>
{/* Подвал */}
<div className="mt-3 pt-2 border-t border-gray-100">
<div className="text-xs text-gray-500 text-center">
Всего параметров: {vehicleAttributes.length}
</div>
</div>
</div>
)}
</> </>
); );
}; };

170
src/components/vin/KnotIn.tsx
View File

@ -21,6 +21,9 @@ interface KnotInProps {
note?: string; note?: string;
attributes?: Array<{ key: string; name?: string; value: string }>; attributes?: Array<{ key: string; name?: string; value: string }>;
}>; }>;
onPartSelect?: (codeOnImage: string | number | null) => void; // Коллбек для уведомления KnotParts о выделении детали
onPartsHighlight?: (codeOnImage: string | number | null) => void; // Коллбек для подсветки при hover
selectedParts?: Set<string | number>; // Выбранные детали (множественный выбор)
} }
// Функция для корректного формирования URL изображения // Функция для корректного формирования URL изображения
@ -34,12 +37,23 @@ const getImageUrl = (baseUrl: string, size: string) => {
.replace('%size%', size); .replace('%size%', size);
}; };
const KnotIn: React.FC<KnotInProps> = ({ catalogCode, vehicleId, ssd, unitId, unitName, parts }) => { const KnotIn: React.FC<KnotInProps> = ({
catalogCode,
vehicleId,
ssd,
unitId,
unitName,
parts,
onPartSelect,
onPartsHighlight,
selectedParts = new Set()
}) => {
const imgRef = useRef<HTMLImageElement>(null); const imgRef = useRef<HTMLImageElement>(null);
const [imageScale, setImageScale] = useState({ x: 1, y: 1 }); const [imageScale, setImageScale] = useState({ x: 1, y: 1 });
const selectedImageSize = 'source'; const selectedImageSize = 'source';
const [isBrandModalOpen, setIsBrandModalOpen] = useState(false); const [isBrandModalOpen, setIsBrandModalOpen] = useState(false);
const [selectedDetail, setSelectedDetail] = useState<{ oem: string; name: string } | null>(null); const [selectedDetail, setSelectedDetail] = useState<{ oem: string; name: string } | null>(null);
const [hoveredCodeOnImage, setHoveredCodeOnImage] = useState<string | number | null>(null);
const router = useRouter(); const router = useRouter();
// Получаем инфо об узле (для картинки) // Получаем инфо об узле (для картинки)
@ -150,21 +164,62 @@ const KnotIn: React.FC<KnotInProps> = ({ catalogCode, vehicleId, ssd, unitId, un
}); });
}; };
// Клик по точке: найти part по codeonimage/detailid и открыть BrandSelectionModal // Обработчик наведения на точку
const handlePointClick = (codeonimage: string | number) => { const handlePointHover = (coord: any) => {
// Попробуем использовать разные поля для связи
const identifierToUse = coord.detailid || coord.codeonimage || coord.code;
console.log('🔍 KnotIn - hover на точку:', {
coord,
detailid: coord.detailid,
codeonimage: coord.codeonimage,
code: coord.code,
identifierToUse,
type: typeof identifierToUse,
coordinatesLength: coordinates.length,
partsLength: parts?.length || 0,
firstCoord: coordinates[0],
firstPart: parts?.[0]
});
setHoveredCodeOnImage(identifierToUse);
if (onPartsHighlight) {
onPartsHighlight(identifierToUse);
}
};
// Клик по точке: выделить в списке деталей
const handlePointClick = (coord: any) => {
if (!parts) return; if (!parts) return;
console.log('Клик по точке:', codeonimage, 'Все детали:', parts);
const identifierToUse = coord.detailid || coord.codeonimage || coord.code;
console.log('Клик по точке:', identifierToUse, 'Координата:', coord, 'Все детали:', parts);
// Уведомляем родительский компонент о выборе детали для выделения в списке
if (onPartSelect) {
onPartSelect(identifierToUse);
}
};
// Двойной клик по точке: переход на страницу выбора бренда
const handlePointDoubleClick = (coord: any) => {
if (!parts) return;
const identifierToUse = coord.detailid || coord.codeonimage || coord.code;
console.log('Двойной клик по точке:', identifierToUse, 'Координата:', coord);
const part = parts.find( const part = parts.find(
(p) => (p) =>
(p.codeonimage && p.codeonimage.toString() === codeonimage.toString()) || (p.detailid && p.detailid.toString() === identifierToUse?.toString()) ||
(p.detailid && p.detailid.toString() === codeonimage.toString()) (p.codeonimage && p.codeonimage.toString() === identifierToUse?.toString())
); );
console.log('Найдена деталь для точки:', part);
if (part?.oem) { if (part?.oem) {
setSelectedDetail({ oem: part.oem, name: part.name || '' }); // Переходим на страницу выбора бренда вместо модального окна
setIsBrandModalOpen(true); const url = `/vehicle-search/${catalogCode}/${vehicleId}/part/${part.oem}/brands?detailName=${encodeURIComponent(part.name || '')}`;
router.push(url);
} else { } else {
console.warn('Нет артикула (oem) для выбранной точки:', codeonimage, part); console.warn('Нет артикула (oem) для выбранной точки:', identifierToUse, part);
} }
}; };
@ -172,6 +227,40 @@ const KnotIn: React.FC<KnotInProps> = ({ catalogCode, vehicleId, ssd, unitId, un
React.useEffect(() => { React.useEffect(() => {
console.log('KnotIn parts:', parts); console.log('KnotIn parts:', parts);
console.log('KnotIn coordinates:', coordinates); console.log('KnotIn coordinates:', coordinates);
if (coordinates.length > 0) {
console.log('🔍 Первые 5 координат:', coordinates.slice(0, 5).map((c: any) => ({
code: c.code,
codeonimage: c.codeonimage,
detailid: c.detailid,
x: c.x,
y: c.y
})));
}
if (parts && parts.length > 0) {
console.log('🔍 Первые 5 деталей:', parts.slice(0, 5).map(p => ({
name: p.name,
codeonimage: p.codeonimage,
detailid: p.detailid,
oem: p.oem
})));
}
// Попытка связать координаты с деталями
if (coordinates.length > 0 && parts && parts.length > 0) {
console.log('🔗 Попытка связать координаты с деталями:');
coordinates.forEach((coord: any, idx: number) => {
const matchingPart = parts.find(part =>
part.detailid === coord.detailid ||
part.codeonimage === coord.codeonimage ||
part.codeonimage === coord.code
);
if (matchingPart) {
console.log(` ✅ Координата ${idx}: detailid=${coord.detailid}, codeonimage=${coord.codeonimage} -> Деталь: ${matchingPart.name}`);
} else {
console.log(` ❌ Координата ${idx}: detailid=${coord.detailid}, codeonimage=${coord.codeonimage} -> НЕ НАЙДЕНА`);
}
});
}
}, [parts, coordinates]); }, [parts, coordinates]);
if (unitInfoLoading || imageMapLoading) { if (unitInfoLoading || imageMapLoading) {
@ -223,10 +312,6 @@ const KnotIn: React.FC<KnotInProps> = ({ catalogCode, vehicleId, ssd, unitId, un
return ( return (
<> <>
<div className="relative inline-block"> <div className="relative inline-block">
{/* ВРЕМЕННО: выводим количество точек для быстрой проверки */}
{/* <div style={{ position: 'absolute', top: 4, left: 4, zIndex: 20, background: 'rgba(255,0,0,0.1)', color: '#c00', fontWeight: 700, fontSize: 14, padding: '2px 8px', borderRadius: 6 }}>
{coordinates.length} точек
</div> */}
<img <img
ref={imgRef} ref={imgRef}
src={imageUrl} src={imageUrl}
@ -242,38 +327,63 @@ const KnotIn: React.FC<KnotInProps> = ({ catalogCode, vehicleId, ssd, unitId, un
const size = 22; const size = 22;
const scaledX = coord.x * imageScale.x - size / 2; const scaledX = coord.x * imageScale.x - size / 2;
const scaledY = coord.y * imageScale.y - size / 2; const scaledY = coord.y * imageScale.y - size / 2;
// Используем code или codeonimage в зависимости от структуры данных
const codeValue = coord.code || coord.codeonimage;
// Определяем состояние точки
const isSelected = selectedParts.has(codeValue);
const isHovered = hoveredCodeOnImage === codeValue;
// Определяем цвета на основе состояния
let backgroundColor = '#B7CAE2'; // Базовый цвет
let textColor = '#000';
if (isSelected) {
backgroundColor = '#22C55E'; // Зеленый для выбранных
textColor = '#fff';
} else if (isHovered) {
backgroundColor = '#EC1C24'; // Красный при наведении
textColor = '#fff';
}
return ( return (
<div <div
key={`coord-${unitId}-${idx}-${coord.x}-${coord.y}`} key={`coord-${unitId}-${idx}-${coord.x}-${coord.y}`}
tabIndex={0} tabIndex={0}
aria-label={`Деталь ${coord.codeonimage}`} aria-label={`Деталь ${codeValue}`}
onKeyDown={e => { onKeyDown={e => {
if (e.key === 'Enter' || e.key === ' ') handlePointClick(coord.codeonimage); if (e.key === 'Enter' || e.key === ' ') handlePointClick(coord);
}} }}
className="absolute flex items-center justify-center cursor-pointer transition-colors" className="absolute flex items-center justify-center cursor-pointer transition-all duration-200 ease-in-out"
style={{ style={{
left: scaledX, left: scaledX,
top: scaledY, top: scaledY,
width: size, width: size,
height: size, height: size,
background: '#B7CAE2', backgroundColor,
borderRadius: '50%', borderRadius: '50%',
border: isSelected ? '2px solid #16A34A' : 'none',
transform: isHovered || isSelected ? 'scale(1.1)' : 'scale(1)',
zIndex: isHovered || isSelected ? 10 : 1,
pointerEvents: 'auto', pointerEvents: 'auto',
}} }}
title={coord.codeonimage} title={`${codeValue} (Клик - выделить в списке, двойной клик - перейти к выбору бренда)`}
onClick={() => handlePointClick(coord.codeonimage)} onClick={() => handlePointClick(coord)}
onMouseEnter={e => { onDoubleClick={() => handlePointDoubleClick(coord)}
(e.currentTarget as HTMLDivElement).style.background = '#EC1C24'; onMouseEnter={() => handlePointHover(coord)}
(e.currentTarget.querySelector('span') as HTMLSpanElement).style.color = '#fff'; onMouseLeave={() => {
}} setHoveredCodeOnImage(null);
onMouseLeave={e => { if (onPartsHighlight) {
(e.currentTarget as HTMLDivElement).style.background = '#B7CAE2'; onPartsHighlight(null);
(e.currentTarget.querySelector('span') as HTMLSpanElement).style.color = '#000'; }
}} }}
> >
<span className="flex items-center justify-center w-full h-full text-black text-sm font-bold select-none pointer-events-none" style={{color: '#000'}}> <span
{coord.codeonimage} className="flex items-center justify-center w-full h-full text-sm font-bold select-none pointer-events-none transition-colors duration-200"
style={{ color: textColor }}
>
{codeValue}
</span> </span>
</div> </div>
); );

268
src/components/vin/KnotParts.tsx
View File

@ -1,4 +1,4 @@
import React, { useState } from "react"; import React, { useState, useEffect, useRef } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
interface KnotPartsProps { interface KnotPartsProps {
@ -16,10 +16,42 @@ interface KnotPartsProps {
selectedCodeOnImage?: string | number; selectedCodeOnImage?: string | number;
catalogCode?: string; catalogCode?: string;
vehicleId?: string; vehicleId?: string;
highlightedCodeOnImage?: string | number | null; // Деталь подсвеченная при hover на изображении
selectedParts?: Set<string | number>; // Выбранные детали (множественный выбор)
onPartSelect?: (codeOnImage: string | number | null) => void; // Коллбек для выбора детали
onPartHover?: (codeOnImage: string | number | null) => void; // Коллбек для подсветки при hover
} }
const KnotParts: React.FC<KnotPartsProps> = ({ parts = [], selectedCodeOnImage, catalogCode, vehicleId }) => { const KnotParts: React.FC<KnotPartsProps> = ({
parts = [],
selectedCodeOnImage,
catalogCode,
vehicleId,
highlightedCodeOnImage,
selectedParts = new Set(),
onPartSelect,
onPartHover
}) => {
const router = useRouter(); const router = useRouter();
const [showTooltip, setShowTooltip] = useState(false);
const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
const [tooltipPart, setTooltipPart] = useState<any>(null);
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
// Отладочные логи для проверки данных
React.useEffect(() => {
console.log('🔍 KnotParts получил данные:', {
partsCount: parts.length,
firstPart: parts[0],
firstPartAttributes: parts[0]?.attributes?.length || 0,
allPartsWithAttributes: parts.map(part => ({
name: part.name,
oem: part.oem,
attributesCount: part.attributes?.length || 0,
attributes: part.attributes
}))
});
}, [parts]);
const handlePriceClick = (part: any) => { const handlePriceClick = (part: any) => {
if (part.oem && catalogCode && vehicleId !== undefined) { if (part.oem && catalogCode && vehicleId !== undefined) {
@ -29,6 +61,98 @@ const KnotParts: React.FC<KnotPartsProps> = ({ parts = [], selectedCodeOnImage,
} }
}; };
// Обработчик клика по детали в списке
const handlePartClick = (part: any) => {
if (part.codeonimage && onPartSelect) {
onPartSelect(part.codeonimage);
}
};
// Обработчики наведения
const handlePartMouseEnter = (part: any) => {
if (part.codeonimage && onPartHover) {
onPartHover(part.codeonimage);
}
};
const handlePartMouseLeave = () => {
if (onPartHover) {
onPartHover(null);
}
};
// Вычисляем позицию tooltip
const calculateTooltipPosition = (iconElement: HTMLElement) => {
if (!iconElement) {
console.error('❌ calculateTooltipPosition: элемент не найден');
return;
}
const rect = iconElement.getBoundingClientRect();
const tooltipWidth = 400;
const tooltipHeight = 300; // примерная высота
let x = rect.left + rect.width / 2 - tooltipWidth / 2;
let y = rect.bottom + 8;
// Проверяем, не выходит ли tooltip за границы экрана
if (x < 10) x = 10;
if (x + tooltipWidth > window.innerWidth - 10) {
x = window.innerWidth - tooltipWidth - 10;
}
// Если tooltip не помещается снизу, показываем сверху
if (y + tooltipHeight > window.innerHeight - 10) {
y = rect.top - tooltipHeight - 8;
}
setTooltipPosition({ x, y });
};
const handleInfoIconMouseEnter = (event: React.MouseEvent, part: any) => {
event.stopPropagation();
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
// Сохраняем ссылку на элемент до setTimeout
const target = event.currentTarget as HTMLElement;
timeoutRef.current = setTimeout(() => {
if (target && typeof target.getBoundingClientRect === 'function') {
calculateTooltipPosition(target);
setTooltipPart(part);
setShowTooltip(true);
console.log('🔍 Показываем тултип для детали:', part.name, 'Атрибуты:', part.attributes?.length || 0);
} else {
console.error('❌ handleInfoIconMouseEnter: элемент не поддерживает getBoundingClientRect:', target);
}
}, 300); // Задержка 300ms
};
const handleInfoIconMouseLeave = (event: React.MouseEvent) => {
event.stopPropagation();
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
timeoutRef.current = setTimeout(() => {
setShowTooltip(false);
setTooltipPart(null);
}, 100); // Небольшая задержка перед скрытием
};
// Очищаем таймеры при размонтировании
useEffect(() => {
return () => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
};
}, []);
// Если нет деталей, показываем заглушку // Если нет деталей, показываем заглушку
if (!parts || parts.length === 0) { if (!parts || parts.length === 0) {
return ( return (
@ -41,29 +165,107 @@ const KnotParts: React.FC<KnotPartsProps> = ({ parts = [], selectedCodeOnImage,
); );
} }
// Эффект для отслеживания изменений подсветки
useEffect(() => {
console.log('🔍 KnotParts - подсветка изменилась:', {
highlightedCodeOnImage,
highlightedType: typeof highlightedCodeOnImage,
partsCodeOnImages: parts.map(p => p.codeonimage),
partsDetailIds: parts.map(p => p.detailid),
willHighlight: parts.some(part =>
(part.codeonimage && part.codeonimage.toString() === highlightedCodeOnImage?.toString()) ||
(part.detailid && part.detailid.toString() === highlightedCodeOnImage?.toString())
),
willHighlightStrict: parts.some(part =>
part.codeonimage === highlightedCodeOnImage ||
part.detailid === highlightedCodeOnImage
),
firstPartWithCodeOnImage: parts.find(p => p.codeonimage)
});
// Детальная информация о всех деталях
console.log('📋 Все детали с их codeonimage и detailid:');
parts.forEach((part, idx) => {
console.log(` Деталь ${idx}: "${part.name}" codeonimage="${part.codeonimage}" (${typeof part.codeonimage}) detailid="${part.detailid}" (${typeof part.detailid})`);
});
console.log('🎯 Ищем подсветку для:', `"${highlightedCodeOnImage}" (${typeof highlightedCodeOnImage})`);
}, [highlightedCodeOnImage, parts]);
return ( return (
<> <>
{/* Статус выбранных деталей */}
{/* {selectedParts.size > 0 && (
<div className="bg-green-50 border border-green-200 rounded-lg p-3 mb-4">
<div className="flex items-center">
<svg className="w-5 h-5 text-green-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span className="text-green-800 font-medium">
Выбрано деталей: {selectedParts.size}
</span>
<span className="text-green-600 text-sm ml-2">
(Кликните по детали, чтобы убрать из выбранных)
</span>
</div>
</div>
)} */}
<div className="knot-parts"> <div className="knot-parts">
{parts.map((part, idx) => { {parts.map((part, idx) => {
const isSelected = part.codeonimage && part.codeonimage === selectedCodeOnImage; const isHighlighted = highlightedCodeOnImage !== null && highlightedCodeOnImage !== undefined && (
(part.codeonimage && part.codeonimage.toString() === highlightedCodeOnImage.toString()) ||
(part.detailid && part.detailid.toString() === highlightedCodeOnImage.toString())
);
const isSelected = selectedParts.has(part.detailid || part.codeonimage || idx.toString());
// Создаем уникальный ключ
const uniqueKey = `part-${idx}-${part.detailid || part.oem || part.name || 'unknown'}`;
return ( return (
<div <div
className={`w-layout-hflex knotlistitem border rounded transition-colors duration-150 ${isSelected ? 'bg-yellow-100 border-yellow-400' : 'border-transparent'}`} key={uniqueKey}
key={part.detailid || idx} className={`w-layout-hflex knotlistitem rounded-lg cursor-pointer transition-colors ${
isSelected
? 'bg-green-100 border-green-500'
: isHighlighted
? 'bg-slate-200'
: 'bg-white border-gray-200 hover:border-gray-300'
}`}
onClick={() => handlePartClick(part)}
onMouseEnter={() => handlePartMouseEnter(part)}
onMouseLeave={handlePartMouseLeave}
style={{ cursor: 'pointer' }}
> >
<div className="w-layout-hflex flex-block-116"> <div className="w-layout-hflex flex-block-116">
<div className="nuberlist">{part.codeonimage || idx + 1}</div> <div
<div className="oemnuber">{part.oem}</div> className={`nuberlist ${isSelected ? 'text-green-700 font-bold' : isHighlighted ? ' font-bold' : ''}`}
>
{part.codeonimage || idx + 1}
</div>
<div className={`oemnuber ${isSelected ? 'text-green-800 font-semibold' : isHighlighted ? ' font-semibold' : ''}`}>{part.oem}</div>
</div>
<div className={`partsname ${isSelected ? 'text-green-800 font-semibold' : isHighlighted ? ' font-semibold' : ''}`}>
{part.name}
</div> </div>
<div className="partsname">{part.name}</div>
<div className="w-layout-hflex flex-block-117"> <div className="w-layout-hflex flex-block-117">
<button <button
className="button-3 w-button" className="button-3 w-button"
onClick={() => handlePriceClick(part)} onClick={(e) => {
e.stopPropagation(); // Предотвращаем срабатывание onClick родительского элемента
handlePriceClick(part);
}}
style={{ cursor: 'pointer' }}
> >
Цена Цена
</button> </button>
<div className="code-embed-16 w-embed"> <div
className="code-embed-16 w-embed cursor-pointer hover:opacity-70 transition-opacity"
onMouseEnter={(e) => handleInfoIconMouseEnter(e, part)}
onMouseLeave={handleInfoIconMouseLeave}
style={{ cursor: 'pointer' }}
>
<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.1 13.5H9.89999V8.1H8.1V13.5ZM8.99999 6.3C9.25499 6.3 9.46889 6.2136 9.64169 6.0408C9.81449 5.868 9.90059 5.6544 9.89999 5.4C9.89939 5.1456 9.81299 4.932 9.64079 4.7592C9.46859 4.5864 9.25499 4.5 8.99999 4.5C8.745 4.5 8.53139 4.5864 8.35919 4.7592C8.187 4.932 8.1006 5.1456 8.1 5.4C8.0994 5.6544 8.1858 5.8683 8.35919 6.0417C8.53259 6.2151 8.74619 6.3012 8.99999 6.3ZM8.99999 18C7.755 18 6.585 17.7636 5.49 17.2908C4.395 16.818 3.4425 16.1769 2.6325 15.3675C1.8225 14.5581 1.1814 13.6056 0.709201 12.51C0.237001 11.4144 0.000601139 10.2444 1.13924e-06 9C-0.00059886 7.7556 0.235801 6.5856 0.709201 5.49C1.1826 4.3944 1.8237 3.4419 2.6325 2.6325C3.4413 1.8231 4.3938 1.182 5.49 0.7092C6.5862 0.2364 7.7562 0 8.99999 0C10.2438 0 11.4138 0.2364 12.51 0.7092C13.6062 1.182 14.5587 1.8231 15.3675 2.6325C16.1763 3.4419 16.8177 4.3944 17.2917 5.49C17.7657 6.5856 18.0018 7.7556 18 9C17.9982 10.2444 17.7618 11.4144 17.2908 12.51C16.8198 13.6056 16.1787 14.5581 15.3675 15.3675C14.5563 16.1769 13.6038 16.8183 12.51 17.2917C11.4162 17.7651 10.2462 18.0012 8.99999 18Z" fill="currentcolor" /> <path d="M8.1 13.5H9.89999V8.1H8.1V13.5ZM8.99999 6.3C9.25499 6.3 9.46889 6.2136 9.64169 6.0408C9.81449 5.868 9.90059 5.6544 9.89999 5.4C9.89939 5.1456 9.81299 4.932 9.64079 4.7592C9.46859 4.5864 9.25499 4.5 8.99999 4.5C8.745 4.5 8.53139 4.5864 8.35919 4.7592C8.187 4.932 8.1006 5.1456 8.1 5.4C8.0994 5.6544 8.1858 5.8683 8.35919 6.0417C8.53259 6.2151 8.74619 6.3012 8.99999 6.3ZM8.99999 18C7.755 18 6.585 17.7636 5.49 17.2908C4.395 16.818 3.4425 16.1769 2.6325 15.3675C1.8225 14.5581 1.1814 13.6056 0.709201 12.51C0.237001 11.4144 0.000601139 10.2444 1.13924e-06 9C-0.00059886 7.7556 0.235801 6.5856 0.709201 5.49C1.1826 4.3944 1.8237 3.4419 2.6325 2.6325C3.4413 1.8231 4.3938 1.182 5.49 0.7092C6.5862 0.2364 7.7562 0 8.99999 0C10.2438 0 11.4138 0.2364 12.51 0.7092C13.6062 1.182 14.5587 1.8231 15.3675 2.6325C16.1763 3.4419 16.8177 4.3944 17.2917 5.49C17.7657 6.5856 18.0018 7.7556 18 9C17.9982 10.2444 17.7618 11.4144 17.2908 12.51C16.8198 13.6056 16.1787 14.5581 15.3675 15.3675C14.5563 16.1769 13.6038 16.8183 12.51 17.2917C11.4162 17.7651 10.2462 18.0012 8.99999 18Z" fill="currentcolor" />
</svg> </svg>
@ -73,6 +275,52 @@ const KnotParts: React.FC<KnotPartsProps> = ({ parts = [], selectedCodeOnImage,
); );
})} })}
</div> </div>
{/* Красивый тултип с информацией о детали */}
{showTooltip && tooltipPart && (
<div
className="flex overflow-hidden flex-col items-center px-8 py-8 bg-slate-50 shadow-[0px_0px_20px_rgba(0,0,0,0.15)] rounded-2xl w-[350px] min-h-[220px] max-w-full fixed z-[9999]"
style={{
position: 'fixed',
left: tooltipPosition.x,
top: tooltipPosition.y,
pointerEvents: 'none',
}}
>
<div className="flex relative flex-col w-full">
{/* Заголовок и OEM */}
<div className="mb-4">
<div className="font-semibold text-lg text-black mb-1 truncate">{tooltipPart.name}</div>
{tooltipPart.oem && (
<div className="inline-block bg-gray-100 text-gray-700 text-xs font-mono px-2 py-1 rounded mb-1">OEM: {tooltipPart.oem}</div>
)}
</div>
{/* Характеристики */}
{tooltipPart.attributes && tooltipPart.attributes.length > 0 ? (
tooltipPart.attributes.map((attr: any, idx: number) => (
<div key={idx} className="flex gap-5 items-center mt-2 w-full whitespace-normal first:mt-0">
<div className="self-stretch my-auto text-gray-400 w-[150px] break-words">
{attr.name || attr.key}
</div>
<div className="self-stretch my-auto font-medium text-black break-words">
{attr.value}
</div>
</div>
))
) : (
<div className="flex flex-col items-center justify-center w-full py-8">
<div className="text-gray-400 mb-2">Дополнительная информация недоступна</div>
</div>
)}
{tooltipPart.note && (
<div className="flex flex-col mt-6 w-full">
<div className="text-gray-400 text-xs mb-1">Примечание</div>
<div className="font-medium text-black text-sm">{tooltipPart.note}</div>
</div>
)}
</div>
</div>
)}
</> </>
); );
}; };

63
src/components/vin/VehicleAttributesTooltip.tsx Normal file
View File

@ -0,0 +1,63 @@
import React from 'react';
interface VehicleAttribute {
key: string;
name: string;
value: string;
}
interface VehicleAttributesTooltipProps {
show: boolean;
position: { x: number; y: number };
vehicleName?: string;
vehicleAttributes: VehicleAttribute[];
onMouseEnter?: () => void;
onMouseLeave?: () => void;
imageUrl?: string; // опционально, для будущего
}
const VehicleAttributesTooltip: React.FC<VehicleAttributesTooltipProps> = ({
show,
position,
vehicleAttributes,
onMouseEnter,
onMouseLeave,
imageUrl,
}) => {
if (!show) return null;
return (
<div
className="flex overflow-hidden flex-col items-center px-8 py-8 bg-slate-50 shadow-[0px_0px_20px_rgba(0,0,0,0.15)] rounded-2xl w-[450px] min-h-[365px] max-w-full fixed z-[9999]"
style={{
left: `${position.x + 120}px`,
top: `${position.y}px`,
}}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
{/* Фоновое изображение, если будет нужно */}
{imageUrl && (
<img
loading="lazy"
src={imageUrl}
className="object-cover absolute inset-0 size-full rounded-2xl opacity-10 pointer-events-none"
alt="vehicle background"
/>
)}
<div className="flex relative flex-col w-full">
{vehicleAttributes.map((attr, idx) => (
<div key={idx} className="flex gap-5 items-center mt-2 w-full whitespace-nowrap first:mt-0">
<div className="self-stretch my-auto text-gray-400 w-[150px] truncate">
{attr.name}
</div>
<div className="self-stretch my-auto font-medium text-black truncate">
{attr.value}
</div>
</div>
))}
</div>
</div>
);
};
export default VehicleAttributesTooltip;

191
src/pages/search-result.tsx
View File

@ -54,26 +54,40 @@ const createFilters = (result: any, loadedAnalogs: any): FilterConfig[] => {
}); });
} }
// Фильтр по цене // Получаем все доступные предложения для расчета диапазонов
const prices: number[] = []; const allAvailableOffers: any[] = [];
// Добавляем основные предложения
result.internalOffers?.forEach((offer: any) => { result.internalOffers?.forEach((offer: any) => {
if (offer.price > 0) prices.push(offer.price); allAvailableOffers.push(offer);
}); });
result.externalOffers?.forEach((offer: any) => { result.externalOffers?.forEach((offer: any) => {
if (offer.price > 0) prices.push(offer.price); allAvailableOffers.push(offer);
}); });
// Добавляем цены аналогов // Добавляем предложения аналогов
Object.values(loadedAnalogs).forEach((analog: any) => { Object.values(loadedAnalogs).forEach((analog: any) => {
analog.internalOffers?.forEach((offer: any) => { analog.internalOffers?.forEach((offer: any) => {
if (offer.price > 0) prices.push(offer.price); allAvailableOffers.push({
...offer,
deliveryDuration: offer.deliveryDays
});
}); });
analog.externalOffers?.forEach((offer: any) => { analog.externalOffers?.forEach((offer: any) => {
if (offer.price > 0) prices.push(offer.price); allAvailableOffers.push({
...offer,
deliveryDuration: offer.deliveryTime
});
}); });
}); });
if (prices.length > 0) { // Фильтр по цене - только если есть предложения с разными ценами
const prices: number[] = [];
allAvailableOffers.forEach((offer: any) => {
if (offer.price > 0) prices.push(offer.price);
});
if (prices.length > 1) {
const minPrice = Math.min(...prices); const minPrice = Math.min(...prices);
const maxPrice = Math.max(...prices); const maxPrice = Math.max(...prices);
@ -87,26 +101,14 @@ const createFilters = (result: any, loadedAnalogs: any): FilterConfig[] => {
} }
} }
// Фильтр по сроку доставки // Фильтр по сроку доставки - только если есть предложения с разными сроками
const deliveryDays: number[] = []; const deliveryDays: number[] = [];
result.internalOffers?.forEach((offer: any) => { allAvailableOffers.forEach((offer: any) => {
if (offer.deliveryDays && offer.deliveryDays > 0) deliveryDays.push(offer.deliveryDays); const days = offer.deliveryDays || offer.deliveryTime || offer.deliveryDuration;
}); if (days && days > 0) deliveryDays.push(days);
result.externalOffers?.forEach((offer: any) => {
if (offer.deliveryTime && offer.deliveryTime > 0) deliveryDays.push(offer.deliveryTime);
}); });
// Добавляем сроки доставки аналогов if (deliveryDays.length > 1) {
Object.values(loadedAnalogs).forEach((analog: any) => {
analog.internalOffers?.forEach((offer: any) => {
if (offer.deliveryDays && offer.deliveryDays > 0) deliveryDays.push(offer.deliveryDays);
});
analog.externalOffers?.forEach((offer: any) => {
if (offer.deliveryTime && offer.deliveryTime > 0) deliveryDays.push(offer.deliveryTime);
});
});
if (deliveryDays.length > 0) {
const minDays = Math.min(...deliveryDays); const minDays = Math.min(...deliveryDays);
const maxDays = Math.max(...deliveryDays); const maxDays = Math.max(...deliveryDays);
@ -120,26 +122,13 @@ const createFilters = (result: any, loadedAnalogs: any): FilterConfig[] => {
} }
} }
// Фильтр по количеству наличия // Фильтр по количеству наличия - только если есть предложения с разными количествами
const quantities: number[] = []; const quantities: number[] = [];
result.internalOffers?.forEach((offer: any) => { allAvailableOffers.forEach((offer: any) => {
if (offer.quantity && offer.quantity > 0) quantities.push(offer.quantity);
});
result.externalOffers?.forEach((offer: any) => {
if (offer.quantity && offer.quantity > 0) quantities.push(offer.quantity); if (offer.quantity && offer.quantity > 0) quantities.push(offer.quantity);
}); });
// Добавляем количества аналогов if (quantities.length > 1) {
Object.values(loadedAnalogs).forEach((analog: any) => {
analog.internalOffers?.forEach((offer: any) => {
if (offer.quantity && offer.quantity > 0) quantities.push(offer.quantity);
});
analog.externalOffers?.forEach((offer: any) => {
if (offer.quantity && offer.quantity > 0) quantities.push(offer.quantity);
});
});
if (quantities.length > 0) {
const minQuantity = Math.min(...quantities); const minQuantity = Math.min(...quantities);
const maxQuantity = Math.max(...quantities); const maxQuantity = Math.max(...quantities);
@ -163,36 +152,25 @@ const getBestOffers = (offers: any[]) => {
if (validOffers.length === 0) return []; if (validOffers.length === 0) return [];
const result: { offer: any; type: string }[] = []; const result: { offer: any; type: string }[] = [];
const usedOfferIds = new Set<string>();
// 1. Самая низкая цена (среди всех предложений) // 1. Самая низкая цена (среди всех предложений)
const lowestPriceOffer = [...validOffers].sort((a, b) => a.price - b.price)[0]; const lowestPriceOffer = [...validOffers].sort((a, b) => a.price - b.price)[0];
if (lowestPriceOffer) { if (lowestPriceOffer) {
result.push({ offer: lowestPriceOffer, type: 'Самая низкая цена' }); result.push({ offer: lowestPriceOffer, type: 'Самая низкая цена' });
usedOfferIds.add(`${lowestPriceOffer.articleNumber}-${lowestPriceOffer.price}-${lowestPriceOffer.deliveryDuration}`);
} }
// 2. Самый дешевый аналог (только среди аналогов) // 2. Самый дешевый аналог (только среди аналогов) - всегда показываем если есть аналоги
const analogOffers = validOffers.filter(offer => offer.isAnalog); const analogOffers = validOffers.filter(offer => offer.isAnalog);
if (analogOffers.length > 0) { if (analogOffers.length > 0) {
const cheapestAnalogOffer = [...analogOffers].sort((a, b) => a.price - b.price)[0]; const cheapestAnalogOffer = [...analogOffers].sort((a, b) => a.price - b.price)[0];
const analogId = `${cheapestAnalogOffer.articleNumber}-${cheapestAnalogOffer.price}-${cheapestAnalogOffer.deliveryDuration}`;
if (!usedOfferIds.has(analogId)) {
result.push({ offer: cheapestAnalogOffer, type: 'Самый дешевый аналог' }); result.push({ offer: cheapestAnalogOffer, type: 'Самый дешевый аналог' });
usedOfferIds.add(analogId);
}
} }
// 3. Самая быстрая доставка (среди всех предложений) // 3. Самая быстрая доставка (среди всех предложений)
const fastestDeliveryOffer = [...validOffers].sort((a, b) => a.deliveryDuration - b.deliveryDuration)[0]; const fastestDeliveryOffer = [...validOffers].sort((a, b) => a.deliveryDuration - b.deliveryDuration)[0];
if (fastestDeliveryOffer) { if (fastestDeliveryOffer) {
const fastestId = `${fastestDeliveryOffer.articleNumber}-${fastestDeliveryOffer.price}-${fastestDeliveryOffer.deliveryDuration}`;
if (!usedOfferIds.has(fastestId)) {
result.push({ offer: fastestDeliveryOffer, type: 'Самая быстрая доставка' }); result.push({ offer: fastestDeliveryOffer, type: 'Самая быстрая доставка' });
} }
}
return result; return result;
}; };
@ -376,7 +354,101 @@ export default function SearchResult() {
const hasOffers = result && (result.internalOffers.length > 0 || result.externalOffers.length > 0); const hasOffers = result && (result.internalOffers.length > 0 || result.externalOffers.length > 0);
const hasAnalogs = result && result.analogs.length > 0; const hasAnalogs = result && result.analogs.length > 0;
const searchResultFilters = createFilters(result, loadedAnalogs);
// Создаем динамические фильтры на основе доступных данных с учетом активных фильтров
const searchResultFilters = useMemo(() => {
const baseFilters = createFilters(result, loadedAnalogs);
// Если нет активных фильтров, возвращаем базовые фильтры
if (!filtersAreActive) {
return baseFilters;
}
// Создаем динамические фильтры с учетом других активных фильтров
return baseFilters.map(filter => {
if (filter.type !== 'range') {
return filter;
}
// Для каждого диапазонного фильтра пересчитываем границы на основе
// предложений, отфильтрованных другими фильтрами (исключая текущий)
let relevantOffers = allOffers;
// Применяем все фильтры кроме текущего
relevantOffers = allOffers.filter(offer => {
// Фильтр по бренду (если это не фильтр производителя)
if (filter.title !== 'Производитель' && selectedBrands.length > 0 && !selectedBrands.includes(offer.brand)) {
return false;
}
// Фильтр по цене (если это не фильтр цены)
if (filter.title !== 'Цена (₽)' && priceRange && (offer.price < priceRange[0] || offer.price > priceRange[1])) {
return false;
}
// Фильтр по сроку доставки (если это не фильтр доставки)
if (filter.title !== 'Срок доставки (дни)' && deliveryRange) {
const deliveryDays = offer.deliveryDuration;
if (deliveryDays < deliveryRange[0] || deliveryDays > deliveryRange[1]) {
return false;
}
}
// Фильтр по количеству (если это не фильтр количества)
if (filter.title !== 'Количество (шт.)' && quantityRange) {
const quantity = offer.quantity;
if (quantity < quantityRange[0] || quantity > quantityRange[1]) {
return false;
}
}
// Фильтр по поисковой строке
if (filterSearchTerm) {
const searchTerm = filterSearchTerm.toLowerCase();
const brandMatch = offer.brand.toLowerCase().includes(searchTerm);
const articleMatch = offer.articleNumber.toLowerCase().includes(searchTerm);
const nameMatch = offer.name.toLowerCase().includes(searchTerm);
if (!brandMatch && !articleMatch && !nameMatch) {
return false;
}
}
return true;
});
// Пересчитываем диапазон на основе отфильтрованных предложений
if (filter.title === 'Цена (₽)') {
const prices = relevantOffers.filter(o => o.price > 0).map(o => o.price);
if (prices.length > 0) {
return {
...filter,
min: Math.floor(Math.min(...prices)),
max: Math.ceil(Math.max(...prices))
};
}
} else if (filter.title === 'Срок доставки (дни)') {
const deliveryDays = relevantOffers
.map(o => o.deliveryDuration)
.filter(d => d && d > 0);
if (deliveryDays.length > 0) {
return {
...filter,
min: Math.min(...deliveryDays),
max: Math.max(...deliveryDays)
};
}
} else if (filter.title === 'Количество (шт.)') {
const quantities = relevantOffers
.map(o => o.quantity)
.filter(q => q && q > 0);
if (quantities.length > 0) {
return {
...filter,
min: Math.min(...quantities),
max: Math.max(...quantities)
};
}
}
return filter;
});
}, [result, loadedAnalogs, filtersAreActive, allOffers, selectedBrands, priceRange, deliveryRange, quantityRange, filterSearchTerm]);
const bestOffersData = getBestOffers(filteredOffers); const bestOffersData = getBestOffers(filteredOffers);
@ -406,6 +478,8 @@ export default function SearchResult() {
} }
}, [q, article, router.query]); }, [q, article, router.query]);
// Удаляем старую заглушку - теперь обрабатываем все типы поиска // Удаляем старую заглушку - теперь обрабатываем все типы поиска
const minPrice = useMemo(() => { const minPrice = useMemo(() => {
@ -459,7 +533,7 @@ export default function SearchResult() {
offersCount={result ? result.totalOffers : 0} offersCount={result ? result.totalOffers : 0}
minPrice={minPrice} minPrice={minPrice}
/> />
<section className="main"> <section className="main mobile-only">
<div className="w-layout-blockcontainer container w-container"> <div className="w-layout-blockcontainer container w-container">
<div className="w-layout-hflex flex-block-84"> <div className="w-layout-hflex flex-block-84">
{/* <CatalogSortDropdown active={sortActive} onChange={setSortActive} /> */} {/* <CatalogSortDropdown active={sortActive} onChange={setSortActive} /> */}
@ -551,7 +625,7 @@ export default function SearchResult() {
<div className="w-layout-blockcontainer container w-container"> <div className="w-layout-blockcontainer container w-container">
<div className="w-layout-hflex flex-block-13-copy"> <div className="w-layout-hflex flex-block-13-copy">
{/* Фильтры для десктопа */} {/* Фильтры для десктопа */}
<div style={{ width: '300px', marginRight: '20px' }}> <div style={{ width: '300px', marginRight: '20px', marginBottom: '80px' }}>
<Filters <Filters
filters={searchResultFilters} filters={searchResultFilters}
onFilterChange={handleFilterChange} onFilterChange={handleFilterChange}
@ -578,9 +652,8 @@ export default function SearchResult() {
return null; return null;
} }
// Используем фотографию из Parts Index, если она есть, иначе fallback на mainImageUrl // Используем фотографию только из Parts Index, если она есть
const partsIndexImage = entityInfo?.images?.[0]; const partsIndexImage = entityInfo?.images?.[0];
const displayImage = partsIndexImage || mainImageUrl;
return ( return (
<> <>
@ -588,7 +661,7 @@ export default function SearchResult() {
brand={result.brand} brand={result.brand}
article={result.articleNumber} article={result.articleNumber}
name={result.name} name={result.name}
image={displayImage} {...(partsIndexImage ? { image: partsIndexImage } : {})}
offers={mainProductOffers} offers={mainProductOffers}
showMoreText={mainProductOffers.length < filteredOffers.filter(o => !o.isAnalog).length ? "Показать еще" : undefined} showMoreText={mainProductOffers.length < filteredOffers.filter(o => !o.isAnalog).length ? "Показать еще" : undefined}
partsIndexPowered={!!partsIndexImage} partsIndexPowered={!!partsIndexImage}

4
src/pages/search.tsx
View File

@ -199,7 +199,7 @@ const SearchPage = () => {
<div key={detail.detailid || index}> <div key={detail.detailid || index}>
<button <button
onClick={() => handlePartDetail(detail)} onClick={() => handlePartDetail(detail)}
className="w-full text-left p-4 hover:bg-gray-50 transition-colors block group" className="w-full text-left p-4 hover:bg-slate-200 transition-colors block group"
> >
<div className="flex w-full items-center gap-2"> <div className="flex w-full items-center gap-2">
<div className="w-1/5 max-md:w-1/3 font-bold text-left truncate" style={{ color: 'rgb(77, 180, 94)' }}>{detail.manufacturer}</div> <div className="w-1/5 max-md:w-1/3 font-bold text-left truncate" style={{ color: 'rgb(77, 180, 94)' }}>{detail.manufacturer}</div>
@ -252,7 +252,7 @@ const SearchPage = () => {
{vehiclesResult!.catalogs.map((catalog) => ( {vehiclesResult!.catalogs.map((catalog) => (
<tr <tr
key={catalog.catalogCode} key={catalog.catalogCode}
className="hover:bg-gray-50 cursor-pointer transition-colors" className="hover:bg-slate-200 cursor-pointer transition-colors"
onClick={() => { onClick={() => {
router.push(`/search-result?article=${encodeURIComponent(searchQuery)}&brand=${encodeURIComponent(catalog.brand)}`); router.push(`/search-result?article=${encodeURIComponent(searchQuery)}&brand=${encodeURIComponent(catalog.brand)}`);
}} }}

81
src/pages/vehicle-search/[brand]/[vehicleId].tsx
View File

@ -74,6 +74,8 @@ const VehicleDetailsPage = () => {
}); });
const [selectedNode, setSelectedNode] = useState<any | null>(null); const [selectedNode, setSelectedNode] = useState<any | null>(null);
const [selectedQuickGroup, setSelectedQuickGroup] = useState<any | null>(null); const [selectedQuickGroup, setSelectedQuickGroup] = useState<any | null>(null);
const [selectedParts, setSelectedParts] = useState<Set<string | number>>(new Set());
const [highlightedPart, setHighlightedPart] = useState<string | number | null>(null);
// Получаем информацию о выбранном автомобиле // Получаем информацию о выбранном автомобиле
const ssdFromQuery = Array.isArray(router.query.ssd) ? router.query.ssd[0] : router.query.ssd; const ssdFromQuery = Array.isArray(router.query.ssd) ? router.query.ssd[0] : router.query.ssd;
@ -138,6 +140,20 @@ const VehicleDetailsPage = () => {
); );
// Получаем детали выбранного узла, если он выбран // Получаем детали выбранного узла, если он выбран
console.log('🔍 [vehicleId].tsx - Проверка условий для GET_LAXIMO_UNIT_DETAILS:', {
selectedNode: selectedNode ? {
unitid: selectedNode.unitid,
name: selectedNode.name,
hasSsd: !!selectedNode.ssd
} : null,
skipCondition: !selectedNode,
catalogCode: selectedNode?.catalogCode || selectedNode?.catalog || brand,
vehicleId: selectedNode?.vehicleId || vehicleId,
unitId: selectedNode?.unitid || selectedNode?.unitId,
ssd: selectedNode?.ssd || finalSsd || '',
finalSsd: finalSsd ? `${finalSsd.substring(0, 50)}...` : 'отсутствует'
});
const { const {
data: unitDetailsData, data: unitDetailsData,
loading: unitDetailsLoading, loading: unitDetailsLoading,
@ -155,6 +171,23 @@ const VehicleDetailsPage = () => {
: { catalogCode: '', vehicleId: '', unitId: '', ssd: '' }, : { catalogCode: '', vehicleId: '', unitId: '', ssd: '' },
skip: !selectedNode, skip: !selectedNode,
errorPolicy: 'all', errorPolicy: 'all',
fetchPolicy: 'no-cache',
notifyOnNetworkStatusChange: true,
onCompleted: (data) => {
console.log('🔍 [vehicleId].tsx - GET_LAXIMO_UNIT_DETAILS completed:', {
detailsCount: data?.laximoUnitDetails?.length || 0,
firstDetail: data?.laximoUnitDetails?.[0],
allDetails: data?.laximoUnitDetails?.map((detail: any) => ({
name: detail.name,
oem: detail.oem,
codeonimage: detail.codeonimage,
attributesCount: detail.attributes?.length || 0
}))
});
},
onError: (error) => {
console.error('❌ [vehicleId].tsx - GET_LAXIMO_UNIT_DETAILS error:', error);
}
} }
); );
@ -234,6 +267,22 @@ const VehicleDetailsPage = () => {
const unitDetails = unitDetailsData?.laximoUnitDetails || []; const unitDetails = unitDetailsData?.laximoUnitDetails || [];
// Детальное логирование данных от API
React.useEffect(() => {
if (unitDetailsData?.laximoUnitDetails) {
console.log('🔍 [vehicleId].tsx - Полные данные unitDetails от API:', {
totalParts: unitDetailsData.laximoUnitDetails.length,
firstPart: unitDetailsData.laximoUnitDetails[0],
allCodeOnImages: unitDetailsData.laximoUnitDetails.map((part: any) => ({
name: part.name,
codeonimage: part.codeonimage,
detailid: part.detailid,
oem: part.oem
}))
});
}
}, [unitDetailsData]);
// Логируем ошибки // Логируем ошибки
if (vehicleError) { if (vehicleError) {
console.error('Vehicle GraphQL error:', vehicleError); console.error('Vehicle GraphQL error:', vehicleError);
@ -382,6 +431,9 @@ const VehicleDetailsPage = () => {
}); });
setSelectedNode(node); setSelectedNode(node);
// Сброс состояния выбранных деталей при открытии нового узла
setSelectedParts(new Set());
setHighlightedPart(null);
router.push( router.push(
{ pathname: router.pathname, query: { ...router.query, unitid: node.unitid || node.id } }, { pathname: router.pathname, query: { ...router.query, unitid: node.unitid || node.id } },
undefined, undefined,
@ -391,6 +443,9 @@ const VehicleDetailsPage = () => {
// Закрыть KnotIn и удалить unitid из URL // Закрыть KnotIn и удалить unitid из URL
const closeKnot = () => { const closeKnot = () => {
setSelectedNode(null); setSelectedNode(null);
// Сброс состояния выбранных деталей при закрытии узла
setSelectedParts(new Set());
setHighlightedPart(null);
const { unitid, ...rest } = router.query; const { unitid, ...rest } = router.query;
router.push( router.push(
{ pathname: router.pathname, query: rest }, { pathname: router.pathname, query: rest },
@ -399,6 +454,25 @@ const VehicleDetailsPage = () => {
); );
}; };
// Обработчик выбора детали (множественный выбор)
const handlePartSelect = (codeOnImage: string | number | null) => {
if (codeOnImage === null) return; // Игнорируем null значения
setSelectedParts(prev => {
const newSet = new Set(prev);
if (newSet.has(codeOnImage)) {
newSet.delete(codeOnImage); // Убираем если уже выбрана
} else {
newSet.add(codeOnImage); // Добавляем если не выбрана
}
return newSet;
});
};
// Обработчик подсветки детали при наведении
const handlePartHighlight = (codeOnImage: string | number | null) => {
setHighlightedPart(codeOnImage);
};
return ( return (
<> <>
<MetaTags {...metaData} /> <MetaTags {...metaData} />
@ -551,6 +625,9 @@ const VehicleDetailsPage = () => {
unitId={selectedNode.unitid} unitId={selectedNode.unitid}
unitName={selectedNode.name} unitName={selectedNode.name}
parts={unitDetails} parts={unitDetails}
onPartSelect={handlePartSelect}
onPartsHighlight={handlePartHighlight}
selectedParts={selectedParts}
/> />
{unitDetailsLoading ? ( {unitDetailsLoading ? (
<div style={{ padding: 24, textAlign: 'center' }}>Загружаем детали узла...</div> <div style={{ padding: 24, textAlign: 'center' }}>Загружаем детали узла...</div>
@ -561,6 +638,10 @@ const VehicleDetailsPage = () => {
parts={unitDetails} parts={unitDetails}
catalogCode={vehicleInfo.catalog} catalogCode={vehicleInfo.catalog}
vehicleId={vehicleInfo.vehicleid} vehicleId={vehicleInfo.vehicleid}
highlightedCodeOnImage={highlightedPart}
selectedParts={selectedParts}
onPartSelect={handlePartSelect}
onPartHover={handlePartHighlight}
/> />
) : ( ) : (
<div style={{ padding: 24, textAlign: 'center' }}>Детали не найдены</div> <div style={{ padding: 24, textAlign: 'center' }}>Детали не найдены</div>

34
src/pages/vehicle-search/[brand]/[vehicleId]/part/[oemNumber]/brands.tsx
View File

@ -11,11 +11,15 @@ import MetaTags from '@/components/MetaTags';
import { getMetaByPath } from '@/lib/meta-config'; import { getMetaByPath } from '@/lib/meta-config';
const InfoBrandSelection = ({ const InfoBrandSelection = ({
brand,
brandName, brandName,
vehicleId,
oemNumber, oemNumber,
detailName detailName
}: { }: {
brand: string;
brandName: string; brandName: string;
vehicleId: string;
oemNumber: string; oemNumber: string;
detailName?: string; detailName?: string;
}) => ( }) => (
@ -27,20 +31,22 @@ const InfoBrandSelection = ({
<div>Главная</div> <div>Главная</div>
</a> </a>
<div className="text-block-3">→</div> <div className="text-block-3">→</div>
<a href="#" className="link-block-2 w-inline-block"> <a href="#" className="link-block w-inline-block">
<div>Каталог</div> <div>Каталог</div>
</a> </a>
<div className="text-block-3">→</div> <div className="text-block-3">→</div>
<a href={`/vehicle-search/${brand}/${vehicleId}`} className="link-block w-inline-block">
<div>{brandName}</div> <div>{brandName}</div>
</a>
<div className="text-block-3">→</div> <div className="text-block-3">→</div>
<a href="#" className="link-block-2 w-inline-block">
<div>Деталь {oemNumber}</div> <div>Деталь {oemNumber}</div>
<div className="text-block-3">→</div> </a>
<div>Выбор производителя</div>
</div>
<div className="w-layout-hflex flex-block-8">
<div className="w-layout-hflex flex-block-10">
<h1 className="heading">Выберите производителя для {oemNumber}</h1>
</div> </div>
<div className="link-block w-inline-block">
<div className="heading">Выберите производителя для {oemNumber}</div>
</div> </div>
</div> </div>
</div> </div>
@ -123,15 +129,17 @@ const BrandSelectionPage = () => {
<> <>
<MetaTags {...metaData} /> <MetaTags {...metaData} />
<InfoBrandSelection <InfoBrandSelection
brand={String(brand)}
brandName={catalogInfo?.name || String(brand)} brandName={catalogInfo?.name || String(brand)}
vehicleId={String(vehicleId)}
oemNumber={String(oemNumber)} oemNumber={String(oemNumber)}
detailName={String(detailName || '')} detailName={String(detailName || '')}
/> />
<div className="page-wrapper bg-[#F5F8FB] min-h-screen"> <div className="page-wrapper bg-[#F5F8FB] min-h-screen">
<div className="w-full max-w-[1580px] mx-auto px-8 max-md:px-5 pt-10 pb-16"> <div className="mx-auto px-8 max-md:px-5 pt-10 pb-16 ">
{/* Кнопка назад */} {/* Кнопка назад */}
<div className="mb-6"> {/* <div className="mb-6">
<button <button
onClick={handleBack} onClick={handleBack}
className="flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors" className="flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors"
@ -141,7 +149,7 @@ const BrandSelectionPage = () => {
</svg> </svg>
Назад к деталям Назад к деталям
</button> </button>
</div> </div> */}
{/* Обработка ошибок */} {/* Обработка ошибок */}
{hasError && !loading && ( {hasError && !loading && (
@ -187,8 +195,8 @@ const BrandSelectionPage = () => {
</p> </p>
</div> </div>
) : brands.length > 0 && ( ) : brands.length > 0 && (
<div className="bg-white rounded-2xl shadow p-10"> <div className="bg-white rounded-2xl shadow p-10 w-full max-w-[1580px] mx-auto min-h-[500px]">
<div className="border-b border-gray-200 pb-4"> {/* <div className="border-b border-gray-200 pb-4">
<h2 className="text-xl font-semibold text-gray-900"> <h2 className="text-xl font-semibold text-gray-900">
Выбор производителя для артикула: {oemNumber} Выбор производителя для артикула: {oemNumber}
</h2> </h2>
@ -196,7 +204,7 @@ const BrandSelectionPage = () => {
{detailName && <span>Деталь: {detailName} • </span>} {detailName && <span>Деталь: {detailName} • </span>}
Найдено производителей: <span className="font-medium">{brands.length}</span> Найдено производителей: <span className="font-medium">{brands.length}</span>
</p> </p>
</div> </div> */}
<div className="divide-y divide-gray-200"> <div className="divide-y divide-gray-200">
{brands.map((brandItem: any, index: number) => ( {brands.map((brandItem: any, index: number) => (
<div key={index}> <div key={index}>

277
src/styles/globals.css
View File

@ -101,3 +101,280 @@ input[type=number] {
.cookie-consent-enter { .cookie-consent-enter {
animation: slideInFromBottom 0.3s ease-out; animation: slideInFromBottom 0.3s ease-out;
} }
/* Анимации для тултипов */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes zoomIn {
from {
transform: scale(0.95);
}
to {
transform: scale(1);
}
}
.animate-in {
animation-fill-mode: both;
}
.fade-in-0 {
animation-name: fadeIn;
}
.zoom-in-95 {
animation-name: zoomIn;
}
.duration-200 {
animation-duration: 200ms;
}
/* Стили для кнопок с курсором pointer */
button,
.cursor-pointer,
[role="button"] {
cursor: pointer;
}
/* ===== СОВРЕМЕННЫЕ СТИЛИ ДЛЯ КРАСИВОГО ТУЛТИПА ===== */
.tooltip-detail-modern {
animation: tooltip-modern-fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.15));
}
.tooltip-content-modern {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border: 1px solid #e2e8f0;
border-radius: 16px;
overflow: hidden;
max-width: 420px;
min-width: 280px;
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
position: relative;
}
.tooltip-arrow {
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 12px;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border: 1px solid #e2e8f0;
border-bottom: none;
border-right: none;
transform: translateX(-50%) rotate(45deg);
z-index: 1;
}
.tooltip-header-modern {
background: linear-gradient(135deg, #EC1C24 0%, #DC1C24 100%);
padding: 16px 20px;
display: flex;
align-items: flex-start;
gap: 12px;
position: relative;
}
.tooltip-header-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
pointer-events: none;
}
.tooltip-icon {
color: white;
opacity: 0.9;
flex-shrink: 0;
margin-top: 2px;
}
.tooltip-title-section {
flex: 1;
min-width: 0;
}
.tooltip-title {
margin: 0 0 8px 0;
font-size: 16px;
font-weight: 600;
color: white;
line-height: 1.3;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.tooltip-oem-badge {
display: inline-flex;
align-items: center;
background: rgba(255, 255, 255, 0.15);
border-radius: 6px;
padding: 4px 8px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.tooltip-oem-label {
font-size: 10px;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-right: 6px;
}
.tooltip-oem-value {
font-size: 12px;
font-weight: 600;
color: white;
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}
.tooltip-body-modern {
padding: 20px;
}
.tooltip-section-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: #374151;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 2px solid #f1f5f9;
}
.tooltip-section-title svg {
color: #EC1C24;
}
.tooltip-attributes-grid {
display: grid;
gap: 8px;
}
.tooltip-attribute-item {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 10px 12px;
transition: all 0.2s ease;
}
.tooltip-attribute-item:hover {
background: #f1f5f9;
border-color: #cbd5e1;
transform: translateY(-1px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.tooltip-attribute-key {
font-size: 12px;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.tooltip-attribute-value {
font-size: 14px;
font-weight: 500;
color: #1e293b;
line-height: 1.4;
}
.tooltip-note-modern {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #e2e8f0;
}
.tooltip-note-text {
background: #fef3c7;
border: 1px solid #fbbf24;
border-radius: 8px;
padding: 12px;
font-size: 13px;
color: #92400e;
line-height: 1.5;
margin-top: 8px;
}
.tooltip-no-data {
display: flex;
flex-direction: column;
align-items: center;
padding: 24px 16px;
text-align: center;
}
.tooltip-no-data-icon {
color: #94a3b8;
margin-bottom: 12px;
opacity: 0.7;
}
.tooltip-no-data-text {
color: #64748b;
font-size: 14px;
line-height: 1.4;
}
.tooltip-no-data-text div:first-child {
font-weight: 500;
margin-bottom: 2px;
}
.tooltip-no-data-text div:last-child {
opacity: 0.8;
}
@keyframes tooltip-modern-fade-in {
from {
opacity: 0;
transform: scale(0.95) translateY(-10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* Адаптивность для мобильных устройств */
@media (max-width: 480px) {
.tooltip-content-modern {
max-width: 320px;
min-width: 260px;
}
.tooltip-header-modern {
padding: 14px 16px;
}
.tooltip-body-modern {
padding: 16px;
}
.tooltip-title {
font-size: 15px;
}
}

117
src/styles/my.css
View File

@ -45,6 +45,14 @@
display: none !important; display: none !important;
} }
.price-in-cart-s1 {
max-width: 140px;
}
input.text-block-31 { input.text-block-31 {
background: none !important; background: none !important;
} }
@ -440,6 +448,12 @@ input#VinSearchInput {
} }
.w-input {
border-radius: 8px !important;
}
.text-block-56, .dropdown-link-3 { .text-block-56, .dropdown-link-3 {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -600,6 +614,16 @@ body {
font-family: Onest, sans-serif; font-family: Onest, sans-serif;
} }
.heading{
font-size: 28px;
}
a.link-block.w-inline-block,
a.link-block-2.w-inline-block {
font-size: 12px;
}
.menu-button.w--open { .menu-button.w--open {
z-index: 2000; z-index: 2000;
@ -877,3 +901,96 @@ body {
} }
} }
.topmenub[style*='#fff'] .link-block-8 {
border: 1px solid #E6EDF6 !important;
transition: border-color 0.2s;
}
.topmenub-white .link-block-8 {
border: 1px solid #E6EDF6 !important;
border-radius: 8px;
transition: border-color 0.2s;
}
.container.info {
padding-top: 5px !important;
padding-bottom: 20px !important;
}
.carousel-row {
display: flex;
align-items: center;
position: relative;
gap: 12px;
width: 100%;
}
.carousel-arrow {
background: none;
border: none;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
transition: opacity 0.2s;
opacity: 0.85;
z-index: 2;
}
.carousel-arrow:active {
opacity: 0.6;
}
.carousel-arrow[disabled] {
opacity: 0.3;
pointer-events: none;
}
.carousel-arrow-left {
margin-right: 4px;
}
.carousel-arrow-right {
margin-left: 4px;
}
.carousel-scroll {
overflow-x: auto;
overflow-y: visible;
scroll-behavior: smooth;
display: flex;
gap: 24px;
flex: 1 1 auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE и Edge */
}
.carousel-scroll::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
@media (max-width: 991px) {
.carousel-scroll {
gap: 12px;
}
.carousel-row {
gap: 4px;
}
}
@media (max-width: 767px) {
.carousel-arrow {
display: none !important;
}
}
.mobile-only {
display: block;
}
@media (min-width: 768px) {
.mobile-only {
display: none !important;
}
}