fix Add to cart popup product navigation (#2976)

shopsys · Jan 15, 2024 · bd8de36 · bd8de36
2 parents 49efbb6 + 6c00915
commit bd8de36
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 28 deletions.
diff --git a/UPGRADE-14.0.md b/UPGRADE-14.0.md
@@ -953,3 +953,6 @@ Follow the instructions in relevant sections, e.g. `shopsys/coding-standards` or
     -   API now returns a 500 code if there is a server error
     -   friendly URL pages now react to API 500 errors and API not found errors, and display the correct pages based on this datapoint
 -   improve Breadcrumbs navigation on customer order page ([#2974](https://github.com/shopsys/shopsys/pull/2974))
+-   fix missing variant link types ([#2976](https://github.com/shopsys/shopsys/pull/2976))
+    -   fix Add to cart popup product link type
+    -   fix Bestsellers product link type
diff --git a/project-base/storefront/components/Blocks/Product/AddToCartPopup.tsx b/project-base/storefront/components/Blocks/Product/AddToCartPopup.tsx
@@ -26,6 +26,8 @@ export const AddToCartPopup: FC<AddToCartPopupProps> = ({ onCloseCallback, added
     const { url } = useDomainConfig();
     const [cartUrl] = getInternationalizedStaticUrls(['/cart'], url);
 
+    const productUrl = (product.__typename === 'Variant' && product.mainVariant?.slug) || product.slug;
+
     return (
         <Popup hideCloseButton className="w-11/12 max-w-2xl" onCloseCallback={onCloseCallback}>
             <div className="mb-4 flex w-full items-center md:mb-6">
@@ -50,7 +52,10 @@ export const AddToCartPopup: FC<AddToCartPopupProps> = ({ onCloseCallback, added
                 )}
                 <div className="w-full md:pl-4 lg:flex lg:items-center lg:justify-between">
                     <div className="block break-words text-primary" data-testid={TEST_IDENTIFIER + '-name'}>
-                        <ExtendedNextLink href={product.slug} type="product">
+                        <ExtendedNextLink
+                            href={productUrl}
+                            type={product.__typename === 'RegularProduct' ? 'product' : 'productMainVariant'}
+                        >
                             {product.fullName}
                         </ExtendedNextLink>
                     </div>

diff --git a/project-base/storefront/components/Blocks/Product/ProductsList/ProductListItem.tsx b/project-base/storefront/components/Blocks/Product/ProductsList/ProductListItem.tsx
@@ -46,7 +46,6 @@ export const ProductListItem = forwardRef<HTMLLIElement, ProductItemProps>(
     ) => {
         const { url } = useDomainConfig();
         const { t } = useTranslation();
-        const isMainVariant = product.isMainVariant;
 
         return (
             <li
@@ -71,7 +70,7 @@ export const ProductListItem = forwardRef<HTMLLIElement, ProductItemProps>(
                 <ExtendedNextLink
                     className="flex h-full flex-col gap-3 no-underline hover:no-underline"
                     href={product.slug}
-                    type={isMainVariant ? 'productMainVariant' : 'product'}
+                    type={product.isMainVariant ? 'productMainVariant' : 'product'}
                     onClick={() => onGtmProductClickEventHandler(product, gtmProductListName, listIndex, url)}
                 >
                     <div className="relative">

diff --git a/...front/components/Pages/CategoryDetail/CategoryBestsellers/CategoryBestsellersListItem.tsx b/...front/components/Pages/CategoryDetail/CategoryBestsellers/CategoryBestsellersListItem.tsx
@@ -22,12 +22,14 @@ export const CategoryBestsellersListItem: FC<CategoryBestsellersListItemProps> =
     const formatPrice = useFormatPrice();
     const { url } = useDomainConfig();
 
+    const productUrl = (product.__typename === 'Variant' && product.mainVariant?.slug) || product.slug;
+
     return (
         <div className="flex flex-wrap items-center gap-y-4 border-t border-greyLight py-4 first-of-type:border-0 lg:flex-nowrap lg:gap-5">
             <ExtendedNextLink
                 className="flex items-center gap-5 font-bold no-underline lg:flex-1"
-                href={product.slug}
-                type="product"
+                href={productUrl}
+                type={product.__typename === 'RegularProduct' ? 'product' : 'productMainVariant'}
                 onClick={() => onGtmProductClickEventHandler(product, gtmProductListName, listIndex, url)}
             >
                 <div className="flex w-20 shrink-0 items-center justify-center">