forked from crowetic/commerce
Removed code related to unused image sizes API
This commit is contained in:
parent
4862dc6bbd
commit
50c50b6d53
@ -27,7 +27,7 @@ type Props = Omit<
|
|||||||
const EnhancedImage: FC<Props & JSX.IntrinsicElements['img']> = ({
|
const EnhancedImage: FC<Props & JSX.IntrinsicElements['img']> = ({
|
||||||
...props
|
...props
|
||||||
}) => {
|
}) => {
|
||||||
const [ref, inView] = useInView({
|
const [ref] = useInView({
|
||||||
triggerOnce: true,
|
triggerOnce: true,
|
||||||
rootMargin: '220px 0px',
|
rootMargin: '220px 0px',
|
||||||
})
|
})
|
||||||
|
@ -25,7 +25,7 @@ const ProductCard: FC<Props> = ({
|
|||||||
imgHeight,
|
imgHeight,
|
||||||
priority,
|
priority,
|
||||||
}) => {
|
}) => {
|
||||||
const src = p.images.edges?.[0]?.node.urlLarge!
|
const src = p.images.edges?.[0]?.node.urlOriginal!
|
||||||
const { price } = usePrice({
|
const { price } = usePrice({
|
||||||
amount: p.prices?.price?.value,
|
amount: p.prices?.price?.value,
|
||||||
baseAmount: p.prices?.retailPrice?.value,
|
baseAmount: p.prices?.retailPrice?.value,
|
||||||
@ -41,7 +41,7 @@ const ProductCard: FC<Props> = ({
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<EnhancedImage
|
<EnhancedImage
|
||||||
src={p.images.edges?.[0]?.node.urlSmall!}
|
src={p.images.edges?.[0]?.node.urlOriginal!}
|
||||||
alt={p.name}
|
alt={p.name}
|
||||||
width={imgWidth}
|
width={imgWidth}
|
||||||
height={imgHeight}
|
height={imgHeight}
|
||||||
|
@ -78,11 +78,11 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
|||||||
<div className={s.sliderContainer}>
|
<div className={s.sliderContainer}>
|
||||||
<ProductSlider>
|
<ProductSlider>
|
||||||
{product.images.edges?.map((image, i) => (
|
{product.images.edges?.map((image, i) => (
|
||||||
<div key={image?.node.urlXL} className={s.imageContainer}>
|
<div key={image?.node.urlOriginal} className={s.imageContainer}>
|
||||||
<Image
|
<Image
|
||||||
alt={product.name}
|
alt={product.name}
|
||||||
className={s.img}
|
className={s.img}
|
||||||
src={image?.node.urlXL!}
|
src={image?.node.urlOriginal!}
|
||||||
width={1050}
|
width={1050}
|
||||||
height={1050}
|
height={1050}
|
||||||
priority={i === 0}
|
priority={i === 0}
|
||||||
|
@ -19,16 +19,6 @@ const M: FC<Props> = ({ className = '', children, variant = 'primary' }) => {
|
|||||||
className
|
className
|
||||||
)
|
)
|
||||||
|
|
||||||
// return (
|
|
||||||
// <div className={rootClassName}>
|
|
||||||
// <div className={s.container}>
|
|
||||||
// {items.map((p: any) => (
|
|
||||||
// <Component {...p} />
|
|
||||||
// ))}
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
// )
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={rootClassName}>
|
<div className={rootClassName}>
|
||||||
<Ticker offset={80}>
|
<Ticker offset={80}>
|
||||||
|
@ -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 */ `
|
export const swatchOptionFragment = /* GraphQL */ `
|
||||||
fragment swatchOption on SwatchOptionValue {
|
fragment swatchOption on SwatchOptionValue {
|
||||||
isDefault
|
isDefault
|
||||||
@ -59,7 +47,9 @@ export const productInfoFragment = /* GraphQL */ `
|
|||||||
images {
|
images {
|
||||||
edges {
|
edges {
|
||||||
node {
|
node {
|
||||||
...responsiveImage
|
urlOriginal
|
||||||
|
altText
|
||||||
|
isDefault
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -68,7 +58,9 @@ export const productInfoFragment = /* GraphQL */ `
|
|||||||
node {
|
node {
|
||||||
entityId
|
entityId
|
||||||
defaultImage {
|
defaultImage {
|
||||||
...responsiveImage
|
urlOriginal
|
||||||
|
altText
|
||||||
|
isDefault
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -93,7 +85,6 @@ export const productInfoFragment = /* GraphQL */ `
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
${responsiveImageFragment}
|
|
||||||
${multipleChoiceOptionFragment}
|
${multipleChoiceOptionFragment}
|
||||||
`
|
`
|
||||||
|
|
||||||
|
@ -1,48 +1,18 @@
|
|||||||
import type { RequestInit } from '@vercel/fetch'
|
import type { RequestInit } from '@vercel/fetch'
|
||||||
import { CommerceAPIConfig } from 'lib/commerce/api'
|
import type { CommerceAPIConfig } from 'lib/commerce/api'
|
||||||
import { GetAllProductsQueryVariables } from '../schema'
|
|
||||||
import fetchGraphqlApi from './utils/fetch-graphql-api'
|
import fetchGraphqlApi from './utils/fetch-graphql-api'
|
||||||
import fetchStoreApi from './utils/fetch-store-api'
|
import fetchStoreApi from './utils/fetch-store-api'
|
||||||
|
|
||||||
export interface Images {
|
export interface BigcommerceConfig extends CommerceAPIConfig {
|
||||||
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 {
|
|
||||||
// Indicates if the returned metadata with translations should be applied to the
|
// Indicates if the returned metadata with translations should be applied to the
|
||||||
// data or returned as it is
|
// data or returned as it is
|
||||||
applyLocale?: boolean
|
applyLocale?: boolean
|
||||||
images?: Images
|
|
||||||
storeApiUrl: string
|
storeApiUrl: string
|
||||||
storeApiToken: string
|
storeApiToken: string
|
||||||
storeApiClientId: string
|
storeApiClientId: string
|
||||||
storeApiFetch<T>(endpoint: string, options?: RequestInit): Promise<T>
|
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_URL = process.env.BIGCOMMERCE_STOREFRONT_API_URL
|
||||||
const API_TOKEN = process.env.BIGCOMMERCE_STOREFRONT_API_TOKEN
|
const API_TOKEN = process.env.BIGCOMMERCE_STOREFRONT_API_TOKEN
|
||||||
const STORE_API_URL = process.env.BIGCOMMERCE_STORE_API_URL
|
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 {
|
export class Config {
|
||||||
private config: BigcommerceConfig
|
private config: BigcommerceConfig
|
||||||
|
|
||||||
constructor(config: Omit<BigcommerceConfigOptions, 'customerCookie'>) {
|
constructor(config: Omit<BigcommerceConfig, 'customerCookie'>) {
|
||||||
this.config = {
|
this.config = {
|
||||||
...config,
|
...config,
|
||||||
// The customerCookie is not customizable for now, BC sets the cookie and it's
|
// The customerCookie is not customizable for now, BC sets the cookie and it's
|
||||||
// not important to rename it
|
// not important to rename it
|
||||||
customerCookie: 'SHOP_TOKEN',
|
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> = {}) {
|
getConfig(userConfig: Partial<BigcommerceConfig> = {}) {
|
||||||
const { images: configImages, ...config } = this.config
|
return Object.entries(userConfig).reduce<BigcommerceConfig>(
|
||||||
const images = { ...configImages, ...userConfig.images }
|
(cfg, [key, value]) => Object.assign(cfg, { [key]: value }),
|
||||||
|
{ ...this.config }
|
||||||
return Object.assign(config, userConfig, {
|
)
|
||||||
images,
|
|
||||||
imageVariables: this.getImageVariables(images),
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
setConfig(newConfig: Partial<BigcommerceConfig>) {
|
setConfig(newConfig: Partial<BigcommerceConfig>) {
|
||||||
|
@ -6,7 +6,7 @@ import type { RecursivePartial, RecursiveRequired } from '../utils/types'
|
|||||||
import filterEdges from '../utils/filter-edges'
|
import filterEdges from '../utils/filter-edges'
|
||||||
import setProductLocaleMeta from '../utils/set-product-locale-meta'
|
import setProductLocaleMeta from '../utils/set-product-locale-meta'
|
||||||
import { productConnectionFragment } from '../fragments/product'
|
import { productConnectionFragment } from '../fragments/product'
|
||||||
import { BigcommerceConfig, getConfig, Images, ProductImageVariables } from '..'
|
import { BigcommerceConfig, getConfig } from '..'
|
||||||
|
|
||||||
export const getAllProductsQuery = /* GraphQL */ `
|
export const getAllProductsQuery = /* GraphQL */ `
|
||||||
query getAllProducts(
|
query getAllProducts(
|
||||||
@ -14,14 +14,6 @@ export const getAllProductsQuery = /* GraphQL */ `
|
|||||||
$locale: String = "null"
|
$locale: String = "null"
|
||||||
$entityIds: [Int!]
|
$entityIds: [Int!]
|
||||||
$first: Int = 10
|
$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
|
$products: Boolean = false
|
||||||
$featuredProducts: Boolean = false
|
$featuredProducts: Boolean = false
|
||||||
$bestSellingProducts: Boolean = false
|
$bestSellingProducts: Boolean = false
|
||||||
@ -71,11 +63,10 @@ export type ProductTypes =
|
|||||||
| 'bestSellingProducts'
|
| 'bestSellingProducts'
|
||||||
| 'newestProducts'
|
| 'newestProducts'
|
||||||
|
|
||||||
export type ProductVariables = { field?: ProductTypes } & Images &
|
export type ProductVariables = { field?: ProductTypes } & Omit<
|
||||||
Omit<
|
GetAllProductsQueryVariables,
|
||||||
GetAllProductsQueryVariables,
|
ProductTypes | 'hasLocale'
|
||||||
ProductTypes | keyof ProductImageVariables | 'hasLocale'
|
>
|
||||||
>
|
|
||||||
|
|
||||||
async function getAllProducts(opts?: {
|
async function getAllProducts(opts?: {
|
||||||
variables?: ProductVariables
|
variables?: ProductVariables
|
||||||
@ -104,7 +95,6 @@ async function getAllProducts({
|
|||||||
|
|
||||||
const locale = vars.locale || config.locale
|
const locale = vars.locale || config.locale
|
||||||
const variables: GetAllProductsQueryVariables = {
|
const variables: GetAllProductsQueryVariables = {
|
||||||
...config.imageVariables,
|
|
||||||
...vars,
|
...vars,
|
||||||
locale,
|
locale,
|
||||||
hasLocale: !!locale,
|
hasLocale: !!locale,
|
||||||
|
@ -5,21 +5,13 @@ import type {
|
|||||||
import type { RecursivePartial, RecursiveRequired } from '../utils/types'
|
import type { RecursivePartial, RecursiveRequired } from '../utils/types'
|
||||||
import setProductLocaleMeta from '../utils/set-product-locale-meta'
|
import setProductLocaleMeta from '../utils/set-product-locale-meta'
|
||||||
import { productInfoFragment } from '../fragments/product'
|
import { productInfoFragment } from '../fragments/product'
|
||||||
import { BigcommerceConfig, getConfig, Images } from '..'
|
import { BigcommerceConfig, getConfig } from '..'
|
||||||
|
|
||||||
export const getProductQuery = /* GraphQL */ `
|
export const getProductQuery = /* GraphQL */ `
|
||||||
query getProduct(
|
query getProduct(
|
||||||
$hasLocale: Boolean = false
|
$hasLocale: Boolean = false
|
||||||
$locale: String = "null"
|
$locale: String = "null"
|
||||||
$path: String!
|
$path: String!
|
||||||
$imgSmallWidth: Int = 320
|
|
||||||
$imgSmallHeight: Int
|
|
||||||
$imgMediumWidth: Int = 640
|
|
||||||
$imgMediumHeight: Int
|
|
||||||
$imgLargeWidth: Int = 960
|
|
||||||
$imgLargeHeight: Int
|
|
||||||
$imgXLWidth: Int = 1280
|
|
||||||
$imgXLHeight: Int
|
|
||||||
) {
|
) {
|
||||||
site {
|
site {
|
||||||
route(path: $path) {
|
route(path: $path) {
|
||||||
@ -45,10 +37,10 @@ export type GetProductResult<
|
|||||||
T extends { product?: any } = { product?: ProductNode }
|
T extends { product?: any } = { product?: ProductNode }
|
||||||
> = T
|
> = T
|
||||||
|
|
||||||
export type ProductVariables = Images & { locale?: string } & (
|
export type ProductVariables = { locale?: string } & (
|
||||||
| { path: string; slug?: never }
|
| { path: string; slug?: never }
|
||||||
| { path?: never; slug: string }
|
| { path?: never; slug: string }
|
||||||
)
|
)
|
||||||
|
|
||||||
async function getProduct(opts: {
|
async function getProduct(opts: {
|
||||||
variables: ProductVariables
|
variables: ProductVariables
|
||||||
@ -74,7 +66,6 @@ async function getProduct({
|
|||||||
|
|
||||||
const locale = vars.locale || config.locale
|
const locale = vars.locale || config.locale
|
||||||
const variables: GetProductQueryVariables = {
|
const variables: GetProductQueryVariables = {
|
||||||
...config.imageVariables,
|
|
||||||
...vars,
|
...vars,
|
||||||
locale,
|
locale,
|
||||||
hasLocale: !!locale,
|
hasLocale: !!locale,
|
||||||
|
36
lib/bigcommerce/schema.d.ts
vendored
36
lib/bigcommerce/schema.d.ts
vendored
@ -1684,16 +1684,6 @@ export type CategoryTreeItemFragment = {
|
|||||||
'entityId' | 'name' | 'path' | 'description' | 'productCount'
|
'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<
|
export type SwatchOptionFragment = { __typename?: 'SwatchOptionValue' } & Pick<
|
||||||
SwatchOptionValue,
|
SwatchOptionValue,
|
||||||
'isDefault' | 'hexColors'
|
'isDefault' | 'hexColors'
|
||||||
@ -1749,7 +1739,10 @@ export type ProductInfoFragment = { __typename?: 'Product' } & Pick<
|
|||||||
Array<
|
Array<
|
||||||
Maybe<
|
Maybe<
|
||||||
{ __typename?: 'ImageEdge' } & {
|
{ __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' } & {
|
{ __typename?: 'VariantEdge' } & {
|
||||||
node: { __typename?: 'Variant' } & Pick<Variant, 'entityId'> & {
|
node: { __typename?: 'Variant' } & Pick<Variant, 'entityId'> & {
|
||||||
defaultImage?: Maybe<
|
defaultImage?: Maybe<
|
||||||
{ __typename?: 'Image' } & ResponsiveImageFragment
|
{ __typename?: 'Image' } & Pick<
|
||||||
|
Image,
|
||||||
|
'urlOriginal' | 'altText' | 'isDefault'
|
||||||
|
>
|
||||||
>
|
>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1869,14 +1865,6 @@ export type GetAllProductsQueryVariables = Exact<{
|
|||||||
locale?: Maybe<Scalars['String']>
|
locale?: Maybe<Scalars['String']>
|
||||||
entityIds?: Maybe<Array<Scalars['Int']>>
|
entityIds?: Maybe<Array<Scalars['Int']>>
|
||||||
first?: Maybe<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']>
|
products?: Maybe<Scalars['Boolean']>
|
||||||
featuredProducts?: Maybe<Scalars['Boolean']>
|
featuredProducts?: Maybe<Scalars['Boolean']>
|
||||||
bestSellingProducts?: Maybe<Scalars['Boolean']>
|
bestSellingProducts?: Maybe<Scalars['Boolean']>
|
||||||
@ -1902,14 +1890,6 @@ export type GetProductQueryVariables = Exact<{
|
|||||||
hasLocale?: Maybe<Scalars['Boolean']>
|
hasLocale?: Maybe<Scalars['Boolean']>
|
||||||
locale?: Maybe<Scalars['String']>
|
locale?: Maybe<Scalars['String']>
|
||||||
path: 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' } & {
|
export type GetProductQuery = { __typename?: 'Query' } & {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user