cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Select variant in product page

Browse Source
This commit is contained in:
Luis Alvarez 2020-10-26 22:31:49 -05:00
parent 3ee325da26
commit 2f37fa46a9
5 changed files with 214 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/product/ProductView/ProductView.tsx
View File

@ -4,7 +4,6 @@ import Image from 'next/image'
import { NextSeo } from 'next-seo'
import s from './ProductView.module.css'
import { Heart } from '@components/icons'
import { useUI } from '@components/ui/context'
import { Swatch, ProductSlider } from '@components/product'
import { Button, Container } from '@components/ui'
@ -12,7 +11,11 @@ import { HTMLContent } from '@components/core'
import useAddItem from '@lib/bigcommerce/cart/use-add-item'
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
import { getProductOptions } from '../helpers'
import {
getCurrentVariant,
getProductOptions,
ProductOptions,
} from '../helpers'
import WishlistButton from '@components/wishlist/WishlistButton'
interface Props {
@ -21,16 +24,17 @@ interface Props {
product: ProductNode
}
const ProductView: FC<Props> = ({ product, className }) => {
const ProductView: FC<Props> = ({ product }) => {
const addItem = useAddItem()
const { openSidebar } = useUI()
const options = getProductOptions(product)
const [loading, setLoading] = useState(false)
const [choices, setChoices] = useState<Record<string, any>>({
const [choices, setChoices] = useState<ProductOptions>({
size: null,
color: null,
})
const variant =
getCurrentVariant(product, choices) || product.variants.edges?.[0]
const addToCart = async () => {
setLoading(true)
@ -102,7 +106,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
<h2 className="uppercase font-medium">{opt.displayName}</h2>
<div className="flex flex-row py-4">
{opt.values.map((v: any, i: number) => {
const active = choices[opt.displayName]
const active = (choices as any)[opt.displayName]
return (
<Swatch
@ -137,6 +141,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
className={s.button}
onClick={addToCart}
loading={loading}
disabled={!variant}
>
Add to Cart
</Button>

49
components/product/helpers.ts
View File

@ -1,10 +1,51 @@
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
export type SelectedOptions = {
size: string | null
color: string | null
}
export type ProductOption = {
displayName: string
values: any
}
// Returns the available options of a product
export function getProductOptions(product: ProductNode) {
const options = product.productOptions.edges?.map(({ node }: any) => ({
displayName: node.displayName.toLowerCase(),
values: node.values.edges?.map(({ node }: any) => node),
}))
const options = product.productOptions.edges?.reduce<ProductOption[]>(
(arr, edge) => {
if (edge?.node.__typename === 'MultipleChoiceOption') {
arr.push({
displayName: edge.node.displayName.toLowerCase(),
values: edge.node.values.edges?.map((edge) => edge?.node),
})
}
return arr
},
[]
)
return options
}
// Finds a variant in the product that matches the selected options
export function getCurrentVariant(product: ProductNode, opts: SelectedOptions) {
const variant = product.variants.edges?.find((edge) => {
const { node } = edge ?? {}
return Object.entries(opts).every(([key, value]) =>
node?.productOptions.edges?.find((edge) => {
if (
edge?.node.__typename === 'MultipleChoiceOption' &&
edge.node.displayName.toLowerCase() === key
) {
return edge.node.values.edges?.find(
(valueEdge) => valueEdge?.node.label === value
)
}
})
)
})
return variant
}

33
lib/bigcommerce/api/fragments/product.ts
View File

@ -1,3 +1,20 @@
export const productPrices = /* GraphQL */ `
fragment productPrices on Prices {
price {
value
currencyCode
}
salePrice {
value
currencyCode
}
retailPrice {
value
currencyCode
}
}
`
export const swatchOptionFragment = /* GraphQL */ `
fragment swatchOption on SwatchOptionValue {
isDefault
@ -7,7 +24,6 @@ export const swatchOptionFragment = /* GraphQL */ `
export const multipleChoiceOptionFragment = /* GraphQL */ `
fragment multipleChoiceOption on MultipleChoiceOption {
entityId
values {
edges {
node {
@ -31,18 +47,7 @@ export const productInfoFragment = /* GraphQL */ `
}
description
prices {
price {
value
currencyCode
}
salePrice {
value
currencyCode
}
retailPrice {
value
currencyCode
}
...productPrices
}
images {
edges {
@ -68,6 +73,7 @@ export const productInfoFragment = /* GraphQL */ `
productOptions {
edges {
node {
__typename
entityId
displayName
...multipleChoiceOption
@ -85,6 +91,7 @@ export const productInfoFragment = /* GraphQL */ `
}
}
${productPrices}
${multipleChoiceOptionFragment}
`

32
lib/bigcommerce/api/operations/get-product.ts
View File

@ -16,6 +16,38 @@ export const getProductQuery = /* GraphQL */ `
__typename
... on Product {
...productInfo
variants {
edges {
node {
entityId
defaultImage {
urlOriginal
altText
isDefault
}
prices {
...productPrices
}
inventory {
aggregated {
availableToSell
warningLevel
}
isInStock
}
productOptions {
edges {
node {
__typename
entityId
displayName
...multipleChoiceOption
}
}
}
}
}
}
}
}
}

118
lib/bigcommerce/schema.d.ts vendored
View File

@ -1684,6 +1684,16 @@ export type CategoryTreeItemFragment = {
'entityId' | 'name' | 'path' | 'description' | 'productCount'
>
export type ProductPricesFragment = { __typename?: 'Prices' } & {
price: { __typename?: 'Money' } & Pick<Money, 'value' | 'currencyCode'>
salePrice?: Maybe<
{ __typename?: 'Money' } & Pick<Money, 'value' | 'currencyCode'>
>
retailPrice?: Maybe<
{ __typename?: 'Money' } & Pick<Money, 'value' | 'currencyCode'>
>
}
export type SwatchOptionFragment = { __typename?: 'SwatchOptionValue' } & Pick<
SwatchOptionValue,
'isDefault' | 'hexColors'
@ -1723,17 +1733,7 @@ export type ProductInfoFragment = { __typename?: 'Product' } & Pick<
'entityId' | 'name' | 'path' | 'description'
> & {
brand?: Maybe<{ __typename?: 'Brand' } & Pick<Brand, 'entityId'>>
prices?: Maybe<
{ __typename?: 'Prices' } & {
price: { __typename?: 'Money' } & Pick<Money, 'value' | 'currencyCode'>
salePrice?: Maybe<
{ __typename?: 'Money' } & Pick<Money, 'value' | 'currencyCode'>
>
retailPrice?: Maybe<
{ __typename?: 'Money' } & Pick<Money, 'value' | 'currencyCode'>
>
}
>
prices?: Maybe<{ __typename?: 'Prices' } & ProductPricesFragment>
images: { __typename?: 'ImageConnection' } & {
edges?: Maybe<
Array<
@ -1904,7 +1904,101 @@ export type GetProductQuery = { __typename?: 'Query' } & {
node?: Maybe<
| { __typename: 'Brand' }
| { __typename: 'Category' }
| ({ __typename: 'Product' } & ProductInfoFragment)
| ({ __typename: 'Product' } & {
variants: { __typename?: 'VariantConnection' } & {
edges?: Maybe<
Array<
Maybe<
{ __typename?: 'VariantEdge' } & {
node: { __typename?: 'Variant' } & Pick<
Variant,
'entityId'
> & {
defaultImage?: Maybe<
{ __typename?: 'Image' } & Pick<
Image,
'urlOriginal' | 'altText' | 'isDefault'
>
>
prices?: Maybe<
{ __typename?: 'Prices' } & ProductPricesFragment
>
inventory?: Maybe<
{ __typename?: 'VariantInventory' } & Pick<
VariantInventory,
'isInStock'
> & {
aggregated?: Maybe<
{ __typename?: 'Aggregated' } & Pick<
Aggregated,
'availableToSell' | 'warningLevel'
>
>
}
>
productOptions: {
__typename?: 'ProductOptionConnection'
} & {
edges?: Maybe<
Array<
Maybe<
{ __typename?: 'ProductOptionEdge' } & {
node:
| ({
__typename?: 'CheckboxOption'
} & Pick<
CheckboxOption,
'entityId' | 'displayName'
>)
| ({
__typename?: 'DateFieldOption'
} & Pick<
DateFieldOption,
'entityId' | 'displayName'
>)
| ({
__typename?: 'FileUploadFieldOption'
} & Pick<
FileUploadFieldOption,
'entityId' | 'displayName'
>)
| ({
__typename?: 'MultiLineTextFieldOption'
} & Pick<
MultiLineTextFieldOption,
'entityId' | 'displayName'
>)
| ({
__typename?: 'MultipleChoiceOption'
} & Pick<
MultipleChoiceOption,
'entityId' | 'displayName'
> &
MultipleChoiceOptionFragment)
| ({
__typename?: 'NumberFieldOption'
} & Pick<
NumberFieldOption,
'entityId' | 'displayName'
>)
| ({
__typename?: 'TextFieldOption'
} & Pick<
TextFieldOption,
'entityId' | 'displayName'
>)
}
>
>
>
}
}
}
>
>
>
}
} & ProductInfoFragment)
| { __typename: 'Variant' }
>
}