@graphcommerce/magento-product-configurable 8.1.0-canary.3 → 8.1.0-canary.30
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.
- package/CHANGELOG.md +137 -2
- package/ConfigurableContext/ConfigurableProductForm.graphql +0 -1
- package/ConfigurableProductAddToCart/ConfigurableProductAddToCart.tsx +6 -4
- package/components/ConfigurableProductOptions/ConfigurableProductOptions.tsx +3 -5
- package/graphql/ConfigurableOptions.graphql +1 -1
- package/graphql/ConfigurableOptionsSelection.graphql +1 -1
- package/graphql/GetConfigurableOptionsSelection.graphql +1 -6
- package/hooks/useConfigurableOptionsSelection.ts +1 -1
- package/package.json +18 -18
- package/plugins/ConfigurableCartItemActionCard.tsx +7 -10
- package/plugins/ConfigurableProductPage/ConfigurableProductPageDescription.tsx +9 -7
- package/plugins/ConfigurableProductPage/ConfigurableProductPageGallery.tsx +6 -7
- package/plugins/ConfigurableProductPage/ConfigurableProductPageJsonLd.tsx +14 -7
- package/plugins/ConfigurableProductPage/ConfigurableProductPageMeta.tsx +6 -6
- package/plugins/ConfigurableProductPage/ConfigurableProductPageName.tsx +6 -6
- package/plugins/ConfigurableProductPage/ConfigurableProductPagePrice.tsx +15 -8
- package/plugins/ConfigurableProductPage/ConfigurableProductPagePriceTiers.tsx +9 -7
- package/plugins/ConfigurableProductPage/ConfigurableProductShortDescription.tsx +9 -7
- package/utils/defaultConfigurableOptionsSelection.ts +14 -14
package/CHANGELOG.md
CHANGED
|
@@ -1,8 +1,143 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
-
## 8.1.0-canary.
|
|
3
|
+
## 8.1.0-canary.30
|
|
4
4
|
|
|
5
|
-
## 8.1.0-canary.
|
|
5
|
+
## 8.1.0-canary.29
|
|
6
|
+
|
|
7
|
+
## 8.1.0-canary.28
|
|
8
|
+
|
|
9
|
+
## 8.1.0-canary.27
|
|
10
|
+
|
|
11
|
+
## 8.1.0-canary.26
|
|
12
|
+
|
|
13
|
+
## 8.1.0-canary.25
|
|
14
|
+
|
|
15
|
+
## 8.1.0-canary.24
|
|
16
|
+
|
|
17
|
+
## 8.1.0-canary.23
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- [#2282](https://github.com/graphcommerce-org/graphcommerce/pull/2282) [`e048f61`](https://github.com/graphcommerce-org/graphcommerce/commit/e048f6165ae5a15be99fba0c3d3529c700477d3e) - Disable configurable product options that are unavailable for selection.
|
|
22
|
+
([@carlocarels90](https://github.com/carlocarels90))
|
|
23
|
+
|
|
24
|
+
## 8.1.0-canary.22
|
|
25
|
+
|
|
26
|
+
## 8.1.0-canary.21
|
|
27
|
+
|
|
28
|
+
## 8.1.0-canary.20
|
|
29
|
+
|
|
30
|
+
## 8.1.0-canary.19
|
|
31
|
+
|
|
32
|
+
## 8.1.0-canary.18
|
|
33
|
+
|
|
34
|
+
## 8.1.0-canary.17
|
|
35
|
+
|
|
36
|
+
## 8.1.0-canary.16
|
|
37
|
+
|
|
38
|
+
## 8.1.0-canary.15
|
|
39
|
+
|
|
40
|
+
## 8.1.0-canary.14
|
|
41
|
+
|
|
42
|
+
## 8.1.0-canary.13
|
|
43
|
+
|
|
44
|
+
## 8.1.0-canary.12
|
|
45
|
+
|
|
46
|
+
## 8.1.0-canary.11
|
|
47
|
+
|
|
48
|
+
## 8.1.0-canary.10
|
|
49
|
+
|
|
50
|
+
## 8.1.0-canary.9
|
|
51
|
+
|
|
52
|
+
## 8.1.0-canary.8
|
|
53
|
+
|
|
54
|
+
### Patch Changes
|
|
55
|
+
|
|
56
|
+
- [#2247](https://github.com/graphcommerce-org/graphcommerce/pull/2247) [`444e446`](https://github.com/graphcommerce-org/graphcommerce/commit/444e446a218cc9da3defb940a6d5cce0229ff845) - Added clear upgrade instructions for linguiLocale
|
|
57
|
+
([@paales](https://github.com/paales))
|
|
58
|
+
|
|
59
|
+
## 8.1.0-canary.7
|
|
60
|
+
|
|
61
|
+
## 8.1.0-canary.6
|
|
62
|
+
|
|
63
|
+
## 8.1.0-canary.5
|
|
64
|
+
|
|
65
|
+
## 8.0.6-canary.4
|
|
66
|
+
|
|
67
|
+
## 8.0.6-canary.3
|
|
68
|
+
|
|
69
|
+
## 8.0.6-canary.2
|
|
70
|
+
|
|
71
|
+
### Patch Changes
|
|
72
|
+
|
|
73
|
+
- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`0767bc4`](https://github.com/graphcommerce-org/graphcommerce/commit/0767bc40f7b596209f24ca4e745ff0441f3275c9) - Upgrade input components to no longer use muiRegister, which improves INP scores
|
|
74
|
+
([@FrankHarland](https://github.com/FrankHarland))
|
|
75
|
+
|
|
76
|
+
## 8.0.6-canary.1
|
|
77
|
+
|
|
78
|
+
### Patch Changes
|
|
79
|
+
|
|
80
|
+
- [#2213](https://github.com/graphcommerce-org/graphcommerce/pull/2213) [`a0d952e`](https://github.com/graphcommerce-org/graphcommerce/commit/a0d952e6b8a71a7451bfdb2bdb5150fc218169e2) - Moved product reviews to the relatedUpsells query so we do not pass the queryComplexity limit
|
|
81
|
+
([@paales](https://github.com/paales))
|
|
82
|
+
|
|
83
|
+
## 8.0.6-canary.0
|
|
84
|
+
|
|
85
|
+
### Patch Changes
|
|
86
|
+
|
|
87
|
+
- [#2196](https://github.com/graphcommerce-org/graphcommerce/pull/2196) [`84c50e4`](https://github.com/graphcommerce-org/graphcommerce/commit/84c50e49a1a7f154d4a8f4045c37e773e20283ad) - Allow Lingui to use linguiLocale with country identifiers like `en-us`, it would always load `en` in this case. Introced a new `useLocale` hook to use the correct locale string to use in Intl methods.
|
|
88
|
+
([@paales](https://github.com/paales))
|
|
89
|
+
|
|
90
|
+
## 8.0.5
|
|
91
|
+
|
|
92
|
+
### Patch Changes
|
|
93
|
+
|
|
94
|
+
- [#2239](https://github.com/graphcommerce-org/graphcommerce/pull/2239) [`a2a6e78`](https://github.com/graphcommerce-org/graphcommerce/commit/a2a6e78291ab978f4ef1236a4476b4d54555af7f) - Prices of products are now updated when customizable options are selected
|
|
95
|
+
([@Jessevdpoel](https://github.com/Jessevdpoel))
|
|
96
|
+
|
|
97
|
+
## 8.0.5-canary.10
|
|
98
|
+
|
|
99
|
+
## 8.0.5-canary.9
|
|
100
|
+
|
|
101
|
+
## 8.0.5-canary.8
|
|
102
|
+
|
|
103
|
+
### Patch Changes
|
|
104
|
+
|
|
105
|
+
- [#2239](https://github.com/graphcommerce-org/graphcommerce/pull/2239) [`a2a6e78`](https://github.com/graphcommerce-org/graphcommerce/commit/a2a6e78291ab978f4ef1236a4476b4d54555af7f) - Prices of products are now updated when customizable options are selected
|
|
106
|
+
([@Jessevdpoel](https://github.com/Jessevdpoel))
|
|
107
|
+
|
|
108
|
+
## 8.0.5-canary.7
|
|
109
|
+
|
|
110
|
+
## 8.0.5-canary.6
|
|
111
|
+
|
|
112
|
+
## 8.0.5-canary.5
|
|
113
|
+
|
|
114
|
+
## 8.0.5-canary.4
|
|
115
|
+
|
|
116
|
+
## 8.0.5-canary.3
|
|
117
|
+
|
|
118
|
+
## 8.0.5-canary.2
|
|
119
|
+
|
|
120
|
+
## 8.0.5-canary.1
|
|
121
|
+
|
|
122
|
+
## 8.0.5-canary.0
|
|
123
|
+
|
|
124
|
+
## 8.0.4
|
|
125
|
+
|
|
126
|
+
## 8.0.4-canary.1
|
|
127
|
+
|
|
128
|
+
## 8.0.4-canary.0
|
|
129
|
+
|
|
130
|
+
## 8.0.3
|
|
131
|
+
|
|
132
|
+
## 8.0.3-canary.6
|
|
133
|
+
|
|
134
|
+
## 8.0.3-canary.5
|
|
135
|
+
|
|
136
|
+
## 8.0.3-canary.4
|
|
137
|
+
|
|
138
|
+
## 8.0.3-canary.3
|
|
139
|
+
|
|
140
|
+
## 8.0.3-canary.2
|
|
6
141
|
|
|
7
142
|
## 8.0.3-canary.1
|
|
8
143
|
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { NumberFieldElement } from '@graphcommerce/ecommerce-ui'
|
|
1
2
|
import { ApolloCartErrorAlert, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
|
|
2
3
|
import { Money } from '@graphcommerce/magento-store'
|
|
3
4
|
import {
|
|
@@ -6,7 +7,6 @@ import {
|
|
|
6
7
|
iconChevronRight,
|
|
7
8
|
MessageSnackbar,
|
|
8
9
|
IconSvg,
|
|
9
|
-
TextInputNumber,
|
|
10
10
|
} from '@graphcommerce/next-ui'
|
|
11
11
|
import { Trans } from '@lingui/react'
|
|
12
12
|
import { Divider, Typography, Alert, Box, SxProps, Theme } from '@mui/material'
|
|
@@ -64,7 +64,7 @@ export function ConfigurableProductAddToCart(props: ConfigurableProductAddToCart
|
|
|
64
64
|
}),
|
|
65
65
|
})
|
|
66
66
|
|
|
67
|
-
const { handleSubmit, formState,
|
|
67
|
+
const { handleSubmit, formState, required, control, error, data } = form
|
|
68
68
|
const submitHandler = handleSubmit(() => {})
|
|
69
69
|
|
|
70
70
|
return (
|
|
@@ -91,12 +91,14 @@ export function ConfigurableProductAddToCart(props: ConfigurableProductAddToCart
|
|
|
91
91
|
{...optionsProps}
|
|
92
92
|
/>
|
|
93
93
|
|
|
94
|
-
<
|
|
94
|
+
<NumberFieldElement
|
|
95
95
|
variant='outlined'
|
|
96
96
|
error={formState.isSubmitted && !!formState.errors.quantity}
|
|
97
97
|
required={required.quantity}
|
|
98
98
|
inputProps={{ min: 1 }}
|
|
99
|
-
|
|
99
|
+
name='quantity'
|
|
100
|
+
rules={{ required: required.quantity }}
|
|
101
|
+
control={control}
|
|
100
102
|
helperText={formState.isSubmitted && formState.errors.quantity?.message}
|
|
101
103
|
// disabled={loading}
|
|
102
104
|
size='small'
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
import { normalizeLocale } from '@graphcommerce/lingui-next'
|
|
2
1
|
import { AddToCartItemSelector, useFormAddProductsToCart } from '@graphcommerce/magento-product'
|
|
3
|
-
import { filterNonNullableKeys, ActionCardListProps } from '@graphcommerce/next-ui'
|
|
2
|
+
import { filterNonNullableKeys, ActionCardListProps, useLocale } from '@graphcommerce/next-ui'
|
|
4
3
|
import { i18n } from '@lingui/core'
|
|
5
4
|
import { Box, SxProps, Theme } from '@mui/material'
|
|
6
|
-
import { useRouter } from 'next/router'
|
|
7
5
|
import React, { useEffect, useMemo } from 'react'
|
|
8
6
|
import { ConfigurableOptionsFragment } from '../../graphql/ConfigurableOptions.gql'
|
|
9
7
|
import { useConfigurableOptionsSelection } from '../../hooks'
|
|
@@ -27,7 +25,6 @@ export function ConfigurableProductOptions(props: ConfigurableProductOptionsProp
|
|
|
27
25
|
...other
|
|
28
26
|
} = props
|
|
29
27
|
const { setError, clearErrors } = useFormAddProductsToCart()
|
|
30
|
-
const { locale } = useRouter()
|
|
31
28
|
|
|
32
29
|
const options = filterNonNullableKeys(product.configurable_options, [
|
|
33
30
|
'attribute_code',
|
|
@@ -41,8 +38,9 @@ export function ConfigurableProductOptions(props: ConfigurableProductOptionsProp
|
|
|
41
38
|
(configured?.configurable_product_options_selection?.options_available_for_selection ?? [])
|
|
42
39
|
.length === 0
|
|
43
40
|
|
|
41
|
+
const locale = useLocale()
|
|
44
42
|
const allLabels = useMemo(() => {
|
|
45
|
-
const formatter = new Intl.ListFormat(
|
|
43
|
+
const formatter = new Intl.ListFormat(locale, {
|
|
46
44
|
style: 'long',
|
|
47
45
|
type: 'conjunction',
|
|
48
46
|
})
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
query GetConfigurableOptionsSelection(
|
|
2
|
-
$urlKey: String!
|
|
3
|
-
$selectedOptions: [ID!] = []
|
|
4
|
-
$reviewPageSize: Int = 3
|
|
5
|
-
$reviewPage: Int = 1
|
|
6
|
-
) {
|
|
1
|
+
query GetConfigurableOptionsSelection($urlKey: String!, $selectedOptions: [ID!] = []) {
|
|
7
2
|
products(filter: { url_key: { eq: $urlKey } }) {
|
|
8
3
|
__typename
|
|
9
4
|
items {
|
|
@@ -16,7 +16,7 @@ export function useConfigurableOptionsForSelection(variables: UseConfigurableOpt
|
|
|
16
16
|
|
|
17
17
|
const selection = useQuery(GetConfigurableOptionsSelectionDocument, {
|
|
18
18
|
variables: { urlKey: url_key ?? '', selectedOptions },
|
|
19
|
-
skip: !url_key
|
|
19
|
+
skip: !url_key,
|
|
20
20
|
})
|
|
21
21
|
|
|
22
22
|
const configured = selection.error
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@graphcommerce/magento-product-configurable",
|
|
3
3
|
"homepage": "https://www.graphcommerce.org/",
|
|
4
4
|
"repository": "github:graphcommerce-org/graphcommerce",
|
|
5
|
-
"version": "8.1.0-canary.
|
|
5
|
+
"version": "8.1.0-canary.30",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
8
8
|
"eslintConfig": {
|
|
@@ -12,23 +12,23 @@
|
|
|
12
12
|
}
|
|
13
13
|
},
|
|
14
14
|
"peerDependencies": {
|
|
15
|
-
"@graphcommerce/ecommerce-ui": "^8.1.0-canary.
|
|
16
|
-
"@graphcommerce/eslint-config-pwa": "^8.1.0-canary.
|
|
17
|
-
"@graphcommerce/graphql": "^8.1.0-canary.
|
|
18
|
-
"@graphcommerce/graphql-mesh": "^8.1.0-canary.
|
|
19
|
-
"@graphcommerce/image": "^8.1.0-canary.
|
|
20
|
-
"@graphcommerce/lingui-next": "8.1.0-canary.
|
|
21
|
-
"@graphcommerce/magento-cart": "^8.1.0-canary.
|
|
22
|
-
"@graphcommerce/magento-cart-items": "^8.1.0-canary.
|
|
23
|
-
"@graphcommerce/magento-category": "^8.1.0-canary.
|
|
24
|
-
"@graphcommerce/magento-customer": "^8.1.0-canary.
|
|
25
|
-
"@graphcommerce/magento-product": "^8.1.0-canary.
|
|
26
|
-
"@graphcommerce/magento-product-simple": "^8.1.0-canary.
|
|
27
|
-
"@graphcommerce/magento-store": "^8.1.0-canary.
|
|
28
|
-
"@graphcommerce/next-ui": "^8.1.0-canary.
|
|
29
|
-
"@graphcommerce/prettier-config-pwa": "^8.1.0-canary.
|
|
30
|
-
"@graphcommerce/react-hook-form": "^8.1.0-canary.
|
|
31
|
-
"@graphcommerce/typescript-config-pwa": "^8.1.0-canary.
|
|
15
|
+
"@graphcommerce/ecommerce-ui": "^8.1.0-canary.30",
|
|
16
|
+
"@graphcommerce/eslint-config-pwa": "^8.1.0-canary.30",
|
|
17
|
+
"@graphcommerce/graphql": "^8.1.0-canary.30",
|
|
18
|
+
"@graphcommerce/graphql-mesh": "^8.1.0-canary.30",
|
|
19
|
+
"@graphcommerce/image": "^8.1.0-canary.30",
|
|
20
|
+
"@graphcommerce/lingui-next": "8.1.0-canary.30",
|
|
21
|
+
"@graphcommerce/magento-cart": "^8.1.0-canary.30",
|
|
22
|
+
"@graphcommerce/magento-cart-items": "^8.1.0-canary.30",
|
|
23
|
+
"@graphcommerce/magento-category": "^8.1.0-canary.30",
|
|
24
|
+
"@graphcommerce/magento-customer": "^8.1.0-canary.30",
|
|
25
|
+
"@graphcommerce/magento-product": "^8.1.0-canary.30",
|
|
26
|
+
"@graphcommerce/magento-product-simple": "^8.1.0-canary.30",
|
|
27
|
+
"@graphcommerce/magento-store": "^8.1.0-canary.30",
|
|
28
|
+
"@graphcommerce/next-ui": "^8.1.0-canary.30",
|
|
29
|
+
"@graphcommerce/prettier-config-pwa": "^8.1.0-canary.30",
|
|
30
|
+
"@graphcommerce/react-hook-form": "^8.1.0-canary.30",
|
|
31
|
+
"@graphcommerce/typescript-config-pwa": "^8.1.0-canary.30",
|
|
32
32
|
"@lingui/core": "^4.2.1",
|
|
33
33
|
"@lingui/macro": "^4.2.1",
|
|
34
34
|
"@lingui/react": "^4.2.1",
|
|
@@ -1,15 +1,14 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type { PluginProps } from '@graphcommerce/next-config'
|
|
1
|
+
import type { CartItemActionCardProps } from '@graphcommerce/magento-cart-items'
|
|
2
|
+
import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
|
|
3
3
|
import { isTypename } from '@graphcommerce/next-ui'
|
|
4
4
|
import { ConfigurableCartItemOptions } from '../components'
|
|
5
5
|
|
|
6
|
-
export const
|
|
7
|
-
|
|
8
|
-
'@graphcommerce/magento-cart-items
|
|
6
|
+
export const config: PluginConfig = {
|
|
7
|
+
type: 'component',
|
|
8
|
+
module: '@graphcommerce/magento-cart-items',
|
|
9
|
+
}
|
|
9
10
|
|
|
10
|
-
export function
|
|
11
|
-
props: PluginProps<React.ComponentProps<typeof CartItemActionCard>>,
|
|
12
|
-
) {
|
|
11
|
+
export function CartItemActionCard(props: PluginProps<CartItemActionCardProps>) {
|
|
13
12
|
const { Prev, ...rest } = props
|
|
14
13
|
|
|
15
14
|
if (!isTypename(rest.cartItem, ['ConfigurableCartItem'])) return <Prev {...rest} />
|
|
@@ -39,5 +38,3 @@ export function ConfigurableCartItemActionCard(
|
|
|
39
38
|
/>
|
|
40
39
|
)
|
|
41
40
|
}
|
|
42
|
-
|
|
43
|
-
export const Plugin = ConfigurableCartItemActionCard
|
|
@@ -1,15 +1,17 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
1
|
+
import type {
|
|
2
|
+
AddToCartItemSelector,
|
|
3
|
+
ProductPageDescriptionProps,
|
|
4
|
+
} from '@graphcommerce/magento-product'
|
|
5
|
+
import type { IfConfig, PluginProps } from '@graphcommerce/next-config'
|
|
3
6
|
import { useConfigurableSelectedVariant } from '../../hooks'
|
|
4
7
|
|
|
5
8
|
export const component = 'ProductPageDescription'
|
|
6
|
-
export const exported =
|
|
7
|
-
'@graphcommerce/magento-product/components/ProductPageDescription/ProductPageDescription'
|
|
9
|
+
export const exported = '@graphcommerce/magento-product'
|
|
8
10
|
export const ifConfig: IfConfig = 'configurableVariantValues.content'
|
|
9
11
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
12
|
+
export const ConfigurableProductPageDescription = (
|
|
13
|
+
props: PluginProps<ProductPageDescriptionProps & AddToCartItemSelector>,
|
|
14
|
+
) => {
|
|
13
15
|
const { Prev, product, index, ...rest } = props
|
|
14
16
|
const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
|
|
15
17
|
|
|
@@ -1,14 +1,13 @@
|
|
|
1
|
-
import type { AddToCartItemSelector,
|
|
2
|
-
import type {
|
|
1
|
+
import type { AddToCartItemSelector, ProductPageGalleryProps } from '@graphcommerce/magento-product'
|
|
2
|
+
import type { PluginProps } from '@graphcommerce/next-config'
|
|
3
3
|
import { useConfigurableOptionsSelection } from '../../hooks'
|
|
4
4
|
|
|
5
5
|
export const component = 'ProductPageGallery'
|
|
6
|
-
export const exported =
|
|
7
|
-
'@graphcommerce/magento-product/components/ProductPageGallery/ProductPageGallery'
|
|
6
|
+
export const exported = '@graphcommerce/magento-product'
|
|
8
7
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
const ConfigurableProductPageGallery = (
|
|
9
|
+
props: PluginProps<ProductPageGalleryProps> & AddToCartItemSelector,
|
|
10
|
+
) => {
|
|
12
11
|
const { Prev, product, index, ...rest } = props
|
|
13
12
|
|
|
14
13
|
const { configured } = useConfigurableOptionsSelection({ url_key: product.url_key, index })
|
|
@@ -1,17 +1,24 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
1
|
+
import type {
|
|
2
|
+
AddToCartItemSelector,
|
|
3
|
+
JsonLdProductFragment,
|
|
4
|
+
ProductPageJsonLdProps,
|
|
5
|
+
} from '@graphcommerce/magento-product'
|
|
6
|
+
import type { IfConfig, PluginProps } from '@graphcommerce/next-config'
|
|
3
7
|
import { useConfigurableSelectedVariant } from '../../hooks'
|
|
4
8
|
|
|
5
9
|
export const component = 'ProductPageJsonLd'
|
|
6
|
-
export const exported = '@graphcommerce/magento-product
|
|
10
|
+
export const exported = '@graphcommerce/magento-product'
|
|
7
11
|
export const ifConfig: IfConfig = 'configurableVariantValues.content'
|
|
8
12
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
13
|
+
const ConfigurableProductPageJsonLd = <
|
|
14
|
+
T extends { '@type': string },
|
|
15
|
+
P extends JsonLdProductFragment,
|
|
16
|
+
>(
|
|
17
|
+
props: PluginProps<ProductPageJsonLdProps<T, P>> & AddToCartItemSelector,
|
|
18
|
+
) => {
|
|
12
19
|
const { Prev, product, index, ...rest } = props
|
|
13
20
|
const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
|
|
14
|
-
return <Prev product={variant ?? product} {...rest} />
|
|
21
|
+
return <Prev product={(variant ?? product) as P} {...rest} />
|
|
15
22
|
}
|
|
16
23
|
|
|
17
24
|
export const Plugin = ConfigurableProductPageJsonLd
|
|
@@ -2,20 +2,20 @@ import { mergeDeep } from '@graphcommerce/graphql'
|
|
|
2
2
|
import {
|
|
3
3
|
productLink,
|
|
4
4
|
type AddToCartItemSelector,
|
|
5
|
-
|
|
5
|
+
ProductPageMetaProps,
|
|
6
6
|
} from '@graphcommerce/magento-product'
|
|
7
|
-
import type { IfConfig,
|
|
7
|
+
import type { IfConfig, PluginProps } from '@graphcommerce/next-config'
|
|
8
8
|
import { useRouter } from 'next/router'
|
|
9
9
|
import { useEffect } from 'react'
|
|
10
10
|
import { useConfigurableSelectedVariant } from '../../hooks'
|
|
11
11
|
|
|
12
12
|
export const component = 'ProductPageMeta'
|
|
13
|
-
export const exported = '@graphcommerce/magento-product
|
|
13
|
+
export const exported = '@graphcommerce/magento-product'
|
|
14
14
|
export const ifConfig: IfConfig = 'configurableVariantValues.url'
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
const ConfigurableProductPageMetaUrls = (
|
|
17
|
+
props: PluginProps<ProductPageMetaProps> & AddToCartItemSelector,
|
|
18
|
+
) => {
|
|
19
19
|
const { Prev, product, index, ...rest } = props
|
|
20
20
|
const { replace, asPath } = useRouter()
|
|
21
21
|
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import type { AddToCartItemSelector,
|
|
2
|
-
import type { IfConfig,
|
|
1
|
+
import type { AddToCartItemSelector, ProductPageNameProps } from '@graphcommerce/magento-product'
|
|
2
|
+
import type { IfConfig, PluginProps } from '@graphcommerce/next-config'
|
|
3
3
|
import { useConfigurableSelectedVariant } from '../../hooks'
|
|
4
4
|
|
|
5
5
|
export const component = 'ProductPageName'
|
|
6
|
-
export const exported = '@graphcommerce/magento-product
|
|
6
|
+
export const exported = '@graphcommerce/magento-product'
|
|
7
7
|
export const ifConfig: IfConfig = 'configurableVariantValues.content'
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
const ConfigurableProductPageName = (
|
|
10
|
+
props: PluginProps<ProductPageNameProps> & AddToCartItemSelector,
|
|
11
|
+
) => {
|
|
12
12
|
const { Prev, product, index, ...rest } = props
|
|
13
13
|
const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
|
|
14
14
|
return <Prev product={variant ?? product} {...rest} />
|
|
@@ -1,18 +1,25 @@
|
|
|
1
|
-
import { AddToCartItemSelector,
|
|
2
|
-
import type {
|
|
1
|
+
import { AddToCartItemSelector, ProductPagePriceProps } from '@graphcommerce/magento-product'
|
|
2
|
+
import type { PluginProps } from '@graphcommerce/next-config'
|
|
3
3
|
import { useConfigurableSelectedVariant } from '../../hooks'
|
|
4
4
|
|
|
5
5
|
export const component = 'ProductPagePrice'
|
|
6
|
-
export const exported =
|
|
7
|
-
'@graphcommerce/magento-product/components/ProductPagePrice/ProductPagePrice'
|
|
6
|
+
export const exported = '@graphcommerce/magento-product'
|
|
8
7
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
const ConfigurableProductPagePrice = (
|
|
9
|
+
props: PluginProps<ProductPagePriceProps> & AddToCartItemSelector,
|
|
10
|
+
) => {
|
|
12
11
|
const { Prev, product, index, ...rest } = props
|
|
13
12
|
const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
|
|
14
13
|
|
|
15
|
-
|
|
14
|
+
if (product.__typename !== 'ConfigurableProduct') return <Prev {...props} />
|
|
15
|
+
|
|
16
|
+
return (
|
|
17
|
+
<Prev
|
|
18
|
+
product={variant ? { ...variant, options: product.options } : product}
|
|
19
|
+
index={index}
|
|
20
|
+
{...rest}
|
|
21
|
+
/>
|
|
22
|
+
)
|
|
16
23
|
}
|
|
17
24
|
|
|
18
25
|
export const Plugin = ConfigurableProductPagePrice
|
|
@@ -1,14 +1,16 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
1
|
+
import type {
|
|
2
|
+
AddToCartItemSelector,
|
|
3
|
+
ProductPagePriceTiersProps,
|
|
4
|
+
} from '@graphcommerce/magento-product'
|
|
5
|
+
import type { PluginProps } from '@graphcommerce/next-config'
|
|
3
6
|
import { useConfigurableSelectedVariant } from '../../hooks'
|
|
4
7
|
|
|
5
8
|
export const component = 'ProductPagePriceTiers'
|
|
6
|
-
export const exported =
|
|
7
|
-
'@graphcommerce/magento-product/components/ProductPagePrice/ProductPagePriceTiers'
|
|
9
|
+
export const exported = '@graphcommerce/magento-product'
|
|
8
10
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
11
|
+
const ConfigurableProductPagePriceTiers = (
|
|
12
|
+
props: PluginProps<ProductPagePriceTiersProps> & AddToCartItemSelector,
|
|
13
|
+
) => {
|
|
12
14
|
const { Prev, product, index, ...rest } = props
|
|
13
15
|
const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index })
|
|
14
16
|
|
|
@@ -1,15 +1,17 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
1
|
+
import type {
|
|
2
|
+
AddToCartItemSelector,
|
|
3
|
+
ProductShortDescriptionProps,
|
|
4
|
+
} from '@graphcommerce/magento-product'
|
|
5
|
+
import type { IfConfig, PluginProps } from '@graphcommerce/next-config'
|
|
3
6
|
import { useConfigurableSelectedVariant } from '../../hooks'
|
|
4
7
|
|
|
5
8
|
export const component = 'ProductShortDescription'
|
|
6
|
-
export const exported =
|
|
7
|
-
'@graphcommerce/magento-product/components/ProductShortDescription/ProductShortDescription'
|
|
9
|
+
export const exported = '@graphcommerce/magento-product'
|
|
8
10
|
export const ifConfig: IfConfig = 'configurableVariantValues.content'
|
|
9
11
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
12
|
+
const ConfigurableProductShortDescription = (
|
|
13
|
+
props: PluginProps<ProductShortDescriptionProps> & AddToCartItemSelector,
|
|
14
|
+
) => {
|
|
13
15
|
const { Prev, product, ...rest } = props
|
|
14
16
|
const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index: 0 })
|
|
15
17
|
|
|
@@ -27,25 +27,26 @@ export function defaultConfigurableOptionsSelection<Q extends BaseQuery = BaseQu
|
|
|
27
27
|
client: ApolloClient<object>,
|
|
28
28
|
query: Q,
|
|
29
29
|
): Q & Pick<AddProductsToCartFormProps, 'defaultValues'> {
|
|
30
|
-
|
|
30
|
+
const simple = query?.products?.items?.find((p) => p?.url_key === urlKey)
|
|
31
|
+
const configurable = findByTypename(query?.products?.items, 'ConfigurableProduct')
|
|
32
|
+
|
|
33
|
+
if (
|
|
34
|
+
simple?.__typename === 'SimpleProduct' &&
|
|
35
|
+
!import.meta.graphCommerce.configurableVariantForSimple
|
|
36
|
+
) {
|
|
31
37
|
const product = query?.products?.items?.find((p) => p?.url_key === urlKey)
|
|
32
38
|
return { ...query, products: { ...query?.products, items: [product] }, defaultValues: {} }
|
|
33
39
|
}
|
|
34
40
|
|
|
35
|
-
const simple = query?.products?.items?.find((p) => p?.url_key === urlKey)
|
|
36
|
-
const configurable = findByTypename(query?.products?.items, 'ConfigurableProduct')
|
|
37
|
-
|
|
38
41
|
// Check if the requested product actually is a simple product
|
|
39
|
-
if (!
|
|
40
|
-
return { ...query, defaultValues: {} }
|
|
42
|
+
if (!configurable?.url_key) return { ...query, defaultValues: {} }
|
|
41
43
|
|
|
42
44
|
// Find the requested simple product on the configurable variants and get the attributes.
|
|
43
|
-
const attributes = configurable?.variants?.find(
|
|
44
|
-
?.
|
|
45
|
+
const attributes = configurable?.variants?.find(
|
|
46
|
+
(v) => v?.product?.uid === simple?.uid,
|
|
47
|
+
)?.attributes
|
|
45
48
|
|
|
46
49
|
const selectedOptions = (attributes ?? []).filter(nonNullable).map((a) => a.uid)
|
|
47
|
-
if (!selectedOptions.length)
|
|
48
|
-
return { ...query, products: { ...query?.products, items: [simple] }, defaultValues: {} }
|
|
49
50
|
|
|
50
51
|
/**
|
|
51
52
|
* We're using writeQuery to the Apollo Client cache, to to avoid a second request to the GraphQL
|
|
@@ -64,7 +65,6 @@ export function defaultConfigurableOptionsSelection<Q extends BaseQuery = BaseQu
|
|
|
64
65
|
* })
|
|
65
66
|
* ```
|
|
66
67
|
*/
|
|
67
|
-
|
|
68
68
|
const optionsAvailableForSelection =
|
|
69
69
|
configurable.configurable_product_options_selection?.options_available_for_selection?.filter(
|
|
70
70
|
nonNullable,
|
|
@@ -72,7 +72,7 @@ export function defaultConfigurableOptionsSelection<Q extends BaseQuery = BaseQu
|
|
|
72
72
|
|
|
73
73
|
client.cache.writeQuery({
|
|
74
74
|
query: GetConfigurableOptionsSelectionDocument,
|
|
75
|
-
variables: { urlKey: configurable.url_key, selectedOptions
|
|
75
|
+
variables: { urlKey: configurable.url_key, selectedOptions },
|
|
76
76
|
data: {
|
|
77
77
|
products: {
|
|
78
78
|
...query?.products,
|
|
@@ -103,8 +103,8 @@ export function defaultConfigurableOptionsSelection<Q extends BaseQuery = BaseQu
|
|
|
103
103
|
option_value_uids,
|
|
104
104
|
}),
|
|
105
105
|
),
|
|
106
|
-
media_gallery: simple.media_gallery,
|
|
107
|
-
variant: simple,
|
|
106
|
+
media_gallery: simple?.media_gallery ?? configurable.media_gallery,
|
|
107
|
+
variant: simple?.__typename === 'SimpleProduct' ? simple : null,
|
|
108
108
|
},
|
|
109
109
|
},
|
|
110
110
|
],
|