Merge pull request 'добавление логики карточкам' (#17) from pricecard into main

Reviewed-on: #17

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=""

src/components/BestPriceItem.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+
+interface BestPriceItemProps {
+  image: string;
+  discount: string;
+  price: string;
+  oldPrice: string;
+  title: string;
+  brand: string;
+  onAddToCart?: (e: React.MouseEvent) => void;
+}
+
+const BestPriceItem: React.FC<BestPriceItemProps> = ({
+  image,
+  discount,
+  price,
+  oldPrice,
+  title,
+  brand,
+  onAddToCart,
+}) => {
+  return (
+    <div className="w-layout-vflex bestpriceitem">
+      <div className="favcardcat">
+        <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">
+            <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>
+          </svg>
+        </div>
+      </div>
+      <div className="imgitembp">
+        <img
+          width="auto"
+          height="auto"
+          alt={title}
+          src={image}
+          loading="lazy"
+          className="image-5"
+        />
+        <div className="saletagbp">{discount}</div>
+      </div>
+      <div className="div-block-3">
+        <div className="w-layout-hflex pricecartbp">
+          <div className="actualprice">{price}</div>
+          <div className="oldpricebp">{oldPrice}</div>
+        </div>
+        <div className="w-layout-hflex flex-block-120">
+          <div className="nameitembp">{title}</div>
+          <a href="#" className="button-icon w-inline-block" onClick={onAddToCart}>
+            <div className="div-block-26">
+              <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">
+                  <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>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BestPriceItem; 

src/components/index/BestPriceSection.tsx

@@ -1,4 +1,26 @@
 import React from "react";
+import BestPriceItem from "../BestPriceItem";
+
+// Моковые данные для лучших цен
+const bestPriceItems = [
+  {
+    image: "images/162615.webp",
+    discount: "-35%",
+    price: "от 17 087 ₽",
+    oldPrice: "22 347 ₽",
+    title: 'Аккумуляторная батарея TYUMEN BATTERY "STANDARD", 6CT-60L, 60',
+    brand: "TYUMEN BATTERY",
+  },
+  // ...добавьте еще 7 карточек для примера
+  ...Array(7).fill(0).map((_, i) => ({
+    image: "images/162615.webp",
+    discount: "-35%",
+    price: `от ${(17087 + i * 1000).toLocaleString('ru-RU')} ₽`,
+    oldPrice: `${(22347 + i * 1000).toLocaleString('ru-RU')} ₽`,
+    title: `Товар №${i + 2}`,
+    brand: `Бренд ${i + 2}`,
+  }))
+];
 
 const BestPriceSection: React.FC = () => (
   <section className="main">
@@ -10,29 +32,8 @@ const BestPriceSection: React.FC = () => (
           <a href="#" className="button-24 w-button">Показать все</a>
         </div>
         <div className="w-layout-hflex flex-block-121">
-          {[...Array(8)].map((_, i) => (
-            <div className="w-layout-vflex bestpriceitem" key={i}>
-              <div className="favcardcat">
-                <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"><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></svg></div>
-              </div>
-              <div className="imgitembp"><img width="auto" height="auto" alt="" src="images/162615.webp" loading="lazy" srcSet="images/162615-p-500.webp 500w, images/162615.webp 600w" sizes="(max-width: 600px) 100vw, 600px" className="image-5" />
-                <div className="saletagbp">-35%</div>
-              </div>
-              <div className="div-block-3">
-                <div className="w-layout-hflex pricecartbp">
-                  <div className="actualprice">от 17 087 ₽</div>
-                  <div className="oldpricebp">22 347 ₽</div>
-                </div>
-                <div className="w-layout-hflex flex-block-120">
-                  <div className="nameitembp">Аккумуляторная батарея TYUMEN BATTERY "STANDARD", 6CT-60L, 60</div>
-                  <a href="#" className="button-icon w-inline-block">
-                    <div className="div-block-26">
-                      <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"><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></div>
-                    </div>
-                  </a>
-                </div>
-              </div>
-            </div>
+          {bestPriceItems.map((item, i) => (
+            <BestPriceItem key={i} {...item} />
           ))}
         </div>
       </div>

src/components/index/NewArrivalsSection.tsx

@@ -1,4 +1,40 @@
 import React from "react";
+import ArticleCard from "../ArticleCard";
+import { PartsAPIArticle } from "@/types/partsapi";
+
+// Моковые данные для новых поступлений
+const newArrivalsArticles: PartsAPIArticle[] = [
+  {
+    artId: "1",
+    artArticleNr: "6CT-60L",
+    artSupBrand: "TYUMEN BATTERY",
+    supBrand: "TYUMEN BATTERY",
+    supId: 1,
+    productGroup: "Аккумуляторная батарея",
+    ptId: 1,
+  },
+  {
+    artId: "2",
+    artArticleNr: "A0001",
+    artSupBrand: "Borsehung",
+    supBrand: "Borsehung",
+    supId: 2,
+    productGroup: "Масляный фильтр",
+    ptId: 2,
+  },
+  // ...добавьте еще 6 статей для примера
+  ...Array(6).fill(0).map((_, i) => ({
+    artId: `${i+3}`,
+    artArticleNr: `ART${i+3}`,
+    artSupBrand: `Brand${i+3}`,
+    supBrand: `Brand${i+3}`,
+    supId: i+3,
+    productGroup: `Product Group ${i+3}`,
+    ptId: i+3,
+  }))
+];
+
+const imagePath = "images/162615.webp";
 
 const NewArrivalsSection: React.FC = () => (
   <section className="main">
@@ -8,42 +44,8 @@ const NewArrivalsSection: React.FC = () => (
           <h2 className="heading-4">Новое поступление</h2>
         </div>
         <div className="w-layout-hflex core-product-search">
-          {[...Array(8)].map((_, i) => (
-            <div className="w-layout-vflex flex-block-15-copy" key={i}>
-              <div className="favcardcat">
-                <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"><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></svg></div>
-              </div>
-              <div className="div-block-4">
-                <img 
-                  src="images/162615.webp" 
-                  loading="lazy" 
-                  width="auto" 
-                  height="auto" 
-                  alt="Новое поступление: Аккумуляторная батарея TYUMEN BATTERY" 
-                  srcSet="images/162615-p-500.webp 500w, images/162615.webp 600w" 
-                  sizes="(max-width: 600px) 100vw, 600px" 
-                  className="image-5" 
-                />
-                <div className="text-block-7">-35%</div>
-              </div>
-              <div className="div-block-3">
-                <div className="w-layout-hflex flex-block-16">
-                  <div className="text-block-8">от 17 087 ₽</div>
-                  <div className="text-block-9">22 347 ₽</div>
-                </div>
-                <div className="w-layout-hflex flex-block-122">
-                  <div className="w-layout-vflex">
-                    <div className="text-block-10">Аккумуляторная батарея TYUMEN BATTERY "STANDARD", 6CT-60L, 60</div>
-                    <div className="text-block-11">Borsehung</div>
-                  </div>
-                  <a href="#" className="button-icon w-inline-block">
-                    <div className="div-block-26">
-                      <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"><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></div>
-                    </div>
-                  </a>
-                </div>
-              </div>
-            </div>
+          {newArrivalsArticles.map((article, i) => (
+            <ArticleCard key={article.artId || i} article={{ ...article, artId: article.artId }} index={i} image={imagePath} />
           ))}
         </div>
       </div>

src/components/index/TopSalesSection.tsx

@@ -1,4 +1,38 @@
 import React from "react";
+import ArticleCard from "../ArticleCard";
+import { PartsAPIArticle } from "@/types/partsapi";
+
+// Моковые данные для топ продаж
+const topSalesArticles: PartsAPIArticle[] = [
+  {
+    artId: "1",
+    artArticleNr: "6CT-60L",
+    artSupBrand: "TYUMEN BATTERY",
+    supBrand: "TYUMEN BATTERY",
+    supId: 1,
+    productGroup: "Аккумуляторная батарея",
+    ptId: 1,
+  },
+  {
+    artId: "2",
+    artArticleNr: "A0001",
+    artSupBrand: "Borsehung",
+    supBrand: "Borsehung",
+    supId: 2,
+    productGroup: "Масляный фильтр",
+    ptId: 2,
+  },
+  // ...добавьте еще 6 статей для примера
+  ...Array(6).fill(0).map((_, i) => ({
+    artId: `${i+3}`,
+    artArticleNr: `ART${i+3}`,
+    artSupBrand: `Brand${i+3}`,
+    supBrand: `Brand${i+3}`,
+    supId: i+3,
+    productGroup: `Product Group ${i+3}`,
+    ptId: i+3,
+  }))
+];
 
 const TopSalesSection: React.FC = () => (
   <section className="main">
@@ -8,32 +42,8 @@ const TopSalesSection: React.FC = () => (
           <h2 className="heading-4">Топ продаж</h2>
         </div>
         <div className="w-layout-hflex core-product-search">
-          {[...Array(8)].map((_, i) => (
-            <div className="w-layout-vflex flex-block-15-copy" key={i}>
-              <div className="favcardcat">
-                <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"><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></svg></div>
-              </div>
-              <div className="div-block-4"><img src="images/162615.webp" loading="lazy" width="auto" height="auto" alt="" srcSet="images/162615-p-500.webp 500w, images/162615.webp 600w" sizes="(max-width: 600px) 100vw, 600px" className="image-5" />
-                <div className="text-block-7">-35%</div>
-              </div>
-              <div className="div-block-3">
-                <div className="w-layout-hflex flex-block-16">
-                  <div className="text-block-8">от 17 087 ₽</div>
-                  <div className="text-block-9">22 347 ₽</div>
-                </div>
-                <div className="w-layout-hflex flex-block-122">
-                  <div className="w-layout-vflex">
-                    <div className="text-block-10">Аккумуляторная батарея TYUMEN BATTERY "STANDARD", 6CT-60L, 60</div>
-                    <div className="text-block-11">Borsehung</div>
-                  </div>
-                  <a href="#" className="button-icon w-inline-block">
-                    <div className="div-block-26">
-                      <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"><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></div>
-                    </div>
-                  </a>
-                </div>
-              </div>
-            </div>
+          {topSalesArticles.map((article, i) => (
+            <ArticleCard key={article.artId || i} article={article} index={i} />
           ))}
         </div>
       </div>

src/styles/my.css

@@ -788,7 +788,14 @@ body {
 .flex-block-15-copy {
   width: 235px!important;
   min-width: 235px!important;
+}
 
+.nameitembp {
+  flex: 0 auto;
+  align-self: auto;
+  height: 60px;
+  width: 130px;
+  overflow: hidden;
 }
 @media screen and (max-width: 991px) {
   .flex-block-15-copy {
@@ -811,6 +818,13 @@ body {
     min-width: 160px !important;
     padding: 15px;
   }
+  .nameitembp {
+    height: 36px;
+    width: 95px;
+    font-size: 12px;
+    line-height: 18px;
+    overflow: hidden;
+  }
 }