protekauto-frontend/PARTS_INDEX_INTEGRATION.md

Интеграция Parts Index API

Описание

В проект добавлена интеграция с Parts Index API для отображения детальной информации о деталях, включая:

• Главную фотографию детали
• Штрих-коды
• Технические характеристики
• Категории
• Дополнительные изображения
• Логотип "powered by Parts Index"

Реализованные компоненты

1. Типы (src/types/partsindex.ts)

• PartsIndexEntityInfo - информация о детали
• PartsIndexEntityInfoResponse - ответ API
• PartsIndexEntityInfoVariables - параметры запроса

2. Сервис (src/lib/partsindex-service.ts)

• getEntityInfo(code, brand?, lang?) - получение информации о детали

3. Хук (src/hooks/usePartsIndex.ts)

• usePartsIndexEntityInfo(code, brand) - хук для получения данных

4. Компонент (src/components/PartsIndexCard.tsx)

• Отображение карточки с информацией о детали
• Поддержка состояния загрузки
• Адаптивный дизайн

Интеграция в страницу поиска

В файле src/pages/search-result.tsx добавлено:

import PartsIndexCard from "@/components/PartsIndexCard";
import { usePartsIndexEntityInfo } from "@/hooks/usePartsIndex";

// В компоненте:
const { entityInfo, loading: partsIndexLoading } = usePartsIndexEntityInfo(
  searchQuery || null,
  brandQuery || null
);

// В JSX:
{partsIndexLoading && (
  <PartsIndexCard 
    entityInfo={null as any} 
    loading={true}
  />
)}
{entityInfo && !partsIndexLoading && (
  <PartsIndexCard 
    entityInfo={entityInfo} 
    loading={false}
  />
)}

API Parts Index

Endpoint

GET https://api.parts-index.com/v1/entities

Параметры

• code (обязательный) - артикул детали
• brand (опциональный) - бренд
• lang (опциональный) - язык (по умолчанию 'ru')

Заголовки

Authorization: PI-E1C0ADB7-E4A8-4960-94A0-4D9C0A074DAE
Accept: application/json

Пример запроса

curl -H "Authorization: PI-E1C0ADB7-E4A8-4960-94A0-4D9C0A074DAE" \
     "https://api.parts-index.com/v1/entities?code=059198405B&brand=VAG&lang=ru"

Тестирование

URL для тестирования

http://localhost:3002/search-result?article=059198405B&brand=VAG

Тестовая HTML страница

Создана страница test-parts-index.html для демонстрации работы API без React.

Функциональность

1. Автоматическая загрузка - при переходе на страницу результатов поиска
2. Главная фотография - отображается первое изображение из массива
3. Логотип Parts Index - в правом верхнем углу карточки
4. Характеристики - первые 6 параметров из API
5. Штрих-коды - все доступные штрих-коды
6. Дополнительные изображения - до 4 дополнительных фото
7. Обработка ошибок - скрытие изображений при ошибке загрузки

Стили

Компонент использует Tailwind CSS классы для стилизации:

• Адаптивная сетка для характеристик
• Скроллинг для дополнительных изображений
• Состояние загрузки с анимацией
• Обработка ошибок изображений

Производительность

• Загрузка данных только при наличии артикула
• Кэширование на уровне React Query (через Apollo Client)
• Ленивая загрузка изображений
• Обработка ошибок сети