forked from crowetic/commerce
Dynamic Sizes and Colors
This commit is contained in:
parent
7d7d2deff6
commit
5e4686bdd4
@ -7,6 +7,8 @@ import { Button, Container } from '@components/ui'
|
|||||||
import { Swatch, ProductSlider } from '@components/product'
|
import { Swatch, ProductSlider } from '@components/product'
|
||||||
import useAddItem from '@lib/bigcommerce/cart/use-add-item'
|
import useAddItem from '@lib/bigcommerce/cart/use-add-item'
|
||||||
import type { Product } from '@lib/bigcommerce/api/operations/get-product'
|
import type { Product } from '@lib/bigcommerce/api/operations/get-product'
|
||||||
|
import { getProductOptions } from '../helpers'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
className?: string
|
className?: string
|
||||||
children?: any
|
children?: any
|
||||||
@ -22,6 +24,9 @@ const COLORS: Colors[] = ['pink', 'black', 'white']
|
|||||||
const SIZES = ['s', 'm', 'l', 'xl', 'xxl']
|
const SIZES = ['s', 'm', 'l', 'xl', 'xxl']
|
||||||
|
|
||||||
const ProductView: FC<Props> = ({ product, className }) => {
|
const ProductView: FC<Props> = ({ product, className }) => {
|
||||||
|
const options = getProductOptions(product)
|
||||||
|
console.log(options)
|
||||||
|
|
||||||
const addItem = useAddItem()
|
const addItem = useAddItem()
|
||||||
const { openSidebar } = useUI()
|
const { openSidebar } = useUI()
|
||||||
|
|
||||||
@ -100,41 +105,33 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
|||||||
|
|
||||||
<div className={s.squareBg}></div>
|
<div className={s.squareBg}></div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 flex flex-col">
|
|
||||||
<section className="pt-24">
|
<div className="flex-1 flex flex-col pt-24">
|
||||||
<h2 className="uppercase font-medium">Color</h2>
|
{options?.map((opt) => (
|
||||||
<div className="flex flex-row py-4">
|
<section className="pb-4">
|
||||||
{COLORS.map((color) => (
|
<h2 className="uppercase font-medium">{opt.displayName}</h2>
|
||||||
<Swatch
|
<div className="flex flex-row py-4">
|
||||||
key={color}
|
{opt.values.map((v: any) => {
|
||||||
color={color}
|
return (
|
||||||
active={color === activeColor}
|
<Swatch
|
||||||
onClick={() =>
|
key={v.entityId}
|
||||||
setChoices((choices) => {
|
label={v.label}
|
||||||
return { ...choices, color }
|
active={v.label === activeColor}
|
||||||
})
|
variant={opt.displayName}
|
||||||
}
|
onClick={() =>
|
||||||
/>
|
setChoices((choices) => {
|
||||||
))}
|
return {
|
||||||
</div>
|
...choices,
|
||||||
</section>
|
[opt.displayName.toLowerCase()]: v.label,
|
||||||
<section className="pb-4">
|
}
|
||||||
<h2 className="uppercase font-medium">Size</h2>
|
})
|
||||||
<div className="flex flex-row py-4">
|
}
|
||||||
{SIZES.map((size) => {
|
/>
|
||||||
return (
|
)
|
||||||
<Swatch
|
})}
|
||||||
size={size.toUpperCase()}
|
</div>
|
||||||
key={`size-${size}`}
|
</section>
|
||||||
active={size === activeSize}
|
))}
|
||||||
onClick={() =>
|
|
||||||
setChoices((choices) => ({ ...choices, size }))
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section className="pb-12">
|
<section className="pb-12">
|
||||||
<div
|
<div
|
||||||
className="break-words"
|
className="break-words"
|
||||||
|
@ -9,37 +9,46 @@ interface Props extends ButtonProps {
|
|||||||
className?: string
|
className?: string
|
||||||
children?: any
|
children?: any
|
||||||
active?: boolean
|
active?: boolean
|
||||||
color?: Colors
|
label?: string
|
||||||
size?: string
|
variant?: 'size' | 'color' | string
|
||||||
}
|
}
|
||||||
|
|
||||||
const Swatch: FC<Props> = ({ className, size, color, active, ...props }) => {
|
const Swatch: FC<Props> = ({
|
||||||
|
className,
|
||||||
|
label,
|
||||||
|
variant = 'size',
|
||||||
|
active,
|
||||||
|
...props
|
||||||
|
}) => {
|
||||||
|
variant = variant?.toLowerCase()
|
||||||
|
label = label?.toLowerCase()
|
||||||
|
|
||||||
const rootClassName = cn(
|
const rootClassName = cn(
|
||||||
s.root,
|
s.root,
|
||||||
{
|
{
|
||||||
[s.active]: active,
|
[s.active]: active,
|
||||||
[s.size]: size,
|
[s.size]: variant === 'size',
|
||||||
[s.colorPink]: color === 'pink',
|
[s.colorPink]: label === 'pink',
|
||||||
[s.colorWhite]: color === 'white',
|
[s.colorWhite]: label === 'white',
|
||||||
[s.colorBlack]: color === 'black',
|
[s.colorBlack]: label === 'black',
|
||||||
[s.colorViolet]: color === 'violet',
|
[s.colorViolet]: label === 'violet',
|
||||||
},
|
},
|
||||||
className
|
className
|
||||||
)
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Button className={rootClassName} {...props}>
|
<Button className={rootClassName}>
|
||||||
{color && active && (
|
{variant === 'color' && active && (
|
||||||
<span
|
<span
|
||||||
className={cn('absolute', {
|
className={cn('absolute', {
|
||||||
'text-white': color !== 'white',
|
'text-white': label !== 'white',
|
||||||
'text-black': color === 'white',
|
'text-black': label === 'white',
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
<Check />
|
<Check />
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
{size}
|
{variant === 'size' ? label : null}
|
||||||
</Button>
|
</Button>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
10
components/product/helpers.ts
Normal file
10
components/product/helpers.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import type { Product } from '@lib/bigcommerce/api/operations/get-product'
|
||||||
|
|
||||||
|
export function getProductOptions(product: Product) {
|
||||||
|
const options = product.options.edges?.map(({ node }: any) => ({
|
||||||
|
displayName: node.displayName,
|
||||||
|
values: node.values.edges?.map(({ node }: any) => node),
|
||||||
|
}))
|
||||||
|
|
||||||
|
return options
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user