crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Work with displaying content

Browse Source
This commit is contained in:
Henrik Larsson
2023-05-03 23:16:19 +02:00
parent 603bd2b880
commit a9ad63d056
14 changed files with 421 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/grid/tile.tsx
View File

@@ -1,7 +1,7 @@
import clsx from 'clsx';
import Image from 'next/image';
import Price from 'components/price';
import Price from 'components/product/price';
export function GridTileImage({
isInteractive = true,

2
components/product/add-to-cart.tsx
View File

@@ -4,7 +4,7 @@ import clsx from 'clsx';
import { useRouter, useSearchParams } from 'next/navigation';
import { useEffect, useState, useTransition } from 'react';
import LoadingDots from 'components/loading-dots';
import LoadingDots from 'components/ui/loading-dots';
import { ProductVariant } from 'lib/shopify/types';
export function AddToCart({

6
components/product/price.tsx
View File

@@ -1,17 +1,19 @@
const Price = ({
amount,
currencyCode = 'USD',
currencyCode,
...props
}: {
amount: string;
currencyCode: string;
currencyCode: string | 'SEK' | 'GPB';
} & React.ComponentProps<'p'>) => (
<p suppressHydrationWarning={true} {...props}>
{`${new Intl.NumberFormat(undefined, {
style: 'currency',
currency: currencyCode,
currencyDisplay: 'narrowSymbol'
}).format(parseFloat(amount))} ${currencyCode}`}
</p>
);

2
components/ui/blurb-section/blurb-section.tsx
View File

@@ -1,3 +1,5 @@
'use client'
import {
CarouselItemProps as ItemProps,
CarouselProps as Props,

3
components/ui/card/index.tsx
View File

@@ -1 +1,2 @@
export { default } from './Card'
export { default } from './card';

6
components/ui/carousel/carousel.tsx
View File

@@ -12,7 +12,7 @@ export interface CarouselItemProps {
export const CarouselItem: React.FC<CarouselItemProps> = ({
children,
}: CarouselItemProps) => {
return <div className="">{children}</div>
return <>{children}</>
}
export interface CarouselProps {
@@ -39,7 +39,7 @@ export const Carousel: React.FC<CarouselProps> = ({
return (
<div className="flex flex-col">
<Glider
className={`flex w-full relative ${gliderClasses}`}
className={`flex !w-full relative ${gliderClasses}`}
draggable
slidesToShow={slidesToShow}
scrollLock
@@ -51,7 +51,7 @@ export const Carousel: React.FC<CarouselProps> = ({
responsive={[responsive]}
skipTrack
>
<div className={`flex w-full ${gliderItemWrapperClasses} `}>
<div className={`flex ${gliderItemWrapperClasses} `}>
{React.Children.map(children, (child) => {
return React.cloneElement(child)
})}

3
components/ui/filtered-product-list/filtered-product-list.tsx
View File

@@ -25,8 +25,7 @@ const FilteredProductList = ({ title, products, itemsToShow }: SliderProps) => {
)}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{products.slice(0, itemsToShow).map((product: any, index: number) => (
<span>Product</span>
// <ProductCard key={`${product.id}-${index}`} product={product} />
<ProductCard key={`${product.id}-${index}`} product={product} />
))}
</div>
</div>

110
components/ui/product-card/product-card.tsx
View File

@@ -1,79 +1,81 @@
'use client'
import Price from 'components/product/price'
import Text from 'components/ui/text'
import type { Product } from 'lib/storm/types/product'
import { cn } from 'lib/utils'
import { FC } from 'react'
// import type { Product } from '@commerce/types/product'
import dynamic from 'next/dynamic'
// import usePrice from '@framework/product/use-price'
import Link from 'next/link'
import { FC } from 'react'
const WishlistButton = dynamic(
() => import('components/ui/wishlist-button')
)
// const WishlistButton = dynamic(
// () => import('@components/wishlist/WishlistButton')
// )
const ProductTag = dynamic(() => import('components/ui/product-tag'))
const SanityImage = dynamic(() => import('components/ui/sanity-image'))
interface Props {
className?: string
// product: Product
product: Product
variant?: 'default'
}
const ProductCard: FC<Props> = ({
// product,
product,
className,
variant = 'default',
}) => {
// const { price } = usePrice({
// amount: product.price.value,
// baseAmount: product.price.retailPrice,
// currencyCode: product.price.currencyCode!,
// })
const rootClassName = cn(
'w-full min-w-0 grow-0 shrink-0 group relative box-border overflow-hidden transition-transform ease-linear basis-[50%]',
'w-full group relative overflow-hidden transition-transform ease-linear',
className
)
return (
<>Produyct</>
// <Link
// href={`${product.slug}`}
// className={rootClassName}
// aria-label={product.name}
// locale={product.locale}
// >
// {variant === 'default' && (
// <>
// <div className={'flex flex-col flex-1 justify-center w-full h-full'}>
// {/* {process.env.COMMERCE_WISHLIST_ENABLED && (
// <WishlistButton
// className={'top-4 right-4 z-10 absolute'}
// productId={product.id}
// variant={
// product?.variants ? (product.variants[0] as any) : null
// }
// />
// )} */}
// {/* <div className="w-full h-full aspect-square overflow-hidden relative">
// {product?.images && (
// <SanityImage
// image={product?.images[0]}
// alt={product.name || 'Product Image'}
// width={400}
// height={400}
// sizes="(max-width: 1024px) 50vw, 20vw"
// />
// )}
// </div> */}
// <ProductTag
// className="mt-2 lg:mt-3"
// name={product.title}
// price={`${price}`}
// />
// </div>
// </>
// )}
// </Link>
<Link
href={`${product.slug}`}
className={rootClassName}
aria-label={product.name}
locale={product.locale}
>
{variant === 'default' && (
<div className={'flex flex-col justify-center w-full h-full'}>
<WishlistButton
className={'top-4 right-4 z-10 absolute'}
productId={product.id}
variant={
product?.variants ? (product.variants[0] as any) : null
}
/>
<div className="w-full h-full aspect-square overflow-hidden relative">
{product?.images && (
<SanityImage
image={product?.images[0]}
alt={product.title || 'Product Image'}
width={400}
height={400}
sizes="(max-width: 1024px) 50vw, 20vw"
/>
)}
</div>
<div
className={cn('text-high-contrast flex items-start flex-col', className)}
>
<Text
className="mt-2 lg:mt-3 font-bold"
>
{product.title}
</Text>
<Price
amount={`${product.price.value}`}
currencyCode={product.price.currencyCode ? product.price.currencyCode : 'SEK'}
/>
</div>
</div>
)}
</Link>
)
}

12
components/ui/slider/slider.tsx
View File

@@ -1,5 +1,3 @@
'use client'
import {
CarouselItemProps as ItemProps,
CarouselProps as Props,
@@ -32,7 +30,7 @@ const Slider = ({ products, categories, title, sliderType }: SliderProps) => {
}, [])
return (
<div>
<div className="flex flex-col">
{title ? (
<Text
className="mb-4 px-4 lg:px-8 lg:mb-6 2xl:px-16 2xl:mb-8"
@@ -53,20 +51,18 @@ const Slider = ({ products, categories, title, sliderType }: SliderProps) => {
<Carousel
gliderClasses={'px-4 lg:px-8 2xl:px-16'}
gliderItemWrapperClasses={'space-x-2 lg:space-x-4'}
hasDots={true}
slidesToShow={2.2}
responsive={{
breakpoint: 1024,
settings: {
slidesToShow: 4.5,
slidesToShow: 4.5
},
}}
>
{items.map((item: any, index: number) => (
<CarouselItem key={`${sliderType}-${index}`}>
{item.title}
{/* {sliderType === 'products' && <ProductCard product={item} />}
{sliderType === 'categories' && <CategoryCard category={item} />} */}
{sliderType === 'products' && <ProductCard product={item} />}
{sliderType === 'categories' && <CategoryCard category={item} />}
</CarouselItem>
))}
</Carousel>

1
components/ui/wishlist-button/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from './wishlist-button';

79
components/ui/wishlist-button/wishlist-button.tsx Normal file
View File

@@ -0,0 +1,79 @@
import type { Product, ProductVariant } from 'lib/storm/types/product'
import { cn } from 'lib/utils'
import { Heart } from 'lucide-react'
import { useTranslations } from 'next-intl'
import React, { FC, useState } from 'react'
type Props = {
productId: Product['id']
variant: ProductVariant
} & React.ButtonHTMLAttributes<HTMLButtonElement>
const WishlistButton: FC<Props> = ({
productId,
variant,
className,
...props
}) => {
const [loading, setLoading] = useState(false)
const t = useTranslations('ui.button')
// @ts-ignore Wishlist is not always enabled
// const itemInWishlist = data?.items?.find(
// // @ts-ignore Wishlist is not always enabled
// (item) => item.product_id === productId && item.variant_id === variant.id
// )
const handleWishlistChange = async (e: any) => {
e.preventDefault()
if (loading) return
// A login is required before adding an item to the wishlist
// if (!customer) {
// setModalView('LOGIN_VIEW')
// return openModal()
// }
// setLoading(true)
// try {
// if (itemInWishlist) {
// await removeItem({ id: itemInWishlist.id! })
// } else {
// await addItem({
// productId,
// variantId: variant?.id!,
// })
// }
// setLoading(false)
// } catch (err) {
// setLoading(false)
// }
}
return (
<button
aria-label={t('wishList')}
className={cn(
'w-10 h-10 text-high-contrast bg-app border border-high-contrast flex items-center justify-center font-semibold cursor-pointer text-sm duration-200 ease-in-out transition-[color,background-color,opacity] ',
className
)}
// onClick={handleWishlistChange}
{...props}
>
<Heart
className={cn(
'duration-200 ease-in-out w-5 h-5 transition-[transform,fill] text-current',
{
['fill-low-contrast']: loading,
// ['fill-high-contrast']: itemInWishlist,
}
)}
/>
</button>
)
}
export default WishlistButton