@graphcommerce/magento-product 4.6.1 → 4.7.0

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,11 @@
 # Change Log
 
+## 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.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -21,6 +21,7 @@
   "dependencies": {
     "@graphcommerce/ecommerce-ui": "1.5.1",
     "@graphcommerce/framer-scroller": "2.1.39",
+    "@graphcommerce/framer-next-pages": "3.3.0",
     "@graphcommerce/graphql": "3.4.8",
     "@graphcommerce/graphql-mesh": "4.2.0",
     "@graphcommerce/image": "3.1.9",