crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-15 14:06:59 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/[locale]/globals.css
View File

@ -56,6 +56,10 @@ body {
@apply !m-0 !rounded-none !w-12 !h-4 !bg-transparent after:content-[''] after:block after:w-12 after:h-[3px] after:bg-ui-border 2xl:!w-16 2xl:after:w-16;
}
.glider-slide {
@apply max-w-full;
}
.glider-dot.active {
@apply after:!bg-high-contrast;
}

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

36
lib/storm/types/common.ts Normal file
View File

@ -0,0 +1,36 @@
export interface Discount {
/**
* The value of the discount, can be an amount or percentage.
*/
value: number
}
export interface Measurement {
/**
* The measurement's value.
*/
value: number
/**
* The measurement's unit, such as "KILOGRAMS", "GRAMS", "POUNDS" & "OOUNCES".
*/
unit: 'KILOGRAMS' | 'GRAMS' | 'POUNDS' | 'OUNCES'
}
export interface Image {
/**
* The URL of the image.
*/
url: string
/**
* A word or phrase that describes the content of an image.
*/
alt?: string
/**
* The image's width.
*/
width?: number
/**
* The image's height.
*/
height?: number
}

227
lib/storm/types/product.ts Normal file
View File

@ -0,0 +1,227 @@
import { Image } from './common'
export interface ProductPrice {
/**
* The price after all discounts are applied.
*/
value: number
/**
* The currency code for the price. This is a 3-letter ISO 4217 code.
* @example USD
*/
currencyCode?: 'USD' | 'EUR' | 'ARS' | 'GBP' | string
/**
* The retail price of the product. This can be used to mark a product as on sale, when `retailPrice` is higher than the price a.k.a `value`.
*/
retailPrice?: number
}
export interface ProductOption {
__typename?: 'MultipleChoiceOption'
/**
* The unique identifier for the option.
*/
id: string
/**
* The product option’s name.
* @example `Color` or `Size`
*/
displayName: string
/**
* List of option values.
* @example `["Red", "Green", "Blue"]`
*/
values: ProductOptionValues[]
}
export interface ProductOptionValues {
/**
* A string that uniquely identifies the option value.
*/
label: string
/**
* List of hex colors used to display the actual colors in the swatches instead of the name.
*/
hexColors?: string[]
}
export interface ProductVariant {
/**
* The unique identifier for the variant.
*/
id: string
/**
* The SKU (stock keeping unit) associated with the product variant.
*/
sku?: string
/**
* The product variant’s name, or the product's name.
*/
name?: string
/**
* List of product options.
*/
options: ProductOption[]
/**
* The product variant’s price after all discounts are applied.
*/
price?: ProductPrice
/**
* The retail price of the product. This can be used to mark a product as on sale, when `retailPrice` is higher than the `price`.
*/
retailPrice?: ProductPrice
/**
* Indicates if the variant is available for sale.
*/
availableForSale?: boolean
/**
* Whether a customer needs to provide a shipping address when placing an order for the product variant.
*/
requiresShipping?: boolean
/**
* The image associated with the variant.
*/
image?: Image
}
export interface Product {
/**
* The currency for the product.
*/
currencyCode: string
/**
* The title for the product.
*/
title: string
/**
* The unique identifier for the product.
*/
id: string
/**
* The name of the product.
*/
name: string
/**
* Stripped description of the product, single line.
*/
description: string
/**
* The description of the product, complete with HTML formatting.
*/
descriptionHtml?: string
/**
* The SKU (stock keeping unit) associated with the product.
*/
sku?: string
/**
* A human-friendly unique string for the product, automatically generated from its title.
*/
slug?: string
/**
* Relative URL on the storefront for the product.
*/
path?: string
/**
* List of images associated with the product.
*/
images: Image[]
/**
* List of the product’s variants.
*/
variants: ProductVariant[]
/**
* The product's base price. Could be the minimum value, or default variant price.
*/
price: ProductPrice
/**
* List of product's options.
*/
options: ProductOption[]
/**
* The product’s vendor name.
*/
vendor?: string
/**
* The locale version of the product.
*/
locale?: string
}
export interface SearchProductsBody {
/**
* The search query string to filter the products by.
*/
search?: string
/**
* The category ID to filter the products by.
*/
categoryId?: string
/**
* The brand ID to filter the products by.
*/
brandId?: string
/**
* The sort key to sort the products by.
* @example 'trending-desc' | 'latest-desc' | 'price-asc' | 'price-desc'
*/
sort?: string
/**
* The locale code, used to localize the product data (if the provider supports it).
*/
locale?: string
}
/**
* Fetches a list of products based on the given search criteria.
*/
export type SearchProductsHook = {
data: {
/**
* List of products matching the query.
*/
products: Product[]
/**
* Indicates if there are any products matching the query.
*/
found: boolean
}
body: SearchProductsBody
input: SearchProductsBody
fetcherInput: SearchProductsBody
}
/**
* Product API schema
*/
export type ProductsSchema = {
endpoint: {
options: {}
handlers: {
getProducts: SearchProductsHook
}
}
}
/**
* Product operations
*/
export type GetAllProductPathsOperation = {
data: { products: Pick<Product, 'path'>[] }
variables: { first?: number }
}
export type GetAllProductsOperation = {
data: { products: Product[] }
variables: {
relevance?: 'featured' | 'best_selling' | 'newest'
ids?: string[]
first?: number
}
}
export type GetProductOperation = {
data: { product?: Product }
variables: { path: string; slug?: never } | { path?: never; slug: string }
}