добавление логики карточкам

src/components/ArticleCard.tsx

@@ -10,9 +10,10 @@ interface ArticleCardProps {
   article: PartsAPIArticle;
   index: number;
   onVisibilityChange?: (index: number, isVisible: boolean) => void;
+  image?: string; // optional image override
 }
 
-const ArticleCard: React.FC<ArticleCardProps> = memo(({ article, index, onVisibilityChange }) => {
+const ArticleCard: React.FC<ArticleCardProps> = memo(({ article, index, onVisibilityChange, image }) => {
   const [shouldShow, setShouldShow] = useState(false);
   const [isChecking, setIsChecking] = useState(true);
 
@@ -21,6 +22,12 @@ const ArticleCard: React.FC<ArticleCardProps> = memo(({ article, index, onVisibi
     enabled: !!article.artId
   });
 
+  // MOCK: fallback image if none loaded
+  const fallbackImage =
+    image || // use prop if provided
+    imageUrl ||
+    '/images/162615.webp'; // путь к картинке из public или любой другой
+
   // Проверяем и очищаем данные артикула и бренда
   const articleNumber = article.artArticleNr?.trim();
   const brandName = article.artSupBrand?.trim();
@@ -28,7 +35,10 @@ const ArticleCard: React.FC<ArticleCardProps> = memo(({ article, index, onVisibi
   // Используем хук для получения цен только если есть и артикул, и бренд
   const { getPriceData, addToCart } = useCatalogPrices();
   const shouldFetchPrices = articleNumber && brandName && articleNumber !== '' && brandName !== '';
-  const priceData = shouldFetchPrices ? getPriceData(articleNumber, brandName) : { minPrice: null, cheapestOffer: null, isLoading: false, hasOffers: false };
+  // MOCK: fallback price data
+  const priceData = shouldFetchPrices
+    ? getPriceData(articleNumber, brandName)
+    : { minPrice: 17087, cheapestOffer: null, isLoading: false, hasOffers: true };
 
   // Определяем, должен ли отображаться товар
   useEffect(() => {
@@ -66,9 +76,29 @@ const ArticleCard: React.FC<ArticleCardProps> = memo(({ article, index, onVisibi
     return <CatalogProductCardSkeleton />;
   }
 
-  // Не отображаем ничего если товар не должен показываться
+  // MOCK: всегда показывать карточку для демо
   if (!shouldShow) {
-    return null;
+    // return null;
+    // MOCK: показываем карточку даже если не должен
+    // (можно убрать это после подключения реальных данных)
+    // Формируем название товара
+    const title = [brandName || 'N/A', articleNumber || 'N/A'].filter(part => part !== 'N/A').join(', ');
+    const brand = brandName || 'Unknown';
+    let priceText = 'от 17 087 ₽';
+    return (
+      <CatalogProductCard
+        image={fallbackImage}
+        discount="-35%"
+        price={priceText}
+        oldPrice="22 347 ₽"
+        title={title}
+        brand={brand}
+        articleNumber={articleNumber}
+        brandName={brandName}
+        artId={article.artId}
+        onAddToCart={() => {}}
+      />
+    );
   }
 
   // Формируем название товара
@@ -104,7 +134,7 @@ const ArticleCard: React.FC<ArticleCardProps> = memo(({ article, index, onVisibi
 
   return (
     <CatalogProductCard
-      image={imageUrl}
+      image={fallbackImage}
       discount="Новинка"
       price={priceText}
       oldPrice=""