4
0
forked from crowetic/commerce

Dynamic Sizes and Colors

This commit is contained in:
Belen Curcio 2020-10-16 13:16:55 -03:00
parent 7d7d2deff6
commit 5e4686bdd4
3 changed files with 64 additions and 48 deletions

View File

@ -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"

View File

@ -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>
) )
} }

View 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
}