forked from crowetic/commerce
src for meta tag
This commit is contained in:
parent
a02f58bbf2
commit
509ba95bc9
@ -1,14 +1,17 @@
|
|||||||
import { NextSeo } from 'next-seo'
|
|
||||||
import { FC, useState, useEffect } from 'react'
|
import { FC, useState, useEffect } from 'react'
|
||||||
|
import cn from 'classnames'
|
||||||
|
import { NextSeo } from 'next-seo'
|
||||||
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
|
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
|
||||||
|
import useAddItem from '@lib/bigcommerce/cart/use-add-item'
|
||||||
|
import bcImageSrc from '@lib/bc-image-src'
|
||||||
|
import getPathname from '@lib/get-pathname'
|
||||||
import { useUI } from '@components/ui/context'
|
import { useUI } from '@components/ui/context'
|
||||||
import { Button, Container } from '@components/ui'
|
import { Button, Container } from '@components/ui'
|
||||||
import { Swatch, ProductSlider } from '@components/product'
|
import { Swatch, ProductSlider } from '@components/product'
|
||||||
import useAddItem from '@lib/bigcommerce/cart/use-add-item'
|
|
||||||
import { getProductOptions } from '../helpers'
|
import { getProductOptions } from '../helpers'
|
||||||
import s from './ProductView.module.css'
|
import s from './ProductView.module.css'
|
||||||
import { isDesktop } from '@lib/browser'
|
import { isDesktop } from '@lib/browser'
|
||||||
import cn from 'classnames'
|
|
||||||
interface Props {
|
interface Props {
|
||||||
className?: string
|
className?: string
|
||||||
children?: any
|
children?: any
|
||||||
@ -56,7 +59,10 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
|||||||
description: product.description,
|
description: product.description,
|
||||||
images: [
|
images: [
|
||||||
{
|
{
|
||||||
url: product.images.edges?.[0]?.node.urlXL || '',
|
url: bcImageSrc({
|
||||||
|
src: getPathname(product.images.edges?.[0]?.node.urlOriginal!),
|
||||||
|
width: 1200,
|
||||||
|
}),
|
||||||
width: 800,
|
width: 800,
|
||||||
height: 600,
|
height: 600,
|
||||||
alt: product.name,
|
alt: product.name,
|
||||||
|
22
lib/bc-image-src.ts
Normal file
22
lib/bc-image-src.ts
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
type Props = {
|
||||||
|
src: string
|
||||||
|
width?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
type LoaderProps = Props & { root: string }
|
||||||
|
|
||||||
|
function normalizeSrc(src: string) {
|
||||||
|
return src[0] === '/' ? src.slice(1) : src
|
||||||
|
}
|
||||||
|
|
||||||
|
// This is the same loader used by Next.js in the Image Component, we have it here too
|
||||||
|
// so we can create image URLs for meta tags
|
||||||
|
function bcImageLoader({ root, src, width }: LoaderProps): string {
|
||||||
|
return `${root}${normalizeSrc(
|
||||||
|
width ? src.replace('/original/', `/${width}w/`) : src
|
||||||
|
)}`
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function bcImageSrc(props: Props) {
|
||||||
|
return bcImageLoader({ root: 'https://cdn11.bigcommerce.com/', ...props })
|
||||||
|
}
|
@ -1,6 +1,6 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
images: {
|
images: {
|
||||||
sizes: [320, 480, 1024, 1600],
|
sizes: [320, 480, 820, 1200, 1600],
|
||||||
path: 'https://cdn11.bigcommerce.com/',
|
path: 'https://cdn11.bigcommerce.com/',
|
||||||
loader: 'bigCommerce',
|
loader: 'bigCommerce',
|
||||||
},
|
},
|
||||||
|
@ -70,8 +70,8 @@ export default function Home({
|
|||||||
key={node.path}
|
key={node.path}
|
||||||
product={node}
|
product={node}
|
||||||
// The first image is the largest one in the grid
|
// The first image is the largest one in the grid
|
||||||
imgWidth={i === 0 ? 1600 : 1024}
|
imgWidth={i === 0 ? 1600 : 820}
|
||||||
imgHeight={i === 0 ? 1600 : 1024}
|
imgHeight={i === 0 ? 1600 : 820}
|
||||||
priority
|
priority
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
@ -103,8 +103,8 @@ export default function Home({
|
|||||||
key={node.path}
|
key={node.path}
|
||||||
product={node}
|
product={node}
|
||||||
// The second image is the largest one in the grid
|
// The second image is the largest one in the grid
|
||||||
imgWidth={i === 1 ? 1600 : 1024}
|
imgWidth={i === 1 ? 1600 : 820}
|
||||||
imgHeight={i === 1 ? 1600 : 1024}
|
imgHeight={i === 1 ? 1600 : 820}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</Grid>
|
</Grid>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user