forked from crowetic/commerce
Adding Correct Sizes and Colors
This commit is contained in:
parent
a79b979b41
commit
526b291f4f
@ -22,7 +22,7 @@ interface Choices {
|
|||||||
|
|
||||||
const ProductView: FC<Props> = ({ product, className }) => {
|
const ProductView: FC<Props> = ({ product, className }) => {
|
||||||
const options = getProductOptions(product)
|
const options = getProductOptions(product)
|
||||||
console.log(options)
|
// console.log(options)
|
||||||
|
|
||||||
const addItem = useAddItem()
|
const addItem = useAddItem()
|
||||||
const { openSidebar } = useUI()
|
const { openSidebar } = useUI()
|
||||||
@ -102,46 +102,48 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex-1 flex flex-col pt-24">
|
<div className="flex-1 flex flex-col pt-24">
|
||||||
{options?.map((opt: any) => (
|
<section>
|
||||||
<section className="pb-4">
|
{options?.map((opt: any) => (
|
||||||
<h2 className="uppercase font-medium">{opt.displayName}</h2>
|
<div className="pb-4">
|
||||||
<div className="flex flex-row py-4">
|
<h2 className="uppercase font-medium">{opt.displayName}</h2>
|
||||||
{opt.values.map((v: any) => {
|
<div className="flex flex-row py-4">
|
||||||
return (
|
{opt.values.map((v: any) => {
|
||||||
<Swatch
|
return (
|
||||||
key={v.entityId}
|
<Swatch
|
||||||
active={v.label === activeColor}
|
key={v.entityId}
|
||||||
variant={opt.displayName}
|
active={v.label === activeColor}
|
||||||
color={v.hexColors ? v.hexColors[0] : ''}
|
variant={opt.displayName}
|
||||||
label={v.label}
|
color={v.hexColors ? v.hexColors[0] : ''}
|
||||||
onClick={() =>
|
label={v.label}
|
||||||
setChoices((choices) => {
|
onClick={() =>
|
||||||
return {
|
setChoices((choices) => {
|
||||||
...choices,
|
return {
|
||||||
[opt.displayName]: v.label,
|
...choices,
|
||||||
}
|
[opt.displayName]: v.label,
|
||||||
})
|
}
|
||||||
}
|
})
|
||||||
/>
|
}
|
||||||
)
|
/>
|
||||||
})}
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="pb-12">
|
))}
|
||||||
<div
|
<div className="pb-12">
|
||||||
className="break-words"
|
<div
|
||||||
dangerouslySetInnerHTML={{ __html: product.description }}
|
className="pb-14 break-words"
|
||||||
/>
|
dangerouslySetInnerHTML={{ __html: product.description }}
|
||||||
<Button
|
/>
|
||||||
type="button"
|
<Button
|
||||||
className={s.button}
|
type="button"
|
||||||
onClick={addToCart}
|
className={s.button}
|
||||||
loading={loading}
|
onClick={addToCart}
|
||||||
>
|
loading={loading}
|
||||||
Add to Cart
|
>
|
||||||
</Button>
|
Add to Cart
|
||||||
</div>
|
</Button>
|
||||||
</section>
|
</div>
|
||||||
))}
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
|
@ -24,7 +24,7 @@ const Swatch: FC<Props & ButtonProps> = ({
|
|||||||
}) => {
|
}) => {
|
||||||
variant = variant?.toLowerCase()
|
variant = variant?.toLowerCase()
|
||||||
label = label?.toLowerCase()
|
label = label?.toLowerCase()
|
||||||
console.log(variant)
|
// console.log(variant)
|
||||||
const rootClassName = cn(
|
const rootClassName = cn(
|
||||||
s.root,
|
s.root,
|
||||||
{
|
{
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import type { Product } from '@lib/bigcommerce/api/operations/get-product'
|
import type { Product } from '@lib/bigcommerce/api/operations/get-product'
|
||||||
|
|
||||||
export function getProductOptions(product: Product) {
|
export function getProductOptions(product: Product) {
|
||||||
console.log(product)
|
// console.log(product)
|
||||||
const options = product.productOptions.edges?.map(({ node }: any) => ({
|
const options = product.productOptions.edges?.map(({ node }: any) => ({
|
||||||
displayName: node.displayName.toLowerCase(),
|
displayName: node.displayName.toLowerCase(),
|
||||||
values: node.values.edges?.map(({ node }: any) => node),
|
values: node.values.edges?.map(({ node }: any) => node),
|
||||||
|
87
lib/bigcommerce/schema.d.ts
vendored
87
lib/bigcommerce/schema.d.ts
vendored
@ -1670,6 +1670,40 @@ export type ResponsiveImageFragment = { __typename?: 'Image' } & Pick<
|
|||||||
urlXL: Image['url']
|
urlXL: Image['url']
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export type SwatchOptionFragment = { __typename?: 'SwatchOptionValue' } & Pick<
|
||||||
|
SwatchOptionValue,
|
||||||
|
'isDefault' | 'hexColors'
|
||||||
|
>
|
||||||
|
|
||||||
|
export type MultipleChoiceOptionFragment = {
|
||||||
|
__typename?: 'MultipleChoiceOption'
|
||||||
|
} & Pick<MultipleChoiceOption, 'entityId'> & {
|
||||||
|
values: { __typename?: 'ProductOptionValueConnection' } & {
|
||||||
|
edges?: Maybe<
|
||||||
|
Array<
|
||||||
|
Maybe<
|
||||||
|
{ __typename?: 'ProductOptionValueEdge' } & {
|
||||||
|
node:
|
||||||
|
| ({ __typename?: 'MultipleChoiceOptionValue' } & Pick<
|
||||||
|
MultipleChoiceOptionValue,
|
||||||
|
'label'
|
||||||
|
>)
|
||||||
|
| ({ __typename?: 'ProductPickListOptionValue' } & Pick<
|
||||||
|
ProductPickListOptionValue,
|
||||||
|
'label'
|
||||||
|
>)
|
||||||
|
| ({ __typename?: 'SwatchOptionValue' } & Pick<
|
||||||
|
SwatchOptionValue,
|
||||||
|
'label'
|
||||||
|
> &
|
||||||
|
SwatchOptionFragment)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
>
|
||||||
|
>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export type ProductInfoFragment = { __typename?: 'Product' } & Pick<
|
export type ProductInfoFragment = { __typename?: 'Product' } & Pick<
|
||||||
Product,
|
Product,
|
||||||
'entityId' | 'name' | 'path' | 'description'
|
'entityId' | 'name' | 'path' | 'description'
|
||||||
@ -1709,30 +1743,41 @@ export type ProductInfoFragment = { __typename?: 'Product' } & Pick<
|
|||||||
>
|
>
|
||||||
>
|
>
|
||||||
}
|
}
|
||||||
options: { __typename?: 'OptionConnection' } & {
|
productOptions: { __typename?: 'ProductOptionConnection' } & {
|
||||||
edges?: Maybe<
|
edges?: Maybe<
|
||||||
Array<
|
Array<
|
||||||
Maybe<
|
Maybe<
|
||||||
{ __typename?: 'OptionEdge' } & {
|
{ __typename?: 'ProductOptionEdge' } & {
|
||||||
node: { __typename?: 'ProductOption' } & Pick<
|
node:
|
||||||
ProductOption,
|
| ({ __typename?: 'CheckboxOption' } & Pick<
|
||||||
'entityId' | 'displayName' | 'isRequired'
|
CheckboxOption,
|
||||||
> & {
|
'entityId' | 'displayName'
|
||||||
values: { __typename?: 'OptionValueConnection' } & {
|
>)
|
||||||
edges?: Maybe<
|
| ({ __typename?: 'DateFieldOption' } & Pick<
|
||||||
Array<
|
DateFieldOption,
|
||||||
Maybe<
|
'entityId' | 'displayName'
|
||||||
{ __typename?: 'OptionValueEdge' } & {
|
>)
|
||||||
node: { __typename?: 'ProductOptionValue' } & Pick<
|
| ({ __typename?: 'FileUploadFieldOption' } & Pick<
|
||||||
ProductOptionValue,
|
FileUploadFieldOption,
|
||||||
'entityId' | 'label'
|
'entityId' | 'displayName'
|
||||||
>
|
>)
|
||||||
}
|
| ({ __typename?: 'MultiLineTextFieldOption' } & Pick<
|
||||||
>
|
MultiLineTextFieldOption,
|
||||||
>
|
'entityId' | 'displayName'
|
||||||
>
|
>)
|
||||||
}
|
| ({ __typename?: 'MultipleChoiceOption' } & Pick<
|
||||||
}
|
MultipleChoiceOption,
|
||||||
|
'entityId' | 'displayName'
|
||||||
|
> &
|
||||||
|
MultipleChoiceOptionFragment)
|
||||||
|
| ({ __typename?: 'NumberFieldOption' } & Pick<
|
||||||
|
NumberFieldOption,
|
||||||
|
'entityId' | 'displayName'
|
||||||
|
>)
|
||||||
|
| ({ __typename?: 'TextFieldOption' } & Pick<
|
||||||
|
TextFieldOption,
|
||||||
|
'entityId' | 'displayName'
|
||||||
|
>)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
>
|
>
|
||||||
|
@ -1,21 +1,21 @@
|
|||||||
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
|
|
||||||
import { useRouter } from 'next/router'
|
|
||||||
import Link from 'next/link'
|
|
||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { range } from 'lodash'
|
||||||
|
import { useRouter } from 'next/router'
|
||||||
|
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
|
||||||
|
import { Layout } from '@components/core'
|
||||||
|
import { ProductCard } from '@components/product'
|
||||||
|
import { Container, Grid, Skeleton } from '@components/ui'
|
||||||
|
import getSlug from '@utils/get-slug'
|
||||||
|
import useSearch from '@lib/bigcommerce/products/use-search'
|
||||||
import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
|
import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
|
||||||
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
|
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
|
||||||
import useSearch from '@lib/bigcommerce/products/use-search'
|
|
||||||
import { Layout } from '@components/core'
|
|
||||||
import { Container, Grid, Skeleton } from '@components/ui'
|
|
||||||
import { ProductCard } from '@components/product'
|
|
||||||
import getSlug from '@utils/get-slug'
|
|
||||||
import {
|
import {
|
||||||
filterQuery,
|
filterQuery,
|
||||||
getCategoryPath,
|
getCategoryPath,
|
||||||
getDesignerPath,
|
getDesignerPath,
|
||||||
useSearchMeta,
|
useSearchMeta,
|
||||||
} from '@utils/search'
|
} from '@utils/search'
|
||||||
import { range } from 'lodash'
|
|
||||||
|
|
||||||
export async function getStaticProps({ preview }: GetStaticPropsContext) {
|
export async function getStaticProps({ preview }: GetStaticPropsContext) {
|
||||||
const { pages } = await getAllPages()
|
const { pages } = await getAllPages()
|
||||||
@ -138,25 +138,26 @@ export default function Search({
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<Grid
|
|
||||||
items={data ? data.products : range(12)}
|
{data ? (
|
||||||
layout="normal"
|
<Grid layout="normal">
|
||||||
wrapper={
|
{data.products.map((p: any) => (
|
||||||
data
|
<ProductCard
|
||||||
? (p: any) => (
|
className="animate__animated animate__fadeIn"
|
||||||
<ProductCard
|
{...p}
|
||||||
className="animate__animated animate__fadeIn"
|
/>
|
||||||
{...p}
|
))}
|
||||||
/>
|
</Grid>
|
||||||
)
|
) : (
|
||||||
: () => (
|
<Grid>
|
||||||
<Skeleton
|
{range(12).map(() => (
|
||||||
className="w-full animate__animated animate__fadeIn"
|
<Skeleton
|
||||||
height={325}
|
className="w-full animate__animated animate__fadeIn"
|
||||||
/>
|
height={325}
|
||||||
)
|
/>
|
||||||
}
|
))}
|
||||||
/>
|
</Grid>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-2">
|
<div className="col-span-2">
|
||||||
<ul>
|
<ul>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user