cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Add image component to cart items

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/cart/CartItem/CartItem.tsx
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 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 { ChangeEvent, useEffect, useState } from 'react'
import getPathname from '@lib/get-pathname'
import s from './CartItem.module.css'
const CartItem = ({
@ -56,7 +58,7 @@ const CartItem = ({
return (
<li className="flex flex-row space-x-8 py-6">
<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 className="flex-1 flex flex-col justify-between text-base">
<span className="font-bold mb-3">{item.name}</span>

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

@ -2,9 +2,10 @@ import { FC, ReactNode, Component } from 'react'
import cn from 'classnames'
import Image from 'next/image'
import Link from 'next/link'
import s from './ProductCard.module.css'
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'
interface Props {
className?: string
@ -16,11 +17,6 @@ interface Props {
priority?: boolean
}
function getImagePath(imageUrl: string) {
const url = new URL(imageUrl)
return url.pathname
}
const ProductCard: FC<Props> = ({
className,
product: p,
@ -29,7 +25,7 @@ const ProductCard: FC<Props> = ({
imgHeight,
priority,
}) => {
const src = getImagePath(p.images.edges?.[0]?.node.urlOriginal!)
const src = getPathname(p.images.edges?.[0]?.node.urlOriginal!)
if (variant === 'slim') {
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
}