add Related Products tab section

shopsys · Oct 23, 2023 · 0b6f35c · 0b6f35c
1 parent 4e3d3d3
commit 0b6f35c
Show file tree

Hide file tree

Showing 11 changed files with 48 additions and 14 deletions.
diff --git a/UPGRADE-14.0.md b/UPGRADE-14.0.md
@@ -48,8 +48,8 @@ Follow the instructions in relevant sections, e.g. `shopsys/coding-standards` or
     - see #project-base-diff to update your project
 -->
 
-- update your project to fix problems with single domain ([#2875](https://github.com/shopsys/shopsys/pull/2875))
-    - see #project-base-diff to update your project
+-   update your project to fix problems with single domain ([#2875](https://github.com/shopsys/shopsys/pull/2875))
+    -   see #project-base-diff to update your project
 
 ## [Upgrade from v13.0.0 to v14.0.0-dev](https://github.com/shopsys/shopsys/compare/v13.0.0...14.0)
 
@@ -99,3 +99,5 @@ Follow the instructions in relevant sections, e.g. `shopsys/coding-standards` or
             -   react/self-closing-comp
             -   react/jsx-sort-props
             -   no-relative-import-paths/no-relative-import-paths
+-   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/Basic/Tabs/Tabs.tsx b/project-base/storefront/components/Basic/Tabs/Tabs.tsx
@@ -71,7 +71,7 @@ export const TabsContent: TabFC<TabsContentProps & Partial<PropsWithRef<TabPanel
                 {headingTextMobile}
                 <ArrowIcon className={twJoin('w-4 rotate-0 transition', isActiveOnMobile && '-rotate-180 ')} />
             </h3>
-            <div className={twJoin('py-5 ', isActiveOnMobile ? 'block' : 'hidden lg:block')}>{children}</div>
+            <div className={twJoin('w-full py-5', isActiveOnMobile ? 'block' : 'hidden lg:block')}>{children}</div>
         </TabPanel>
     );
 };

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 isSellingDenied={product.isSellingDenied} variants={product.variants} />
 
-                <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',

diff --git a/project-base/storefront/public/locales/cs/common.json b/project-base/storefront/public/locales/cs/common.json
@@ -287,6 +287,7 @@
     "Register": "Registrujte se",
     "Registration": "Registrace",
     "Reject all": "Odmítnout vše",
+    "Related Products": "Související produkty",
     "relevance": "Relevance",
     "Remove from cart": "Odstranit z košíku",
     "Remove from comparison": "Obebrat z porovnání",

diff --git a/project-base/storefront/public/locales/en/common.json b/project-base/storefront/public/locales/en/common.json
@@ -273,6 +273,7 @@
     "Register": "Register",
     "Registration": "Registration",
     "Reject all": "Reject all",
+    "Related Products": "Related Products",
     "relevance": "Relevance",
     "Remove from cart": "Remove from cart",
     "Remove from comparison": "Remove from comparison",

diff --git a/project-base/storefront/public/locales/sk/common.json b/project-base/storefront/public/locales/sk/common.json
@@ -287,6 +287,7 @@
     "Register": "Registrujte sa",
     "Registration": "Registrácia",
     "Reject all": "Reject all",
+    "Related Products": "Súvisiace produkty",
     "relevance": "Relevantnosť",
     "Remove from cart": "Odstrániť z košíka",
     "Remove from comparison": "",