cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Removed code related to unused image sizes API

Browse Source
This commit is contained in:
Luis Alvarez 2020-10-25 19:50:33 -05:00
parent 4862dc6bbd
commit 50c50b6d53
9 changed files with 36 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/core/EnhancedImage/EnhancedImage.tsx
View File

@ -27,7 +27,7 @@ type Props = Omit<
const EnhancedImage: FC<Props & JSX.IntrinsicElements['img']> = ({
...props
}) => {
const [ref, inView] = useInView({
const [ref] = useInView({
triggerOnce: true,
rootMargin: '220px 0px',
})

4
components/product/ProductCard/ProductCard.tsx
View File

@ -25,7 +25,7 @@ const ProductCard: FC<Props> = ({
imgHeight,
priority,
}) => {
const src = p.images.edges?.[0]?.node.urlLarge!
const src = p.images.edges?.[0]?.node.urlOriginal!
const { price } = usePrice({
amount: p.prices?.price?.value,
baseAmount: p.prices?.retailPrice?.value,
@ -41,7 +41,7 @@ const ProductCard: FC<Props> = ({
</span>
</div>
<EnhancedImage
src={p.images.edges?.[0]?.node.urlSmall!}
src={p.images.edges?.[0]?.node.urlOriginal!}
alt={p.name}
width={imgWidth}
height={imgHeight}

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

@ -78,11 +78,11 @@ const ProductView: FC<Props> = ({ product, className }) => {
<div className={s.sliderContainer}>
<ProductSlider>
{product.images.edges?.map((image, i) => (
<div key={image?.node.urlXL} className={s.imageContainer}>
<div key={image?.node.urlOriginal} className={s.imageContainer}>
<Image
alt={product.name}
className={s.img}
src={image?.node.urlXL!}
src={image?.node.urlOriginal!}
width={1050}
height={1050}
priority={i === 0}

10
components/ui/Marquee/Marquee.tsx
View File

@ -19,16 +19,6 @@ const M: FC<Props> = ({ className = '', children, variant = 'primary' }) => {
className
)
// return (
// <div className={rootClassName}>
// <div className={s.container}>
// {items.map((p: any) => (
// <Component {...p} />
// ))}
// </div>
// </div>
// )
return (
<div className={rootClassName}>
<Ticker offset={80}>

21
lib/bigcommerce/api/fragments/product.ts
View File

@ -1,15 +1,3 @@
export const responsiveImageFragment = /* GraphQL */ `
fragment responsiveImage on Image {
urlSmall: url(width: $imgSmallWidth, height: $imgSmallHeight)
urlMedium: url(width: $imgMediumWidth, height: $imgMediumHeight)
urlLarge: url(width: $imgLargeWidth, height: $imgLargeHeight)
urlXL: url(width: $imgXLWidth, height: $imgXLHeight)
urlOriginal
altText
isDefault
}
`
export const swatchOptionFragment = /* GraphQL */ `
fragment swatchOption on SwatchOptionValue {
isDefault
@ -59,7 +47,9 @@ export const productInfoFragment = /* GraphQL */ `
images {
edges {
node {
...responsiveImage
urlOriginal
altText
isDefault
}
}
}
@ -68,7 +58,9 @@ export const productInfoFragment = /* GraphQL */ `
node {
entityId
defaultImage {
...responsiveImage
urlOriginal
altText
isDefault
}
}
}
@ -93,7 +85,6 @@ export const productInfoFragment = /* GraphQL */ `
}
}
${responsiveImageFragment}
${multipleChoiceOptionFragment}
`

63
lib/bigcommerce/api/index.ts
View File

@ -1,48 +1,18 @@
import type { RequestInit } from '@vercel/fetch'
import { CommerceAPIConfig } from 'lib/commerce/api'
import { GetAllProductsQueryVariables } from '../schema'
import type { CommerceAPIConfig } from 'lib/commerce/api'
import fetchGraphqlApi from './utils/fetch-graphql-api'
import fetchStoreApi from './utils/fetch-store-api'
export interface Images {
small?: ImageOptions
medium?: ImageOptions
large?: ImageOptions
xl?: ImageOptions
}
export interface ImageOptions {
width: number
height?: number
}
export type ProductImageVariables = Pick<
GetAllProductsQueryVariables,
| 'imgSmallWidth'
| 'imgSmallHeight'
| 'imgMediumWidth'
| 'imgMediumHeight'
| 'imgLargeWidth'
| 'imgLargeHeight'
| 'imgXLWidth'
| 'imgXLHeight'
>
export interface BigcommerceConfigOptions extends CommerceAPIConfig {
export interface BigcommerceConfig extends CommerceAPIConfig {
// Indicates if the returned metadata with translations should be applied to the
// data or returned as it is
applyLocale?: boolean
images?: Images
storeApiUrl: string
storeApiToken: string
storeApiClientId: string
storeApiFetch<T>(endpoint: string, options?: RequestInit): Promise<T>
}
export interface BigcommerceConfig extends BigcommerceConfigOptions {
readonly imageVariables?: ProductImageVariables
}
const API_URL = process.env.BIGCOMMERCE_STOREFRONT_API_URL
const API_TOKEN = process.env.BIGCOMMERCE_STOREFRONT_API_TOKEN
const STORE_API_URL = process.env.BIGCOMMERCE_STORE_API_URL
@ -70,39 +40,20 @@ if (!(STORE_API_URL && STORE_API_TOKEN && STORE_API_CLIENT_ID)) {
export class Config {
private config: BigcommerceConfig
constructor(config: Omit<BigcommerceConfigOptions, 'customerCookie'>) {
constructor(config: Omit<BigcommerceConfig, 'customerCookie'>) {
this.config = {
...config,
// The customerCookie is not customizable for now, BC sets the cookie and it's
// not important to rename it
customerCookie: 'SHOP_TOKEN',
imageVariables: this.getImageVariables(config.images),
}
}
getImageVariables(images?: Images) {
return images
? {
imgSmallWidth: images.small?.width,
imgSmallHeight: images.small?.height,
imgMediumWidth: images.medium?.height,
imgMediumHeight: images.medium?.height,
imgLargeWidth: images.large?.height,
imgLargeHeight: images.large?.height,
imgXLWidth: images.xl?.height,
imgXLHeight: images.xl?.height,
}
: undefined
}
getConfig(userConfig: Partial<BigcommerceConfig> = {}) {
const { images: configImages, ...config } = this.config
const images = { ...configImages, ...userConfig.images }
return Object.assign(config, userConfig, {
images,
imageVariables: this.getImageVariables(images),
})
return Object.entries(userConfig).reduce<BigcommerceConfig>(
(cfg, [key, value]) => Object.assign(cfg, { [key]: value }),
{ ...this.config }
)
}
setConfig(newConfig: Partial<BigcommerceConfig>) {

20
lib/bigcommerce/api/operations/get-all-products.ts
View File

@ -6,7 +6,7 @@ import type { RecursivePartial, RecursiveRequired } from '../utils/types'
import filterEdges from '../utils/filter-edges'
import setProductLocaleMeta from '../utils/set-product-locale-meta'
import { productConnectionFragment } from '../fragments/product'
import { BigcommerceConfig, getConfig, Images, ProductImageVariables } from '..'
import { BigcommerceConfig, getConfig } from '..'
export const getAllProductsQuery = /* GraphQL */ `
query getAllProducts(
@ -14,14 +14,6 @@ export const getAllProductsQuery = /* GraphQL */ `
$locale: String = "null"
$entityIds: [Int!]
$first: Int = 10
$imgSmallWidth: Int = 320
$imgSmallHeight: Int
$imgMediumWidth: Int = 640
$imgMediumHeight: Int
$imgLargeWidth: Int = 960
$imgLargeHeight: Int
$imgXLWidth: Int = 1280
$imgXLHeight: Int
$products: Boolean = false
$featuredProducts: Boolean = false
$bestSellingProducts: Boolean = false
@ -71,11 +63,10 @@ export type ProductTypes =
| 'bestSellingProducts'
| 'newestProducts'
export type ProductVariables = { field?: ProductTypes } & Images &
Omit<
GetAllProductsQueryVariables,
ProductTypes | keyof ProductImageVariables | 'hasLocale'
>
export type ProductVariables = { field?: ProductTypes } & Omit<
GetAllProductsQueryVariables,
ProductTypes | 'hasLocale'
>
async function getAllProducts(opts?: {
variables?: ProductVariables
@ -104,7 +95,6 @@ async function getAllProducts({
const locale = vars.locale || config.locale
const variables: GetAllProductsQueryVariables = {
...config.imageVariables,
...vars,
locale,
hasLocale: !!locale,

19
lib/bigcommerce/api/operations/get-product.ts
View File

@ -5,21 +5,13 @@ import type {
import type { RecursivePartial, RecursiveRequired } from '../utils/types'
import setProductLocaleMeta from '../utils/set-product-locale-meta'
import { productInfoFragment } from '../fragments/product'
import { BigcommerceConfig, getConfig, Images } from '..'
import { BigcommerceConfig, getConfig } from '..'
export const getProductQuery = /* GraphQL */ `
query getProduct(
$hasLocale: Boolean = false
$locale: String = "null"
$path: String!
$imgSmallWidth: Int = 320
$imgSmallHeight: Int
$imgMediumWidth: Int = 640
$imgMediumHeight: Int
$imgLargeWidth: Int = 960
$imgLargeHeight: Int
$imgXLWidth: Int = 1280
$imgXLHeight: Int
) {
site {
route(path: $path) {
@ -45,10 +37,10 @@ export type GetProductResult<
T extends { product?: any } = { product?: ProductNode }
> = T
export type ProductVariables = Images & { locale?: string } & (
| { path: string; slug?: never }
| { path?: never; slug: string }
)
export type ProductVariables = { locale?: string } & (
| { path: string; slug?: never }
| { path?: never; slug: string }
)
async function getProduct(opts: {
variables: ProductVariables
@ -74,7 +66,6 @@ async function getProduct({
const locale = vars.locale || config.locale
const variables: GetProductQueryVariables = {
...config.imageVariables,
...vars,
locale,
hasLocale: !!locale,

36
lib/bigcommerce/schema.d.ts vendored
View File

@ -1684,16 +1684,6 @@ export type CategoryTreeItemFragment = {
'entityId' | 'name' | 'path' | 'description' | 'productCount'
>
export type ResponsiveImageFragment = { __typename?: 'Image' } & Pick<
Image,
'urlOriginal' | 'altText' | 'isDefault'
> & {
urlSmall: Image['url']
urlMedium: Image['url']
urlLarge: Image['url']
urlXL: Image['url']
}
export type SwatchOptionFragment = { __typename?: 'SwatchOptionValue' } & Pick<
SwatchOptionValue,
'isDefault' | 'hexColors'
@ -1749,7 +1739,10 @@ export type ProductInfoFragment = { __typename?: 'Product' } & Pick<
Array<
Maybe<
{ __typename?: 'ImageEdge' } & {
node: { __typename?: 'Image' } & ResponsiveImageFragment
node: { __typename?: 'Image' } & Pick<
Image,
'urlOriginal' | 'altText' | 'isDefault'
>
}
>
>
@ -1762,7 +1755,10 @@ export type ProductInfoFragment = { __typename?: 'Product' } & Pick<
{ __typename?: 'VariantEdge' } & {
node: { __typename?: 'Variant' } & Pick<Variant, 'entityId'> & {
defaultImage?: Maybe<
{ __typename?: 'Image' } & ResponsiveImageFragment
{ __typename?: 'Image' } & Pick<
Image,
'urlOriginal' | 'altText' | 'isDefault'
>
>
}
}
@ -1869,14 +1865,6 @@ export type GetAllProductsQueryVariables = Exact<{
locale?: Maybe<Scalars['String']>
entityIds?: Maybe<Array<Scalars['Int']>>
first?: Maybe<Scalars['Int']>
imgSmallWidth?: Maybe<Scalars['Int']>
imgSmallHeight?: Maybe<Scalars['Int']>
imgMediumWidth?: Maybe<Scalars['Int']>
imgMediumHeight?: Maybe<Scalars['Int']>
imgLargeWidth?: Maybe<Scalars['Int']>
imgLargeHeight?: Maybe<Scalars['Int']>
imgXLWidth?: Maybe<Scalars['Int']>
imgXLHeight?: Maybe<Scalars['Int']>
products?: Maybe<Scalars['Boolean']>
featuredProducts?: Maybe<Scalars['Boolean']>
bestSellingProducts?: Maybe<Scalars['Boolean']>
@ -1902,14 +1890,6 @@ export type GetProductQueryVariables = Exact<{
hasLocale?: Maybe<Scalars['Boolean']>
locale?: Maybe<Scalars['String']>
path: Scalars['String']
imgSmallWidth?: Maybe<Scalars['Int']>
imgSmallHeight?: Maybe<Scalars['Int']>
imgMediumWidth?: Maybe<Scalars['Int']>
imgMediumHeight?: Maybe<Scalars['Int']>
imgLargeWidth?: Maybe<Scalars['Int']>
imgLargeHeight?: Maybe<Scalars['Int']>
imgXLWidth?: Maybe<Scalars['Int']>
imgXLHeight?: Maybe<Scalars['Int']>
}>
export type GetProductQuery = { __typename?: 'Query' } & {