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 useAddItem from '@lib/bigcommerce/cart/use-add-item'
|
||||
import type { Product } from '@lib/bigcommerce/api/operations/get-product'
|
||||
import { getProductOptions } from '../helpers'
|
||||
|
||||
interface Props {
|
||||
className?: string
|
||||
children?: any
|
||||
@ -22,6 +24,9 @@ const COLORS: Colors[] = ['pink', 'black', 'white']
|
||||
const SIZES = ['s', 'm', 'l', 'xl', 'xxl']
|
||||
|
||||
const ProductView: FC<Props> = ({ product, className }) => {
|
||||
const options = getProductOptions(product)
|
||||
console.log(options)
|
||||
|
||||
const addItem = useAddItem()
|
||||
const { openSidebar } = useUI()
|
||||
|
||||
@ -100,41 +105,33 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
||||
|
||||
<div className={s.squareBg}></div>
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col">
|
||||
<section className="pt-24">
|
||||
<h2 className="uppercase font-medium">Color</h2>
|
||||
<div className="flex flex-row py-4">
|
||||
{COLORS.map((color) => (
|
||||
<Swatch
|
||||
key={color}
|
||||
color={color}
|
||||
active={color === activeColor}
|
||||
onClick={() =>
|
||||
setChoices((choices) => {
|
||||
return { ...choices, color }
|
||||
})
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<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()}
|
||||
key={`size-${size}`}
|
||||
active={size === activeSize}
|
||||
onClick={() =>
|
||||
setChoices((choices) => ({ ...choices, size }))
|
||||
}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="flex-1 flex flex-col pt-24">
|
||||
{options?.map((opt) => (
|
||||
<section className="pb-4">
|
||||
<h2 className="uppercase font-medium">{opt.displayName}</h2>
|
||||
<div className="flex flex-row py-4">
|
||||
{opt.values.map((v: any) => {
|
||||
return (
|
||||
<Swatch
|
||||
key={v.entityId}
|
||||
label={v.label}
|
||||
active={v.label === activeColor}
|
||||
variant={opt.displayName}
|
||||
onClick={() =>
|
||||
setChoices((choices) => {
|
||||
return {
|
||||
...choices,
|
||||
[opt.displayName.toLowerCase()]: v.label,
|
||||
}
|
||||
})
|
||||
}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
<section className="pb-12">
|
||||
<div
|
||||
className="break-words"
|
||||
|
@ -9,37 +9,46 @@ interface Props extends ButtonProps {
|
||||
className?: string
|
||||
children?: any
|
||||
active?: boolean
|
||||
color?: Colors
|
||||
size?: string
|
||||
label?: 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(
|
||||
s.root,
|
||||
{
|
||||
[s.active]: active,
|
||||
[s.size]: size,
|
||||
[s.colorPink]: color === 'pink',
|
||||
[s.colorWhite]: color === 'white',
|
||||
[s.colorBlack]: color === 'black',
|
||||
[s.colorViolet]: color === 'violet',
|
||||
[s.size]: variant === 'size',
|
||||
[s.colorPink]: label === 'pink',
|
||||
[s.colorWhite]: label === 'white',
|
||||
[s.colorBlack]: label === 'black',
|
||||
[s.colorViolet]: label === 'violet',
|
||||
},
|
||||
className
|
||||
)
|
||||
|
||||
return (
|
||||
<Button className={rootClassName} {...props}>
|
||||
{color && active && (
|
||||
<Button className={rootClassName}>
|
||||
{variant === 'color' && active && (
|
||||
<span
|
||||
className={cn('absolute', {
|
||||
'text-white': color !== 'white',
|
||||
'text-black': color === 'white',
|
||||
'text-white': label !== 'white',
|
||||
'text-black': label === 'white',
|
||||
})}
|
||||
>
|
||||
<Check />
|
||||
</span>
|
||||
)}
|
||||
{size}
|
||||
{variant === 'size' ? label : null}
|
||||
</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