@jetshop/template-trend 5.11.1 → 5.11.2

package/.linaria-cache/packages/template-trend/src/components/StartPage/CategoryList.linaria.css

@@ -1,7 +1,7 @@
-.s140peh{margin:0 -1.5rem;padding:0 1.5rem 3rem;}@media (max-width:49.99rem){.s140peh{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;}}@media (max-width:39.99rem){.s140peh{margin:0 0;padding:0 1rem 3rem;}}
-.c1o22ktz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;margin-right:-0.5rem;margin-left:-0.5rem;}.c1o22ktz:hover > a > div{opacity:0.8;}@media (max-width:49.99rem){.c1o22ktz > a{-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:160px;}}
-.c11pqhux{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:stretch;-webkit-justify-content:stretch;-ms-flex-pack:stretch;justify-content:stretch;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background:#ffffff;box-shadow:4px 8px 32px rgba(0,0,0,0.1);-webkit-transition:all 250ms ease-in-out;transition:all 250ms ease-in-out;width:100%;height:100%;position:relative;}
-.c1l548id{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:stretch;-webkit-justify-content:stretch;-ms-flex-pack:stretch;justify-content:stretch;width:50%;padding-left:0.5rem;padding-right:0.5rem;max-width:16rem;-webkit-text-decoration:none;text-decoration:none;}@media (min-width:50rem){.c1l548id{width:33.33333333333333%;}}@media (min-width:64rem){.c1l548id{width:20%;}}.c1l548id:hover > div,.c1l548id:focus > div,.c1l548id:active > div{opacity:1 !important;box-shadow:4px 8px 32px rgba(0,0,0,0.1), 4px 8px 40px rgba(0,0,0,0.1);-webkit-transform:translate(0,-2px);-ms-transform:translate(0,-2px);transform:translate(0,-2px);-webkit-transition-duration:100ms;transition-duration:100ms;z-index:2;}
-.cmpnef6{text-align:center;font-weight:bold;font-size:16px;text-transform:uppercase;color:#000;-webkit-text-decoration:none;text-decoration:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:3rem;}@media (min-width:50rem){.cmpnef6{height:5rem;}}
-.cmtbqnf{margin-bottom:1rem;font-size:24px;}@media (max-width:39.99rem){.cmtbqnf{font-size:18px;margin-left:1rem;}}
+.ScrollWrapper_s140peh{margin:0 -1.5rem;padding:0 1.5rem 3rem;}@media (max-width:49.99rem){.ScrollWrapper_s140peh{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;}}@media (max-width:39.99rem){.ScrollWrapper_s140peh{margin:0 0;padding:0 1rem 3rem;}}
+.CategoriesWrapper_c1o22ktz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;margin-right:-0.5rem;margin-left:-0.5rem;}.CategoriesWrapper_c1o22ktz:hover > a > div{opacity:0.8;}@media (max-width:49.99rem){.CategoriesWrapper_c1o22ktz > a{-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:160px;}}
+.CategoryCard_c11pqhux{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:stretch;-webkit-justify-content:stretch;-ms-flex-pack:stretch;justify-content:stretch;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background:#ffffff;box-shadow:4px 8px 32px rgba(0,0,0,0.1);-webkit-transition:all 250ms ease-in-out;transition:all 250ms ease-in-out;width:100%;height:100%;position:relative;}
+.CardPaddingWrapper_c1l548id{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:stretch;-webkit-justify-content:stretch;-ms-flex-pack:stretch;justify-content:stretch;width:50%;padding-left:0.5rem;padding-right:0.5rem;max-width:16rem;-webkit-text-decoration:none;text-decoration:none;}@media (min-width:50rem){.CardPaddingWrapper_c1l548id{width:33.33333333333333%;}}@media (min-width:64rem){.CardPaddingWrapper_c1l548id{width:20%;}}.CardPaddingWrapper_c1l548id:hover > div,.CardPaddingWrapper_c1l548id:focus > div,.CardPaddingWrapper_c1l548id:active > div{opacity:1 !important;box-shadow:4px 8px 32px rgba(0,0,0,0.1), 4px 8px 40px rgba(0,0,0,0.1);-webkit-transform:translate(0,-2px);-ms-transform:translate(0,-2px);transform:translate(0,-2px);-webkit-transition-duration:100ms;transition-duration:100ms;z-index:2;}
+.CategoryName_cmpnef6{text-align:center;font-weight:bold;font-size:16px;text-transform:uppercase;color:#000;-webkit-text-decoration:none;text-decoration:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:3rem;}@media (min-width:50rem){.CategoryName_cmpnef6{height:5rem;}}
+.CategoriesHeader_cmtbqnf{margin-bottom:1rem;font-size:24px;}@media (max-width:39.99rem){.CategoriesHeader_cmtbqnf{font-size:18px;margin-left:1rem;}}
 

package/.linaria-cache/packages/template-trend/src/components/StartPage/Content/StartPageCampaign.linaria.css

@@ -1,7 +1,7 @@
 .Container_c1mpoa17{padding-top:60px;padding-bottom:60px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media (max-width:49.99rem){.Container_c1mpoa17{-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;padding-top:40px;padding-bottom:0;}}
 .Title_t143zagb{font-size:40px;font-weight:900;margin-bottom:18px;}@media (max-width:49.99rem){.Title_t143zagb{font-size:24px;}}
 .Description_dw9n0yg{width:400px;max-width:100%;margin-bottom:30px;line-height:1.45em;}@media (max-width:49.99rem){.Description_dw9n0yg{font-size:16px;margin-left:auto;margin-right:auto;}}
-.StyledButton_sdlteok.TrendLink_t168987g{width:176px;height:56px;}@media (max-width:49.99rem){.StyledButton_sdlteok.TrendLink_t168987g{margin-left:auto;margin-right:auto;}}
+.StyledButton_sdlteok{width:176px;height:56px;}@media (max-width:49.99rem){.StyledButton_sdlteok{margin-left:auto;margin-right:auto;}}
 @media (min-width:50rem){.Column_c3tz8u6:first-child{margin-right:1rem;}.Column_c3tz8u6:last-child{margin-left:60px;}}
 .ImageColumn_i1ymieme.Column_c3tz8u6{height:386px;width:50%;}@media (max-width:49.99rem){.ImageColumn_i1ymieme.Column_c3tz8u6{width:100%;padding-bottom:48px;}}
 .TextColumn_tvojnoy.Column_c3tz8u6{width:50%;}@media (max-width:49.99rem){.TextColumn_tvojnoy.Column_c3tz8u6{width:100%;padding-bottom:48px;text-align:center;}}.TextColumn_tvojnoy.Column_c3tz8u6.rightAlign{text-align:end;}.TextColumn_tvojnoy.Column_c3tz8u6.rightAlign > *{float:right;}

package/.linaria-cache/packages/template-trend/src/components/StartPage/Content/StartPageHero.linaria.css

@@ -2,5 +2,5 @@
 .Container_cisv5dw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;color:white;height:100%;text-align:center;}
 .Title_t16em3cz{font-size:64px;font-weight:900;margin-bottom:18px;}@media (max-width:49.99rem){.Title_t16em3cz{font-size:30px;margin-bottom:12px;}}
 .Description_d10uwce4{width:420px;font-size:20px;max-width:100%;margin-bottom:30px;line-height:1.45em;}@media (max-width:49.99rem){.Description_d10uwce4{width:100%;font-size:16px;padding-left:0.75rem;padding-right:0.75rem;}}
-.StyledButton_sxbg28i.TrendLink_t168987g{width:176px;height:46px;}@media (max-width:39.99rem){.StyledButton_sxbg28i.TrendLink_t168987g{width:138px;height:32px;font-size:14px;}}
+.StyledButton_sxbg28i{width:176px;height:46px;}@media (max-width:39.99rem){.StyledButton_sxbg28i{width:138px;height:32px;font-size:14px;}}
 .heroStyles_htsirq5{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}

package/.linaria-cache/packages/template-trend/src/components/ui/Button.linaria.css

@@ -1,3 +1,4 @@
 .Button_bsyf8ar{background-color:#146DE1;border-color:#146DE1;color:white;font-size:16px;border-radius:4px;padding:0.5rem 1rem;height:54px;}.Button_bsyf8ar span{margin-right:12px;}.Button_bsyf8ar svg{fill:white;height:1em;width:1em;margin-right:1em;}@media (min-width:50rem){.Button_bsyf8ar{max-width:100%;}}.Button_bsyf8ar:disabled{border:1px solid #dedede;opacity:0.5;}.Button_bsyf8ar.secondary{background-color:white;border:1px solid #333;color:#333;}.Button_bsyf8ar.secondary circle.path{stroke:black;}
-.TrendLink_t168987g{background-color:#146DE1;border-color:#146DE1;color:white;font-size:16px;border-radius:4px;padding:0.5rem 1rem;height:54px;-webkit-text-decoration:none;text-decoration:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:54px;}.TrendLink_t168987g span{margin-right:12px;}.TrendLink_t168987g svg{fill:white;height:1em;width:1em;margin-right:1em;}@media (min-width:50rem){.TrendLink_t168987g{max-width:100%;}}.TrendLink_t168987g:disabled{border:1px solid #dedede;opacity:0.5;}.TrendLink_t168987g.secondary{background-color:white;border:1px solid #333;color:#333;}.TrendLink_t168987g.secondary circle.path{stroke:black;}
-.StyledSpinner_s15bfm3m.Spinner_s281cpt{height:25px;}.StyledSpinner_s15bfm3m.Spinner_s281cpt circle.path{stroke:white;}
+.TrendABase_t168987g{background-color:#146DE1;border-color:#146DE1;color:white;font-size:16px;border-radius:4px;padding:0.5rem 1rem;height:54px;-webkit-text-decoration:none;text-decoration:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:54px;}.TrendABase_t168987g span{margin-right:12px;}.TrendABase_t168987g svg{fill:white;height:1em;width:1em;margin-right:1em;}@media (min-width:50rem){.TrendABase_t168987g{max-width:100%;}}.TrendABase_t168987g:disabled{border:1px solid #dedede;opacity:0.5;}.TrendABase_t168987g.secondary{background-color:white;border:1px solid #333;color:#333;}.TrendABase_t168987g.secondary circle.path{stroke:black;}
+.TrendLinkBase_t15bfm3m{background-color:#146DE1;border-color:#146DE1;color:white;font-size:16px;border-radius:4px;padding:0.5rem 1rem;height:54px;-webkit-text-decoration:none;text-decoration:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:54px;}.TrendLinkBase_t15bfm3m span{margin-right:12px;}.TrendLinkBase_t15bfm3m svg{fill:white;height:1em;width:1em;margin-right:1em;}@media (min-width:50rem){.TrendLinkBase_t15bfm3m{max-width:100%;}}.TrendLinkBase_t15bfm3m:disabled{border:1px solid #dedede;opacity:0.5;}.TrendLinkBase_t15bfm3m.secondary{background-color:white;border:1px solid #333;color:#333;}.TrendLinkBase_t15bfm3m.secondary circle.path{stroke:black;}
+.StyledSpinner_s1yqqynf.Spinner_s281cpt{height:25px;}.StyledSpinner_s1yqqynf.Spinner_s281cpt circle.path{stroke:white;}

package/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "configurations": [
+    {
+      "type": "node-terminal",
+      "name": "Run Script: start",
+      "request": "launch",
+      "command": "yarn run start",
+      "cwd": "${workspaceFolder}"
+    }
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetshop/template-trend",
-  "version": "5.11.1",
+  "version": "5.11.2",
   "license": "MIT",
   "scripts": {
     "build": "react-scripts build",
@@ -45,11 +45,11 @@
     ]
   },
   "dependencies": {
-    "@jetshop/core": "^5.11.1",
+    "@jetshop/core": "^5.11.2",
     "@jetshop/flight-shortcodes": "^2.0.10",
-    "@jetshop/intl": "^5.11.1",
-    "@jetshop/react-scripts": "^5.11.1",
-    "@jetshop/ui": "^5.11.1",
+    "@jetshop/intl": "^5.11.2",
+    "@jetshop/react-scripts": "^5.11.2",
+    "@jetshop/ui": "^5.11.2",
     "@react-google-maps/api": "~1.7.0",
     "prop-types": "^15.6.2",
     "react": "^16.9.0",

package/src/components/Cart/queries/cartFragment.gql

@@ -82,6 +82,7 @@ fragment Cart on Cart {
       primaryRoute {
         id
         path
+        breadcrumbs
       }
       customFields {
         key
@@ -97,11 +98,6 @@ fragment Cart on Cart {
         title
         url
       }
-      canonicalCategory {
-        primaryRoute {
-          path
-        }
-      }
     }
     variantOptionNames
   }

package/src/components/CategoryPage/CategoryHeader.js

@@ -109,12 +109,11 @@ const CategoryHeader = ({
   category,
   parents,
   imageSrc,
-  breadcrumbs = { value: true },
+  breadcrumbs,
   content
 }) => {
-  const { value } = breadcrumbs;
   const breadcrumbProps = {
-    breadcrumbText: value ? category.breadcrumbText : '',
+    breadcrumbs,
     parents
   };
   const isImageBackground =
@@ -130,6 +129,7 @@ const CategoryHeader = ({
             quality={80}
             className={headerImageStyles}
             critical={true}
+            sizes={[1, 1, 1, 1, 1216]}
           >
             <Content
               category={category}

package/src/components/CategoryPage/ProductCard.js

@@ -65,7 +65,7 @@ export function ProductCard({
   product,
   className,
   imageAspect = '1:1',
-  imageSizes = [1 / 4, 1 / 3, 1 / 2, 1 / 2],
+  imageSizes = [1 / 2, 1 / 2, 1 / 3, 1 / 4],
   forwardRef,
   as = 'li',
   children,

package/src/components/CategoryPage/ProductGrid.js

@@ -58,6 +58,7 @@ export function isAboveFold(index) {
 export function ProductGrid({
   products,
   listName,
+  category = '',
   loading,
   className,
   ...rest
@@ -68,8 +69,8 @@ export function ProductGrid({
     if (!products || products.length === 0) return;
 
     // Otherwise track a list view event
-    track(trackListEvent({ listName, products }));
-  }, [listName, products, track]);
+    track(trackListEvent({ listName, products, category }));
+  }, [listName, products, track, category]);
 
   if (!products) return null;
 

package/src/components/CategoryPage/ProductGridWindow.js

@@ -27,6 +27,7 @@ function ProductGridWindow({
   prevOffset,
   itemsPerRow,
   categoryPath,
+  category = '',
   ...rest
 }) {
   // Track product listing
@@ -36,8 +37,8 @@ function ProductGridWindow({
     if (!products || products.length === 0) return;
 
     // Otherwise track a list view event
-    track(trackListEvent({ listName, products }));
-  }, [listName, products, track]);
+    track(trackListEvent({ listName, products, category }));
+  }, [listName, products, track, category]);
 
   const renderProduct = useMemo(
     () =>

package/src/components/CategoryPage/StandardCategoryPage.js

@@ -44,6 +44,7 @@ const Category = ({ category, result }) => {
         <CategoryHeader
           category={category}
           parents={result?.data?.route?.parents}
+          breadcrumbs={result?.data?.route?.breadcrumbs}
         />
 
         <Container>
@@ -63,6 +64,7 @@ const Category = ({ category, result }) => {
               products={category.products.result}
               listName={category.name}
               categoryPath={category.isDynamic ? null : result?.data?.route}
+              category={result?.data?.route?.breadcrumbs?.join('/') || ''}
               loading={result.loading}
               imageSizes={[1 / 2, 1 / 2, 1 / 3, 1 / 4]}
             />

package/src/components/CategoryPage/WindowedCategoryPage.js

@@ -78,6 +78,11 @@ const WindowedCategory = ({ category, result }) => {
                   category={category}
                   parents={result?.data?.route?.parents}
                   {...props}
+                  breadcrumbs={
+                    props.breadcrumbs?.value
+                      ? result?.data?.route?.breadcrumbs
+                      : []
+                  }
                 />
               </div>
             )
@@ -89,6 +94,7 @@ const WindowedCategory = ({ category, result }) => {
           <CategoryHeader
             category={category}
             parents={result?.data?.route?.parents}
+            breadcrumbs={result?.data?.route?.breadcrumbs}
           />
         )}
         <Container>
@@ -130,6 +136,7 @@ const WindowedCategory = ({ category, result }) => {
             products={products}
             listName={category.name}
             categoryPath={categoryPath}
+            category={result?.data?.route?.breadcrumbs?.join('/') || ''}
             loading={result.loading}
             imageSizes={[1 / 2, 1 / 2, 1 / 3, 1 / 4]}
           />

package/src/components/Layout/Header/AutocompleteQuery.gql

@@ -8,12 +8,7 @@ query AutocompleteQuery($term: String!) {
           id
           slug
           path
-          parents {
-            id
-            object {
-              breadcrumbText
-            }
-          }
+          breadcrumbs
         }
       }
     }

package/src/components/ProductPage/Images/ImageContainer.js

@@ -26,9 +26,20 @@ export default function ImageContainer({ images, badges, variant, ...rest }) {
     variant
   });
 
+  const selectedVariantImageIndex = variant
+    ? images.findIndex(image => image.url === variant.images?.[0]?.url)
+    : null;
+
   return (
     <div {...rest} className={cx(rest.className, wrapper)}>
-      <Gallery aspect={'1:1'} images={images} galleryRef={galleryRef}>
+      <Gallery
+        aspect={'1:1'}
+        images={images}
+        galleryRef={galleryRef}
+        eagerlyLoad={
+          selectedVariantImageIndex ? [0, selectedVariantImageIndex] : [0]
+        }
+      >
         <Badges badges={badges} />
       </Gallery>
     </div>

package/src/components/ProductPage/ProductInfo.js

@@ -56,7 +56,7 @@ const ProductInfo = ({ product }) => {
           />
         </ProductSection>
       )}
-      {product.customFields.length > 0 && (
+      {product.customFields?.length > 0 && (
         <ProductSection>
           <SectionHeading>{t('Specifications')}</SectionHeading>
           <ProductSpecifications fields={product.customFields} />

package/src/components/ProductPage/ProductPage.js

@@ -129,10 +129,8 @@ const Product = ({ result: { data, loading }, product }) => {
     preselectCheapest: true
   });
 
-  const {
-    selectedVariant: selectedVariation,
-    getMissingOptions
-  } = variantHandler;
+  const { selectedVariant: selectedVariation, getMissingOptions } =
+    variantHandler;
 
   // Return early if there is no product
   if (!product)
@@ -150,8 +148,8 @@ const Product = ({ result: { data, loading }, product }) => {
     <ProductContainer>
       <MaxWidth>
         <Breadcrumbs
+          breadcrumbs={data?.route?.breadcrumbs || []}
           parents={parents}
-          breadcrumbText={product.breadcrumbText}
         />
       </MaxWidth>
       <Container>

package/src/components/ProductPage/ProductPageFragment.gql

@@ -33,6 +33,7 @@ fragment ProductPage on Product {
   primaryRoute {
     path
     id
+    breadcrumbs
   }
   ...ProductPrice
   stockStatus {

package/src/components/ProductPage/StockStatus/WarehouseStock.js

@@ -207,21 +207,19 @@ const WarehouseStock = ({ product, variantHandler }) => {
 
 const WarehouseStockItem = ({ item, missingOptions, validation }) => {
   return (
-    <>
-      <WarehouseStockWrapper className="warehouse-stock-wrapper">
-        <p className="stock-status-header">
-          <span className="store-icon">
-            <StoreIcon />
-          </span>
-          <span className="header-title">{t('Find product in store')}</span>
-        </p>
-        <WarehouseValidation
-          validation={validation}
-          missingOptions={missingOptions}
-          item={item}
-        ></WarehouseValidation>
-      </WarehouseStockWrapper>
-    </>
+    <WarehouseStockWrapper className="warehouse-stock-wrapper">
+      <p className="stock-status-header">
+        <span className="store-icon">
+          <StoreIcon />
+        </span>
+        <span className="header-title">{t('Find product in store')}</span>
+      </p>
+      <WarehouseValidation
+        validation={validation}
+        missingOptions={missingOptions}
+        item={item}
+      />
+    </WarehouseStockWrapper>
   );
 };
 
@@ -257,7 +255,7 @@ function WarehouseValidation({ validation, missingOptions, item }) {
             <WarehouseStockItemContent
               warehouse={warehouse}
               productVariant={productVariant}
-              key-={warehouse.location?.id}
+              key={warehouse.location?.id}
             />
           ))}
         </ul>
@@ -295,7 +293,7 @@ const WarehouseStockItemContent = ({ warehouse, productVariant }) => {
   }
 
   return (
-    <li key={warehouse.location?.id} className="warehouse-list-item">
+    <li className="warehouse-list-item">
       <div className="warehouse-name">
         <span>{warehouse.location?.name}</span>
       </div>

package/src/components/RouteQuery.gql

@@ -1,4 +1,4 @@
-#import "@jetshop/core/data/fragments/RouteCrumbFragment.gql"
+#import "@jetshop/core/data/fragments/RouteMetaFragment.gql"
 #import "@jetshop/core/data/fragments/HeadFragment.gql"
 #import "./CategoryPage/CategoryPageFragment.gql"
 #import "./ContentPage/ContentPageFragment.gql"
@@ -12,7 +12,7 @@ query route(
   $filters: FilterInput
 ) {
   route(path: $path) {
-    ...RouteCrumb
+    ...RouteMeta
     object {
       ...Head
       ...CategoryPage

package/src/components/StartPage/Content/StartPageHero.js

@@ -79,7 +79,7 @@ const StartPageHero = ({
       fillAvailableSpace={true}
       src={imageSrc.value}
       className={heroStyles}
-      critical={isAboveFold.value}
+      critical={isAboveFold?.value}
     >
       <Container>
         <Title>{header.value}</Title>

package/src/components/StartPage/StartPageProductGridFragment.gql

@@ -13,6 +13,7 @@ fragment StartPageProductGrid on Product {
     id
     path
     slug
+    breadcrumbs
   }
   ...ProductPrice
   images {

package/src/components/ui/Button.js

@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
 import Spinner from './Spinner';
 import t from '@jetshop/intl';
 import { theme } from '../Theme';
+import { isRelativeUrl } from '@jetshop/core/helpers/isRelativeUrl';
 
 export const baseStyles = `
   background-color: ${theme.colors.blue};
@@ -47,7 +48,7 @@ const Button = styled('button')`
   ${baseStyles};
 `;
 
-export const TrendLink = styled(Link)`
+const TrendABase = styled('a')`
   ${baseStyles};
   text-decoration: none;
   display: flex;
@@ -56,6 +57,23 @@ export const TrendLink = styled(Link)`
   height: 54px;
 `;
 
+const TrendLinkBase = styled(Link)`
+  ${baseStyles};
+  text-decoration: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 54px;
+`;
+
+export function TrendLink({ to, ...props }) {
+  return typeof to === 'string' && !isRelativeUrl(to) ? (
+    <TrendABase href={to} {...props} />
+  ) : (
+    <TrendLinkBase to={to} {...props} />
+  );
+}
+
 const StyledSpinner = styled(Spinner)`
   height: 25px;
   circle.path {

package/.linaria-cache/packages/ui/ChannelSelector/Region.linaria.css

@@ -1,3 +0,0 @@
-.RegionName_r1biyodf{text-transform:uppercase;font-size:1rem;line-height:1.5rem;font-weight:600;margin:1rem 0 0.5rem 0;}
-
-