Compare commits
4 Commits
3e98f8fed6
...
сonfidenti
| Author | SHA1 | Date | |
|---|---|---|---|
| ea76106caa | |||
| 27d378154f | |||
| 5fd2cf1b8c | |||
| 2703137ca1 |
BIN
public/images/noimage.png
Normal file
BIN
public/images/noimage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
@ -312,9 +312,9 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
|
||||
<img src="/images/info.svg" loading="lazy" alt="info" className="image-9" />
|
||||
</div>
|
||||
<div className="w-layout-vflex flex-block-50">
|
||||
<div className="w-layout-hflex flex-block-79">
|
||||
<h3 className="heading-10 name">{brand}</h3>
|
||||
<h3 className="heading-10">{article}</h3>
|
||||
<div className="flex flex-row flex-nowrap items-center gap-2">
|
||||
<h3 className="heading-10 name" style={{marginRight: 8}}>{brand}</h3>
|
||||
<h3 className="heading-10" style={{marginRight: 8}}>{article}</h3>
|
||||
<div
|
||||
className="favorite-icon w-embed"
|
||||
onClick={handleFavoriteClick}
|
||||
@ -328,7 +328,7 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-block-21">{name}</div>
|
||||
<div className="text-block-21 mt-1">{name}</div>
|
||||
</div>
|
||||
</div>
|
||||
{image && (
|
||||
|
||||
@ -115,7 +115,7 @@ const Footer = () => (
|
||||
<button className="bg-[#23407A] rounded-lg py-2 px-6 font-medium mt-1 mb-2">Напиши нам</button>
|
||||
</div>
|
||||
{/* Центр: меню */}
|
||||
<div className="hidden md:flex flex-1 flex-wrap gap-10 justify-center min-w-[400px]">
|
||||
<div className="hidden md:flex flex-1 flex-wrap gap-30 justify-center min-w-[400px]">
|
||||
<div className="flex flex-col gap-3 min-w-[150px]">
|
||||
<div className="link">Подбор по марке авто</div>
|
||||
<a href="#" className="link">Поиск по VIN</a>
|
||||
@ -178,7 +178,7 @@ const Footer = () => (
|
||||
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex flex-col items-center md:flex-row md:items-start md:justify-center flex-1 flex-wrap gap-4 md:gap-20 md:mt-6 md:min-w-[400px]">
|
||||
<div className="flex flex-col items-center md:flex-row md:items-start md:justify-center flex-1 flex-wrap gap-4 md:gap-37 md:mt-6 md:min-w-[400px]">
|
||||
<a href="#" className=" hover:underline text-xs opacity-70 text-center md:w-auto md:text-left">Политика конфиденциальности</a>
|
||||
|
||||
<a href="#" className=" hover:underline text-xs opacity-70 text-center md:w-auto md:text-left">Согласие на обработку персональных данных</a>
|
||||
|
||||
@ -38,7 +38,7 @@ const SearchHistoryDropdown: React.FC<SearchHistoryDropdownProps> = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="absolute top-full left-0 right-0 bg-white border border-gray-200 rounded-lg shadow-lg mt-2 z-50 max-h-60 overflow-y-auto">
|
||||
<div className="search-history-dropdown-custom">
|
||||
{loading ? (
|
||||
<div className="p-4 text-center text-gray-500">
|
||||
<div className="flex items-center justify-center">
|
||||
@ -51,32 +51,24 @@ const SearchHistoryDropdown: React.FC<SearchHistoryDropdownProps> = ({
|
||||
</div>
|
||||
) : uniqueQueries.length > 0 ? (
|
||||
<>
|
||||
<div className="p-3 border-b border-gray-100">
|
||||
<h3 className="text-xs font-medium text-gray-500 uppercase tracking-wide">
|
||||
Последние запросы
|
||||
</h3>
|
||||
</div>
|
||||
{uniqueQueries.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => onItemClick(item.searchQuery)}
|
||||
className="w-full text-left p-3 hover:bg-gray-50 border-b border-gray-100 last:border-b-0 transition-colors cursor-pointer"
|
||||
className="search-history-item-custom"
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">
|
||||
{item.searchQuery}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
{getSearchTypeLabel(item.searchType)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="ml-2 flex-shrink-0">
|
||||
<svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="search-history-icon-custom">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M12 8v4l3 3" />
|
||||
</svg>
|
||||
</div>
|
||||
</span>
|
||||
<span className="search-history-inline">
|
||||
<span className="search-history-query-custom">{item.searchQuery}</span>
|
||||
<span className="search-history-type-custom">{getSearchTypeLabel(item.searchType)}</span>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
@ -86,6 +78,91 @@ const SearchHistoryDropdown: React.FC<SearchHistoryDropdownProps> = ({
|
||||
<p className="text-sm">История поиска пуста</p>
|
||||
</div>
|
||||
)}
|
||||
<style>{`
|
||||
.search-history-dropdown-custom {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 32px rgba(44,62,80,0.10), 0 1.5px 4px rgba(44,62,80,0.08);
|
||||
margin-top: 12px;
|
||||
z-index: 50;
|
||||
max-height: 260px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #f0f0f0;
|
||||
padding: 6px 0;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE и Edge */
|
||||
}
|
||||
.search-history-dropdown-custom::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari, Opera */
|
||||
}
|
||||
.search-history-item-custom {
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 12px 20px;
|
||||
border-radius: 0;
|
||||
transition: background 0.18s;
|
||||
display: block;
|
||||
}
|
||||
.search-history-item-custom:hover, .search-history-item-custom:focus {
|
||||
background: #e5e7eb;
|
||||
}
|
||||
.search-history-item-custom .flex {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.search-history-icon-custom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: #f3f4f6;
|
||||
color: #222;
|
||||
flex-shrink: 0;
|
||||
margin-left: 12px;
|
||||
margin-right: 0;
|
||||
}
|
||||
.search-history-item-custom:hover .search-history-icon-custom,
|
||||
.search-history-item-custom:focus .search-history-icon-custom {
|
||||
background: #ec1c24;
|
||||
color: #fff;
|
||||
}
|
||||
.search-history-inline {
|
||||
display: flex;
|
||||
flex: 1 1 0%;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.search-history-query-custom {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #222;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.01em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1 1 0%;
|
||||
min-width: 0;
|
||||
}
|
||||
.search-history-type-custom {
|
||||
font-size: 12px;
|
||||
color: #8e9aac;
|
||||
margin: 0 0 0 8px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -111,12 +111,62 @@ const BestPriceSection: React.FC = () => {
|
||||
<div className="text-block-58">Подборка лучших предложенийпо цене</div>
|
||||
<a href="#" className="button-24 w-button">Показать все</a>
|
||||
</div>
|
||||
<div className="carousel-row">
|
||||
<div className="carousel-row" style={{ position: 'relative' }}>
|
||||
{/* Стили для стрелок как в ProductOfDayBanner, но без абсолютного позиционирования */}
|
||||
<style>{`
|
||||
.carousel-arrow {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s;
|
||||
cursor: pointer;
|
||||
margin: 0 8px;
|
||||
}
|
||||
.carousel-arrow-left {}
|
||||
.carousel-arrow-right {}
|
||||
.carousel-arrow .arrow-circle {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.85);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.carousel-arrow:hover .arrow-circle,
|
||||
.carousel-arrow:focus .arrow-circle {
|
||||
background: #ec1c24;
|
||||
}
|
||||
.carousel-arrow .arrow-svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
transition: stroke 0.2s;
|
||||
stroke: #222;
|
||||
}
|
||||
.carousel-arrow:hover .arrow-svg,
|
||||
.carousel-arrow:focus .arrow-svg {
|
||||
stroke: #fff;
|
||||
}
|
||||
.carousel-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
`}</style>
|
||||
<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>
|
||||
<span className="arrow-circle">
|
||||
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6673 10H3.33398M3.33398 10L8.33398 5M3.33398 10L8.33398 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<div className="w-layout-hflex flex-block-121 carousel-scroll" ref={scrollRef}>
|
||||
{bestPriceItems.map((item, i) => (
|
||||
@ -124,10 +174,11 @@ const BestPriceSection: React.FC = () => {
|
||||
))}
|
||||
</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>
|
||||
<span className="arrow-circle">
|
||||
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.33398 10H16.6673M16.6673 10L11.6673 5M16.6673 10L11.6673 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,138 +3,69 @@ import { useQuery } from '@apollo/client';
|
||||
import { GET_PARTSINDEX_CATEGORIES } from '@/lib/graphql';
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
interface PartsIndexCatalog {
|
||||
interface CategoryNavItem {
|
||||
id: string;
|
||||
name: string;
|
||||
image?: string;
|
||||
groups?: PartsIndexGroup[];
|
||||
}
|
||||
|
||||
interface PartsIndexGroup {
|
||||
id: string;
|
||||
name: string;
|
||||
image?: string;
|
||||
subgroups?: PartsIndexSubgroup[];
|
||||
entityNames?: { id: string; name: string }[];
|
||||
}
|
||||
|
||||
interface PartsIndexSubgroup {
|
||||
id: string;
|
||||
name: string;
|
||||
image?: string;
|
||||
entityNames?: { id: string; name: string }[];
|
||||
}
|
||||
const FALLBACK_CATEGORIES: CategoryNavItem[] = [
|
||||
{ id: '1', name: 'Детали для ТО', image: '/images/catalog_item.png' },
|
||||
{ id: '2', name: 'Шины', image: '/images/catalog_item2.png' },
|
||||
{ id: '3', name: 'Диски', image: '/images/catalog_item3.png' },
|
||||
{ id: '4', name: 'Масла и жидкости', image: '/images/catalog_item4.png' },
|
||||
{ id: '5', name: 'Инструменты', image: '/images/catalog_item5.png' },
|
||||
{ id: '6', name: 'Автохимия', image: '/images/catalog_item6.png' },
|
||||
{ id: '7', name: 'Аксессуары', image: '/images/catalog_item7.png' },
|
||||
{ id: '8', name: 'Электрика', image: '/images/catalog_item8.png' },
|
||||
{ id: '9', name: 'АКБ', image: '/images/catalog_item9.png' },
|
||||
];
|
||||
|
||||
const CategoryNavSection: React.FC = () => {
|
||||
const router = useRouter();
|
||||
|
||||
const { data, loading, error } = useQuery<{ partsIndexCategoriesWithGroups: PartsIndexCatalog[] }>(
|
||||
|
||||
const { data } = useQuery<{ partsIndexCategoriesWithGroups: CategoryNavItem[] }>(
|
||||
GET_PARTSINDEX_CATEGORIES,
|
||||
{
|
||||
variables: {
|
||||
lang: 'ru'
|
||||
},
|
||||
variables: { lang: 'ru' },
|
||||
errorPolicy: 'all',
|
||||
fetchPolicy: 'cache-first'
|
||||
fetchPolicy: 'cache-first',
|
||||
}
|
||||
);
|
||||
|
||||
// Обработчик клика по категории для перехода в каталог с товарами
|
||||
const handleCategoryClick = (catalog: PartsIndexCatalog) => {
|
||||
console.log('🔍 Клик по категории:', { catalogId: catalog.id, categoryName: catalog.name });
|
||||
|
||||
// Получаем первую группу для groupId (это правильный ID для partsIndexCategory)
|
||||
const firstGroup = catalog.groups?.[0];
|
||||
const groupId = firstGroup?.id;
|
||||
|
||||
console.log('🔍 Найденная группа:', { groupId, groupName: firstGroup?.name });
|
||||
|
||||
// Переходим на страницу каталога с параметрами PartsIndex
|
||||
const categories = (data?.partsIndexCategoriesWithGroups && data.partsIndexCategoriesWithGroups.length > 0)
|
||||
? data.partsIndexCategoriesWithGroups.slice(0, 9)
|
||||
: FALLBACK_CATEGORIES;
|
||||
|
||||
const handleCategoryClick = (category: CategoryNavItem) => {
|
||||
router.push({
|
||||
pathname: '/catalog',
|
||||
query: {
|
||||
partsIndexCatalog: catalog.id,
|
||||
categoryName: encodeURIComponent(catalog.name),
|
||||
...(groupId && { partsIndexCategory: groupId })
|
||||
categoryId: category.id,
|
||||
categoryName: encodeURIComponent(category.name)
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Fallback данные на случай ошибки
|
||||
const fallbackCategories = [
|
||||
{ id: '1', name: 'Двигатель', image: '/images/catalog_item.png' },
|
||||
{ id: '2', name: 'Трансмиссия', image: '/images/catalog_item2.png' },
|
||||
{ id: '3', name: 'Подвеска', image: '/images/catalog_item3.png' },
|
||||
{ id: '4', name: 'Тормоза', image: '/images/catalog_item4.png' },
|
||||
{ id: '5', name: 'Электрика', image: '/images/catalog_item5.png' },
|
||||
{ id: '6', name: 'Кузов', image: '/images/catalog_item6.png' },
|
||||
{ id: '7', name: 'Салон', image: '/images/catalog_item7.png' },
|
||||
{ id: '8', name: 'Климат', image: '/images/catalog_item8.png' },
|
||||
{ id: '9', name: 'Расходники', image: '/images/catalog_item9.png' }
|
||||
];
|
||||
|
||||
// Используем данные из API или fallback
|
||||
const categories = data?.partsIndexCategoriesWithGroups || [];
|
||||
const displayCategories = categories.length > 0 ? categories : fallbackCategories;
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="w-layout-blockcontainer container-2 w-container">
|
||||
<div className="w-layout-hflex flex-block-6">
|
||||
{Array.from({ length: 9 }).map((_, index) => (
|
||||
<div key={index} className="w-layout-vflex flex-block-7">
|
||||
<div className="animate-pulse bg-gray-200 h-6 w-20 rounded mb-2"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="w-layout-hflex flex-block-5">
|
||||
{Array.from({ length: 9 }).map((_, index) => (
|
||||
<div key={index} className="w-layout-vflex flex-block-8">
|
||||
<div className="animate-pulse bg-gray-200 h-32 w-full rounded"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-layout-blockcontainer container-2 w-container">
|
||||
{/* Навигационная панель с названиями категорий */}
|
||||
<div className="w-layout-hflex flex-block-6">
|
||||
{displayCategories.slice(0, 9).map((catalog) => (
|
||||
<div key={catalog.id} className="w-layout-vflex flex-block-7">
|
||||
<div
|
||||
className="text-block-10"
|
||||
onClick={() => handleCategoryClick(catalog)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
<section className="catnav">
|
||||
<div className="w-layout-blockcontainer batd w-container">
|
||||
<div className="w-layout-hflex flex-block-108-copy">
|
||||
{categories.map((category, idx) => (
|
||||
<div
|
||||
key={category.id}
|
||||
className={`ci${idx + 1}`}
|
||||
style={category.image ? { cursor: 'pointer', backgroundImage: `url('${category.image}')`, backgroundSize: 'cover', backgroundPosition: 'center' } : { cursor: 'pointer' }}
|
||||
onClick={() => handleCategoryClick(category)}
|
||||
>
|
||||
{catalog.name}
|
||||
<div className={idx === 0 ? 'text-block-54-copy' : 'text-block-54'} style={{ textAlign: 'center' }}>
|
||||
{category.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Блок с изображениями категорий */}
|
||||
<div className="w-layout-hflex flex-block-5">
|
||||
{displayCategories.slice(0, 9).map((catalog) => (
|
||||
<div key={catalog.id} className="w-layout-vflex flex-block-8">
|
||||
<img
|
||||
src={catalog.image || '/images/catalog_item.png'}
|
||||
loading="lazy"
|
||||
alt={catalog.name}
|
||||
className="image-5"
|
||||
onClick={() => handleCategoryClick(catalog)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.src = '/images/catalog_item.png';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -84,16 +84,66 @@ const NewArrivalsSection: React.FC = () => {
|
||||
<h2 className="heading-4">Новое поступление</h2>
|
||||
</div>
|
||||
<div className="carousel-row">
|
||||
{/* Стили для стрелок как в BestPriceSection и TopSalesSection */}
|
||||
<style>{`
|
||||
.carousel-arrow {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s;
|
||||
cursor: pointer;
|
||||
margin: 0 8px;
|
||||
}
|
||||
.carousel-arrow-left {}
|
||||
.carousel-arrow-right {}
|
||||
.carousel-arrow .arrow-circle {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.85);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.carousel-arrow:hover .arrow-circle,
|
||||
.carousel-arrow:focus .arrow-circle {
|
||||
background: #ec1c24;
|
||||
}
|
||||
.carousel-arrow .arrow-svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
transition: stroke 0.2s;
|
||||
stroke: #222;
|
||||
}
|
||||
.carousel-arrow:hover .arrow-svg,
|
||||
.carousel-arrow:focus .arrow-svg {
|
||||
stroke: #fff;
|
||||
}
|
||||
.carousel-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
`}</style>
|
||||
<button
|
||||
className="carousel-arrow carousel-arrow-left"
|
||||
onClick={scrollLeft}
|
||||
aria-label="Прокрутить влево"
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<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>
|
||||
<span className="arrow-circle">
|
||||
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6673 10H3.33398M3.33398 10L8.33398 5M3.33398 10L8.33398 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div className="w-layout-hflex core-product-search carousel-scroll" ref={scrollRef}>
|
||||
@ -149,10 +199,11 @@ const NewArrivalsSection: React.FC = () => {
|
||||
aria-label="Прокрутить вправо"
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<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>
|
||||
<span className="arrow-circle">
|
||||
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.33398 10H16.6673M16.6673 10L11.6673 5M16.6673 10L11.6673 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -32,11 +32,61 @@ const NewsAndPromos = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="carousel-row">
|
||||
{/* Стили для стрелок как в других секциях */}
|
||||
<style>{`
|
||||
.carousel-arrow {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s;
|
||||
cursor: pointer;
|
||||
margin: 0 8px;
|
||||
}
|
||||
.carousel-arrow-left {}
|
||||
.carousel-arrow-right {}
|
||||
.carousel-arrow .arrow-circle {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.85);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.carousel-arrow:hover .arrow-circle,
|
||||
.carousel-arrow:focus .arrow-circle {
|
||||
background: #ec1c24;
|
||||
}
|
||||
.carousel-arrow .arrow-svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
transition: stroke 0.2s;
|
||||
stroke: #222;
|
||||
}
|
||||
.carousel-arrow:hover .arrow-svg,
|
||||
.carousel-arrow:focus .arrow-svg {
|
||||
stroke: #fff;
|
||||
}
|
||||
.carousel-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
`}</style>
|
||||
<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>
|
||||
<span className="arrow-circle">
|
||||
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6673 10H3.33398M3.33398 10L8.33398 5M3.33398 10L8.33398 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<div className="w-layout-hflex flex-block-6-copy-copy carousel-scroll" ref={scrollRef}>
|
||||
<NewsCard
|
||||
@ -69,10 +119,11 @@ const NewsAndPromos = () => {
|
||||
/>
|
||||
</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>
|
||||
<span className="arrow-circle">
|
||||
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.33398 10H16.6673M16.6673 10L11.6673 5M16.6673 10L11.6673 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { useQuery } from '@apollo/client';
|
||||
import { GET_HERO_BANNERS } from '@/lib/graphql';
|
||||
import Link from 'next/link';
|
||||
@ -13,20 +13,94 @@ interface HeroBanner {
|
||||
sortOrder: number;
|
||||
}
|
||||
|
||||
// Добавим CSS для стрелок
|
||||
const arrowStyles = `
|
||||
.pod-slider-arrow {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pod-slider-arrow-left { left: 12px; }
|
||||
.pod-slider-arrow-right { right: 12px; }
|
||||
.pod-slider-arrow .arrow-circle {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.85);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.pod-slider-arrow:hover .arrow-circle,
|
||||
.pod-slider-arrow:focus .arrow-circle {
|
||||
background: #ec1c24;
|
||||
}
|
||||
.pod-slider-arrow .arrow-svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
transition: stroke 0.2s;
|
||||
stroke: #222;
|
||||
}
|
||||
.pod-slider-arrow:hover .arrow-svg,
|
||||
.pod-slider-arrow:focus .arrow-svg {
|
||||
stroke: #fff;
|
||||
}
|
||||
`;
|
||||
|
||||
const slideStyles = `
|
||||
.pod-slider-slide {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
opacity: 0;
|
||||
transform: translateX(40px) scale(0.98);
|
||||
transition: opacity 0.5s cubic-bezier(.4,0,.2,1), transform 0.5s cubic-bezier(.4,0,.2,1);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
.pod-slider-slide.active {
|
||||
opacity: 1;
|
||||
transform: translateX(0) scale(1);
|
||||
pointer-events: auto;
|
||||
z-index: 2;
|
||||
}
|
||||
.pod-slider-slide.prev {
|
||||
opacity: 0;
|
||||
transform: translateX(-40px) scale(0.98);
|
||||
z-index: 1;
|
||||
}
|
||||
.pod-slider-slide.next {
|
||||
opacity: 0;
|
||||
transform: translateX(40px) scale(0.98);
|
||||
z-index: 1;
|
||||
}
|
||||
.mask.w-slider-mask { position: relative; }
|
||||
`;
|
||||
|
||||
const ProductOfDayBanner: React.FC = () => {
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
|
||||
const { data, loading, error } = useQuery(GET_HERO_BANNERS, {
|
||||
errorPolicy: 'all'
|
||||
});
|
||||
const [showArrows, setShowArrows] = useState(false);
|
||||
const sliderRef = useRef<HTMLDivElement>(null);
|
||||
const { data } = useQuery(GET_HERO_BANNERS, { errorPolicy: 'all' });
|
||||
|
||||
// Фильтруем только активные баннеры и сортируем их
|
||||
const banners: HeroBanner[] = data?.heroBanners
|
||||
?.filter((banner: HeroBanner) => banner.isActive)
|
||||
?.slice()
|
||||
?.sort((a: HeroBanner, b: HeroBanner) => a.sortOrder - b.sortOrder) || [];
|
||||
|
||||
// Если нет баннеров из админки, показываем дефолтный
|
||||
const allBanners = banners.length > 0 ? banners : [{
|
||||
id: 'default',
|
||||
title: 'ДОСТАВИМ БЫСТРО!',
|
||||
@ -37,18 +111,15 @@ const ProductOfDayBanner: React.FC = () => {
|
||||
sortOrder: 0
|
||||
}];
|
||||
|
||||
// Автопрокрутка слайдов
|
||||
useEffect(() => {
|
||||
if (allBanners.length > 1) {
|
||||
const interval = setInterval(() => {
|
||||
setCurrentSlide(prev => (prev + 1) % allBanners.length);
|
||||
}, 5000); // Меняем слайд каждые 5 секунд
|
||||
|
||||
}, 5000);
|
||||
return () => clearInterval(interval);
|
||||
}
|
||||
}, [allBanners.length]);
|
||||
|
||||
// Сброс текущего слайда если он вне диапазона
|
||||
useEffect(() => {
|
||||
if (currentSlide >= allBanners.length) {
|
||||
setCurrentSlide(0);
|
||||
@ -67,141 +138,109 @@ const ProductOfDayBanner: React.FC = () => {
|
||||
setCurrentSlide(index);
|
||||
};
|
||||
|
||||
const currentBanner = allBanners[currentSlide];
|
||||
|
||||
const renderBannerContent = (banner: HeroBanner) => {
|
||||
return (
|
||||
<div className="div-block-128" style={{
|
||||
backgroundImage: `url(${banner.imageUrl})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
minHeight: '200px',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
borderRadius: '20px',
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
{(banner.title || banner.subtitle) && (
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
bottom: '20px',
|
||||
left: '20px',
|
||||
right: '20px',
|
||||
color: 'white',
|
||||
textShadow: '0 2px 4px rgba(0,0,0,0.5)'
|
||||
}}>
|
||||
{banner.title && (
|
||||
<h3 style={{ margin: 0, fontSize: '18px', fontWeight: 'bold' }}>
|
||||
{banner.title}
|
||||
</h3>
|
||||
)}
|
||||
{banner.subtitle && (
|
||||
<p style={{ margin: '5px 0 0 0', fontSize: '14px' }}>
|
||||
{banner.subtitle}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const bannerContent = renderBannerContent(currentBanner);
|
||||
|
||||
const finalContent = currentBanner.linkUrl ? (
|
||||
<Link href={currentBanner.linkUrl} style={{ cursor: 'pointer', display: 'block', width: '100%', height: '100%' }}>
|
||||
{bannerContent}
|
||||
</Link>
|
||||
) : bannerContent;
|
||||
// Показывать стрелки при наведении на слайдер или стрелки
|
||||
const handleMouseEnter = () => setShowArrows(true);
|
||||
const handleMouseLeave = () => setShowArrows(false);
|
||||
|
||||
return (
|
||||
<div style={{ position: 'relative', width: '100%', height: '100%' }}>
|
||||
{finalContent}
|
||||
|
||||
{/* Навигация стрелками (показываем только если баннеров больше 1) */}
|
||||
{allBanners.length > 1 && (
|
||||
<>
|
||||
<div
|
||||
onClick={handlePrevSlide}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: '10px',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
background: 'rgba(0,0,0,0.5)',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '50%',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
zIndex: 10,
|
||||
fontSize: '18px'
|
||||
}}
|
||||
>
|
||||
‹
|
||||
</div>
|
||||
<div
|
||||
onClick={handleNextSlide}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '10px',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
background: 'rgba(0,0,0,0.5)',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '50%',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
zIndex: 10,
|
||||
fontSize: '18px'
|
||||
}}
|
||||
>
|
||||
›
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Индикаторы слайдов (показываем только если баннеров больше 1) */}
|
||||
{allBanners.length > 1 && (
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
bottom: '10px',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
display: 'flex',
|
||||
gap: '8px',
|
||||
zIndex: 10
|
||||
}}>
|
||||
{allBanners.map((_, index) => (
|
||||
<div
|
||||
className="slider w-slider"
|
||||
ref={sliderRef}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
tabIndex={0}
|
||||
style={{ position: 'relative' }}
|
||||
>
|
||||
{/* Вставляем стили для стрелок */}
|
||||
<style>{arrowStyles}{slideStyles}</style>
|
||||
<div className="mask w-slider-mask">
|
||||
{allBanners.map((banner, idx) => {
|
||||
let slideClass = 'pod-slider-slide';
|
||||
if (idx === currentSlide) slideClass += ' active';
|
||||
else if (idx === (currentSlide === 0 ? allBanners.length - 1 : currentSlide - 1)) slideClass += ' prev';
|
||||
else if (idx === (currentSlide + 1) % allBanners.length) slideClass += ' next';
|
||||
const slideContent = (
|
||||
<div
|
||||
key={index}
|
||||
onClick={() => handleSlideIndicator(index)}
|
||||
className="div-block-128"
|
||||
style={{
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
borderRadius: '50%',
|
||||
background: index === currentSlide ? 'white' : 'rgba(255,255,255,0.5)',
|
||||
cursor: 'pointer',
|
||||
transition: 'background 0.3s'
|
||||
backgroundImage: `url(${banner.imageUrl})`,
|
||||
// backgroundSize: 'cover',
|
||||
// backgroundPosition: 'center',
|
||||
// backgroundRepeat: 'no-repeat',
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
{/* Можно добавить текст поверх баннера, если нужно */}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div
|
||||
className={slideClass + ' slide w-slide'}
|
||||
key={banner.id}
|
||||
// style={{ display: idx === currentSlide ? 'block' : 'none', position: 'relative' }}
|
||||
style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
|
||||
>
|
||||
{banner.linkUrl ? (
|
||||
<Link href={banner.linkUrl} style={{ display: 'block', width: '100%', height: '100%' }}>{slideContent}</Link>
|
||||
) : slideContent}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{/* SVG-стрелки как в Webflow, поверх баннера, с hover-эффектом */}
|
||||
<button
|
||||
className="pod-slider-arrow pod-slider-arrow-left"
|
||||
onClick={handlePrevSlide}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
style={{
|
||||
opacity: showArrows ? 1 : 0,
|
||||
pointerEvents: showArrows ? 'auto' : 'none',
|
||||
}}
|
||||
tabIndex={-1}
|
||||
aria-label="Предыдущий баннер"
|
||||
>
|
||||
<span className="arrow-circle">
|
||||
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6673 10H3.33398M3.33398 10L8.33398 5M3.33398 10L8.33398 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
className="pod-slider-arrow pod-slider-arrow-right"
|
||||
onClick={handleNextSlide}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
style={{
|
||||
opacity: showArrows ? 1 : 0,
|
||||
pointerEvents: showArrows ? 'auto' : 'none',
|
||||
}}
|
||||
tabIndex={-1}
|
||||
aria-label="Следующий баннер"
|
||||
>
|
||||
<span className="arrow-circle">
|
||||
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.33398 10H16.6673M16.6673 10L11.6673 5M16.6673 10L11.6673 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<div className="slide-nav w-slider-nav w-slider-nav-invert w-round">
|
||||
{allBanners.map((_, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="w-slider-dot"
|
||||
style={{
|
||||
background: idx === currentSlide ? 'white' : 'rgba(255,255,255,0.5)',
|
||||
borderRadius: '50%',
|
||||
width: 10,
|
||||
height: 10,
|
||||
margin: 4,
|
||||
display: 'inline-block',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
onClick={() => handleSlideIndicator(idx)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -110,8 +110,13 @@ const ProductOfDaySection: React.FC = () => {
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
// Если нет ни одной картинки, возвращаем noimage.png
|
||||
return {
|
||||
url: '/images/noimage.png',
|
||||
alt: product.name,
|
||||
source: 'noimage'
|
||||
};
|
||||
};
|
||||
|
||||
// Обработчики для навигации по товарам дня
|
||||
const handlePrevSlide = (e: React.MouseEvent) => {
|
||||
@ -209,6 +214,11 @@ const ProductOfDaySection: React.FC = () => {
|
||||
Parts Index
|
||||
</div>
|
||||
)}
|
||||
{productImage.source === 'noimage' && (
|
||||
<div className="absolute bottom-0 right-0 bg-gray-400 text-white text-xs px-2 py-1 rounded-tl">
|
||||
Нет изображения
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -143,11 +143,61 @@ const TopSalesSection: React.FC = () => {
|
||||
<h2 className="heading-4">Топ продаж</h2>
|
||||
</div>
|
||||
<div className="carousel-row">
|
||||
{/* Стили для стрелок как в BestPriceSection */}
|
||||
<style>{`
|
||||
.carousel-arrow {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s;
|
||||
cursor: pointer;
|
||||
margin: 0 8px;
|
||||
}
|
||||
.carousel-arrow-left {}
|
||||
.carousel-arrow-right {}
|
||||
.carousel-arrow .arrow-circle {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.85);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.carousel-arrow:hover .arrow-circle,
|
||||
.carousel-arrow:focus .arrow-circle {
|
||||
background: #ec1c24;
|
||||
}
|
||||
.carousel-arrow .arrow-svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
transition: stroke 0.2s;
|
||||
stroke: #222;
|
||||
}
|
||||
.carousel-arrow:hover .arrow-svg,
|
||||
.carousel-arrow:focus .arrow-svg {
|
||||
stroke: #fff;
|
||||
}
|
||||
.carousel-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
`}</style>
|
||||
<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>
|
||||
<span className="arrow-circle">
|
||||
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6673 10H3.33398M3.33398 10L8.33398 5M3.33398 10L8.33398 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<div className="w-layout-hflex core-product-search carousel-scroll" ref={scrollRef}>
|
||||
{activeTopSalesProducts.map((item: TopSalesProductData) => {
|
||||
@ -177,10 +227,11 @@ const TopSalesSection: React.FC = () => {
|
||||
})}
|
||||
</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>
|
||||
<span className="arrow-circle">
|
||||
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.33398 10H16.6673M16.6673 10L11.6673 5M16.6673 10L11.6673 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -284,7 +284,7 @@ const ProfileHistoryMain = () => {
|
||||
|
||||
if (loading && historyItems.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-col justify-center text-base min-h-[526px] h-full">
|
||||
<div className="flex flex-col flex-1 shrink justify-center basis-0 w-full max-md:max-w-full min-h-[526px] h-full">
|
||||
<div className="flex justify-center items-center h-40">
|
||||
<div className="text-gray-500">Загрузка истории поиска...</div>
|
||||
</div>
|
||||
@ -294,7 +294,7 @@ const ProfileHistoryMain = () => {
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex flex-col justify-center text-base min-h-[526px]">
|
||||
<div className="flex flex-col flex-1 shrink justify-center basis-0 w-full max-md:max-w-full min-h-[526px]">
|
||||
<div className="flex justify-center items-center h-40">
|
||||
<div className="text-red-500">Ошибка загрузки истории поиска</div>
|
||||
</div>
|
||||
@ -303,7 +303,7 @@ const ProfileHistoryMain = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col min-h-[526px]">
|
||||
<div className="flex flex-col flex-1 shrink justify-center basis-0 w-full max-md:max-w-full min-h-[526px]">
|
||||
<div className="flex gap-5 items-center px-8 py-3 w-full leading-snug text-gray-400 whitespace-nowrap bg-white rounded-lg max-md:px-5 max-md:max-w-full">
|
||||
<div className="flex-1 shrink self-stretch my-auto text-gray-400 basis-0 text-ellipsis max-md:max-w-full max-md:w-full">
|
||||
<SearchInput
|
||||
|
||||
@ -19,6 +19,7 @@ interface VehicleAttributesTooltipProps {
|
||||
const VehicleAttributesTooltip: React.FC<VehicleAttributesTooltipProps> = ({
|
||||
show,
|
||||
position,
|
||||
vehicleName,
|
||||
vehicleAttributes,
|
||||
onMouseEnter,
|
||||
onMouseLeave,
|
||||
@ -27,7 +28,7 @@ const VehicleAttributesTooltip: React.FC<VehicleAttributesTooltipProps> = ({
|
||||
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]"
|
||||
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] max-w-full fixed z-[9999]"
|
||||
style={{
|
||||
left: `${position.x + 120}px`,
|
||||
top: `${position.y}px`,
|
||||
@ -45,16 +46,33 @@ const VehicleAttributesTooltip: React.FC<VehicleAttributesTooltipProps> = ({
|
||||
/>
|
||||
)}
|
||||
<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}
|
||||
{/* Заголовок */}
|
||||
{vehicleName && (
|
||||
<div className="font-semibold text-lg text-black mb-3 truncate">{vehicleName}</div>
|
||||
)}
|
||||
{/* Список характеристик или сообщение */}
|
||||
{vehicleAttributes.length > 0 ? (
|
||||
vehicleAttributes.map((attr, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="grid grid-cols-[150px_1fr] gap-x-5 items-start mt-2 w-full first:mt-0"
|
||||
>
|
||||
<div className="text-gray-400 break-words whitespace-normal text-left">
|
||||
{attr.name}
|
||||
</div>
|
||||
<div
|
||||
className="font-medium text-black break-words whitespace-normal text-left justify-self-start"
|
||||
style={{ textAlign: 'left' }}
|
||||
>
|
||||
{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>
|
||||
))}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -88,21 +88,19 @@ const VinQuick: React.FC<VinQuickProps> = ({ quickGroup, catalogCode, vehicleId,
|
||||
))}
|
||||
{total > 3 && shownCount < total && (
|
||||
<div className="flex gap-2 mt-2 w-full">
|
||||
{shownCount + 3 < total && (
|
||||
<button
|
||||
className="expand-btn"
|
||||
onClick={() => setShownCounts(prev => ({ ...prev, [unit.unitid]: shownCount + 3 }))}
|
||||
style={{ border: '1px solid #EC1C24', borderRadius: 8, background: '#fff', color: '#222', padding: '6px 18px', minWidth: 180 }}
|
||||
>
|
||||
Развернуть
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" style={{ display: 'inline', verticalAlign: 'middle', marginLeft: 4 }}>
|
||||
<path d="M4 6l4 4 4-4" stroke="#222" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="expand-btn"
|
||||
onClick={() => setShownCounts(prev => ({ ...prev, [unit.unitid]: total }))}
|
||||
style={{ border: '1px solid #EC1C24', borderRadius: 8, background: '#fff', color: '#222', padding: '6px 18px', minWidth: 180 }}
|
||||
>
|
||||
Развернуть
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" style={{ display: 'inline', verticalAlign: 'middle', marginLeft: 4 }}>
|
||||
<path d="M4 6l4 4 4-4" stroke="#222" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
className="showall-btn"
|
||||
onClick={() => setShownCounts(prev => ({ ...prev, [unit.unitid]: total }))}
|
||||
onClick={() => handleUnitClick(unit)}
|
||||
style={{ background: '#e9eef5', borderRadius: 8, color: '#222', padding: '6px 18px', border: 'none'}}
|
||||
>
|
||||
Показать все
|
||||
|
||||
146
src/pages/confidentiality.tsx
Normal file
146
src/pages/confidentiality.tsx
Normal file
@ -0,0 +1,146 @@
|
||||
import React from 'react';
|
||||
import Head from 'next/head';
|
||||
import CatalogSubscribe from "@/components/CatalogSubscribe";
|
||||
import MobileMenuBottomSection from "@/components/MobileMenuBottomSection";
|
||||
import NewsAndPromos from "@/components/index/NewsAndPromos";
|
||||
import Footer from "@/components/Footer";
|
||||
import IndexTopMenuNav from "@/components/index/IndexTopMenuNav";
|
||||
import MetaTags from "@/components/MetaTags";
|
||||
import { getMetaByPath } from "@/lib/meta-config";
|
||||
import JsonLdScript from "@/components/JsonLdScript";
|
||||
import { generateOrganizationSchema, generateWebSiteSchema, PROTEK_ORGANIZATION } from "@/lib/schema";
|
||||
|
||||
|
||||
export default function Confidentiality() {
|
||||
const metaData = getMetaByPath('/');
|
||||
|
||||
// Добавьте эти строки:
|
||||
const organizationSchema = generateOrganizationSchema(PROTEK_ORGANIZATION);
|
||||
const websiteSchema = generateWebSiteSchema(
|
||||
"Protek - Автозапчасти и аксессуары",
|
||||
"https://protek.ru",
|
||||
"https://protek.ru/search"
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<MetaTags {...metaData} />
|
||||
<JsonLdScript schema={organizationSchema} />
|
||||
<JsonLdScript schema={websiteSchema} />
|
||||
<section className="section-info">
|
||||
<div className="w-layout-blockcontainer container info w-container">
|
||||
<div className="w-layout-vflex flex-block-9">
|
||||
<div className="w-layout-hflex flex-block-7">
|
||||
<a href="#" className="link-block w-inline-block">
|
||||
<div>Главная</div>
|
||||
</a>
|
||||
<div className="text-block-3">→</div>
|
||||
<a href="#" className="link-block-2 w-inline-block">
|
||||
<div>Политика конфиденциальности</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="w-layout-hflex flex-block-8">
|
||||
<div className="w-layout-hflex flex-block-10">
|
||||
<h1 className="heading">Политика конфиденциальности</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div className="flex relative gap-8 items-start self-stretch pt-10 pb-20 max-md:p-8 max-sm:gap-5 max-sm:p-5">
|
||||
<div className="flex relative flex-col gap-8 items-start p-10 bg-white rounded-3xl flex-[1_0_0] max-w-[1580px] mx-auto max-md:p-8 max-sm:gap-5 max-sm:p-5">
|
||||
<div className="flex relative flex-col gap-5 items-start self-stretch max-sm:gap-4">
|
||||
<div
|
||||
layer-name="Объявлен старт продаж электрических насосов"
|
||||
className="relative self-stretch text-3xl font-bold leading-9 text-gray-950"
|
||||
>
|
||||
Объявлен старт продаж электрических насосов
|
||||
</div>
|
||||
<div
|
||||
layer-name="Бренд вывел на рынок сразу широкий ассортимент, уже на старте продаж - более 100 артикулов и включает в себя позиции для брендов-лидеров автомобильного рынка, например: артикул 77WPE080 для Mercedes-Benz S-CLASS (W221, C216), артикул 77WPE096 – Land Rover DISCOVERY V (L462) / Jaguar F-PACE (X761), артикул 77WPE014 – Audi Q5 (8RB) / Volkswagen TOUAREG (7P5, 7P6)."
|
||||
className="relative self-stretch text-base leading-6 text-gray-600 max-sm:text-sm"
|
||||
>
|
||||
Бренд вывел на рынок сразу широкий ассортимент, уже на старте
|
||||
продаж - более 100 артикулов и включает в себя позиции для
|
||||
брендов-лидеров автомобильного рынка, например: артикул 77WPE080
|
||||
для Mercedes-Benz S-CLASS (W221, C216), артикул 77WPE096 – Land
|
||||
Rover DISCOVERY V (L462) / Jaguar F-PACE (X761), артикул 77WPE014
|
||||
– Audi Q5 (8RB) / Volkswagen TOUAREG (7P5, 7P6).
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex relative flex-col gap-8 items-start self-stretch max-sm:gap-5">
|
||||
<div
|
||||
layer-name="Преимущества электрических насосов охлаждающей жидкости MasterKit Electro:"
|
||||
className="relative self-stretch text-3xl font-medium leading-9 text-gray-950"
|
||||
>
|
||||
Преимущества электрических насосов охлаждающей жидкости MasterKit
|
||||
Electro:
|
||||
</div>
|
||||
<div className="flex relative flex-col gap-3.5 items-start self-stretch">
|
||||
<div className="flex relative gap-10 items-start w-full max-md:gap-5 max-sm:gap-4">
|
||||
<div className="relative shrink-0 mt-2 w-2 h-2 bg-gray-600 rounded-full" />
|
||||
<div
|
||||
layer-name="Отличная производительность за счёт применения компонентов известных мировых брендов."
|
||||
className="relative text-base leading-6 text-gray-600 flex-[1_0_0] max-sm:text-sm"
|
||||
>
|
||||
Отличная производительность за счёт применения компонентов
|
||||
известных мировых брендов.
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex relative gap-10 items-start w-full max-md:gap-5 max-sm:gap-4">
|
||||
<div className="relative shrink-0 mt-2 w-2 h-2 bg-gray-600 rounded-full" />
|
||||
<div
|
||||
layer-name="Герметичность и устойчивость к коррозии"
|
||||
className="relative text-base leading-6 text-gray-600 flex-[1_0_0] max-sm:text-sm"
|
||||
>
|
||||
Герметичность и устойчивость к коррозии
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex relative gap-10 items-start w-full max-md:gap-5 max-sm:gap-4">
|
||||
<div className="relative shrink-0 mt-2 w-2 h-2 bg-gray-600 rounded-full" />
|
||||
<div
|
||||
layer-name="Высококачественные материалы компонентов, обеспечивающие долгий срок службы"
|
||||
className="relative text-base leading-6 text-gray-600 flex-[1_0_0] max-sm:text-sm"
|
||||
>
|
||||
Высококачественные материалы компонентов, обеспечивающие
|
||||
долгий срок службы
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex relative gap-10 items-start w-full max-md:gap-5 max-sm:gap-4">
|
||||
<div className="relative shrink-0 mt-2 w-2 h-2 bg-gray-600 rounded-full" />
|
||||
<div
|
||||
layer-name="Широкий ассортимент – более 100 артикулов"
|
||||
className="relative text-base leading-6 text-gray-600 flex-[1_0_0] max-sm:text-sm"
|
||||
>
|
||||
Широкий ассортимент – более 100 артикулов
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
layer-name="На электрические насосы системы охлаждения MasterKit Electro предоставляется гарантия 1 год или 30.000 км пробега, в зависимости от того, что наступит раньше. Все новинки уже внесены в каталог подбора продукции и доступны для заказа."
|
||||
className="relative self-stretch text-base leading-6 text-gray-600 max-sm:text-sm"
|
||||
>
|
||||
На электрические насосы системы охлаждения MasterKit Electro
|
||||
предоставляется гарантия 1 год или 30.000 км пробега, в
|
||||
зависимости от того, что наступит раньше. Все новинки уже внесены
|
||||
в каталог подбора продукции и доступны для заказа.
|
||||
</div>
|
||||
<div
|
||||
layer-name="ABig_Button"
|
||||
data-component-name="ABig_Button"
|
||||
data-variant-name="Button big=Default"
|
||||
className="relative gap-2.5 px-10 py-6 text-lg font-medium leading-5 text-center text-white no-underline bg-red-600 rounded-xl transition-all cursor-pointer border-[none] duration-[0.2s] ease-[ease] w-fit max-sm:px-8 max-sm:py-5 max-sm:w-full hover:bg-red-700"
|
||||
>
|
||||
Перейти к товару
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section className="section-3">
|
||||
<CatalogSubscribe />
|
||||
</section>
|
||||
<Footer />
|
||||
<MobileMenuBottomSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -36,10 +36,10 @@ const ProfileHistoryPage = () => {
|
||||
return (
|
||||
<>
|
||||
<MetaTags {...metaData} />
|
||||
<div className="page-wrapper h-full flex flex-col flex-1">
|
||||
<div className="page-wrapper">
|
||||
<ProfileInfo />
|
||||
<div className="flex flex-col pt-10 pb-16 max-md:px-5 h-full flex-1">
|
||||
<div className="flex relative gap-8 items-start self-stretch max-md:gap-5 max-sm:flex-col max-sm:gap-4 justify-center mx-auto min-h-[526px] max-w-[1580px] w-full h-full">
|
||||
<div className="flex flex-col pt-10 pb-16 max-md:px-5">
|
||||
<div className="flex relative gap-8 items-start self-stretch max-md:gap-5 max-sm:flex-col max-sm:gap-4 justify-center mx-auto max-w-[1580px] w-full h-full">
|
||||
<LKMenu ref={menuRef} />
|
||||
<ProfileHistoryMain />
|
||||
</div>
|
||||
|
||||
@ -589,7 +589,7 @@ export default function SearchResult() {
|
||||
)}
|
||||
{/* Лучшие предложения */}
|
||||
{bestOffersData.length > 0 && (
|
||||
<section className="section-6">
|
||||
<section className="main">
|
||||
<div className="w-layout-blockcontainer container w-container">
|
||||
<div className="w-layout-vflex flex-block-36">
|
||||
{bestOffersData.map(({ offer, type }, index) => (
|
||||
|
||||
@ -491,7 +491,6 @@ input#VinSearchInput {
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.heading-9-copy,
|
||||
.text-block-21-copy {
|
||||
width: 250px;
|
||||
overflow: hidden;
|
||||
@ -499,7 +498,27 @@ input#VinSearchInput {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.heading-9-copy {
|
||||
|
||||
text-align: right;
|
||||
margin-left: auto;
|
||||
display: block;
|
||||
}
|
||||
.pcs-search {
|
||||
color: var(--_fonts---color--black);
|
||||
font-size: var(--_fonts---font-size--core);
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.heading-9-copy {
|
||||
text-align: left;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
.w-layout-hflex.flex-block-6 {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
@ -919,11 +938,10 @@ a.link-block-2.w-inline-block {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.heading-9-copy {
|
||||
min-width: 100px;
|
||||
|
||||
}
|
||||
|
||||
.flex-block-36 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flex-block-15-copy {
|
||||
width: 232px!important;
|
||||
@ -1147,4 +1165,111 @@ a.link-block-2.w-inline-block {
|
||||
justify-content: flex-start !important;
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.mask.w-slider-mask {
|
||||
height: 100px !important;
|
||||
min-height: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.search-history-dropdown,
|
||||
.search-results-dropdown,
|
||||
.dropdown-search,
|
||||
.dropdown-list-3.w--open {
|
||||
position: fixed !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
top: 72px !important; /* подберите под ваш header */
|
||||
width: 100vw !important;
|
||||
z-index: 9999 !important;
|
||||
border-radius: 0 0 16px 16px !important;
|
||||
margin: 0 !important;
|
||||
max-width: 100vw !important;
|
||||
background: white !important;
|
||||
box-shadow: 0 8px 32px rgba(44,62,80,0.10), 0 1.5px 4px rgba(44,62,80,0.08) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.pricecartbp {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px; /* или другой нужный вам отступ */
|
||||
}
|
||||
|
||||
.bestpriceitem {
|
||||
height: 279px;
|
||||
}
|
||||
|
||||
|
||||
.flex-block-49 {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.pcs-search-s1,
|
||||
.sort-item.first {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.pcs-search-s1,
|
||||
.sort-item.first {
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 479px) {
|
||||
.pcs-search-s1,
|
||||
.sort-item.first {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.w-layout-vflex.flex-block-36 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.w-layout-vflex.flex-block-44 {
|
||||
flex: 1 1 calc(33.333% - 16px);
|
||||
max-width: calc(33.333% - 16px);
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.w-layout-vflex.flex-block-44 {
|
||||
flex: 1 1 calc(50% - 12px);
|
||||
max-width: calc(50% - 12px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.w-layout-vflex.flex-block-44 {
|
||||
flex: 1 1 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.w-layout-vflex.flex-block-36 {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
gap: 12px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.w-layout-vflex.flex-block-44 {
|
||||
min-width: 160px;
|
||||
max-width: 160px;
|
||||
flex: 0 0 160px;
|
||||
}
|
||||
.heading-9-copy {
|
||||
text-align: left !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user