[project-base] fixed product slider on article page (#3674)

shopsys · Dec 18, 2024 · 5d509b3 · 5d509b3
2 parents cf46f62 + cf76bbc
commit 5d509b3
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/storefront/components/Basic/UserText/GrapesJsProducts.tsx b/storefront/components/Basic/UserText/GrapesJsProducts.tsx
@@ -1,4 +1,8 @@
-import { ProductsSlider, VISIBLE_SLIDER_ITEMS_BLOG } from 'components/Blocks/Product/ProductsSlider';
+import {
+    ProductsSlider,
+    VISIBLE_SLIDER_ITEMS_ARTICLE,
+    VISIBLE_SLIDER_ITEMS_BLOG,
+} from 'components/Blocks/Product/ProductsSlider';
 import { SkeletonModuleProductListItem } from 'components/Blocks/Skeleton/SkeletonModuleProductListItem';
 import { TypeProductsByCatnums } from 'graphql/requests/products/queries/ProductsByCatnumsQuery.generated';
 import { GtmMessageOriginType } from 'gtm/enums/GtmMessageOriginType';
@@ -48,19 +52,22 @@ export const GrapesJsProducts: FC<GrapesJsProps> = ({
         return null;
     }
 
+    const isBlog = visibleSliderItems === VISIBLE_SLIDER_ITEMS_BLOG;
+    const isArticle = visibleSliderItems === VISIBLE_SLIDER_ITEMS_ARTICLE;
+
     return (
         <div
             className={twMergeCustom(
                 'my-4',
-                visibleSliderItems === VISIBLE_SLIDER_ITEMS_BLOG && products.length > 3 ? 'xl:my-9' : '',
-                visibleSliderItems !== VISIBLE_SLIDER_ITEMS_BLOG && products.length > 4 ? 'vl:my-9' : '',
+                isBlog && products.length > VISIBLE_SLIDER_ITEMS_BLOG ? 'xl:my-9' : '',
+                isArticle && products.length > VISIBLE_SLIDER_ITEMS_ARTICLE ? 'vl:my-9' : '',
             )}
         >
             <ProductsSlider
                 gtmMessageOrigin={GtmMessageOriginType.other}
                 gtmProductListName={GtmProductListNameType.other}
                 products={products}
-                variant="blog"
+                variant={isBlog ? 'blog' : 'article'}
                 visibleSliderItems={visibleSliderItems}
             />
         </div>

diff --git a/storefront/components/Blocks/Product/ProductsSlider.tsx b/storefront/components/Blocks/Product/ProductsSlider.tsx
@@ -17,9 +17,10 @@ import { wait } from 'utils/wait';
 export const VISIBLE_SLIDER_ITEMS = 5;
 export const VISIBLE_SLIDER_ITEMS_LAST_VISITED = 8;
 export const VISIBLE_SLIDER_ITEMS_BLOG = 3;
+export const VISIBLE_SLIDER_ITEMS_ARTICLE = 4;
 export const VISIBLE_SLIDER_ITEMS_AUTOCOMPLETE = 5;
 
-type ProductsSliderVariant = 'default' | 'blog' | 'lastVisited' | 'autocomplete';
+type ProductsSliderVariant = 'default' | 'blog' | 'article' | 'lastVisited' | 'autocomplete';
 export type ProductsSliderProps = {
     products: TypeListedProductFragment[];
     gtmProductListName: GtmProductListNameType;
@@ -118,6 +119,8 @@ export const ProductsSlider: FC<ProductsSliderProps> = ({
                 return 'auto-cols-[225px] sm:auto-cols-[60%]  md:auto-cols-[45%] lg:auto-cols-[30%] vl:auto-cols-[25%] xl:auto-cols-[20%]';
             case 'blog':
                 return 'auto-cols-[80%] lg:auto-cols-[45%] xl:auto-cols-[33.33%]';
+            case 'article':
+                return 'auto-cols-[80%] sm:auto-cols-[60%] md:auto-cols-[45%] lg:auto-cols-[31%] vl:auto-cols-[33.33%] xl:auto-cols-[25%]';
             case 'lastVisited':
                 return 'auto-cols-[140px] sm:auto-cols-[30%] lg:auto-cols-[19.5%] vl:auto-cols-[14.5%] xl:auto-cols-[12.5%]';
             case 'autocomplete':

diff --git a/storefront/components/Pages/Article/ArticleDetailContent.tsx b/storefront/components/Pages/Article/ArticleDetailContent.tsx
@@ -1,5 +1,6 @@
 import { ArticleTitle } from './ArticleTitle';
 import { GrapesJsParser } from 'components/Basic/UserText/GrapesJsParser';
+import { VISIBLE_SLIDER_ITEMS_ARTICLE } from 'components/Blocks/Product/ProductsSlider';
 import { Webline } from 'components/Layout/Webline/Webline';
 import { TypeArticleDetailFragment } from 'graphql/requests/articlesInterface/articles/fragments/ArticleDetailFragment.generated';
 import { useFormatDate } from 'utils/formatting/useFormatDate';
@@ -19,7 +20,7 @@ export const ArticleDetailContent: FC<ArticleDetailContentProps> = ({ article })
             </p>
             {article.text !== null && (
                 <div className="order-2 mb-16 flex w-full flex-col">
-                    <GrapesJsParser text={article.text} />
+                    <GrapesJsParser text={article.text} visibleSliderItems={VISIBLE_SLIDER_ITEMS_ARTICLE} />
                 </div>
             )}
         </Webline>