crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adding Correct Sizes and Colors

Browse Source
This commit is contained in:
Belen Curcio
2020-10-17 17:56:38 -03:00
parent a79b979b41
commit 526b291f4f
5 changed files with 139 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,7 +22,7 @@ interface Choices {
const ProductView: FC<Props> = ({ product, className }) => {
const options = getProductOptions(product)
console.log(options)
// console.log(options)
const addItem = useAddItem()
const { openSidebar } = useUI()
@@ -102,46 +102,48 @@ const ProductView: FC<Props> = ({ product, className }) => {
</div>
<div className="flex-1 flex flex-col pt-24">
{options?.map((opt: any) => (
<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}
active={v.label === activeColor}
variant={opt.displayName}
color={v.hexColors ? v.hexColors[0] : ''}
label={v.label}
onClick={() =>
setChoices((choices) => {
return {
...choices,
[opt.displayName]: v.label,
}
})
}
/>
)
})}
<section>
{options?.map((opt: any) => (
<div 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}
active={v.label === activeColor}
variant={opt.displayName}
color={v.hexColors ? v.hexColors[0] : ''}
label={v.label}
onClick={() =>
setChoices((choices) => {
return {
...choices,
[opt.displayName]: v.label,
}
})
}
/>
)
})}
</div>
</div>
<div className="pb-12">
<div
className="break-words"
dangerouslySetInnerHTML={{ __html: product.description }}
/>
<Button
type="button"
className={s.button}
onClick={addToCart}
loading={loading}
>
Add to Cart
</Button>
</div>
</section>
))}
))}
<div className="pb-12">
<div
className="pb-14 break-words"
dangerouslySetInnerHTML={{ __html: product.description }}
/>
<Button
type="button"
className={s.button}
onClick={addToCart}
loading={loading}
>
Add to Cart
</Button>
</div>
</section>
</div>
</div>
</Container>