crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-06-07 16:56:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

update the recommended product squares on the product page to match the product square on the search page

Browse Source
This commit is contained in:
StephDietz 2023-04-19 15:43:55 -05:00
parent e9a26c2935
commit d252c6c014
6 changed files with 859 additions and 809 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/product/[handle]/page.tsx
View File

@ -108,14 +108,16 @@ async function RelatedProducts({ id }: { id: string }) {
<Grid className="grid-cols-2 lg:grid-cols-5"> <Grid className="grid-cols-2 lg:grid-cols-5">
{relatedProducts.map((product) => { {relatedProducts.map((product) => {
return ( return (
<Grid.Item key={product.id} className="animate-fadeIn"> <Grid.Item key={product.handle} className="animate-fadeIn">
<Link <Link className="h-full w-full" href={`/product/${product.handle}`}>
aria-label={product.title}
className="border-gay-300 group relative block aspect-square overflow-hidden border bg-gray-50"
href={`/product/${product.handle}`}
>
<GridTileImage <GridTileImage
alt={product.title} alt={product.title}
labels={{
isSmall: true,
title: product.title,
amount: product.priceRange.maxVariantPrice.amount,
currencyCode: product.priceRange.maxVariantPrice.currencyCode
}}
src={product.featuredImage.url} src={product.featuredImage.url}
width={600} width={600}
height={600} height={600}

2
components/cart/button.tsx
View File

@ -54,7 +54,7 @@ export default function CartButton({
onClick={() => { onClick={() => {
setCartIsOpen(true); setCartIsOpen(true);
}} }}
className="relative top-0 right-0" className="relative right-0 top-0"
data-testid="open-cart" data-testid="open-cart"
> >
<CartIcon quantity={cart.totalQuantity} /> <CartIcon quantity={cart.totalQuantity} />

2
components/grid/tile.tsx
View File

@ -48,7 +48,7 @@ export function GridTileImage({
/> />
) : null} ) : null}
{labels ? ( {labels ? (
<div className="absolute top-0 left-0 w-3/4 text-black dark:text-white"> <div className="absolute left-0 top-0 w-3/4 text-black dark:text-white">
<h3 <h3
data-testid="product-name" data-testid="product-name"
className={clsx( className={clsx(

2
components/layout/footer.tsx
View File

@ -44,7 +44,7 @@ export default async function Footer() {
</a> </a>
</div> </div>
</div> </div>
<div className="flex flex-col items-center justify-between space-y-4 pt-6 pb-10 text-sm md:flex-row"> <div className="flex flex-col items-center justify-between space-y-4 pb-10 pt-6 text-sm md:flex-row">
<p>&copy; 2023 {SITE_NAME}. All rights reserved.</p> <p>&copy; 2023 {SITE_NAME}. All rights reserved.</p>
<div className="flex items-center text-sm text-white dark:text-black"> <div className="flex items-center text-sm text-white dark:text-black">
<span className="text-black dark:text-white">Created by</span> <span className="text-black dark:text-white">Created by</span>

4
components/layout/navbar/search.tsx
View File

@ -32,9 +32,9 @@ export default function Search() {
placeholder="Search for products..." placeholder="Search for products..."
autoComplete="off" autoComplete="off"
defaultValue={searchParams?.get('q') || ''} defaultValue={searchParams?.get('q') || ''}
className="w-full py-2 px-4 text-black dark:bg-black dark:text-gray-100" className="w-full px-4 py-2 text-black dark:bg-black dark:text-gray-100"
/> />
<div className="absolute top-0 right-0 mr-3 flex h-full items-center"> <div className="absolute right-0 top-0 mr-3 flex h-full items-center">
<SearchIcon className="h-5" /> <SearchIcon className="h-5" />
</div> </div>
</form> </form>

1644
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff