From 68382648a866aecb8dd3c10482816cc701cfb06c Mon Sep 17 00:00:00 2001 From: "@jcarymuhammedow" Date: Thu, 16 Apr 2026 14:08:57 +0500 Subject: [PATCH] fixed some bugs: filter, detail --- src/components/Navbar/Navbar.module.scss | 12 +++---- .../ProductCard/imageCarousel/index.jsx | 14 ++++---- src/i18n/locales/en.js | 2 ++ src/i18n/locales/ru.js | 2 ++ src/i18n/locales/tm.js | 2 ++ .../Category/hooks/useCategoryProducts.js | 10 +----- .../ProductDetail/ProductPage.module.scss | 30 ++++++++++++++-- src/pages/ProductDetail/index.jsx | 35 +++++++++++++++++-- 8 files changed, 80 insertions(+), 27 deletions(-) diff --git a/src/components/Navbar/Navbar.module.scss b/src/components/Navbar/Navbar.module.scss index 9949563..ff821c9 100644 --- a/src/components/Navbar/Navbar.module.scss +++ b/src/components/Navbar/Navbar.module.scss @@ -27,7 +27,7 @@ font-weight: bold; color: #ffffff; margin: 8px 14px 6px; - @media screen and (max-width: 426px) { + @media screen and (max-width: 500px) { font-size: 14px; margin: 8px 10px 6px; } @@ -57,7 +57,7 @@ gap: 10px; margin: 0 auto; cursor: pointer; - @media screen and (max-width: 426px) { + @media screen and (max-width: 500px) { height: 40px; justify-content: flex-start; padding: 10px 15px 6px; @@ -73,11 +73,11 @@ flex-direction: column; img{ width: 300px; - @media screen and (max-width: 426px) { + @media screen and (max-width: 500px) { width: 100%; } } - @media screen and (max-width: 426px) { + @media screen and (max-width: 500px) { width: 100%; } @@ -207,7 +207,7 @@ @media screen and (min-width: 1024px) { display: none; } - @media screen and (max-width: 426px) { + @media screen and (max-width: 500px) { padding: 9px 0; } } @@ -276,7 +276,7 @@ align-items: center; gap: 8px; margin-left: auto; - @media screen and (max-width: 426px) { + @media screen and (max-width: 500px) { display: none; } } \ No newline at end of file diff --git a/src/components/ProductCard/imageCarousel/index.jsx b/src/components/ProductCard/imageCarousel/index.jsx index 835a9bc..3edd075 100644 --- a/src/components/ProductCard/imageCarousel/index.jsx +++ b/src/components/ProductCard/imageCarousel/index.jsx @@ -29,15 +29,15 @@ const ImageCarousel = ({ : images[0]?.images_1200x1200 || ""; // Auto-slide functionality - useEffect(() => { - if (!hasMultipleImages || isModalOpen) return; + // useEffect(() => { + // if (!hasMultipleImages || isModalOpen) return; - const interval = setInterval(() => { - setCurrentIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1)); - }, 9000); + // const interval = setInterval(() => { + // setCurrentIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1)); + // }, 9000); - return () => clearInterval(interval); - }, [hasMultipleImages, images, isModalOpen]); + // return () => clearInterval(interval); + // }, [hasMultipleImages, images, isModalOpen]); // Reset zoom/rotation when modal closes or image changes useEffect(() => { diff --git a/src/i18n/locales/en.js b/src/i18n/locales/en.js index 5cba50b..c8bb4af 100644 --- a/src/i18n/locales/en.js +++ b/src/i18n/locales/en.js @@ -179,6 +179,8 @@ export default { similarProducts: "Similar Products", description: "Product description", price: "Price", + readMore: "Read more...", + readLess: "Show less", }, wishtList: { likedProducts: "Favorites", diff --git a/src/i18n/locales/ru.js b/src/i18n/locales/ru.js index 461c49f..091d30c 100644 --- a/src/i18n/locales/ru.js +++ b/src/i18n/locales/ru.js @@ -176,6 +176,8 @@ export default { similarProducts: "Похожие товары", description: "Описание товара", price: "Цена", + readMore: "Читать далее...", + readLess: "Свернуть", }, wishtList: { likedProducts: "Избранные", diff --git a/src/i18n/locales/tm.js b/src/i18n/locales/tm.js index 08a80f0..f12379e 100644 --- a/src/i18n/locales/tm.js +++ b/src/i18n/locales/tm.js @@ -179,6 +179,8 @@ export default { similarProducts: "Meňzeş harytlar", description: "Haryt barada düşündiriş", price: "Bahasy", + readMore: "Giňişleýin oka...", + readLess: "Gysgaltmak", }, wishtList: { likedProducts: "Halanlarym", diff --git a/src/pages/Category/hooks/useCategoryProducts.js b/src/pages/Category/hooks/useCategoryProducts.js index cce1ab9..c1992ed 100644 --- a/src/pages/Category/hooks/useCategoryProducts.js +++ b/src/pages/Category/hooks/useCategoryProducts.js @@ -65,7 +65,6 @@ const useCategoryProducts = ({ !isSubCategory && !searchQuery && !selectedFilterCategory && - !selectedFilterBrand && !brandId && !collectionId; @@ -79,6 +78,7 @@ const useCategoryProducts = ({ page: currentPage, min_price: minPrice || undefined, max_price: maxPrice || undefined, + brands: selectedFilterBrand || undefined, }, { skip: !shouldUseBaseQuery, @@ -158,14 +158,6 @@ const useCategoryProducts = ({ const executeFetch = async () => { try { - if (selectedFilterBrand) { - await fetchBrandPaginated({ - id: selectedFilterBrand, - ...fetchParams, - }); - return; - } - if (selectedFilterCategory) { await fetchCategoryPaginated({ category: { diff --git a/src/pages/ProductDetail/ProductPage.module.scss b/src/pages/ProductDetail/ProductPage.module.scss index 71b5cbd..2c71626 100644 --- a/src/pages/ProductDetail/ProductPage.module.scss +++ b/src/pages/ProductDetail/ProductPage.module.scss @@ -50,7 +50,7 @@ background: #fff; // padding: 20px; border-radius: 8px; - width: 35%; + width: 36%; flex-shrink: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); @@ -167,6 +167,7 @@ display: flex; gap: 8px; align-items: center; + width: 100%; } .addToCartButton { @@ -350,6 +351,29 @@ line-height: 1.7; } +.productDescriptionCollapsed { + display: -webkit-box; + -webkit-line-clamp: 10; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.readMoreBtn { + background: none; + border: none; + color: #1890ff; + font-weight: 500; + cursor: pointer; + padding: 8px 0 0 0; + font-size: 14px; + display: inline-block; + + &:hover { + text-decoration: underline; + } +} + + // ─── Mobile sticky bar ──────────────────────────────────────────── .productActionsMobile { display: none; @@ -376,7 +400,7 @@ display: flex; flex-direction: column; gap: 2px; - width: 35%; + width: 45%; .price { font-size: 20px; @@ -395,7 +419,7 @@ .mobileBtnContainer { display: flex; gap: 8px; - width: 65%; + width: 55%; } // ─── Similar products ───────────────────────────────────────────── diff --git a/src/pages/ProductDetail/index.jsx b/src/pages/ProductDetail/index.jsx index 18649fb..4909ff2 100644 --- a/src/pages/ProductDetail/index.jsx +++ b/src/pages/ProductDetail/index.jsx @@ -63,6 +63,18 @@ const ProductPage = ({ favoriteProducts.some((fav) => fav.product?.id === product?.id), ); + const [isDescExpanded, setIsDescExpanded] = useState(false); + const [showReadMore, setShowReadMore] = useState(false); + const descRef = React.useRef(null); + const productInfoRef = React.useRef(null); + + useEffect(() => { + if (!product?.description) return; + + const plainText = product.description.replace(/<[^>]*>/g, "").trim(); + setShowReadMore(plainText.length > 300); + }, [product?.description]); + const { getCartItem } = useCart(); const [addToCart] = useAddToCartMutation(); @@ -319,7 +331,7 @@ const ProductPage = ({ {/* KOLON 2: İsim + Meta + Description */} -
+
{/* Meta tablo */}

{product.name}

@@ -374,9 +386,28 @@ const ProductPage = ({

+ {showReadMore && !isDescExpanded && ( + + )} + {showReadMore && isDescExpanded && ( + + )}
)}