@graphcommerce/magento-product 4.6.1 → 4.7.1

package/Api/ProductPageItem.graphql

@@ -2,6 +2,7 @@ fragment ProductPageItem on ProductInterface @injectable {
   __typename
   uid
   ...ProductPageCategory
+  ...ProductPageBreadcrumb
   ...ProductPageDescription
   ...ProductPageGallery
   ...ProductPageMeta

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 4.7.1
+
+### Patch Changes
+
+- Updated dependencies [[`93c8f3a3f`](https://github.com/graphcommerce-org/graphcommerce/commit/93c8f3a3f2fd2d16e5a5132652bf489858583f63), [`0c21c5c23`](https://github.com/graphcommerce-org/graphcommerce/commit/0c21c5c233ebab15f6629c234e3de1cc8c0452e1), [`de8925aa9`](https://github.com/graphcommerce-org/graphcommerce/commit/de8925aa910b191c62041530c68c697a58a1e52d), [`f5eae0afd`](https://github.com/graphcommerce-org/graphcommerce/commit/f5eae0afdbd474b1f81c450425ffadf2d025187a), [`9e0ca73eb`](https://github.com/graphcommerce-org/graphcommerce/commit/9e0ca73eb50ded578f4a98e40a7eb920bf8ab421)]:
+  - @graphcommerce/magento-cart@4.8.6
+  - @graphcommerce/next-ui@4.28.0
+  - @graphcommerce/framer-scroller@2.1.40
+  - @graphcommerce/framer-next-pages@3.3.1
+  - @graphcommerce/ecommerce-ui@1.5.2
+  - @graphcommerce/magento-store@4.3.1
+
+## 4.7.0
+
+### Minor Changes
+
+- [#1659](https://github.com/graphcommerce-org/graphcommerce/pull/1659) [`6987ec7d2`](https://github.com/graphcommerce-org/graphcommerce/commit/6987ec7d21ce2d481fabbd6eda039702fcf5242b) Thanks [@Jessevdpoel](https://github.com/Jessevdpoel)! - Added product and category breadcrumbs
+
 ## 4.6.1
 
 ### Patch Changes

package/components/ProductPageBreadcrumb/ProductPageBreadcrumb.graphql

@@ -0,0 +1,14 @@
+fragment ProductPageBreadcrumb on ProductInterface {
+  name
+  categories {
+    uid
+    name
+    url_path
+    include_in_menu
+    breadcrumbs {
+      category_name
+      category_uid
+      category_url_path
+    }
+  }
+}

package/components/ProductPageBreadcrumb/ProductPageBreadcrumb.tsx

@@ -0,0 +1,42 @@
+import { usePrevPageRouter } from '@graphcommerce/framer-next-pages'
+import { Trans } from '@lingui/react'
+import { Breadcrumbs, BreadcrumbsProps, Container, Link, Typography } from '@mui/material'
+import PageLink from 'next/link'
+import { productPageCategory } from '../ProductPageCategory/productPageCategory'
+import { ProductPageBreadcrumbFragment } from './ProductPageBreadcrumb.gql'
+
+type ProductPageBreadcrumbsProps = ProductPageBreadcrumbFragment & BreadcrumbsProps
+
+export function ProductPageBreadcrumb(props: ProductPageBreadcrumbsProps) {
+  const { categories, name } = props
+  const prev = usePrevPageRouter()
+
+  const category =
+    categories?.find((c) => `/${c?.url_path}` === prev?.asPath) ?? productPageCategory(props)
+
+  return (
+    <Container maxWidth={false}>
+      <Breadcrumbs>
+        <PageLink href='/' passHref>
+          <Link underline='hover' color='inherit'>
+            <Trans id='Home' />
+          </Link>
+        </PageLink>
+        {category?.breadcrumbs?.map((mapped_category, i) => (
+          <Link
+            underline='hover'
+            key={mapped_category?.category_uid}
+            color='inherit'
+            href={`/${mapped_category?.category_url_path}`}
+          >
+            {mapped_category?.category_name}
+          </Link>
+        ))}
+        <Link underline='hover' color='inherit' href={`/${category?.url_path}`}>
+          {category?.name}
+        </Link>
+        <Typography color='text.primary'>{name}</Typography>
+      </Breadcrumbs>
+    </Container>
+  )
+}

package/components/ProductPageBreadcrumb/index.ts

@@ -0,0 +1,2 @@
+export * from './ProductPageBreadcrumb.gql'
+export * from './ProductPageBreadcrumb'

package/components/ProductPageCategory/productPageCategory.ts

@@ -6,7 +6,9 @@ import { ProductPageCategoryFragment } from './ProductPageCategory.gql'
  * - Prefers categories that are included in the menu
  * - Prefers categories that have a longer path than shorter ones.
  */
-export function productPageCategory(product?: ProductPageCategoryFragment | null) {
+export function productPageCategory<Product extends ProductPageCategoryFragment>(
+  product?: Product | null,
+): NonNullable<Product['categories']>[number] | undefined {
   if (!product?.categories?.length) return undefined
   return product?.categories?.reduce((carry, value) => {
     if (!value?.include_in_menu) return carry

package/components/index.ts

@@ -1,6 +1,7 @@
 export * from './AddProductsToCart'
 export * from './JsonLdProduct/jsonLdProduct'
 export * from './ProductAddToCart'
+export * from './ProductCustomizable'
 export * from './ProductList/ProductList.gql'
 export * from './ProductListCount/ProductListCount'
 export * from './ProductListFilters/ProductFilters.gql'
@@ -18,6 +19,7 @@ export * from './ProductListItems/renderer'
 export * from './ProductListLink/ProductListLink'
 export * from './ProductListPagination/ProductListPagination'
 export * from './ProductListSort/ProductListSort'
+export * from './ProductPageBreadcrumb'
 export * from './ProductPageCategory/productPageCategory'
 export * from './ProductPageDescription/ProductPageDescription'
 export * from './ProductPageGallery/ProductPageGallery'
@@ -31,4 +33,3 @@ export * from './ProductSpecs/ProductSpecs'
 export * from './ProductStaticPaths/getProductStaticPaths'
 export * from './ProductUpsells/UpsellProducts.gql'
 export * from './ProductWeight/ProductWeight'
-export * from './ProductCustomizable'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.6.1",
+  "version": "4.7.1",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -19,14 +19,15 @@
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "1.5.1",
-    "@graphcommerce/framer-scroller": "2.1.39",
+    "@graphcommerce/ecommerce-ui": "1.5.2",
+    "@graphcommerce/framer-scroller": "2.1.40",
+    "@graphcommerce/framer-next-pages": "3.3.1",
     "@graphcommerce/graphql": "3.4.8",
     "@graphcommerce/graphql-mesh": "4.2.0",
     "@graphcommerce/image": "3.1.9",
-    "@graphcommerce/magento-cart": "4.8.5",
-    "@graphcommerce/magento-store": "4.3.0",
-    "@graphcommerce/next-ui": "4.27.0",
+    "@graphcommerce/magento-cart": "4.8.6",
+    "@graphcommerce/magento-store": "4.3.1",
+    "@graphcommerce/next-ui": "4.28.0",
     "schema-dts": "^1.1.0"
   },
   "peerDependencies": {