fix SimpleNavigation slider (#2765)

storefront/components/Blocks/BlogPreview/BlogPreview.tsx

@@ -53,11 +53,7 @@ export const BlogPreview: FC = () => {
                     </div>
                 )}
 
-                {!!blogSideItems && (
-                    <div className="grid snap-x snap-mandatory auto-cols-[80%] gap-4 overscroll-x-contain max-vl:grid-flow-col max-vl:overflow-x-auto md:auto-cols-[40%] lg:gap-6 vl:flex vl:basis-1/3 vl:flex-col vl:gap-3">
-                        <BlogPreviewSide articles={blogSideItems} />
-                    </div>
-                )}
+                {!!blogSideItems && <BlogPreviewSide articles={blogSideItems} />}
             </div>
         </div>
     );

storefront/components/Blocks/BlogPreview/BlogPreviewSide.tsx

@@ -9,7 +9,7 @@ type SideProps = {
 };
 
 export const BlogPreviewSide: FC<SideProps> = ({ articles }) => (
-    <>
+    <div className="grid snap-x snap-mandatory auto-cols-[80%] gap-4 overflow-y-hidden overscroll-x-contain max-vl:grid-flow-col max-vl:overflow-x-auto md:auto-cols-[40%] lg:gap-6 vl:flex vl:basis-1/3 vl:flex-col vl:gap-3">
         {articles.map((article) => (
             <div className="flex flex-1 snap-start flex-col gap-2 vl:flex-row" key={article.uuid}>
                 <ArticleLink href={article.link} className="vl:basis-32">
@@ -39,5 +39,5 @@ export const BlogPreviewSide: FC<SideProps> = ({ articles }) => (
                 </div>
             </div>
         ))}
-    </>
+    </div>
 );

storefront/components/Blocks/SimpleNavigation/SimpleNavigation.tsx

@@ -7,17 +7,24 @@ type SimpleNavigationProps = {
     listedItems: ListedItemPropType[];
     imageType?: string;
     isWithoutSlider?: true;
+    itemClassName?: string;
 };
 
 const TEST_IDENTIFIER = 'blocks-simplenavigation';
 
-export const SimpleNavigation: FC<SimpleNavigationProps> = ({ listedItems, imageType, isWithoutSlider, className }) => {
+export const SimpleNavigation: FC<SimpleNavigationProps> = ({
+    listedItems,
+    imageType,
+    isWithoutSlider,
+    className,
+    itemClassName,
+}) => {
     return (
         <ul
             className={twMergeCustom(
                 !isWithoutSlider &&
-                    'snap-x snap-mandatory auto-cols-[40%] grid-flow-col overflow-x-auto overscroll-x-contain lg:grid-flow-row',
-                'grid gap-3 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fill,minmax(210px,1fr))]',
+                    'snap-x snap-mandatory auto-cols-[40%] grid-flow-col overflow-x-auto overflow-y-hidden overscroll-x-contain lg:grid-flow-row',
+                'grid gap-3 lg:grid-cols-[repeat(auto-fill,minmax(210px,1fr))]',
                 className,
             )}
             data-testid={TEST_IDENTIFIER}
@@ -29,6 +36,7 @@ export const SimpleNavigation: FC<SimpleNavigationProps> = ({ listedItems, image
                     listedItem={listedItem}
                     imageType={imageType}
                     dataTestId={TEST_IDENTIFIER + '-' + index}
+                    className={itemClassName}
                 >
                     {listedItem.name}
                 </SimpleNavigationListItem>

storefront/components/Blocks/SimpleNavigation/SimpleNavigationListItem.tsx

@@ -1,5 +1,6 @@
 import { ExtendedNextLink } from 'components/Basic/ExtendedNextLink/ExtendedNextLink';
 import { Image } from 'components/Basic/Image/Image';
+import { twMergeCustom } from 'helpers/twMerge';
 import { FriendlyPagesTypesKeys } from 'types/friendlyUrl';
 import { ListedItemPropType } from 'types/simpleNavigation';
 
@@ -14,35 +15,36 @@ export const SimpleNavigationListItem: FC<SimpleNavigationListItemProps> = ({
     imageType,
     linkType,
     dataTestId,
+    className,
 }) => {
     const itemImage = 'mainImage' in listedItem ? listedItem.mainImage : null;
 
     return (
-        <li className="snap-start text-center lg:text-left" data-testid={dataTestId}>
+        <li data-testid={dataTestId}>
             <ExtendedNextLink
                 type={linkType}
-                href={listedItem.slug}
-                className="flex h-full w-full cursor-pointer flex-col items-center rounded bg-greyVeryLight px-2 py-4 no-underline transition hover:bg-whitesmoke hover:no-underline lg:flex-row lg:px-3 lg:py-2"
+                href={`/${listedItem.slug}`}
+                className={twMergeCustom(
+                    'flex h-full w-full cursor-pointer flex-col items-center justify-center rounded bg-greyVeryLight px-2 py-4 no-underline transition hover:bg-whitesmoke hover:no-underline lg:flex-row lg:justify-start lg:gap-3 lg:px-3 lg:py-2',
+                    className,
+                )}
             >
-                <>
-                    {itemImage && (
-                        <Image
-                            className="h-12 w-16 mix-blend-multiply"
-                            image={itemImage}
-                            type={imageType ?? 'default'}
-                            alt={itemImage.name || listedItem.name}
-                        />
-                    )}
+                {itemImage && (
+                    <Image
+                        width={64}
+                        className="h-12 min-w-[64px] mix-blend-multiply"
+                        image={itemImage}
+                        type={imageType ?? 'default'}
+                        alt={itemImage.name || listedItem.name}
+                    />
+                )}
 
-                    <div className="max-w-full">
-                        <span className="block max-w-full text-sm text-dark lg:pl-3">{listedItem.name}</span>
-                        {'totalCount' in listedItem && listedItem.totalCount !== undefined && (
-                            <span className="ml-2 whitespace-nowrap text-sm text-greyLight">
-                                ({listedItem.totalCount})
-                            </span>
-                        )}
-                    </div>
-                </>
+                <div className="max-w-full">
+                    <span className="block max-w-full text-sm text-dark">{listedItem.name}</span>
+                    {'totalCount' in listedItem && listedItem.totalCount !== undefined && (
+                        <span className="ml-2 whitespace-nowrap text-sm text-greyLight">({listedItem.totalCount})</span>
+                    )}
+                </div>
             </ExtendedNextLink>
         </li>
     );

storefront/components/Pages/CategoryDetail/AdvancedSeoCategories.tsx

@@ -1,40 +1,24 @@
-import { ExtendedNextLink } from 'components/Basic/ExtendedNextLink/ExtendedNextLink';
+import { SimpleNavigation } from 'components/Blocks/SimpleNavigation/SimpleNavigation';
 import { CategoryDetailFragmentApi } from 'graphql/generated';
 import useTranslation from 'next-translate/useTranslation';
-import { twJoin } from 'tailwind-merge';
 
 type AdvancedSeoCategoriesProps = {
     readyCategorySeoMixLinks: CategoryDetailFragmentApi['readyCategorySeoMixLinks'];
 };
 
+const simpleNavigationItemTwClass = 'lg:justify-center text-center';
+
 export const AdvancedSeoCategories: FC<AdvancedSeoCategoriesProps> = ({ readyCategorySeoMixLinks }) => {
     const { t } = useTranslation();
 
-    if (readyCategorySeoMixLinks.length === 0) {
-        return null;
-    }
-
     return (
         <>
             <div className="mb-3 break-words font-bold text-dark lg:text-lg">{t('Favorite categories')}</div>
-
-            <ul className="mb-5 grid snap-x snap-mandatory auto-cols-[40%] gap-3 overflow-x-auto overscroll-x-contain max-lg:grid-flow-col lg:grid-cols-[repeat(auto-fill,minmax(210px,1fr))]">
-                {readyCategorySeoMixLinks.map((seoMixLink, index) => (
-                    <li key={index} className="snap-start">
-                        <ExtendedNextLink
-                            href={`/${seoMixLink.slug}`}
-                            type="static"
-                            className={twJoin(
-                                'flex h-full items-center justify-center rounded bg-greyVeryLight p-3 text-center text-sm text-dark no-underline',
-                                'hover:bg-whitesmoke hover:text-dark hover:no-underline',
-                                'active:bg-whitesmoke active:text-dark active:no-underline',
-                            )}
-                        >
-                            {seoMixLink.name}
-                        </ExtendedNextLink>
-                    </li>
-                ))}
-            </ul>
+            <SimpleNavigation
+                listedItems={readyCategorySeoMixLinks}
+                className="mb-5"
+                itemClassName={simpleNavigationItemTwClass}
+            />
         </>
     );
 };

storefront/components/Pages/CategoryDetail/CategoryDetailContent.tsx

@@ -1,22 +1,20 @@
 import { Heading } from 'components/Basic/Heading/Heading';
 import { AdvancedSeoCategories } from './AdvancedSeoCategories';
 import { CategoryDetailProductsWrapper } from './CategoryDetailProductsWrapper';
-import { MetaRobots } from 'components/Basic/Head/MetaRobots';
 import { Adverts } from 'components/Blocks/Adverts/Adverts';
 import { FilterPanel } from 'components/Blocks/Product/Filter/FilterPanel';
 import { SimpleNavigation } from 'components/Blocks/SimpleNavigation/SimpleNavigation';
 import { SortingBar } from 'components/Blocks/SortingBar/SortingBar';
 import { Webline } from 'components/Layout/Webline/Webline';
 import { CategoryDetailFragmentApi } from 'graphql/generated';
-import { PAGE_QUERY_PARAMETER_NAME } from 'helpers/queryParamNames';
 import useTranslation from 'next-translate/useTranslation';
-import { useRouter } from 'next/router';
-import { useCallback, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { twJoin } from 'tailwind-merge';
 import { useSeoTitleWithPagination } from 'hooks/seo/useSeoTitleWithPagination';
 import { CategoryBestsellers } from './CategoryBestsellers/CategoryBestsellers';
 import { FilterIcon } from 'components/Basic/Icon/IconsSvg';
 import dynamic from 'next/dynamic';
+import { useQueryParams } from 'hooks/useQueryParams';
 
 const Overlay = dynamic(() => import('components/Basic/Overlay/Overlay').then((component) => component.Overlay));
 
@@ -28,12 +26,11 @@ export const CategoryDetailContent: FC<CategoryDetailContentProps> = ({ category
     const { t } = useTranslation();
     const [isPanelOpen, setIsPanelOpen] = useState(false);
     const paginationScrollTargetRef = useRef<HTMLDivElement>(null);
-    const { query } = useRouter();
-    const isFiltered = 'filter' in query;
+    const { currentPage } = useQueryParams();
 
     const title = useSeoTitleWithPagination(category.products.totalCount, category.name, category.seoH1);
 
-    const handlePanelOpenerClick = useCallback(() => {
+    const handlePanelOpenerClick = () => {
         const body = document.getElementsByTagName('body')[0];
 
         setIsPanelOpen((prev) => {
@@ -42,11 +39,10 @@ export const CategoryDetailContent: FC<CategoryDetailContentProps> = ({ category
 
             return newValue;
         });
-    }, []);
+    };
 
     return (
         <Webline>
-            {isFiltered && <MetaRobots content="noindex, follow" />}
             <div
                 className="mb-7 flex scroll-mt-5 flex-col vl:mb-10 vl:flex-row vl:flex-wrap"
                 ref={paginationScrollTargetRef}
@@ -67,22 +63,31 @@ export const CategoryDetailContent: FC<CategoryDetailContentProps> = ({ category
                         totalCount={category.products.totalCount}
                     />
                 </div>
+
                 <Overlay isActive={isPanelOpen} onClick={handlePanelOpenerClick} />
+
                 <div className="flex flex-1 flex-col vl:pl-12">
                     <Adverts positionName="productList" className="mb-5" />
+
                     <Heading type="h1">{title}</Heading>
-                    {category.description !== null &&
-                        category.description !== '' &&
-                        (query[PAGE_QUERY_PARAMETER_NAME] ?? 1) === 1 && (
-                            <div dangerouslySetInnerHTML={{ __html: category.description }} className="mb-4" />
-                        )}
+
+                    {!!category.description && currentPage === 1 && (
+                        <div dangerouslySetInnerHTML={{ __html: category.description }} className="mb-4" />
+                    )}
+
                     <Adverts positionName="productListMiddle" currentCategory={category} className="mb-7" />
+
                     <SimpleNavigation
                         listedItems={[...category.children, ...category.linkedCategories]}
                         className="mb-6"
                     />
-                    <AdvancedSeoCategories readyCategorySeoMixLinks={category.readyCategorySeoMixLinks} />
-                    {category.bestsellers.length > 0 && <CategoryBestsellers products={category.bestsellers} />}
+
+                    {category.readyCategorySeoMixLinks.length && (
+                        <AdvancedSeoCategories readyCategorySeoMixLinks={category.readyCategorySeoMixLinks} />
+                    )}
+
+                    {category.bestsellers.length && <CategoryBestsellers products={category.bestsellers} />}
+
                     <div className="flex flex-col gap-3 sm:flex-row">
                         <div
                             className="relative flex w-full cursor-pointer flex-row items-center justify-center rounded bg-primary py-3 px-8 font-bold uppercase text-white vl:mb-3 vl:hidden"
@@ -91,11 +96,13 @@ export const CategoryDetailContent: FC<CategoryDetailContentProps> = ({ category
                             <FilterIcon className="mr-3 w-6 font-bold text-white" />
                             {t('Filter')}
                         </div>
+
                         <SortingBar
                             sorting={category.products.orderingMode}
                             totalCount={category.products.totalCount}
                         />
                     </div>
+
                     <CategoryDetailProductsWrapper
                         category={category}
                         paginationScrollTargetRef={paginationScrollTargetRef}

storefront/components/Pages/ProductDetail/ProductDetailGallerySlider.tsx

@@ -64,7 +64,6 @@ export const ProductDetailGallerySlider: FC<ProductDetailGallerySliderProps> = (
                         >
                             <img
                                 className="h-full w-full object-contain"
-                                loading="lazy"
                                 src={galleryItem.sizes.find((size) => size.size === 'default')?.url}
                             />
                         </div>

storefront/components/Pages/Search/ProductsSearch.tsx

@@ -1,13 +1,11 @@
 import { SearchProductsWrapper } from './SearchProductsWrapper';
-import { MetaRobots } from 'components/Basic/Head/MetaRobots';
 import { FilterIcon } from 'components/Basic/Icon/IconsSvg';
 import { FilterPanel } from 'components/Blocks/Product/Filter/FilterPanel';
 import { SortingBar } from 'components/Blocks/SortingBar/SortingBar';
 import { ListedProductConnectionPreviewFragmentApi, ProductOrderingModeEnumApi } from 'graphql/generated';
 import { getInternationalizedStaticUrls } from 'helpers/getInternationalizedStaticUrls';
 import useTranslation from 'next-translate/useTranslation';
 import { useDomainConfig } from 'hooks/useDomainConfig';
-import { useRouter } from 'next/router';
 import { useRef, useState } from 'react';
 import { twJoin } from 'tailwind-merge';
 import dynamic from 'next/dynamic';
@@ -20,12 +18,10 @@ type ProductsSearchProps = {
 
 export const ProductsSearch: FC<ProductsSearchProps> = ({ productsSearch }) => {
     const { t } = useTranslation();
-    const router = useRouter();
     const paginationScrollTargetRef = useRef<HTMLDivElement>(null);
     const { url } = useDomainConfig();
     const [searchUrl] = getInternationalizedStaticUrls(['/search'], url);
     const [isPanelOpen, setIsPanelOpen] = useState(false);
-    const isFiltered = 'filter' in router.query;
 
     const handlePanelOpenerClick = () => {
         const body = document.getElementsByTagName('body')[0];
@@ -40,7 +36,6 @@ export const ProductsSearch: FC<ProductsSearchProps> = ({ productsSearch }) => {
 
     return (
         <>
-            {isFiltered && <MetaRobots content="noindex, follow" />}
             <div className="relative mb-8 flex flex-col vl:mb-10 vl:flex-row vl:flex-wrap">
                 <div
                     className={twJoin(

storefront/pages/categories/[categorySlug].tsx

@@ -35,6 +35,7 @@ import {
     getProductListSortFromUrlQuery,
     getSlugFromServerSideUrl,
 } from 'helpers/parsing/urlParsing';
+import { MetaRobots } from 'components/Basic/Head/MetaRobots';
 
 const CategoryDetailPage: NextPage = () => {
     const originalCategorySlug = useSessionStore((s) => s.originalCategorySlug);
@@ -55,18 +56,22 @@ const CategoryDetailPage: NextPage = () => {
     const isSkeletonVisible = !filter && !originalCategorySlug && !sort && fetching;
 
     return (
-        <CommonLayout
-            title={seoTitle}
-            description={categoryData?.seoMetaDescription}
-            breadcrumbs={categoryData?.breadcrumb}
-            breadcrumbsType="category"
-        >
-            {isSkeletonVisible ? (
-                <CategoryDetailPageSkeleton />
-            ) : (
-                !!categoryData && <CategoryDetailContent category={categoryData} />
-            )}
-        </CommonLayout>
+        <>
+            {!!filter && <MetaRobots content="noindex, follow" />}
+
+            <CommonLayout
+                title={seoTitle}
+                description={categoryData?.seoMetaDescription}
+                breadcrumbs={categoryData?.breadcrumb}
+                breadcrumbsType="category"
+            >
+                {isSkeletonVisible ? (
+                    <CategoryDetailPageSkeleton />
+                ) : (
+                    !!categoryData && <CategoryDetailContent category={categoryData} />
+                )}
+            </CommonLayout>
+        </>
     );
 };
 

storefront/types/simpleNavigation.ts

@@ -17,5 +17,5 @@ export type ListedItemPropType = (
           name: string;
       }
 ) & {
-    __typename?: 'ArticleSite' | 'BlogArticle' | 'Category' | 'Brand';
+    __typename?: 'ArticleSite' | 'BlogArticle' | 'Category' | 'Brand' | 'Link';
 };