crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-15 22:16:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'design-refresh' into remove-tailwind-config-color

Browse Source
This commit is contained in:
Michael Novotny 2023-07-17 17:13:28 -05:00
commit 82cf7c8938
No known key found for this signature in database
6 changed files with 31 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.env.example
View File

@ -1,3 +1,4 @@
COMPANY_NAME="Vercel Inc."
TWITTER_CREATOR="@vercel"
TWITTER_SITE="https://nextjs.org/commerce"
SITE_NAME="Next.js Commerce"

2
README.md
View File

@ -1,4 +1,4 @@
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fcommerce&project-name=commerce&repo-name=commerce&demo-title=Next.js%20Commerce&demo-url=https%3A%2F%2Fdemo.vercel.store&demo-image=https%3A%2F%2Fbigcommerce-demo-asset-ksvtgfvnd.vercel.app%2Fbigcommerce.png&env=SHOPIFY_REVALIDATION_SECRET,SHOPIFY_STOREFRONT_ACCESS_TOKEN,SHOPIFY_STORE_DOMAIN,SITE_NAME,TWITTER_CREATOR,TWITTER_SITE)
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fcommerce&project-name=commerce&repo-name=commerce&demo-title=Next.js%20Commerce&demo-url=https%3A%2F%2Fdemo.vercel.store&demo-image=https%3A%2F%2Fbigcommerce-demo-asset-ksvtgfvnd.vercel.app%2Fbigcommerce.png&env=COMPANY_NAME,SHOPIFY_REVALIDATION_SECRET,SHOPIFY_STORE_DOMAIN,SHOPIFY_STOREFRONT_ACCESS_TOKEN,SITE_NAME,TWITTER_CREATOR,TWITTER_SITE)
# Next.js Commerce

1
components/grid/tile.tsx
View File

@ -36,7 +36,6 @@ export function GridTileImage({
'transition duration-300 ease-in-out hover:scale-105': isInteractive
})}
{...props}
alt={props.title || ''}
/>
) : null}
{labels ? (

8
components/layout/footer.tsx
View File

@ -6,17 +6,18 @@ import LogoSquare from 'components/logo-square';
import { getMenu } from 'lib/shopify';
import { Suspense } from 'react';
const { SITE_NAME } = process.env;
const { COMPANY_NAME, SITE_NAME } = process.env;
export default async function Footer() {
const currentYear = new Date().getFullYear();
const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : '');
const skeleton = 'w-full h-6 animate-pulse rounded bg-neutral-200 dark:bg-neutral-700';
const menu = await getMenu('next-js-frontend-footer-menu');
const copyrightName = COMPANY_NAME || SITE_NAME || '';
return (
<footer className="text-neutral-400 dark:text-neutral-500">
<div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 dark:border-neutral-700 md:flex-row md:gap-12 md:px-0">
<div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 dark:border-neutral-700 md:flex-row md:gap-12 md:px-4 xl:px-0">
<div>
<Link className="flex items-center gap-2 text-black dark:text-white" href="/">
<LogoSquare size="sm" />
@ -51,7 +52,8 @@ export default async function Footer() {
<div className="border-t border-neutral-200 py-6 text-sm dark:border-neutral-700">
<div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-1 md:flex-row md:gap-0">
<p>
&copy; {copyrightDate} {SITE_NAME}. All rights reserved.
&copy; {copyrightDate} {copyrightName}
{copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} All rights reserved.
</p>
<hr className="mx-4 hidden h-4 w-[1px] border-l border-neutral-400 md:inline-block" />
<p>Designed in California</p>

19
components/product/gallery.tsx
View File

@ -6,13 +6,13 @@ import Image from 'next/image';
import { useState } from 'react';
export function Gallery({ images }: { images: { src: string; altText: string }[] }) {
const [currentImage, setCurrentImage] = useState(0);
const [currentImageIndex, setCurrentImageIndex] = useState(0);
function handleNavigate(direction: 'next' | 'previous') {
if (direction === 'next') {
setCurrentImage(currentImage + 1 < images.length ? currentImage + 1 : 0);
setCurrentImageIndex(currentImageIndex + 1 < images.length ? currentImageIndex + 1 : 0);
} else {
setCurrentImage(currentImage === 0 ? images.length - 1 : currentImage - 1);
setCurrentImageIndex(currentImageIndex === 0 ? images.length - 1 : currentImageIndex - 1);
}
}
@ -22,13 +22,14 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
return (
<div className="mr-8 h-full">
<div className="relative mb-12 h-full max-h-[550px] overflow-hidden">
{images[currentImage] && (
{images[currentImageIndex] && (
<Image
className="relative h-full w-full object-contain"
height={600}
width={600}
alt={images[currentImage]?.altText as string}
src={images[currentImage]?.src as string}
alt={images[currentImageIndex]?.altText as string}
src={images[currentImageIndex]?.src as string}
priority={true}
/>
)}
@ -58,16 +59,16 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
{images.length > 1 ? (
<div className="flex items-center justify-center gap-2 overflow-auto py-1">
{images.map((image, index) => {
const isActive = index === currentImage;
const isActive = index === currentImageIndex;
return (
<button
aria-label="Enlarge product image"
key={image.src}
className="h-auto w-20"
onClick={() => setCurrentImage(index)}
onClick={() => setCurrentImageIndex(index)}
>
<GridTileImage
alt={image?.altText}
alt={image.altText}
src={image.src}
width={600}
height={600}

15
lib/shopify/index.ts
View File

@ -23,6 +23,7 @@ import {
Cart,
Collection,
Connection,
Image,
Menu,
Page,
Product,
@ -151,6 +152,18 @@ const reshapeCollections = (collections: ShopifyCollection[]) => {
return reshapedCollections;
};
const reshapeImages = (images: Connection<Image>, productTitle: string) => {
const flattened = removeEdgesAndNodes(images);
return flattened.map((image) => {
const filename = image.url.match(/.*\/(.*)\..*/)[1];
return {
...image,
altText: image.altText || `${productTitle} - ${filename}`
};
});
};
const reshapeProduct = (product: ShopifyProduct, filterHiddenProducts: boolean = true) => {
if (!product || (filterHiddenProducts && product.tags.includes(HIDDEN_PRODUCT_TAG))) {
return undefined;
@ -160,7 +173,7 @@ const reshapeProduct = (product: ShopifyProduct, filterHiddenProducts: boolean =
return {
...rest,
images: removeEdgesAndNodes(images),
images: reshapeImages(images, product.title),
variants: removeEdgesAndNodes(variants)
};
};