forked from crowetic/commerce
Add image component to cart items
This commit is contained in:
parent
dc80358bc6
commit
a02f58bbf2
@ -1,8 +1,10 @@
|
|||||||
|
import { ChangeEvent, useEffect, useState } from 'react'
|
||||||
|
import Image from 'next/image'
|
||||||
import { Trash, Plus, Minus } from '@components/icon'
|
import { Trash, Plus, Minus } from '@components/icon'
|
||||||
import usePrice from '@lib/bigcommerce/use-price'
|
import usePrice from '@lib/bigcommerce/use-price'
|
||||||
import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
|
import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
|
||||||
import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item'
|
import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item'
|
||||||
import { ChangeEvent, useEffect, useState } from 'react'
|
import getPathname from '@lib/get-pathname'
|
||||||
import s from './CartItem.module.css'
|
import s from './CartItem.module.css'
|
||||||
|
|
||||||
const CartItem = ({
|
const CartItem = ({
|
||||||
@ -56,7 +58,7 @@ const CartItem = ({
|
|||||||
return (
|
return (
|
||||||
<li className="flex flex-row space-x-8 py-6">
|
<li className="flex flex-row space-x-8 py-6">
|
||||||
<div className="w-12 h-12 bg-violet relative overflow-hidden">
|
<div className="w-12 h-12 bg-violet relative overflow-hidden">
|
||||||
<img className={s.productImage} src={item.image_url} />
|
<Image src={getPathname(item.image_url)} width={60} height={60} />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 flex flex-col justify-between text-base">
|
<div className="flex-1 flex flex-col justify-between text-base">
|
||||||
<span className="font-bold mb-3">{item.name}</span>
|
<span className="font-bold mb-3">{item.name}</span>
|
||||||
|
@ -2,9 +2,10 @@ import { FC, ReactNode, Component } from 'react'
|
|||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import Image from 'next/image'
|
import Image from 'next/image'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import s from './ProductCard.module.css'
|
|
||||||
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
|
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
|
||||||
|
import getPathname from '@lib/get-pathname'
|
||||||
import { Heart } from '@components/icon'
|
import { Heart } from '@components/icon'
|
||||||
|
import s from './ProductCard.module.css'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
className?: string
|
className?: string
|
||||||
@ -16,11 +17,6 @@ interface Props {
|
|||||||
priority?: boolean
|
priority?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
function getImagePath(imageUrl: string) {
|
|
||||||
const url = new URL(imageUrl)
|
|
||||||
return url.pathname
|
|
||||||
}
|
|
||||||
|
|
||||||
const ProductCard: FC<Props> = ({
|
const ProductCard: FC<Props> = ({
|
||||||
className,
|
className,
|
||||||
product: p,
|
product: p,
|
||||||
@ -29,7 +25,7 @@ const ProductCard: FC<Props> = ({
|
|||||||
imgHeight,
|
imgHeight,
|
||||||
priority,
|
priority,
|
||||||
}) => {
|
}) => {
|
||||||
const src = getImagePath(p.images.edges?.[0]?.node.urlOriginal!)
|
const src = getPathname(p.images.edges?.[0]?.node.urlOriginal!)
|
||||||
|
|
||||||
if (variant === 'slim') {
|
if (variant === 'slim') {
|
||||||
return (
|
return (
|
||||||
|
3
lib/get-pathname.ts
Normal file
3
lib/get-pathname.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export default function getPathname(url: string) {
|
||||||
|
return new URL(url).pathname
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user