mirror of
https://github.com/vercel/commerce.git
synced 2025-05-20 00:16:59 +00:00
Removes need for router or redirect
This commit is contained in:
Michael Novotny
parent
b0feb6d1ac
commit
6bae5081d6
@ -1,143 +0,0 @@
|
|||||||
import type { Metadata } from 'next';
|
|
||||||
import { notFound } from 'next/navigation';
|
|
||||||
import { Suspense } from 'react';
|
|
||||||
|
|
||||||
import { GridTileImage } from 'components/grid/tile';
|
|
||||||
import Footer from 'components/layout/footer';
|
|
||||||
import { Gallery } from 'components/product/gallery';
|
|
||||||
import { ProductDescription } from 'components/product/product-description-redirect';
|
|
||||||
import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
|
|
||||||
import { getProduct, getProductRecommendations } from 'lib/shopify';
|
|
||||||
import { Image } from 'lib/shopify/types';
|
|
||||||
import Link from 'next/link';
|
|
||||||
|
|
||||||
export const runtime = 'edge';
|
|
||||||
|
|
||||||
export async function generateMetadata({
|
|
||||||
params
|
|
||||||
}: {
|
|
||||||
params: { handle: string };
|
|
||||||
}): Promise<Metadata> {
|
|
||||||
const product = await getProduct(params.handle);
|
|
||||||
|
|
||||||
if (!product) return notFound();
|
|
||||||
|
|
||||||
const { url, width, height, altText: alt } = product.featuredImage || {};
|
|
||||||
const hide = !product.tags.includes(HIDDEN_PRODUCT_TAG);
|
|
||||||
|
|
||||||
return {
|
|
||||||
title: product.seo.title || product.title,
|
|
||||||
description: product.seo.description || product.description,
|
|
||||||
robots: {
|
|
||||||
index: hide,
|
|
||||||
follow: hide,
|
|
||||||
googleBot: {
|
|
||||||
index: hide,
|
|
||||||
follow: hide
|
|
||||||
}
|
|
||||||
},
|
|
||||||
openGraph: url
|
|
||||||
? {
|
|
||||||
images: [
|
|
||||||
{
|
|
||||||
url,
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
alt
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
: null
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export default async function ProductPage({ params }: { params: { handle: string } }) {
|
|
||||||
const product = await getProduct(params.handle);
|
|
||||||
|
|
||||||
if (!product) return notFound();
|
|
||||||
|
|
||||||
const productJsonLd = {
|
|
||||||
'@context': 'https://schema.org',
|
|
||||||
'@type': 'Product',
|
|
||||||
name: product.title,
|
|
||||||
description: product.description,
|
|
||||||
image: product.featuredImage.url,
|
|
||||||
offers: {
|
|
||||||
'@type': 'AggregateOffer',
|
|
||||||
availability: product.availableForSale
|
|
||||||
? 'https://schema.org/InStock'
|
|
||||||
: 'https://schema.org/OutOfStock',
|
|
||||||
priceCurrency: product.priceRange.minVariantPrice.currencyCode,
|
|
||||||
highPrice: product.priceRange.maxVariantPrice.amount,
|
|
||||||
lowPrice: product.priceRange.minVariantPrice.amount
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<script
|
|
||||||
type="application/ld+json"
|
|
||||||
dangerouslySetInnerHTML={{
|
|
||||||
__html: JSON.stringify(productJsonLd)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div className="mx-auto max-w-screen-2xl px-4">
|
|
||||||
<div className="rounded-lg border border-neutral-200 bg-white p-8 px-4 dark:border-neutral-800 dark:bg-black md:p-12 lg:grid lg:grid-cols-6">
|
|
||||||
<div className="lg:col-span-4">
|
|
||||||
<Gallery
|
|
||||||
images={product.images.map((image: Image) => ({
|
|
||||||
src: image.url,
|
|
||||||
altText: image.altText
|
|
||||||
}))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="py-6 pr-8 md:pr-12 lg:col-span-2">
|
|
||||||
<ProductDescription product={product} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Suspense>
|
|
||||||
<RelatedProducts id={product.id} />
|
|
||||||
</Suspense>
|
|
||||||
</div>
|
|
||||||
<Suspense>
|
|
||||||
<Footer />
|
|
||||||
</Suspense>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function RelatedProducts({ id }: { id: string }) {
|
|
||||||
const relatedProducts = await getProductRecommendations(id);
|
|
||||||
|
|
||||||
if (!relatedProducts.length) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="py-8">
|
|
||||||
<h2 className="mb-4 text-2xl font-bold">Related Products</h2>
|
|
||||||
<div className="flex w-full gap-4 overflow-x-auto pt-1">
|
|
||||||
{relatedProducts.map((product, i) => {
|
|
||||||
return (
|
|
||||||
<Link
|
|
||||||
key={i}
|
|
||||||
className="w-full flex-none min-[475px]:w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/5"
|
|
||||||
href={`/product/${product.handle}`}
|
|
||||||
>
|
|
||||||
<GridTileImage
|
|
||||||
alt={product.title}
|
|
||||||
label={{
|
|
||||||
title: product.title,
|
|
||||||
amount: product.priceRange.maxVariantPrice.amount,
|
|
||||||
currencyCode: product.priceRange.maxVariantPrice.currencyCode
|
|
||||||
}}
|
|
||||||
src={product.featuredImage?.url}
|
|
||||||
width={600}
|
|
||||||
height={600}
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
import { AddToCart } from 'components/cart/add-to-cart';
|
|
||||||
import Price from 'components/price';
|
|
||||||
import Prose from 'components/prose';
|
|
||||||
import { Product } from 'lib/shopify/types';
|
|
||||||
import { VariantSelector } from './variant-selector-redirect';
|
|
||||||
|
|
||||||
export function ProductDescription({ product }: { product: Product }) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="mb-6 flex flex-col border-b pb-6 dark:border-neutral-700">
|
|
||||||
<h1 className="mb-2 text-5xl font-medium">{product.title}</h1>
|
|
||||||
<div className="mr-auto w-auto rounded-full bg-blue-600 p-2 text-sm text-white">
|
|
||||||
<Price
|
|
||||||
amount={product.priceRange.maxVariantPrice.amount}
|
|
||||||
currencyCode={product.priceRange.maxVariantPrice.currencyCode}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<VariantSelector options={product.options} variants={product.variants} />
|
|
||||||
|
|
||||||
{product.descriptionHtml ? (
|
|
||||||
<Prose
|
|
||||||
className="mb-6 text-sm leading-tight dark:text-white/[60%]"
|
|
||||||
html={product.descriptionHtml}
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
<AddToCart variants={product.variants} availableForSale={product.availableForSale} />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,141 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import clsx from 'clsx';
|
|
||||||
import { ProductOption, ProductVariant } from 'lib/shopify/types';
|
|
||||||
import { createUrl } from 'lib/utils';
|
|
||||||
import Link from 'next/link';
|
|
||||||
import { redirect, usePathname, 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 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);
|
|
||||||
|
|
||||||
console.log('currentUrl', currentUrl);
|
|
||||||
console.log('selectedVariantUrl', selectedVariantUrl);
|
|
||||||
if (currentUrl !== selectedVariantUrl) {
|
|
||||||
console.log('CHANGING URL!!! -- redirect');
|
|
||||||
redirect(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';
|
|
||||||
const dynamicProps = {
|
|
||||||
...(isAvailableForSale && { scroll: false })
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DynamicTag
|
|
||||||
key={value}
|
|
||||||
aria-disabled={!isAvailableForSale}
|
|
||||||
href={optionUrl}
|
|
||||||
title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
|
|
||||||
className={clsx(
|
|
||||||
'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm dark:border-neutral-800 dark:bg-neutral-900',
|
|
||||||
{
|
|
||||||
'cursor-default ring-2 ring-blue-600': isActive,
|
|
||||||
'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-blue-600 ':
|
|
||||||
!isActive && isAvailableForSale,
|
|
||||||
'relative z-10 cursor-not-allowed overflow-hidden bg-neutral-100 text-neutral-500 ring-1 ring-neutral-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-neutral-300 before:transition-transform dark:bg-neutral-900 dark:text-neutral-400 dark:ring-neutral-700 before:dark:bg-neutral-700':
|
|
||||||
!isAvailableForSale
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
{...dynamicProps}
|
|
||||||
>
|
|
||||||
{value}
|
|
||||||
</DynamicTag>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</dd>
|
|
||||||
</dl>
|
|
||||||
));
|
|
||||||
}
|
|
||||||
@ -4,17 +4,12 @@ import clsx from 'clsx';
|
|||||||
import { ProductOption, ProductVariant } from 'lib/shopify/types';
|
import { ProductOption, ProductVariant } from 'lib/shopify/types';
|
||||||
import { createUrl } from 'lib/utils';
|
import { createUrl } from 'lib/utils';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
|
import { usePathname, useSearchParams } from 'next/navigation';
|
||||||
|
|
||||||
type ParamsMap = {
|
type Combination = {
|
||||||
[key: string]: string; // ie. { color: 'Red', size: 'Large', ... }
|
|
||||||
};
|
|
||||||
|
|
||||||
type OptimizedVariant = {
|
|
||||||
id: string;
|
id: string;
|
||||||
availableForSale: boolean;
|
availableForSale: boolean;
|
||||||
params: URLSearchParams;
|
[key: string]: string | boolean; // ie. { color: 'Red', size: 'Large', ... }
|
||||||
[key: string]: string | boolean | URLSearchParams; // ie. { color: 'Red', size: 'Large', ... }
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export function VariantSelector({
|
export function VariantSelector({
|
||||||
@ -25,8 +20,7 @@ export function VariantSelector({
|
|||||||
variants: ProductVariant[];
|
variants: ProductVariant[];
|
||||||
}) {
|
}) {
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const currentParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
const router = useRouter();
|
|
||||||
const hasNoOptionsOrJustOneOption =
|
const hasNoOptionsOrJustOneOption =
|
||||||
!options.length || (options.length === 1 && options[0]?.values.length === 1);
|
!options.length || (options.length === 1 && options[0]?.values.length === 1);
|
||||||
|
|
||||||
@ -34,81 +28,55 @@ export function VariantSelector({
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Discard any unexpected options or values from url and create params map.
|
const combinations: Combination[] = variants.map((variant) => ({
|
||||||
const paramsMap: ParamsMap = Object.fromEntries(
|
id: variant.id,
|
||||||
Array.from(currentParams.entries()).filter(([key, value]) =>
|
availableForSale: variant.availableForSale,
|
||||||
options.find((option) => option.name.toLowerCase() === key && option.values.includes(value))
|
// Adds key / value pairs for each variant (ie. "color": "Black" and "size": 'M").
|
||||||
|
...variant.selectedOptions.reduce(
|
||||||
|
(accumulator, option) => ({ ...accumulator, [option.name.toLowerCase()]: option.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);
|
|
||||||
|
|
||||||
console.log('currentUrl', currentUrl);
|
|
||||||
console.log('selectedVariantUrl', selectedVariantUrl);
|
|
||||||
if (currentUrl !== selectedVariantUrl) {
|
|
||||||
console.log('CHANGING URL!!! -- router.replace');
|
|
||||||
router.replace(selectedVariantUrl);
|
|
||||||
}
|
|
||||||
|
|
||||||
return options.map((option) => (
|
return options.map((option) => (
|
||||||
<dl className="mb-8" key={option.id}>
|
<dl className="mb-8" key={option.id}>
|
||||||
<dt className="mb-4 text-sm uppercase tracking-wide">{option.name}</dt>
|
<dt className="mb-4 text-sm uppercase tracking-wide">{option.name}</dt>
|
||||||
<dd className="flex flex-wrap gap-3">
|
<dd className="flex flex-wrap gap-3">
|
||||||
{option.values.map((value) => {
|
{option.values.map((value) => {
|
||||||
// Base option params on selected variant params.
|
const optionNameLowerCase = option.name.toLowerCase();
|
||||||
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);
|
// Base option params on current params so we can preserve any other param state in the url.
|
||||||
|
const optionSearchParams = new URLSearchParams(searchParams.toString());
|
||||||
|
|
||||||
// The option is active if it in the url params.
|
// Update the option params using the current option to reflect how the url *would* change,
|
||||||
const isActive = selectedVariantParams.get(option.name.toLowerCase()) === value;
|
// if the option was clicked.
|
||||||
|
optionSearchParams.set(optionNameLowerCase, value);
|
||||||
|
const optionUrl = createUrl(pathname, optionSearchParams);
|
||||||
|
|
||||||
// The option is available for sale if it fully matches the variant in the option's url params.
|
// In order to determine if an option is available for sale, we need to:
|
||||||
// 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
|
// 1. Filter out all other param state
|
||||||
// disable combinations that are not possible.
|
// 2. Filter out invalid options
|
||||||
const isAvailableForSale = optimizedVariants.find((a) =>
|
// 3. Check if the option combination is available for sale
|
||||||
Array.from(optionParams.entries()).every(([key, value]) => a[key] === value)
|
//
|
||||||
)?.availableForSale;
|
// This is the "magic" that will cross check possible variant combinations and preemptively
|
||||||
|
// disable combinations that are not available. For example, if the color gray is only available in size medium,
|
||||||
|
// then all other sizes should be disabled.
|
||||||
|
const filtered = Array.from(optionSearchParams.entries()).filter(([key, value]) =>
|
||||||
|
options.find(
|
||||||
|
(option) => option.name.toLowerCase() === key && option.values.includes(value)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
const isAvailableForSale = combinations.find((combination) =>
|
||||||
|
filtered.every(
|
||||||
|
([key, value]) => combination[key] === value && combination.availableForSale
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
// The option is active if it's in the url params.
|
||||||
|
const isActive = searchParams.get(optionNameLowerCase) === value;
|
||||||
|
|
||||||
|
// You can't disable a link, so we need to render something that isn't clickable.
|
||||||
const DynamicTag = isAvailableForSale ? Link : 'p';
|
const DynamicTag = isAvailableForSale ? Link : 'p';
|
||||||
const dynamicProps = {
|
const dynamicProps = {
|
||||||
...(isAvailableForSale && { scroll: false })
|
...(isAvailableForSale && { scroll: false })
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user