4
0
forked from crowetic/commerce

Adding Correct Sizes and Colors

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

View File

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

View File

@ -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,
{ {

View File

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

View File

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

View File

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