@graphcommerce/magento-product 8.1.0-canary.40 → 8.1.0-canary.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/Config.graphqls +13 -0
  3. package/components/ProductListPagination/ProductListPagination.tsx +37 -20
  4. package/package.json +14 -14
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # Change Log
2
2
 
3
+ ## 8.1.0-canary.41
4
+
5
+ ### Patch Changes
6
+
7
+ - [#2242](https://github.com/graphcommerce-org/graphcommerce/pull/2242) [`a4cce76`](https://github.com/graphcommerce-org/graphcommerce/commit/a4cce76ca37af2bec604e953ada4bb11bd91f55d) - Add option to show an extended version of the pagination component. Configurable via the "productListPaginationVariant" key in your graphcommerce.config.js
8
+ COMPACT means: "< Page X of Y >"
9
+ EXTENDED means: "< 1 2 ... [5] ... 10 11 >" ([@FrankHarland](https://github.com/FrankHarland))
10
+
3
11
  ## 8.1.0-canary.40
4
12
 
5
13
  ## 8.1.0-canary.39
package/Config.graphqls CHANGED
@@ -3,6 +3,11 @@ enum ProductFiltersLayout {
3
3
  SIDEBAR
4
4
  }
5
5
 
6
+ enum PaginationVariant {
7
+ COMPACT
8
+ EXTENDED
9
+ }
10
+
6
11
  extend input GraphCommerceConfig {
7
12
  """
8
13
  Product filters with better UI for mobile and desktop.
@@ -37,4 +42,12 @@ extend input GraphCommerceConfig {
37
42
  Default: 'false'
38
43
  """
39
44
  crossSellsHideCartItems: Boolean = false
45
+
46
+ """
47
+ Pagination variant for the product listings.
48
+
49
+ COMPACT means: "< Page X of Y >"
50
+ EXTENDED means: "< 1 2 ... 4 [5] 6 ... 10 11 >"
51
+ """
52
+ productListPaginationVariant: PaginationVariant = COMPACT
40
53
  }
package/components/ProductListPagination/ProductListPagination.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Pagination } from '@graphcommerce/next-ui'
1
+ import { PaginationExtended, Pagination } from '@graphcommerce/next-ui'
2
2
  import { Link, PaginationProps } from '@mui/material'
3
3
  import { productListLink } from '../../hooks/useProductListLink'
4
4
  import { ProductListParams } from '../ProductListItems/filterTypes'
@@ -16,23 +16,40 @@ export function ProductListPagination({
16
16
  }: ProductPaginationProps) {
17
17
  if (!page_info || !page_info.total_pages || !page_info.current_page) return null
18
18
 
19
- return (
20
- <Pagination
21
- count={page_info?.total_pages}
22
- page={page_info?.current_page ?? 1}
23
- renderLink={(_, icon, btnProps) => {
24
- const suffix = btnProps.page === 1 ? '' : `#products`
25
- return (
26
- <Link
27
- {...btnProps}
28
- href={`${productListLink({ ...params, currentPage: btnProps.page })}${suffix}`}
29
- color='inherit'
30
- >
31
- {icon}
32
- </Link>
33
- )
34
- }}
35
- {...paginationProps}
36
- />
37
- )
19
+ if (import.meta.graphCommerce.productListPaginationVariant !== 'EXTENDED') {
20
+ return (
21
+ <Pagination
22
+ count={page_info?.total_pages}
23
+ page={page_info?.current_page ?? 1}
24
+ renderLink={(_, icon, btnProps) => {
25
+ const suffix = btnProps.page === 1 ? '' : `#products`
26
+ return (
27
+ <Link
28
+ {...btnProps}
29
+ href={`${productListLink({ ...params, currentPage: btnProps.page })}${suffix}`}
30
+ color='inherit'
31
+ >
32
+ {icon}
33
+ </Link>
34
+ )
35
+ }}
36
+ {...paginationProps}
37
+ />
38
+ )
39
+ }
40
+
41
+ if (import.meta.graphCommerce.productListPaginationVariant === 'EXTENDED') {
42
+ return (
43
+ <PaginationExtended
44
+ count={page_info?.total_pages}
45
+ page={page_info?.current_page ?? 1}
46
+ paginationHref={({ page }) =>
47
+ `${productListLink({ ...params, currentPage: page })}${page === 1 ? '' : '#products'}`
48
+ }
49
+ {...paginationProps}
50
+ />
51
+ )
52
+ }
53
+
54
+ return null
38
55
  }
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@graphcommerce/magento-product",
3
3
  "homepage": "https://www.graphcommerce.org/",
4
4
  "repository": "github:graphcommerce-org/graphcommerce",
5
- "version": "8.1.0-canary.40",
5
+ "version": "8.1.0-canary.41",
6
6
  "sideEffects": false,
7
7
  "prettier": "@graphcommerce/prettier-config-pwa",
8
8
  "eslintConfig": {
@@ -18,19 +18,19 @@
18
18
  "typescript": "5.3.3"
19
19
  },
20
20
  "peerDependencies": {
21
- "@graphcommerce/ecommerce-ui": "^8.1.0-canary.40",
22
- "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.40",
23
- "@graphcommerce/framer-next-pages": "^8.1.0-canary.40",
24
- "@graphcommerce/framer-scroller": "^8.1.0-canary.40",
25
- "@graphcommerce/graphql": "^8.1.0-canary.40",
26
- "@graphcommerce/graphql-mesh": "^8.1.0-canary.40",
27
- "@graphcommerce/image": "^8.1.0-canary.40",
28
- "@graphcommerce/magento-cart": "^8.1.0-canary.40",
29
- "@graphcommerce/magento-category": "^8.1.0-canary.40",
30
- "@graphcommerce/magento-store": "^8.1.0-canary.40",
31
- "@graphcommerce/next-ui": "^8.1.0-canary.40",
32
- "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.40",
33
- "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.40",
21
+ "@graphcommerce/ecommerce-ui": "^8.1.0-canary.41",
22
+ "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.41",
23
+ "@graphcommerce/framer-next-pages": "^8.1.0-canary.41",
24
+ "@graphcommerce/framer-scroller": "^8.1.0-canary.41",
25
+ "@graphcommerce/graphql": "^8.1.0-canary.41",
26
+ "@graphcommerce/graphql-mesh": "^8.1.0-canary.41",
27
+ "@graphcommerce/image": "^8.1.0-canary.41",
28
+ "@graphcommerce/magento-cart": "^8.1.0-canary.41",
29
+ "@graphcommerce/magento-category": "^8.1.0-canary.41",
30
+ "@graphcommerce/magento-store": "^8.1.0-canary.41",
31
+ "@graphcommerce/next-ui": "^8.1.0-canary.41",
32
+ "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.41",
33
+ "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.41",
34
34
  "@lingui/core": "^4.2.1",
35
35
  "@lingui/macro": "^4.2.1",
36
36
  "@lingui/react": "^4.2.1",