mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 20:26:49 +00:00
Next.js Commerce refresh. (#966)
We're making some updates to Next.js Commerce. Everything prior to this commit marks what we're calling [`v1`](https://github.com/vercel/commerce/releases/tag/v1) as a point in time to be able to reference and still use going into the future. The current architecture of Commerce is a multi-vendor, interoperable solution, including:
- [Shopify](https://shopify.vercel.store/)
- [Swell](https://swell.vercel.store/)
- [BigCommerce](https://bigcommerce.vercel.store/)
- [Vendure](https://vendure.vercel.store/)
- [Saleor](https://saleor.vercel.store/)
- [Ordercloud](https://ordercloud.vercel.store/)
- [Spree](https://spree.vercel.store/)
- [Kibo Commerce](https://kibocommerce.vercel.store/)
- [Commerce.js](https://commercejs.vercel.store/)
- [SalesForce Cloud Commerce](https://salesforce-cloud-commerce.vercel.store/)
All features can be toggled on or off, and it's easy to change between commerce providers. To support this, we needed to create a ["commerce metaframework"](d1d9e8c434/packages/commerce/new-provider.md) where providers could confirm to an API spec to add support for Next.js Commerce. While this worked and was successful for `v1`, we have different design goals and ambitions for `v2`.
**What You Need To Know**
- `v1` will not be updated moving forward. If you need to reference `v1`, you will still be able to clone and deploy the version tagged at this release.
- `v2` will be shifting to be a single provider vs. provider agnostic. Other providers are welcome to fork this repository and swap out the underlying `lib/` implementation that connects to the selected commerce provider (Shopify). This architecture was chosen to reduce the surface area of the codebase, remove the intermediate metaframework layer for provider-interoperability, and enable usage with the latest Next.js and React features.
- We will be sharing more about `v2` in the future as we continue to iterate before the marked release.
This commit is contained in:
Lee Robinson
GitHub
74
components/product/add-to-cart.tsx
Normal file
74
components/product/add-to-cart.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { useEffect, useState, useTransition } from 'react';
|
||||
|
||||
import LoadingDots from 'components/loading-dots';
|
||||
import { ProductVariant } from 'lib/shopify/types';
|
||||
|
||||
export function AddToCart({
|
||||
variants,
|
||||
availableForSale
|
||||
}: {
|
||||
variants: ProductVariant[];
|
||||
availableForSale: boolean;
|
||||
}) {
|
||||
const [selectedVariantId, setSelectedVariantId] = useState(variants[0]?.id);
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [adding, setAdding] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const variant = variants.find((variant: ProductVariant) =>
|
||||
variant.selectedOptions.every(
|
||||
(option) => option.value === searchParams.get(option.name.toLowerCase())
|
||||
)
|
||||
);
|
||||
|
||||
if (variant) {
|
||||
setSelectedVariantId(variant.id);
|
||||
}
|
||||
}, [searchParams, variants, setSelectedVariantId]);
|
||||
|
||||
const isMutating = adding || isPending;
|
||||
|
||||
async function handleAdd() {
|
||||
if (!availableForSale) return;
|
||||
|
||||
setAdding(true);
|
||||
|
||||
const response = await fetch(`/api/cart`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
merchandiseId: selectedVariantId
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.error) {
|
||||
alert(data.error);
|
||||
return;
|
||||
}
|
||||
|
||||
setAdding(false);
|
||||
|
||||
startTransition(() => {
|
||||
router.refresh();
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
aria-label="Add item to cart"
|
||||
onClick={handleAdd}
|
||||
className={`${
|
||||
availableForSale ? 'opacity-90 hover:opacity-100' : 'cursor-not-allowed opacity-60'
|
||||
} flex w-full items-center justify-center bg-black p-4 text-sm uppercase tracking-wide text-white dark:bg-white dark:text-black`}
|
||||
>
|
||||
<span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
|
||||
{isMutating ? <LoadingDots className="bg-white dark:bg-black" /> : null}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
99
components/product/gallery.tsx
Normal file
99
components/product/gallery.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
import clsx from 'clsx';
|
||||
import { GridTileImage } from 'components/grid/tile';
|
||||
import ArrowLeftIcon from 'components/icons/arrow-left';
|
||||
|
||||
export function Gallery({
|
||||
title,
|
||||
amount,
|
||||
currencyCode,
|
||||
images
|
||||
}: {
|
||||
title: string;
|
||||
amount: string;
|
||||
currencyCode: string;
|
||||
images: { src: string; altText: string }[];
|
||||
}) {
|
||||
const [currentImage, setCurrentImage] = useState(0);
|
||||
|
||||
function handleNavigate(direction: 'next' | 'previous') {
|
||||
if (direction === 'next') {
|
||||
setCurrentImage(currentImage + 1 < images.length ? currentImage + 1 : 0);
|
||||
} else {
|
||||
setCurrentImage(currentImage === 0 ? images.length - 1 : currentImage - 1);
|
||||
}
|
||||
}
|
||||
|
||||
const buttonClassName =
|
||||
'px-9 cursor-pointer ease-in-and-out duration-200 transition-bg bg-[#7928ca] hover:bg-violetDark';
|
||||
|
||||
return (
|
||||
<div className="h-full">
|
||||
<div className="relative h-full max-h-[600px] overflow-hidden">
|
||||
{images[currentImage] && (
|
||||
<GridTileImage
|
||||
src={images[currentImage]?.src as string}
|
||||
alt={images[currentImage]?.altText as string}
|
||||
width={600}
|
||||
height={600}
|
||||
isInteractive={false}
|
||||
priority={true}
|
||||
background="purple"
|
||||
labels={{
|
||||
title,
|
||||
amount,
|
||||
currencyCode
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{images.length > 1 ? (
|
||||
<div className="absolute bottom-10 right-10 flex h-12 flex-row border border-white text-white shadow-xl dark:border-black dark:text-black">
|
||||
<button
|
||||
aria-label="Previous product image"
|
||||
className={clsx(buttonClassName, 'border-r border-white dark:border-black')}
|
||||
onClick={() => handleNavigate('previous')}
|
||||
>
|
||||
<ArrowLeftIcon className="h-6" />
|
||||
</button>
|
||||
<button
|
||||
aria-label="Next product image"
|
||||
className={clsx(buttonClassName)}
|
||||
onClick={() => handleNavigate('next')}
|
||||
>
|
||||
<ArrowLeftIcon className="h-6 rotate-180" />
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{images.length > 1 ? (
|
||||
<div className="flex">
|
||||
{images.map((image, index) => {
|
||||
const isActive = index === currentImage;
|
||||
return (
|
||||
<button
|
||||
aria-label="Enlarge product image"
|
||||
key={image.src}
|
||||
className="h-full w-1/4"
|
||||
onClick={() => setCurrentImage(index)}
|
||||
>
|
||||
<GridTileImage
|
||||
alt={image.altText}
|
||||
src={image.src}
|
||||
width={600}
|
||||
height={600}
|
||||
background="purple-dark"
|
||||
active={isActive}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
135
components/product/variant-selector.tsx
Normal file
135
components/product/variant-selector.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
'use client';
|
||||
|
||||
import clsx from 'clsx';
|
||||
import { ProductOption, ProductVariant } from 'lib/shopify/types';
|
||||
import { createUrl } from 'lib/utils';
|
||||
import Link from 'next/link';
|
||||
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
|
||||
|
||||
type ParamsMap = {
|
||||
[key: string]: string; // ie. { color: 'Red', size: 'Large', ... }
|
||||
};
|
||||
|
||||
type OptimizedVariant = {
|
||||
id: string;
|
||||
availableForSale: boolean;
|
||||
params: URLSearchParams;
|
||||
[key: string]: string | boolean | URLSearchParams; // ie. { color: 'Red', size: 'Large', ... }
|
||||
};
|
||||
|
||||
export function VariantSelector({
|
||||
options,
|
||||
variants
|
||||
}: {
|
||||
options: ProductOption[];
|
||||
variants: ProductVariant[];
|
||||
}) {
|
||||
const pathname = usePathname();
|
||||
const currentParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
const hasNoOptionsOrJustOneOption =
|
||||
!options.length || (options.length === 1 && options[0]?.values.length === 1);
|
||||
|
||||
if (hasNoOptionsOrJustOneOption) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Discard any unexpected options or values from url and create params map.
|
||||
const paramsMap: ParamsMap = Object.fromEntries(
|
||||
Array.from(currentParams.entries()).filter(([key, value]) =>
|
||||
options.find((option) => option.name.toLowerCase() === key && option.values.includes(value))
|
||||
)
|
||||
);
|
||||
|
||||
// Optimize variants for easier lookups.
|
||||
const optimizedVariants: OptimizedVariant[] = variants.map((variant) => {
|
||||
const optimized: OptimizedVariant = {
|
||||
id: variant.id,
|
||||
availableForSale: variant.availableForSale,
|
||||
params: new URLSearchParams()
|
||||
};
|
||||
|
||||
variant.selectedOptions.forEach((selectedOption) => {
|
||||
const name = selectedOption.name.toLowerCase();
|
||||
const value = selectedOption.value;
|
||||
|
||||
optimized[name] = value;
|
||||
optimized.params.set(name, value);
|
||||
});
|
||||
|
||||
return optimized;
|
||||
});
|
||||
|
||||
// Find the first variant that is:
|
||||
//
|
||||
// 1. Available for sale
|
||||
// 2. Matches all options specified in the url (note that this
|
||||
// could be a partial match if some options are missing from the url).
|
||||
//
|
||||
// If no match (full or partial) is found, use the first variant that is
|
||||
// available for sale.
|
||||
const selectedVariant: OptimizedVariant | undefined =
|
||||
optimizedVariants.find(
|
||||
(variant) =>
|
||||
variant.availableForSale &&
|
||||
Object.entries(paramsMap).every(([key, value]) => variant[key] === value)
|
||||
) || optimizedVariants.find((variant) => variant.availableForSale);
|
||||
|
||||
const selectedVariantParams = new URLSearchParams(selectedVariant?.params);
|
||||
const currentUrl = createUrl(pathname, currentParams);
|
||||
const selectedVariantUrl = createUrl(pathname, selectedVariantParams);
|
||||
|
||||
if (currentUrl !== selectedVariantUrl) {
|
||||
router.replace(selectedVariantUrl);
|
||||
}
|
||||
|
||||
return options.map((option) => (
|
||||
<dl className="mb-8" key={option.id}>
|
||||
<dt className="mb-4 text-sm uppercase tracking-wide">{option.name}</dt>
|
||||
<dd className="flex flex-wrap gap-3">
|
||||
{option.values.map((value) => {
|
||||
// Base option params on selected variant params.
|
||||
const optionParams = new URLSearchParams(selectedVariantParams);
|
||||
// Update the params using the current option to reflect how the url would change.
|
||||
optionParams.set(option.name.toLowerCase(), value);
|
||||
|
||||
const optionUrl = createUrl(pathname, optionParams);
|
||||
|
||||
// The option is active if it in the url params.
|
||||
const isActive = selectedVariantParams.get(option.name.toLowerCase()) === value;
|
||||
|
||||
// The option is available for sale if it fully matches the variant in the option's url params.
|
||||
// It's super important to note that this is the options params, *not* the selected variant's params.
|
||||
// This is the "magic" that will cross check possible future variant combinations and preemptively
|
||||
// disable combinations that are not possible.
|
||||
const isAvailableForSale = optimizedVariants.find((a) =>
|
||||
Array.from(optionParams.entries()).every(([key, value]) => a[key] === value)
|
||||
)?.availableForSale;
|
||||
|
||||
const DynamicTag = isAvailableForSale ? Link : 'p';
|
||||
|
||||
return (
|
||||
<DynamicTag
|
||||
key={value}
|
||||
href={optionUrl}
|
||||
title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
|
||||
className={clsx(
|
||||
'flex h-12 min-w-[48px] items-center justify-center rounded-full px-2 text-sm',
|
||||
{
|
||||
'cursor-default ring-2 ring-black dark:ring-white': isActive,
|
||||
'ring-1 ring-gray-300 transition duration-300 ease-in-out hover:scale-110 hover:bg-gray-100 hover:ring-black dark:ring-gray-700 dark:hover:bg-transparent dark:hover:ring-white':
|
||||
!isActive && isAvailableForSale,
|
||||
'relative z-10 cursor-not-allowed overflow-hidden bg-gray-100 ring-1 ring-gray-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-gray-300 before:transition-transform dark:bg-gray-900 dark:ring-gray-700 before:dark:bg-gray-700':
|
||||
!isAvailableForSale
|
||||
}
|
||||
)}
|
||||
data-testid={isActive ? 'selected-variant' : 'variant'}
|
||||
>
|
||||
{value}
|
||||
</DynamicTag>
|
||||
);
|
||||
})}
|
||||
</dd>
|
||||
</dl>
|
||||
));
|
||||
}
|
||||
Reference in New Issue
Block a user