crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-03-14 22:42:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated Image Component implementation

Browse Source
This commit is contained in:
Luis Alvarez 2020-10-22 20:59:45 -05:00
parent ce8f0235f5
commit e0b1106980
8 changed files with 39 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/cart/CartItem/CartItem.tsx
View File

@ -4,7 +4,6 @@ import { Trash, Plus, Minus } from '@components/icon'
import usePrice from '@lib/bigcommerce/use-price'
import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item'
import getPathname from '@lib/get-pathname'
import s from './CartItem.module.css'
const CartItem = ({
@ -58,7 +57,13 @@ const CartItem = ({
return (
<li className="flex flex-row space-x-8 py-6">
<div className="w-12 h-12 bg-violet relative overflow-hidden">
<Image src={getPathname(item.image_url)} width={60} height={60} />
<Image
src={item.image_url}
width={60}
height={60}
// The cart item image is already optimized and very small in size
unoptimized
/>
</div>
<div className="flex-1 flex flex-col justify-between text-base">
<span className="font-bold mb-3">{item.name}</span>

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

@ -3,7 +3,6 @@ import cn from 'classnames'
import Image from 'next/image'
import Link from 'next/link'
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
import getPathname from '@lib/get-pathname'
import { Heart } from '@components/icon'
import s from './ProductCard.module.css'
@ -25,7 +24,7 @@ const ProductCard: FC<Props> = ({
imgHeight,
priority,
}) => {
const src = getPathname(p.images.edges?.[0]?.node.urlOriginal!)
const src = p.images.edges?.[0]?.node.urlOriginal!
if (variant === 'slim') {
return (
@ -40,6 +39,7 @@ const ProductCard: FC<Props> = ({
width={imgWidth}
height={imgHeight}
priority={priority}
quality="90"
/>
</div>
)
@ -69,6 +69,7 @@ const ProductCard: FC<Props> = ({
width={imgWidth}
height={imgHeight}
priority={priority}
quality="90"
/>
</div>
</a>

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

@ -6,12 +6,10 @@ import { FC, useState, useEffect } from 'react'
import { useUI } from '@components/ui/context'
import { Button, Container } from '@components/ui'
import { Swatch, ProductSlider } from '@components/product'
import getPathname from '@lib/get-pathname'
import useAddItem from '@lib/bigcommerce/cart/use-add-item'
import { isDesktop } from '@lib/browser'
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
import { getProductOptions } from '../helpers'
import bcImageSrc from '@lib/bc-image-src'
interface Props {
className?: string
@ -60,10 +58,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
description: product.description,
images: [
{
url: bcImageSrc({
src: getPathname(product.images.edges?.[0]?.node.urlOriginal!),
width: 1200,
}),
url: product.images.edges?.[0]?.node.urlOriginal!,
width: 800,
height: 600,
alt: product.name,
@ -84,14 +79,14 @@ const ProductView: FC<Props> = ({ product, className }) => {
<div className={s.sliderContainer}>
<ProductSlider>
{/** TODO: Change with Image Component **/}
{product.images.edges?.map((image, i) => (
<Image
key={image?.node.urlOriginal}
src={getPathname(image?.node.urlOriginal!)}
src={image?.node.urlOriginal!}
width={1200}
height={1200}
priority={i === 0}
quality="90"
/>
))}
</ProductSlider>

22
lib/bc-image-src.ts
View File

@ -1,22 +0,0 @@
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 })
}

3
lib/get-pathname.ts
View File

@ -1,3 +0,0 @@
export default function getPathname(url: string) {
return new URL(url).pathname
}

3
next.config.js
View File

@ -1,8 +1,7 @@
module.exports = {
images: {
sizes: [320, 480, 820, 1200, 1600],
path: 'https://cdn11.bigcommerce.com/',
loader: 'bigCommerce',
domains: ['cdn11.bigcommerce.com'],
},
rewrites() {
return [

2
package.json
View File

@ -30,7 +30,7 @@
"js-cookie": "^2.2.1",
"lodash.debounce": "^4.0.8",
"lodash.random": "^3.2.0",
"next": "file:../next.js/packages/next",
"next": "^9.5.6-canary.12",
"next-seo": "^4.11.0",
"next-themes": "^0.0.4",
"nextjs-progressbar": "^0.0.6",

46
yarn.lock
View File

@ -1514,20 +1514,20 @@
meow "^7.0.0"
prettier "^2.0.5"
"@next/env@9.5.6-canary.11":
version "9.5.6-canary.11"
resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.6-canary.11.tgz#95e1e668a19ba7cadd7047305bf64e23ba7d2c4f"
integrity sha512-mFnvhl39lkEf8BuULn5wX6kN9TnSo5HW/J65AGEAMFoQio9aMpjnaTqYIavg+j8ddlWpVWxK0ypMjY3D8GXz1A==
"@next/env@9.5.6-canary.12":
version "9.5.6-canary.12"
resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.6-canary.12.tgz#5680e9f1cfed54d7529086f519352307337f3ea1"
integrity sha512-cZ2ETTduAi+ThD6rk6FNzQWAOI0QRg0De54EqG4+2YFAU/FwWeoVy6c8nkaO1KE3qCVqXEyuat2Q6knA4E/sFA==
"@next/polyfill-module@9.5.6-canary.11":
version "9.5.6-canary.11"
resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-9.5.6-canary.11.tgz#681828311b562c40c43c2867c071d179e1bdd2ba"
integrity sha512-MTK9f7iNy5aIAg3saeCidL7Wjapv0UhX/e/TJA9HUxw/smqzfNBos8HW974T46r1QKwUIEdz7S+5xJDnx+XdAg==
"@next/polyfill-module@9.5.6-canary.12":
version "9.5.6-canary.12"
resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-9.5.6-canary.12.tgz#2ccd053b73ef350d690ecd85446de5ba7c40bcaa"
integrity sha512-2zOZYPJtzlPnObsjD9UEmOygQwvlSzeMGCwklFmH+ioR5ngaA7P4oXtqh8ocYAsjRVbZucJcT9Yn5roPbZfUNQ==
"@next/react-dev-overlay@9.5.6-canary.11":
version "9.5.6-canary.11"
resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.6-canary.11.tgz#4e397914b5d1a42fdbbf9fccf1de72f62d6232a5"
integrity sha512-Z+ScaXurAkaTRSbOUVVYew4ufZVsAHIkRJtTmaI1s3g5+nG5YjTSZRgTMmQVf6W1bZSJp7wGkYWD4cKvBHCojQ==
"@next/react-dev-overlay@9.5.6-canary.12":
version "9.5.6-canary.12"
resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.6-canary.12.tgz#eef065cd2d37e446aef78ffea974fcf9066bcdcd"
integrity sha512-ELQCF4/CX/PygiOa9PD7iCu62PqWrIK3jVj9PuascEhoF8au3N987ElJ7he57MuD6TLNpy5a8G7IxYUEPV55rA==
dependencies:
"@babel/code-frame" "7.10.4"
ally.js "1.4.1"
@ -1540,10 +1540,10 @@
stacktrace-parser "0.1.10"
strip-ansi "6.0.0"
"@next/react-refresh-utils@9.5.6-canary.11":
version "9.5.6-canary.11"
resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.6-canary.11.tgz#c97fa5cdfdbdd90db4d2c56065193fa2cdd076ad"
integrity sha512-ve7rdJp8CrgoCpKqF/09C3RYryA7NgYy0+Op7r5l6PTUv9AQoDs2RUGia3l2Irsz7bCSSBUxah41peZBgNn7Cw==
"@next/react-refresh-utils@9.5.6-canary.12":
version "9.5.6-canary.12"
resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.6-canary.12.tgz#f2f0cc30e646af4daefd5d0f50681ac231fbd826"
integrity sha512-jX6JwC8IHzHo1BV2yayPaOnXpM9KWF2/NM1SWTCZlfplBF5Rm1nQTG0WX8MF0CUpLh+DBeXmJ3Xzve/IGLdZmw==
"@nodelib/fs.scandir@2.1.3":
version "2.1.3"
@ -5664,8 +5664,10 @@ next-tick@~1.0.0:
resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
"next@file:../next.js/packages/next":
version "9.5.6-canary.11"
next@^9.5.6-canary.12:
version "9.5.6-canary.12"
resolved "https://registry.yarnpkg.com/next/-/next-9.5.6-canary.12.tgz#84c8c3202ae09b0fe2ca12254931eb43501b5aee"
integrity sha512-JkOoQnMmJw/so0A3WnYSw3/XOnVGg/unUGcYsDBme0mkX8d9ooO/xC7QI01V3BW9A62txusoFMUxFjFrymGDiQ==
dependencies:
"@ampproject/toolbox-optimizer" "2.7.0-alpha.1"
"@babel/code-frame" "7.10.4"
@ -5686,10 +5688,10 @@ next-tick@~1.0.0:
"@babel/runtime" "7.11.2"
"@babel/types" "7.11.5"
"@hapi/accept" "5.0.1"
"@next/env" "9.5.6-canary.11"
"@next/polyfill-module" "9.5.6-canary.11"
"@next/react-dev-overlay" "9.5.6-canary.11"
"@next/react-refresh-utils" "9.5.6-canary.11"
"@next/env" "9.5.6-canary.12"
"@next/polyfill-module" "9.5.6-canary.12"
"@next/react-dev-overlay" "9.5.6-canary.12"
"@next/react-refresh-utils" "9.5.6-canary.12"
ast-types "0.13.2"
babel-plugin-transform-define "2.0.0"
babel-plugin-transform-react-remove-prop-types "0.4.24"