fixed some bugs

added store to navbar
added channels products
2026-05-02 14:28:50 +05:00 · 2026-04-30 23:17:44 +05:00 · 2026-04-30 16:15:29 +05:00
26 changed files with 790 additions and 183 deletions
--- a/src/app/api/brandsApi.js
+++ b/src/app/api/brandsApi.js
@@ -7,7 +7,7 @@ export const brandsApi = baseApi.injectEndpoints({
        const queryParams = new URLSearchParams();
        if (params.type) queryParams.append("type", params.type);
        if (params.page) queryParams.append("page", params.page);
-        if (params.limit) queryParams.append("limit", params.limit);
+        if (params.perPage) queryParams.append("perPage", params.perPage);
        const queryString = queryParams.toString();
        return `/brands${queryString ? `?${queryString}` : ""}`;
      },
@@ -25,10 +25,10 @@ export const brandsApi = baseApi.injectEndpoints({
          return `/brands/${params}/products`;
        }

-        const { id, page = 1, limit = 24, sorting, min_price, max_price } = params;
+        const { id, page = 1, perPage = 12, sorting, min_price, max_price } = params;
        const urlParams = new URLSearchParams();
        urlParams.append("page", page);
-        urlParams.append("limit", limit);
+        urlParams.append("perPage", perPage);
        if (sorting) urlParams.append("sorting", sorting);
        if (min_price) urlParams.append("min_price", min_price);
        if (max_price) urlParams.append("max_price", max_price);
--- a/src/app/api/categories.js
+++ b/src/app/api/categories.js
@@ -7,10 +7,10 @@ export const categoriesApi = baseApi.injectEndpoints({
    }),

    getCategoryProducts: builder.query({
-      query: ({ categoryId, page = 1, limit = 24, brands, min_price, max_price, sorting }) => {
+      query: ({ categoryId, page = 1, perPage = 12, brands, min_price, max_price, sorting }) => {
        const params = new URLSearchParams();
        params.append("page", page);
-        params.append("limit", limit);
+        params.append("perPage", perPage);
        if (brands) params.append("brands", brands);
        if (min_price) params.append("min_price", min_price);
        if (max_price) params.append("max_price", max_price);
@@ -41,7 +41,7 @@ export const categoriesApi = baseApi.injectEndpoints({

    getAllCategoryProductsPaginated: builder.query({
      async queryFn(
-        { category, page = 1, limit = 24, brands, min_price, max_price, sorting },
+        { category, page = 1, perPage = 12, brands, min_price, max_price, sorting },
        _queryApi,
        _extraOptions,
        baseQuery
@@ -58,7 +58,7 @@ export const categoriesApi = baseApi.injectEndpoints({
          if (categoryIds.length === 1) {
            const params = new URLSearchParams();
            params.append("page", page);
-            params.append("limit", limit);
+            params.append("perPage", perPage);
            if (brands) params.append("brands", brands);
            if (min_price) params.append("min_price", min_price);
            if (max_price) params.append("max_price", max_price);
@@ -86,7 +86,7 @@ export const categoriesApi = baseApi.injectEndpoints({
          const requests = categoryIds.map((categoryId) => {
            const params = new URLSearchParams();
            params.append("page", page);
-            params.append("limit", limit);
+            params.append("perPage", perPage);
            if (brands) params.append("brands", brands);
            if (min_price) params.append("min_price", min_price);
            if (max_price) params.append("max_price", max_price);
--- a/src/app/api/channelsApi.js
+++ b/src/app/api/channelsApi.js
@@ -0,0 +1,53 @@
+import { baseApi } from "./baseApi";
+
+export const channelsApi = baseApi.injectEndpoints({
+  endpoints: (builder) => ({
+    getChannelProducts: builder.query({
+      query: (params) => {
+        // params: { channelId, page, limit, min_price, max_price, sorting }
+        const {
+          channelId,
+          page = 1,
+          perPage = 24,
+          min_price,
+          max_price,
+          sorting,
+        } = params;
+        const urlParams = new URLSearchParams();
+        urlParams.append("page", page);
+        urlParams.append("perPage", perPage);
+        if (min_price) urlParams.append("min_price", min_price);
+        if (max_price) urlParams.append("max_price", max_price);
+        if (sorting) urlParams.append("sorting", sorting);
+        return `/channels/${channelId}/products?${urlParams.toString()}`;
+      },
+      transformResponse: (response) => ({
+        data: response.data || response,
+        pagination: response.pagination || {},
+      }),
+    }),
+
+    getChannels: builder.query({
+      query: (params = {}) => {
+        const queryParams = new URLSearchParams();
+        if (params.page) queryParams.append("page", params.page);
+        if (params.perPage) queryParams.append("perPage", params.perPage);
+        if (params.search) queryParams.append("search", params.search);
+        const queryString = queryParams.toString();
+        return `/channels${queryString ? `?${queryString}` : ""}`;
+      },
+      transformResponse: (response) => ({
+        data: response.data || response,
+        pagination: response.pagination || {},
+      }),
+    }),
+  }),
+  overrideExisting: true,
+});
+
+export const {
+  useGetChannelProductsQuery,
+  useLazyGetChannelProductsQuery,
+  useGetChannelsQuery,
+  useLazyGetChannelsQuery,
+} = channelsApi;
--- a/src/app/api/collectionsApi.js
+++ b/src/app/api/collectionsApi.js
@@ -19,17 +19,17 @@ export const collectionsApi = baseApi.injectEndpoints({
    }),

    checkCollectionHasProducts: builder.query({
-      query: (collectionId) => `/collections/${collectionId}/products?limit=1`,
+      query: (collectionId) => `/collections/${collectionId}/products`,
      transformResponse: (response) => ({
        hasProducts: response.data && response.data.length > 0,
      }),
    }),

    getCollectionProductsPaginated: builder.query({
-      query: ({ collectionId, page = 1, limit = 24, brands, min_price, max_price, sorting }) => {
+      query: ({ collectionId, page = 1, perPage = 24, brands, min_price, max_price, sorting }) => {
        const params = new URLSearchParams();
        params.append("page", page);
-        params.append("limit", limit);
+        params.append("perPage", perPage);
        if (brands) params.append("brands", brands);
        if (min_price) params.append("min_price", min_price);
        if (max_price) params.append("max_price", max_price);
--- a/src/app/api/filtersApi.js
+++ b/src/app/api/filtersApi.js
@@ -15,6 +15,9 @@ export const filtersApi = baseApi.injectEndpoints({
        if (params?.brand_id) {
          queryParams.append("brand_id", String(params.brand_id))
        }
+        if (params?.channel_id) {
+          queryParams.append("channel_id", String(params.channel_id))
+        }

        return `/filters?${queryParams.toString()}`
      },
@@ -22,6 +25,7 @@ export const filtersApi = baseApi.injectEndpoints({
        return {
          categories: response.data?.categories || [],
          brands: response.data?.brands || [],
+          channels: response.data?.channels || [],
        }
      },
      keepUnusedDataFor: 300,
@@ -40,7 +44,9 @@ export const filtersApi = baseApi.injectEndpoints({
        if (queryArgs.brand_id) {
          parts.push(`brd:${queryArgs.brand_id}`);
        }
-        
+        if (queryArgs.channel_id) {
+          parts.push(`chn:${queryArgs.channel_id}`);
+        }
        return parts.length > 0 ? parts.join('|') : 'no-params';
      },
      
@@ -66,7 +72,9 @@ export const filtersApi = baseApi.injectEndpoints({
        if (arg.brand_id) {
          tags.push({ type: "Filters", id: `brd-${arg.brand_id}` });
        }
-        
+        if (arg.channel_id) {
+          tags.push({ type: "Filters", id: `chn-${arg.channel_id}` });
+        }
        return tags;
      },
    }),
--- a/src/components/CategoryDropdown/DropdownMenu.module.scss
+++ b/src/components/CategoryDropdown/DropdownMenu.module.scss
@@ -87,24 +87,31 @@
  overflow: hidden;
  width: 1336px;
  max-height: 520px;
-  // max-width: calc(100vw - 32px);
+  max-width: calc(100vw - 32px);
 }

 // ---- LEFT LIST ----
 .categoriesList {
  width: 270px;
  flex-shrink: 0;
-  border-right: 1px solid rgba(255, 255, 255, 0.12);
+  border-right: 1px solid #e5e7eb;
  padding: 10px 0;
  max-height: 520px;
  overflow-y: auto;

  &::-webkit-scrollbar {
-    width: 4px;
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    background: #f9fafb;
  }
  &::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 2px;
+    background: #d1d5db;
+    border-radius: 10px;
+
+    &:hover {
+      background: #9ca3af;
+    }
  }
 }

@@ -119,13 +126,13 @@
  transition: background-color 0.12s, color 0.12s;

  &:hover {
-    background-color: rgba(255, 255, 255, 0.08);
-    color: #000;
+    background-color: #f3f4f6;
+    color: #e63946;
  }

  &.active {
-    background-color: rgba(255, 255, 255, 0.15);
-    color: #000;
+    background-color: #f3f4f6;
+    color: #e63946;

    .title {
      font-weight: 600;
@@ -138,7 +145,7 @@
 }

 .chevron {
-  color: rgba(255, 255, 255, 0.4);
+  color: #9ca3af;
  flex-shrink: 0;
 }

@@ -151,11 +158,18 @@
  background: #ffffff;

  &::-webkit-scrollbar {
-    width: 4px;
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    background: #f9fafb;
  }
  &::-webkit-scrollbar-thumb {
    background: #d1d5db;
-    border-radius: 2px;
+    border-radius: 10px;
+
+    &:hover {
+      background: #9ca3af;
+    }
  }
 }

--- a/src/components/Checkout/index.jsx
+++ b/src/components/Checkout/index.jsx
@@ -174,11 +174,11 @@ const Checkout = ({
                }
              >
                <span className={styles.optionTitle}>{payment.name}</span>
-                <span className={styles.optionDesc}>
+                {/* <span className={styles.optionDesc}>
                  {payment.name === "Nagt"
                    ? t("checkout.payment_in_cash_upon_delivery_of_the_order")
                    : t("checkout.payment_by_card")}
-                </span>
+                </span> */}
              </div>
            </div>
          ))}
--- a/src/components/Footer/index.jsx
+++ b/src/components/Footer/index.jsx
@@ -94,7 +94,6 @@ const Footer = () => {
                    />
                  </a>
                </div>
-                <img src={apk} alt="Download APK" className={styles.appLogo} />
              </div>
            </div>
          </div>
--- a/src/components/HomeBrands/HomeBrands.module.scss
+++ b/src/components/HomeBrands/HomeBrands.module.scss
@@ -7,23 +7,15 @@
  }
 }

-.brandsScroll {
-  display: flex;
-  gap: 12px;
-  overflow-x: auto;
+.brandsSwiper {
  padding-bottom: 8px;
-  
-  /* Hide scrollbar for Webkit */
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  /* Hide scrollbar for Firefox, IE, Edge */
-  -ms-overflow-style: none;
-  scrollbar-width: none;
+}
+
+.brandSlide {
+  width: auto;
 }

 .brandCard {
-  flex: 0 0 auto;
  width: 122px;
  height: 50px;
  background: #ffffff;
@@ -56,37 +48,8 @@
  height: 100%;
 }

-.allButton {
-  flex: 0 0 auto;
-  width: 122px;
-  height: 67.6px;
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  gap: 4px;
-  color: #111827;
-  font-weight: 600;
-  font-size: 14px;
-
-  &:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-    transform: translateY(-1px);
-    color: #aaaaaa;
-  }
-
-  svg {
-    font-size: 16px;
-  }
-}
-
@media screen and (max-width: 768px) {
-  .brandCard, .allButton {
+  .brandCard {
    width: 100px;
-    // height: 79.2px;
  }
 }
--- a/src/components/HomeBrands/index.jsx
+++ b/src/components/HomeBrands/index.jsx
@@ -1,77 +1,67 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
 import { useGetBrandsQuery } from '../../app/api/brandsApi';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay } from 'swiper/modules';
+import 'swiper/css';
 import styles from './HomeBrands.module.scss';
 import { Logo } from '../Icons';
-import { IoIosArrowForward } from 'react-icons/io';

 const HomeBrands = () => {
-  const { t, i18n } = useTranslation();
  const navigate = useNavigate();
-  // We fetch a larger amount so we have enough to shuffle.
-  const { data: brandsData, isLoading } = useGetBrandsQuery({ limit: 50 });
-
-  const randomBrands = useMemo(() => {
-    if (!brandsData) return [];
-    // Create a shallow copy and shuffle it
-    const shuffled = [...brandsData].sort(() => 0.5 - Math.random());
-    // Pick the first 9 brands
-    return shuffled.slice(0, 8);
-  }, [brandsData]);
+  // Fetch brands.
+  const { data: brandsData, isLoading } = useGetBrandsQuery({ limit: 100 });

  if (isLoading || !brandsData || brandsData.length === 0) return null;

-  // "Еще" in ru, "Hemmesi" in tm, "More" in en
-  const getMoreText = () => {
-    const lang = i18n.language;
-    if (lang === 'ru') return 'Еще';
-    if (lang === 'en') return 'More';
-    return 'Hemmesi';
-  };
-
  return (
    <div className={styles.container}>
-      <div className={styles.brandsScroll}>
-        {randomBrands.map((brand) => (
-          <div 
-            key={brand.id} 
-            className={styles.brandCard}
-            onClick={() => navigate(`/brands/${brand.id}`)}
-          >
-            {brand.media?.[0]?.thumbnail || brand.media?.[0]?.images_800x800 || brand.logo ? (
-              <img
-                src={
-                  brand.media?.[0]?.thumbnail ||
-                  brand.media?.[0]?.images_800x800 ||
-                  brand.logo
-                }
-                alt={brand.name}
-                onError={(e) => {
-                  e.target.style.display = "none";
-                  e.target.nextSibling.style.display = "flex";
-                }}
-              />
-            ) : (
-              <div className={styles.logoFallback}>
+      <Swiper
+        modules={[Autoplay]}
+        spaceBetween={12}
+        slidesPerView={'auto'}
+        slidesPerGroup={2}
+        loop={true}
+        autoplay={{
+          delay: 3000,
+          disableOnInteraction: false,
+        }}
+        className={styles.brandsSwiper}
+      >
+        {brandsData.map((brand) => (
+          <SwiperSlide key={brand.id} className={styles.brandSlide}>
+            <div 
+              className={styles.brandCard}
+              onClick={() => navigate(`/brands/${brand.id}`)}
+            >
+              {brand.media?.[0]?.thumbnail || brand.media?.[0]?.images_800x800 || brand.logo ? (
+                <img
+                  src={
+                    brand.media?.[0]?.thumbnail ||
+                    brand.media?.[0]?.images_800x800 ||
+                    brand.logo
+                  }
+                  alt={brand.name}
+                  onError={(e) => {
+                    e.target.style.display = "none";
+                    e.target.nextSibling.style.display = "flex";
+                  }}
+                />
+              ) : (
+                <div className={styles.logoFallback}>
+                  <Logo width={40} height={40} />
+                </div>
+              )}
+              <div className={styles.logoFallback} style={{ display: "none" }}>
                <Logo width={40} height={40} />
              </div>
-            )}
-            <div className={styles.logoFallback} style={{ display: "none" }}>
-              <Logo width={40} height={40} />
            </div>
-          </div>
+          </SwiperSlide>
        ))}
-        <div 
-          className={styles.allButton}
-          onClick={() => navigate('/brands')}
-        >
-          <span>{getMoreText()}</span>
-          <IoIosArrowForward />
-        </div>
-      </div>
+      </Swiper>
    </div>
  );
 };

 export default HomeBrands;
+
--- a/src/components/Icons/index.jsx
+++ b/src/components/Icons/index.jsx
@@ -207,7 +207,22 @@ export const OrderIcon = () => (
    ></path>
  </svg>
 );
-
+export const StoreIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="#4b5563"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    width={16}
+    height={16}
+  >
+    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
+    <polyline points="9 22 9 12 15 12 15 22"></polyline>
+  </svg>
+);
 export const CategoryIcon = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
--- a/src/components/Navbar/NavbarDown.jsx
+++ b/src/components/Navbar/NavbarDown.jsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
-import { CartIcon, WishlistIcon, BrandIcon, OrderIcon } from "../Icons";
+import { CartIcon, WishlistIcon, BrandIcon, OrderIcon, StoreIcon } from "../Icons";
 import styles from "./Navbar.module.scss";
-import { UserOutlined, LogoutOutlined, HomeOutlined } from "@ant-design/icons";
+import { UserOutlined, LogoutOutlined, HomeOutlined, ShopOutlined } from "@ant-design/icons";
 import { FaGlobe } from "react-icons/fa6";
 import { Input, Badge, Menu, Dropdown } from "antd";
 const { Search } = Input;
@@ -151,6 +151,15 @@ const NavbarDown = () => {
                </button>
              </Link>
            </li>
+            <div className={styles.stick}></div>
+            <li>
+              <Link to={"/stores"}>
+                <button className={styles.navButton}>
+                  <ShopOutlined />
+                  {t("navbar.stores")}
+                </button>
+              </Link>
+            </li>
            <li className={styles.searchWrapper}>
              <CiSearch />
              <input
@@ -255,7 +264,10 @@ const NavbarDown = () => {
          </div>
          <div className={styles.stick}></div>
          <div className={styles.location}>
-            <CiLocationOn /> Aşgabat
+            <Link to={'/stores'} style={{textDecoration: 'none'}}><button className={styles.navButton}>
+              <ShopOutlined />
+              {t("navbar.stores")}
+            </button></Link>
          </div>
          <div className={styles.stick}></div>
          <div className={styles.searchIcon} onClick={toggleSearch}>
--- a/src/components/ProductCard/ProductCard.module.scss
+++ b/src/components/ProductCard/ProductCard.module.scss
@@ -72,8 +72,16 @@
  font-weight: 600;
  color: #333;
  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  height: 2.4em;
+  line-height: 1.2;
+
  @media screen and (max-width: 426px) {
    font-size: 14px;
+    height: 2.8em;
  }
 }

@@ -82,9 +90,15 @@
  color: #666;
  line-height: 1.4;
  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  height: 2.8em;

  @media screen and (max-width: 1023px) {
    font-size: 12px;
+    height: 2.8em;
  }
 }

@@ -92,8 +106,8 @@
  display: flex;
  align-items: center;
  gap: 0.5rem;
-  margin-top: 0.5rem;
-  margin: 0;
+  margin-top: auto;
+  margin-bottom: 0;
  justify-content: space-between;
 }

--- a/src/components/ProductCard/index.jsx
+++ b/src/components/ProductCard/index.jsx
@@ -37,7 +37,7 @@ const ProductCard = ({
  onAddToCart,
  onToggleFavorite,
  isFavorite = false,
-  descriptionMaxLength = 85,
+  descriptionMaxLength = 120,
 }) => {
  const { t } = useTranslation();
  const navigate = useNavigate();
--- a/src/i18n/locales/en.js
+++ b/src/i18n/locales/en.js
@@ -5,6 +5,7 @@ export default {
    login: "Login",
    signUp: "Sign Up",
    brands: "Brands",
+    stores: "Stores",
    search: "Search by product name...",
    cart: "Cart",
    home: "Home",
--- a/src/i18n/locales/ru.js
+++ b/src/i18n/locales/ru.js
@@ -5,6 +5,7 @@ export default {
    login: "Войти",
    signUp: "Регистрация",
    brands: "Бренды",
+    stores: "Магазины",
    search: "Поиск по названию товара...",
    cart: "Корзина",
    home: "Главная",
--- a/src/i18n/locales/tm.js
+++ b/src/i18n/locales/tm.js
@@ -5,6 +5,7 @@ export default {
    login: "Giriş",
    signUp: "Agza bolmak",
    brands: "Brendler",
+    stores: "Dükanlar",
    search: "Haryt ady boýunça gözleg...",
    cart: "Sebet",
    home: "Baş sahypa",
--- a/src/pages/Category/CategoryPage.module.scss
+++ b/src/pages/Category/CategoryPage.module.scss
@@ -499,3 +499,45 @@ width: 85%;
    }
  }
 }
+
+.channelHeader {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  background: #fff;
+  padding: 20px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  margin-bottom: 20px;
+
+  .channelLogo {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 1px solid #eee;
+  }
+
+  .channelInfo {
+    h1 {
+      margin: 0;
+      font-size: 24px;
+      font-weight: 700;
+      color: #333;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    padding: 15px;
+    gap: 15px;
+    
+    .channelLogo {
+      width: 60px;
+      height: 60px;
+    }
+    
+    .channelInfo h1 {
+      font-size: 20px;
+    }
+  }
+}
--- a/src/pages/Category/hooks/useCategoryData.js
+++ b/src/pages/Category/hooks/useCategoryData.js
@@ -5,11 +5,13 @@ import {
  useGetFiltersQuery,
  useLazyGetFiltersQuery,
 } from "../../../app/api/filtersApi";
+import { useGetChannelsQuery } from "../../../app/api/channelsApi";

 const useCategoryData = ({
  categoryId,
  collectionId,
  brandId,
+  channelId,
  selectedFilterCategory,
  searchQuery,
 }) => {
@@ -23,8 +25,9 @@ const useCategoryData = ({
    if (categoryId) return { category_id: categoryId };
    if (collectionId) return { collection_id: collectionId };
    if (brandId) return { brand_id: brandId };
+    if (channelId) return { channel_id: channelId };
    return null;
-  }, [categoryId, collectionId, brandId, selectedFilterCategory, searchQuery]);
+  }, [categoryId, collectionId, brandId, channelId, selectedFilterCategory, searchQuery]);

  const {
    data: filtersData,
@@ -44,6 +47,19 @@ const useCategoryData = ({
    skip: !collectionId,
  });

+  const {
+    data: channelsListData,
+    isLoading: channelsLoading,
+    error: channelsError,
+  } = useGetChannelsQuery({ perPage: 100 }, {
+    skip: !channelId,
+  });
+
+  const channelData = useMemo(() => {
+    if (!channelId || !channelsListData?.data) return null;
+    return channelsListData.data.find(c => String(c.id) === String(channelId));
+  }, [channelId, channelsListData]);
+
  const isSubCategory = useMemo(() => {
    if (!categoriesData?.data || !categoryId) return false;

@@ -92,8 +108,8 @@ const useCategoryData = ({
    setSelectedCategory(category);
  }, [categoryId, categoriesData]);

-  const isLoading = filtersLoading || collectionLoading;
-  const hasError = filtersError || collectionError;
+  const isLoading = filtersLoading || collectionLoading || channelsLoading;
+  const hasError = filtersError || collectionError || channelsError;

  return {
    categoriesData,
@@ -101,6 +117,7 @@ const useCategoryData = ({
    isSubCategory,
    filtersData: activeFilters,
    collectionData,
+    channelData,
    isLoading,
    hasError,
    fetchFilters,
--- a/src/pages/Category/hooks/useCategoryProducts.js
+++ b/src/pages/Category/hooks/useCategoryProducts.js
@@ -1,15 +1,17 @@
-import { useState, useEffect, useRef, useCallback } from "react";
+import { useState, useEffect, useRef } from "react";
 import {
  useLazyGetAllCategoryProductsPaginatedQuery,
  useGetCategoryProductsQuery,
 } from "../../../app/api/categories";
 import { useLazyGetBrandProductsQuery } from "../../../app/api/brandsApi";
 import { useLazyGetCollectionProductsPaginatedQuery } from "../../../app/api/collectionsApi";
+import { useLazyGetChannelProductsQuery } from "../../../app/api/channelsApi"; // EKLE

 const useCategoryProducts = ({
  categoryId,
  collectionId,
  brandId,
+  channelId,
  selectedCategory,
  isSubCategory,
  currentPage,
@@ -27,8 +29,6 @@ const useCategoryProducts = ({
  const [isFetching, setIsFetching] = useState(false);

  const activeRequestId = useRef(0);
-  // Tüm parametreleri ref'te tut — stale closure'ı tamamen engelle
-  const paramsRef = useRef({});

  const shouldUseBaseQuery =
    categoryId &&
@@ -36,7 +36,8 @@ const useCategoryProducts = ({
    !searchQuery &&
    !selectedFilterCategory &&
    !brandId &&
-    !collectionId;
+    !collectionId &&
+    !channelId;

  const { data: baseQueryData, isFetching: baseQueryFetching } =
    useGetCategoryProductsQuery(
@@ -54,8 +55,17 @@ const useCategoryProducts = ({
  const [fetchCategoryPaginated] = useLazyGetAllCategoryProductsPaginatedQuery();
  const [fetchBrandPaginated] = useLazyGetBrandProductsQuery();
  const [fetchCollectionPaginated] = useLazyGetCollectionProductsPaginatedQuery();
+  const [fetchChannelPaginated] = useLazyGetChannelProductsQuery();
+
+  // ✅ Ref'e al — dependency array'den çıkar, stale closure yok
+  const fetchersRef = useRef({});
+  fetchersRef.current = {
+    fetchCategoryPaginated,
+    fetchBrandPaginated,
+    fetchCollectionPaginated,
+    fetchChannelPaginated,
+  };

-  // Base query handler
  useEffect(() => {
    if (!shouldUseBaseQuery || !baseQueryData) return;
    const data = baseQueryData.data || [];
@@ -69,11 +79,23 @@ const useCategoryProducts = ({
    setHasMore(hasNextPage);
  }, [baseQueryData, currentPage, shouldUseBaseQuery]);

-  // Her fetch çağrısını doğrudan effect içinde yap — useCallback kaldırıldı
+  
+
  useEffect(() => {
    if (shouldUseBaseQuery || searchQuery) return;

-    // Parametreleri snapshot al
+
+      console.log("🔥 LAZY EFFECT TRIGGERED", {
+    shouldUseBaseQuery,
+    categoryId,
+    collectionId,
+    brandId,
+    channelId,
+    isSubCategory,
+    selectedFilterCategory,
+    selectedCategory,
+  });
+
    const snapshot = {
      currentPage,
      selectedFilterCategory,
@@ -81,6 +103,7 @@ const useCategoryProducts = ({
      isSubCategory,
      brandId,
      collectionId,
+      channelId,
      selectedFilterBrand,
      minPrice,
      maxPrice,
@@ -92,9 +115,16 @@ const useCategoryProducts = ({

    const run = async () => {
      try {
+        const {
+          fetchCategoryPaginated,
+          fetchBrandPaginated,
+          fetchCollectionPaginated,
+          fetchChannelPaginated,
+        } = fetchersRef.current; // ✅ ref'ten oku
+
        const params = {
          page: snapshot.currentPage,
-          limit: 24,
+          perPage: 12,
          brands: snapshot.selectedFilterBrand || undefined,
          min_price: snapshot.minPrice || undefined,
          max_price: snapshot.maxPrice || undefined,
@@ -123,6 +153,11 @@ const useCategoryProducts = ({
            collectionId: snapshot.collectionId,
            ...params,
          }).unwrap();
+        } else if (snapshot.channelId) {
+          result = await fetchChannelPaginated({
+            channelId: snapshot.channelId,
+            ...params,
+          }).unwrap();
        }

        if (requestId !== activeRequestId.current) return;
@@ -159,7 +194,6 @@ const useCategoryProducts = ({

    run();
  }, [
-    // useCallback YOK — her dependency değişince effect direkt çalışır
    shouldUseBaseQuery,
    searchQuery,
    currentPage,
@@ -168,13 +202,12 @@ const useCategoryProducts = ({
    isSubCategory,
    brandId,
    collectionId,
+    channelId,
    selectedFilterBrand,
    minPrice,
    maxPrice,
    sorting,
-    fetchCategoryPaginated,
-    fetchBrandPaginated,
-    fetchCollectionPaginated,
+    // ✅ fetcher fonksiyonlar dependency'den tamamen çıktı
  ]);

  const isLoading = shouldUseBaseQuery ? baseQueryFetching : isFetching;
@@ -188,4 +221,5 @@ const useCategoryProducts = ({
  };
 };

-export default useCategoryProducts;
+export default useCategoryProducts;
+
--- a/src/pages/Category/index.jsx
+++ b/src/pages/Category/index.jsx
@@ -19,16 +19,19 @@ import MobilePhoneCard from "./components/Mobilephonecard";

 const CategoryPage = () => {
  const { t } = useTranslation();
-  const { categoryId, collectionId, brandId } = useParams();
+  const { categoryId, collectionId, brandId, channelId } = useParams();
  const location = useLocation();
  const navigate = useNavigate();

  const routeKey = useMemo(
-    () => `${categoryId || "x"}-${collectionId || "x"}-${brandId || "x"}`,
-    [categoryId, collectionId, brandId],
+    () => `${categoryId || "x"}-${collectionId || "x"}-${brandId || "x"}-${channelId || "x"}`,
+    [categoryId, collectionId, brandId, channelId],
  );

  const getSavedState = (key, defaultVal) => {
+    if (location.state?.clearFilters) {
+      return defaultVal;
+    }
    try {
      const saved = sessionStorage.getItem(`category_${key}_${routeKey}`);
      if (saved) return JSON.parse(saved);
@@ -85,6 +88,7 @@ const CategoryPage = () => {
    isSubCategory,
    filtersData,
    collectionData,
+    channelData,
    isLoading: dataLoading,
    hasError: dataError,
    fetchFilters,
@@ -92,6 +96,7 @@ const CategoryPage = () => {
    categoryId,
    collectionId,
    brandId,
+    channelId,
    selectedFilterCategory: filterState.selectedFilterCategory,
    searchQuery,
  });
@@ -105,6 +110,7 @@ const CategoryPage = () => {
  } = useCategoryProducts({
    categoryId,
    collectionId,
+    channelId,
    brandId,
    selectedCategory,
    isSubCategory,
@@ -133,14 +139,16 @@ const CategoryPage = () => {
      return;
    }

-    if (prevRouteRef.current === routeKey) return;
+    if (prevRouteRef.current === routeKey && !location.state?.clearFilters) return;

    prevRouteRef.current = routeKey;

-    const savedPageState = getSavedStateByKey(routeKey, "pageState");
-    const savedFilterState = getSavedStateByKey(routeKey, "filterState");
-    const savedProducts = getSavedStateByKey(routeKey, "products");
-    const savedHasMore = getSavedStateByKey(routeKey, "hasMore");
+    const shouldClear = location.state?.clearFilters;
+
+    const savedPageState = shouldClear ? null : getSavedStateByKey(routeKey, "pageState");
+    const savedFilterState = shouldClear ? null : getSavedStateByKey(routeKey, "filterState");
+    const savedProducts = shouldClear ? null : getSavedStateByKey(routeKey, "products");
+    const savedHasMore = shouldClear ? null : getSavedStateByKey(routeKey, "hasMore");

    if (savedPageState && savedFilterState && savedProducts) {
      setPageState(savedPageState);
@@ -152,8 +160,10 @@ const CategoryPage = () => {
        setTimeout(() => window.scrollTo(0, savedScroll), 100);
      }
    } else {
-      setAllProducts([]);
-      setHasMore(true);
+      if (prevRouteRef.current !== routeKey) {
+        setAllProducts([]);
+        setHasMore(true);
+      }
      setPageState({
        currentPage: 1,
        minPrice: "",
@@ -364,18 +374,35 @@ const CategoryPage = () => {

  return (
    <div className={styles.categoryPage}>
-      {(categoryId || filterState.selectedFilterCategory) && (
-        <CategoryBreadcrumbs
-          categoriesData={categoriesData}
-          categoryId={filterState.selectedFilterCategory || categoryId}
-          onCategoryClick={handleCategoryClick}
-        />
-      )}
+      {channelId && channelData ? (
+        <div className={styles.channelHeader}>
+          {channelData.media?.[0]?.thumbnail && (
+            <img
+              src={channelData.media[0].thumbnail}
+              alt={channelData.name}
+              className={styles.channelLogo}
+            />
+          )}
+          <div className={styles.channelInfo}>
+            <h1>{channelData.name}</h1>
+          </div>
+        </div>
+      ) : (
+        <>
+          {(categoryId || filterState.selectedFilterCategory) && (
+            <CategoryBreadcrumbs
+              categoriesData={categoriesData}
+              categoryId={filterState.selectedFilterCategory || categoryId}
+              onCategoryClick={handleCategoryClick}
+            />
+          )}

-      <h2>{pageTitle}</h2>
-      <p className={styles.sum}>
-        {t("category.total")}: {totalItems} {t("category.items")}
-      </p>
+          <h2>{pageTitle}</h2>
+          <p className={styles.sum}>
+            {t("category.total")}: {totalItems} {t("category.items")}
+          </p>
+        </>
+      )}

      <div className={styles.bars}>
        <button
--- a/src/pages/ProductDetail/ProductPage.module.scss
+++ b/src/pages/ProductDetail/ProductPage.module.scss
@@ -329,8 +329,8 @@
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.7) 0%,
-    rgba(0, 0, 0, 0.3) 70%,
-    rgba(255, 255, 255, 0) 100%
+    rgba(0, 0, 0, 0.3) 35%,
+    rgba(255, 255, 255, 0) 35%
  );
  z-index: 2;
  opacity: 0;
@@ -386,9 +386,6 @@
 }

 .productDescriptionCollapsed {
-  display: -webkit-box;
-  -webkit-line-clamp: 10;
-  -webkit-box-orient: vertical;
  overflow: hidden;
 }

--- a/src/pages/ProductDetail/index.jsx
+++ b/src/pages/ProductDetail/index.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { useParams, useNavigate } from "react-router-dom";
+import { useParams, useNavigate, Link } from "react-router-dom";
 import styles from "./ProductPage.module.scss";
 import { IoMdHeartEmpty, IoMdHeart } from "react-icons/io";
 import { FaShoppingCart } from "react-icons/fa";
@@ -69,14 +69,78 @@ const ProductPage = ({

  const [isDescExpanded, setIsDescExpanded] = useState(false);
  const [showReadMore, setShowReadMore] = useState(false);
+  const [collapsedMaxHeight, setCollapsedMaxHeight] = useState(null);
  const descRef = React.useRef(null);
  const productInfoRef = React.useRef(null);
+  const imageColRef = React.useRef(null);

+  // Ürün değişince desc'i kapat
+  useEffect(() => {
+    setIsDescExpanded(false);
+  }, [productId]);
+
+  // Resim kolonu yüksekliği ile desc kolonu yüksekliğini karşılaştır
  useEffect(() => {
    if (!product?.description) return;

-    const plainText = product.description.replace(/<[^>]*>/g, "").trim();
-    setShowReadMore(plainText.length > 300);
+    const imageEl = imageColRef.current;
+    const infoEl = productInfoRef.current;
+    if (!imageEl || !infoEl) return;
+
+    const checkHeights = () => {
+      const descEl = descRef.current;
+      if (!descEl) return;
+
+      const descTrueH = descEl.scrollHeight;
+      const descVisibleH = descEl.getBoundingClientRect().height;
+
+      // ── Mobil: tek kolon layout, sabit eşik kullan ──────────────────
+      if (window.innerWidth <= 639) {
+        const MOBILE_THRESHOLD = 220;
+        if (descTrueH > MOBILE_THRESHOLD) {
+          setShowReadMore(true);
+          setCollapsedMaxHeight(MOBILE_THRESHOLD);
+        } else {
+          setShowReadMore(false);
+          setCollapsedMaxHeight(null);
+        }
+        return;
+      }
+
+      // ── Desktop/tablet: resim kolonu yüksekliğiyle karşılaştır ──────
+      const imageH = imageEl.getBoundingClientRect().height;
+      if (imageH === 0) return;
+
+      const infoCurrentH = infoEl.getBoundingClientRect().height;
+      // Info kolonunun gerçek (kısıtsız) yüksekliği:
+      const infoTrueH = infoCurrentH + (descTrueH - descVisibleH);
+
+      if (infoTrueH > imageH) {
+        const overflow = infoTrueH - imageH;
+        const newDescMaxH = Math.max(descTrueH - overflow, 60);
+        setShowReadMore(true);
+        setCollapsedMaxHeight(newDescMaxH);
+      } else {
+        setShowReadMore(false);
+        setCollapsedMaxHeight(null);
+      }
+    };
+
+    // İlk kontrol (DOM yerleştikten sonra)
+    const raf = requestAnimationFrame(checkHeights);
+
+    const ro = new ResizeObserver(checkHeights);
+    ro.observe(imageEl);
+    ro.observe(infoEl);
+
+    // Mobil↔desktop geçişi için window resize de dinlenir
+    window.addEventListener("resize", checkHeights);
+
+    return () => {
+      cancelAnimationFrame(raf);
+      ro.disconnect();
+      window.removeEventListener("resize", checkHeights);
+    };
  }, [product?.description]);

  const { getCartItem } = useCart();
@@ -325,7 +389,7 @@ const ProductPage = ({
      {/* ── 3 kolon ana section ── */}
      <div className={styles.productSection}>
        {/* KOLON 1: Resim */}
-        <div className={styles.productImage}>
+        <div className={styles.productImage} ref={imageColRef}>
          <ImageCarousel
            images={product.media}
            altText={product.name}
@@ -366,12 +430,14 @@ const ProductPage = ({
            )}

            {product.channel?.[0]?.name && (
-              <div className={styles.metaItem}>
+              
+                <Link to={`/channel/${product.channel[0].id}`} target="_blank" state={{ clearFilters: true }} className={styles.metaItem}>
                <span className={styles.metaLabel}>{t("order.channel")}</span>
                <span className={styles.metaValue}>
                  {product.channel[0].name}
                </span>
-              </div>
+                </Link>
+              
            )}

            {product.properties?.length > 0 && (
@@ -408,6 +474,11 @@ const ProductPage = ({
                  className={`${styles.productDescription} ${
                    !isDescExpanded && showReadMore ? styles.productDescriptionCollapsed : ""
                  }`}
+                  style={
+                    !isDescExpanded && showReadMore && collapsedMaxHeight
+                      ? { maxHeight: `${collapsedMaxHeight}px` }
+                      : undefined
+                  }
                  dangerouslySetInnerHTML={{ __html: product.description }}
                />
                {showReadMore && !isDescExpanded && (
@@ -440,7 +511,7 @@ const ProductPage = ({
              <div className={styles.priceRight}>
                {isPriceZero(product.price_amount) ? (
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontWeight: 600 }}>
-                    {t("cart.pendingPriceTitle")} <PendingPriceBadge />
+                     <PendingPriceBadge />
                  </span>
                ) : (
                  <>
--- a/src/pages/Stores/Stores.module.scss
+++ b/src/pages/Stores/Stores.module.scss
@@ -0,0 +1,143 @@
+.storesContainer {
+  padding: 1rem 4.4rem;
+  max-width: 1336px;
+  margin: 0 auto;
+  @media screen and (max-width: 1023px) {
+    padding: 1rem 1.25rem;
+  }
+}
+
+.searchWrapper {
+  margin-bottom: 24px;
+  display: flex;
+  align-items: center;
+  height: 40px;
+  svg {
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    transform: translateX(35%);
+    color: #9ca3af;
+  }
+
+  input {
+    width: 46%;
+    height: 38px;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    font-size: 14px;
+    padding-left: 40px;
+    outline: none;
+    @media screen and (max-width: 1023px) {
+      width: 100%;
+    }
+
+    &::placeholder {
+      color: #9ca3af;
+    }
+  }
+}
+
+.categorySection {
+  margin-bottom: 40px;
+
+  h2 {
+    font-size: 24px;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: #111827;
+    cursor: pointer;
+    &:hover {
+      color: #aaaaaa;
+    }
+  }
+}
+
+.storesGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 180px));
+  gap: 16px;
+  @media screen and (max-width: 1023px) {
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 10px;
+  }
+  @media screen and (max-width: 900px) {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 5px;
+  }
+  @media screen and (max-width: 798px) {
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 5px;
+  }
+}
+
+.storeCard {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  text-align: center;
+  transition: all 0.2s ease;
+  border: 1px solid #e5e7eb;
+  cursor: pointer;
+  @media screen and (max-width: 900px) {
+    padding: 5px;
+  }
+
+  &:hover {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    transform: translateY(-2px);
+  }
+
+  .imageWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 12px;
+    position: relative;
+    aspect-ratio: 4/3;
+
+    img {
+       height: 100%;
+      object-fit:contain;
+    }
+  }
+
+  .placeholder {
+    width: 80px;
+    height: 80px;
+    background: #f3f4f6;
+    border-radius: 8px;
+  }
+
+  .storeName {
+    font-size: 16px;
+    color: #374151;
+    margin: 0;
+  }
+}
+
+.skeleton {
+  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+
+.logoFallback {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 120px;
+  height: 100%;
+  border-radius: 4px;
+  object-fit: contain;
+}
--- a/src/pages/Stores/index.jsx
+++ b/src/pages/Stores/index.jsx
@@ -0,0 +1,202 @@
+import React, { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { useLazyGetChannelsQuery } from "../../app/api/channelsApi";
+import styles from "./Stores.module.scss";
+import { CiSearch } from "react-icons/ci";
+import { useNavigate } from "react-router-dom";
+import { Logo } from "../../components/Icons";
+import Loader from "../../components/Loader/index";
+import { Result, Button } from "antd";
+
+const StoresPage = () => {
+  const { t } = useTranslation();
+  const [searchTerm, setSearchTerm] = useState("");
+  const navigate = useNavigate();
+  
+  // Stores data state
+  const [allStores, setAllStores] = useState([]);
+  const [visibleStores, setVisibleStores] = useState([]);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const itemsPerPage = 24;
+
+  // Use lazy query to have more control over when to fetch
+  const [getChannels, { data: channelsData, isLoading, isFetching, error }] =
+    useLazyGetChannelsQuery();
+
+  // Initial fetch on component mount
+  useEffect(() => {
+    getChannels({ page: 1, perPage: itemsPerPage });
+  }, [getChannels]);
+
+  // Process stores data when it arrives
+  useEffect(() => {
+    if (channelsData) {
+      const stores = channelsData.data || [];
+      const pagination = channelsData.pagination || {};
+      
+      console.log("Stores Data Received:", { 
+        count: stores.length, 
+        page, 
+        pagination 
+      });
+
+      setAllStores((prev) => {
+        const existingIds = new Set(prev.map((store) => store.id));
+        const newStores = stores.filter(
+          (store) => !existingIds.has(store.id)
+        );
+        return [...prev, ...newStores];
+      });
+
+      // More robust hasMore logic
+      const hasNext = pagination.next_page_url || 
+                      (pagination.current_page && pagination.last_page && pagination.current_page < pagination.last_page) ||
+                      (stores.length === itemsPerPage);
+      
+      setHasMore(!!hasNext);
+    }
+  }, [channelsData, page, itemsPerPage]);
+
+  // Process stores for display whenever all stores or search term changes
+  useEffect(() => {
+    if (allStores.length > 0) {
+      const filteredStores = searchTerm
+        ? allStores.filter((store) =>
+            store.name.toLowerCase().includes(searchTerm.toLowerCase())
+          )
+        : allStores;
+
+      // Grouping logic (similar to Brands, but defaults to "Stores")
+      const groupedStores = filteredStores.reduce((acc, store) => {
+        const type = store.type || "Stores";
+        if (!acc[type]) {
+          acc[type] = [];
+        }
+        acc[type].push(store);
+        return acc;
+      }, {});
+
+      const displayGroups = Object.entries(groupedStores)
+        .map(([type, stores]) => ({
+          title: type === "Stores" ? t("navbar.stores") : type.charAt(0).toUpperCase() + type.slice(1),
+          stores,
+        }))
+        .filter((group) => group.stores.length > 0);
+        
+      setVisibleStores(displayGroups);
+      if (searchTerm) {
+        setHasMore(false);
+      }
+    }
+  }, [allStores, searchTerm, t]);
+
+  const loadMoreStores = () => {
+    if (!searchTerm && !isFetching && hasMore && allStores.length > 0) {
+      const nextPage = page + 1;
+      getChannels({ page: nextPage, perPage: itemsPerPage });
+      setPage(nextPage);
+    }
+  };
+
+  const handleSearch = (e) => {
+    const value = e.target.value;
+    setSearchTerm(value);
+    setPage(1);
+    setAllStores([]);
+    setHasMore(true);
+    getChannels({ page: 1, perPage: itemsPerPage, search: value });
+  };
+
+  const handleStoreClick = (storeId) => {
+    navigate(`/channel/${storeId}`);
+  };
+
+  if (isLoading && page === 1) return <Loader />;
+  if (error)
+    return (
+      <Result
+        status="500"
+        title="500"
+        subTitle={t("common.error_occurred") || "Näbelli ýalňyşlyk ýüze çykdy."}
+        extra={
+          <Button type="primary" onClick={() => navigate("/")}>
+            {t("common.back_to_home") || "Baş sahypa gidiň"}
+          </Button>
+        }
+      />
+    );
+
+  return (
+    <div className={styles.storesContainer}>
+      <div className={styles.searchWrapper}>
+        <CiSearch />
+        <input
+          type="text"
+          placeholder={t("common.search")}
+          value={searchTerm}
+          onChange={handleSearch}
+        />
+      </div>
+
+      <InfiniteScroll
+        dataLength={allStores.length}
+        next={loadMoreStores}
+        hasMore={hasMore && !searchTerm}
+        loader={<div style={{ textAlign: 'center', padding: '20px' }}><Loader /></div>}
+      >
+        {visibleStores.map((group, index) => (
+          <section key={index} className={styles.categorySection}>
+            <h2>{group.title}</h2>
+
+            <div className={styles.storesGrid}>
+              {group.stores.map((store) => (
+                <div
+                  key={store.id}
+                  className={styles.storeCard}
+                  onClick={() => handleStoreClick(store.id)}
+                >
+                  <div className={styles.imageWrapper}>
+                    {store.media?.[0]?.thumbnail ||
+                    store.media?.[0]?.images_800x800 ||
+                    store.logo ? (
+                      <img
+                        src={
+                          store.media?.[0]?.thumbnail ||
+                          store.media?.[0]?.images_800x800 ||
+                          store.logo
+                        }
+                        alt={store.name}
+                        width={120}
+                        height={120}
+                        onError={(e) => {
+                          e.target.style.display = "none";
+                          e.target.nextSibling.style.display = "flex";
+                        }}
+                      />
+                    ) : (
+                      <div className={styles.logoFallback}>
+                        <Logo width={60} height={60} />
+                      </div>
+                    )}
+                    <div
+                      className={styles.logoFallback}
+                      style={{ display: "none" }}
+                    >
+                      <Logo width={60} height={60} />
+                    </div>
+                  </div>
+                  <div className={styles.divider}></div>
+                  <h3 className={styles.storeName}>{store.name}</h3>
+                </div>
+              ))}
+            </div>
+          </section>
+        ))}
+      </InfiniteScroll>
+    </div>
+  );
+};
+
+export default StoresPage;
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -21,6 +21,7 @@ const DeliveryTerms = lazy(() => import("./pages/DeliveryTerms/index.jsx"));
 const AboutUs = lazy(() => import("./pages/AboutUs/index.jsx"));
 const PrivacyPolicy = lazy(() => import("./pages/PrivacyPolicy/index.jsx"));
 const AdminPage = lazy(() => import("./pages/CarconfiguratorAdmin/index.jsx"));
+const StoresPage = lazy(() => import("./pages/Stores/index.jsx"));

 export default function Router() {
  const routes = useRoutes([
@@ -34,12 +35,14 @@ export default function Router() {
      children: [
        { path: "/", element: <Home /> },
        { path: "/brands", element: <BrandsPage /> },
+        { path: "/stores", element: <StoresPage /> },
        { path: "/brands/:brandId", element: <Category /> },
        { path: "/cart", element: <CartPage /> },
        { path: "/wishlist", element: <WishList /> },
        { path: "/category/:categoryId", element: <Category /> },
        { path: "/search", element: <Category /> },
        { path: "/collections/:collectionId", element: <Category /> },
+        { path: "/channel/:channelId", element: <Category /> },
        { path: "/product/:productId", element: <ProductDetail /> },
        { path: "/profile", element: <ProfileMenu /> },
        { path: "/orders", element: <Orders /> },
Author	SHA1	Message	Date
@jcarymuhammedow	8f3079801b	fixed some bugs	2026-05-02 14:28:50 +05:00
Jelaletdin12	684ab6917d	added store to navbar	2026-04-30 23:17:44 +05:00
@jcarymuhammedow	6cdde96c61	added channels products	2026-04-30 16:15:29 +05:00