mirror of
https://github.com/vercel/commerce.git
synced 2025-03-14 22:42:33 +00:00
Active Product Page back to working again
This commit is contained in:
parent
06234ae6c4
commit
ab51207548
@ -15,19 +15,12 @@ interface Props {
|
||||
product: Product
|
||||
}
|
||||
|
||||
interface Choices {
|
||||
size?: string | null
|
||||
color?: string | null
|
||||
}
|
||||
|
||||
const ProductView: FC<Props> = ({ product, className }) => {
|
||||
const options = getProductOptions(product)
|
||||
// console.log(options)
|
||||
|
||||
const addItem = useAddItem()
|
||||
const { openSidebar } = useUI()
|
||||
const options = getProductOptions(product)
|
||||
|
||||
const [choices, setChoices] = useState<Choices>({
|
||||
const [choices, setChoices] = useState<Record<string, any>>({
|
||||
size: null,
|
||||
color: null,
|
||||
})
|
||||
@ -48,9 +41,6 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
||||
}
|
||||
}
|
||||
|
||||
const activeSize = choices.size
|
||||
const activeColor = choices.color
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<NextSeo
|
||||
@ -88,6 +78,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
||||
{/** TODO: Change with Image Component */}
|
||||
{product.images.edges?.map((image, i) => (
|
||||
<img
|
||||
key={image?.node.urlSmall}
|
||||
className="w-full object-cover"
|
||||
src={image?.node.urlXL}
|
||||
loading={i === 0 ? 'eager' : 'lazy'}
|
||||
@ -104,25 +95,27 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
||||
<div className="flex-1 flex flex-col pt-24">
|
||||
<section>
|
||||
{options?.map((opt: any) => (
|
||||
<div className="pb-4">
|
||||
<div className="pb-4" key={opt.displayName}>
|
||||
<h2 className="uppercase font-medium">{opt.displayName}</h2>
|
||||
<div className="flex flex-row py-4">
|
||||
{opt.values.map((v: any) => {
|
||||
const active = choices[opt.displayName]
|
||||
|
||||
return (
|
||||
<Swatch
|
||||
key={v.entityId}
|
||||
active={v.label === activeColor}
|
||||
active={v.label === active}
|
||||
variant={opt.displayName}
|
||||
color={v.hexColors ? v.hexColors[0] : ''}
|
||||
label={v.label}
|
||||
onClick={() =>
|
||||
onClick={() => {
|
||||
setChoices((choices) => {
|
||||
return {
|
||||
...choices,
|
||||
[opt.displayName]: v.label,
|
||||
}
|
||||
})
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
|
@ -24,7 +24,7 @@ const Swatch: FC<Props & ButtonProps> = ({
|
||||
}) => {
|
||||
variant = variant?.toLowerCase()
|
||||
label = label?.toLowerCase()
|
||||
// console.log(variant)
|
||||
|
||||
const rootClassName = cn(
|
||||
s.root,
|
||||
{
|
||||
@ -38,6 +38,7 @@ const Swatch: FC<Props & ButtonProps> = ({
|
||||
<Button
|
||||
className={rootClassName}
|
||||
style={color ? { backgroundColor: color } : {}}
|
||||
{...props}
|
||||
>
|
||||
{variant === 'color' && active && (
|
||||
<span
|
||||
|
@ -1,5 +1,18 @@
|
||||
import bunyan from 'bunyan'
|
||||
import PrettyStream from 'bunyan-prettystream'
|
||||
|
||||
const log = bunyan.createLogger({ name: 'Next.js - Commerce' })
|
||||
const prettyStdOut = new PrettyStream()
|
||||
|
||||
const log = bunyan.createLogger({
|
||||
name: 'Next.js - Commerce',
|
||||
level: 'debug',
|
||||
streams: [
|
||||
{
|
||||
level: 'debug',
|
||||
type: 'raw',
|
||||
stream: prettyStdOut,
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
export default log
|
||||
|
@ -22,10 +22,12 @@
|
||||
"@headlessui/react": "^0.2.0",
|
||||
"@tailwindcss/ui": "^0.6.2",
|
||||
"@types/bunyan": "^1.8.6",
|
||||
"@types/bunyan-prettystream": "^0.1.31",
|
||||
"@types/classnames": "^2.2.10",
|
||||
"@types/react-swipeable-views": "^0.13.0",
|
||||
"animate.css": "^4.1.1",
|
||||
"bunyan": "^1.8.14",
|
||||
"bunyan-prettystream": "^0.1.3",
|
||||
"classnames": "^2.2.6",
|
||||
"cookie": "^0.4.1",
|
||||
"js-cookie": "^2.2.1",
|
||||
|
12
yarn.lock
12
yarn.lock
@ -2095,6 +2095,13 @@
|
||||
resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
|
||||
integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
|
||||
|
||||
"@types/bunyan-prettystream@^0.1.31":
|
||||
version "0.1.31"
|
||||
resolved "https://registry.yarnpkg.com/@types/bunyan-prettystream/-/bunyan-prettystream-0.1.31.tgz#3864836abb907ab151f7edf7c64c323c9609e1d1"
|
||||
integrity sha512-NE7fq2ZcX7OSMK+VhTNJkVEHlo+hm0uVXpuLeH1ifGm52Qwuo/kLD2GHo7UcEXMFu3duKver/AFo8C4TME93zw==
|
||||
dependencies:
|
||||
"@types/node" "*"
|
||||
|
||||
"@types/bunyan@^1.8.6":
|
||||
version "1.8.6"
|
||||
resolved "https://registry.yarnpkg.com/@types/bunyan/-/bunyan-1.8.6.tgz#6527641cca30bedec5feb9ab527b7803b8000582"
|
||||
@ -2977,6 +2984,11 @@ bufferutil@^4.0.1:
|
||||
dependencies:
|
||||
node-gyp-build "~3.7.0"
|
||||
|
||||
bunyan-prettystream@^0.1.3:
|
||||
version "0.1.3"
|
||||
resolved "https://registry.yarnpkg.com/bunyan-prettystream/-/bunyan-prettystream-0.1.3.tgz#6c3b713266f6ad32007c7b6ab1e998a245349d98"
|
||||
integrity sha1-bDtxMmb2rTIAfHtqsemYokU0nZg=
|
||||
|
||||
bunyan@^1.8.14:
|
||||
version "1.8.14"
|
||||
resolved "https://registry.yarnpkg.com/bunyan/-/bunyan-1.8.14.tgz#3d8c1afea7de158a5238c7cb8a66ab6b38dd45b4"
|
||||
|
Loading…
x
Reference in New Issue
Block a user