4
0
forked from crowetic/commerce

Add image component to cart items

This commit is contained in:
Luis Alvarez 2020-10-21 21:41:06 -05:00
parent dc80358bc6
commit a02f58bbf2
3 changed files with 10 additions and 9 deletions

View File

@ -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>

View File

@ -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
View File

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