add Related Products tab section

shopsys · Oct 17, 2023 · e078e9c · e078e9c
1 parent 632a9e3
commit e078e9c
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 11 deletions.
diff --git a/UPGRADE-14.0.md b/UPGRADE-14.0.md
@@ -57,3 +57,5 @@ Follow the instructions in relevant sections, e.g. `shopsys/coding-standards` or
 
 -   add rounded price value to order process ([#2835](https://github.com/shopsys/shopsys/pull/2835))
     -   see #project-base-diff to update your project
+-   add Related Products tab on product detail page ([#2885](https://github.com/shopsys/shopsys/pull/2885))
+    -   see #project-base-diff to update your project
diff --git a/project-base/storefront/components/Pages/ProductDetail/ProductDetailContent.tsx b/project-base/storefront/components/Pages/ProductDetail/ProductDetailContent.tsx
@@ -95,7 +95,11 @@ export const ProductDetailContent: FC<ProductDetailContentProps> = ({ product, f
                     </div>
                 </div>
 
-                <ProductDetailTabs description={product.description} parameters={product.parameters} />
+                <ProductDetailTabs
+                    description={product.description}
+                    parameters={product.parameters}
+                    relatedProducts={product.relatedProducts}
+                />
 
                 <ProductDetailAvailabilityList ref={scrollTarget} storeAvailabilities={product.storeAvailabilities} />
 

diff --git a/project-base/storefront/components/Pages/ProductDetail/ProductDetailMainVariantContent.tsx b/project-base/storefront/components/Pages/ProductDetail/ProductDetailMainVariantContent.tsx
@@ -60,7 +60,11 @@ export const ProductDetailMainVariantContent: FC<ProductDetailMainVariantContent
 
                 <ProductVariantsTable variants={product.variants} isSellingDenied={product.isSellingDenied} />
 
-                <ProductDetailTabs description={product.description} parameters={product.parameters} />
+                <ProductDetailTabs
+                    description={product.description}
+                    parameters={product.parameters}
+                    relatedProducts={product.relatedProducts}
+                />
 
                 {!!product.accessories.length && <ProductDetailAccessories accessories={product.accessories} />}
             </Webline>

diff --git a/project-base/storefront/components/Pages/ProductDetail/ProductDetailTabs.tsx b/project-base/storefront/components/Pages/ProductDetail/ProductDetailTabs.tsx
@@ -1,15 +1,18 @@
 import { Cell, Row, Table } from 'components/Basic/Table/Table';
 import { Tabs, TabsContent, TabsList, TabsListItem } from 'components/Basic/Tabs/Tabs';
 import { UserText } from 'components/Basic/UserText/UserText';
-import { ParameterFragmentApi } from 'graphql/generated';
+import { ProductsSlider } from 'components/Blocks/Product/ProductsSlider';
+import { ListedProductFragmentApi, ParameterFragmentApi } from 'graphql/generated';
+import { GtmProductListNameType } from 'gtm/types/enums';
 import useTranslation from 'next-translate/useTranslation';
 
 type ProductDetailTabsProps = {
     description: string | null;
     parameters: ParameterFragmentApi[];
+    relatedProducts: ListedProductFragmentApi[];
 };
 
-export const ProductDetailTabs: FC<ProductDetailTabsProps> = ({ description, parameters }) => {
+export const ProductDetailTabs: FC<ProductDetailTabsProps> = ({ description, parameters, relatedProducts }) => {
     const { t } = useTranslation();
 
     const formatParameterValue = (valueText: string, index: number) => {
@@ -22,6 +25,8 @@ export const ProductDetailTabs: FC<ProductDetailTabsProps> = ({ description, par
                 <TabsListItem>{t('Overview')}</TabsListItem>
 
                 {!!parameters.length && <TabsListItem>{t('Parameters')}</TabsListItem>}
+
+                {!!relatedProducts.length && <TabsListItem>{t('Related Products')}</TabsListItem>}
             </TabsList>
 
             <TabsContent headingTextMobile={t('Overview')}>
@@ -45,6 +50,15 @@ export const ProductDetailTabs: FC<ProductDetailTabsProps> = ({ description, par
                     </Table>
                 </TabsContent>
             )}
+
+            {!!relatedProducts.length && (
+                <TabsContent headingTextMobile={t('Related Products')}>
+                    <ProductsSlider
+                        products={relatedProducts}
+                        gtmProductListName={GtmProductListNameType.product_detail_related_products}
+                    />
+                </TabsContent>
+            )}
         </Tabs>
     );
 };
diff --git a/project-base/storefront/graphql/generated/index.tsx b/project-base/storefront/graphql/generated/index.tsx
diff --git a/...ase/storefront/graphql/requests/products/fragments/ProductDetailInterfaceFragment.graphql b/...ase/storefront/graphql/requests/products/fragments/ProductDetailInterfaceFragment.graphql
@@ -45,4 +45,7 @@ fragment ProductDetailInterfaceFragment on Product {
     productVideos {
         ...VideoTokenFragment
     }
+    relatedProducts {
+        ...ListedProductFragment
+    }
 }
diff --git a/project-base/storefront/gtm/types/enums.ts b/project-base/storefront/gtm/types/enums.ts
@@ -37,6 +37,7 @@ export enum GtmProductListNameType {
     cart = 'cart',
     product_comparison_page = 'product comparison page',
     product_detail = 'product detail',
+    product_detail_related_products = 'product detail related products',
     autocomplete_search_results = 'autocomplete_search_results',
     wishlist = 'wishlist',
     sharedWishlist = 'sharedWishlist',