117 lines
4.2 KiB
Markdown
117 lines
4.2 KiB
Markdown
# Интеграция 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` добавлено:
|
||
|
||
```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
|
||
```
|
||
|
||
### Пример запроса
|
||
```bash
|
||
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)
|
||
- Ленивая загрузка изображений
|
||
- Обработка ошибок сети |