mirror of
https://github.com/vercel/commerce.git
synced 2025-05-18 23:46:58 +00:00
merge-ppr-branch-into-narai-commerce
This commit is contained in:
Sol Irvine
parent
12bcdd8a3c
commit
2a52c4920c
Binary file not shown.
BIN
.yarn/cache/@headlessui-react-npm-1.7.17-c3f120aed0-0cdb67747e.zip
vendored
Normal file
BIN
.yarn/cache/@headlessui-react-npm-1.7.17-c3f120aed0-0cdb67747e.zip
vendored
Normal file
Binary file not shown.
@ -1,5 +1,3 @@
|
||||
import { Suspense } from 'react';
|
||||
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
return <Suspense>{children}</Suspense>;
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
@ -5,12 +5,8 @@ import Navbar from 'components/layout/navbar';
|
||||
import { getCart, getPage, getProduct } from 'lib/shopify';
|
||||
import { Product } from 'lib/shopify/types';
|
||||
import { cookies } from 'next/headers';
|
||||
import { Suspense } from 'react';
|
||||
import AboutNaraiDetail from './about-narai-detail';
|
||||
|
||||
export const runtime = 'edge';
|
||||
export const revalidate = 43200; // 12 hours in seconds
|
||||
|
||||
const { SITE_NAME } = process.env;
|
||||
|
||||
export const metadata = {
|
||||
@ -43,9 +39,7 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
|
||||
<AboutNaraiDetail awards={awardsPage.body} />
|
||||
</div>
|
||||
|
||||
<Suspense>
|
||||
<Footer cart={cart} />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
93
app/[locale]/add-to-cart-ppr.tsx
Normal file
93
app/[locale]/add-to-cart-ppr.tsx
Normal file
@ -0,0 +1,93 @@
|
||||
'use client';
|
||||
|
||||
import { PlusIcon } from '@heroicons/react/24/outline';
|
||||
import clsx from 'clsx';
|
||||
import { addItem } from 'components/cart/actions';
|
||||
import LoadingDots from 'components/loading-dots';
|
||||
import { ProductVariant } from 'lib/shopify/types';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import React from 'react';
|
||||
import { useFormState, useFormStatus } from 'react-dom';
|
||||
|
||||
function SubmitButton({
|
||||
availableForSale,
|
||||
selectedVariantId
|
||||
}: {
|
||||
availableForSale: boolean;
|
||||
selectedVariantId: string | undefined;
|
||||
}) {
|
||||
const { pending } = useFormStatus();
|
||||
const buttonClasses =
|
||||
'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white';
|
||||
const disabledClasses = 'cursor-not-allowed opacity-60 hover:opacity-60';
|
||||
|
||||
if (!availableForSale) {
|
||||
return (
|
||||
<button aria-disabled className={clsx(buttonClasses, disabledClasses)}>
|
||||
Out Of Stock
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
if (!selectedVariantId) {
|
||||
return (
|
||||
<button
|
||||
aria-label="Please select an option"
|
||||
aria-disabled
|
||||
className={clsx(buttonClasses, disabledClasses)}
|
||||
>
|
||||
<div className="absolute left-0 ml-4">
|
||||
<PlusIcon className="h-5" />
|
||||
</div>
|
||||
Add To Cart
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={(e: React.FormEvent<HTMLButtonElement>) => {
|
||||
if (pending) e.preventDefault();
|
||||
}}
|
||||
aria-label="Add to cart"
|
||||
aria-disabled={pending}
|
||||
className={clsx(buttonClasses, {
|
||||
'hover:opacity-90': true,
|
||||
disabledClasses: pending
|
||||
})}
|
||||
>
|
||||
<div className="absolute left-0 ml-4">
|
||||
{pending ? <LoadingDots className="mb-3 bg-white" /> : <PlusIcon className="h-5" />}
|
||||
</div>
|
||||
Add To Cart
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function AddToCart({
|
||||
variants,
|
||||
availableForSale
|
||||
}: {
|
||||
variants: ProductVariant[];
|
||||
availableForSale: boolean;
|
||||
}) {
|
||||
const [message, formAction] = useFormState(addItem, null);
|
||||
const searchParams = useSearchParams();
|
||||
const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
|
||||
const variant = variants.find((variant: ProductVariant) =>
|
||||
variant.selectedOptions.every(
|
||||
(option) => option.value === searchParams.get(option.name.toLowerCase())
|
||||
)
|
||||
);
|
||||
const selectedVariantId = variant?.id || defaultVariantId;
|
||||
const actionWithVariant = formAction.bind(null, selectedVariantId);
|
||||
|
||||
return (
|
||||
<form action={actionWithVariant}>
|
||||
<SubmitButton availableForSale={availableForSale} selectedVariantId={selectedVariantId} />
|
||||
<p aria-live="polite" className="sr-only" role="status">
|
||||
{message}
|
||||
</p>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@ -1,5 +1,3 @@
|
||||
import { Suspense } from 'react';
|
||||
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
return <Suspense>{children}</Suspense>;
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
@ -5,12 +5,8 @@ import Navbar from 'components/layout/navbar';
|
||||
import { getCart, getProduct } from 'lib/shopify';
|
||||
import { Product } from 'lib/shopify/types';
|
||||
import { cookies } from 'next/headers';
|
||||
import { Suspense } from 'react';
|
||||
import SagyobarDetail from './sagyobar-detail';
|
||||
|
||||
export const runtime = 'edge';
|
||||
export const revalidate = 43200; // 12 hours in seconds
|
||||
|
||||
const { SITE_NAME } = process.env;
|
||||
|
||||
export const metadata = {
|
||||
@ -41,9 +37,7 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
|
||||
<SagyobarDetail />
|
||||
</div>
|
||||
|
||||
<Suspense>
|
||||
<Footer cart={cart} />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import { Suspense } from 'react';
|
||||
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
return <Suspense>{children}</Suspense>;
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
@ -5,12 +5,8 @@ import Navbar from 'components/layout/navbar';
|
||||
import { getCart, getProduct } from 'lib/shopify';
|
||||
import { Product } from 'lib/shopify/types';
|
||||
import { cookies } from 'next/headers';
|
||||
import { Suspense } from 'react';
|
||||
import CompanyDetail from './company-detail';
|
||||
|
||||
export const runtime = 'edge';
|
||||
export const revalidate = 43200; // 12 hours in seconds
|
||||
|
||||
const { SITE_NAME } = process.env;
|
||||
|
||||
export const metadata = {
|
||||
@ -41,9 +37,7 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
|
||||
<CompanyDetail />
|
||||
</div>
|
||||
|
||||
<Suspense>
|
||||
<Footer cart={cart} />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import { Suspense } from 'react';
|
||||
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
return <Suspense>{children}</Suspense>;
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
@ -5,12 +5,8 @@ import Navbar from 'components/layout/navbar';
|
||||
import { getCart, getProduct } from 'lib/shopify';
|
||||
import { Product } from 'lib/shopify/types';
|
||||
import { cookies } from 'next/headers';
|
||||
import { Suspense } from 'react';
|
||||
import ConceptDetail from './concept-detail';
|
||||
|
||||
export const runtime = 'edge';
|
||||
export const revalidate = 43200; // 12 hours in seconds
|
||||
|
||||
const { SITE_NAME } = process.env;
|
||||
|
||||
export const metadata = {
|
||||
@ -41,9 +37,7 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
|
||||
<ConceptDetail />
|
||||
</div>
|
||||
|
||||
<Suspense>
|
||||
<Footer cart={cart} />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -5,12 +5,8 @@ import Navbar from 'components/layout/navbar';
|
||||
import { getCart, getProduct } from 'lib/shopify';
|
||||
import { Product } from 'lib/shopify/types';
|
||||
import { cookies } from 'next/headers';
|
||||
import { Suspense } from 'react';
|
||||
import Disclosures from './disclosures';
|
||||
|
||||
export const runtime = 'edge';
|
||||
export const revalidate = 43200; // 12 hours in seconds
|
||||
|
||||
const { SITE_NAME } = process.env;
|
||||
|
||||
export const metadata = {
|
||||
@ -45,9 +41,7 @@ export default async function DisclosuresPage({
|
||||
<Disclosures />
|
||||
</div>
|
||||
|
||||
<Suspense>
|
||||
<Footer cart={cart} />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,106 +0,0 @@
|
||||
import { Lato, Noto_Serif_JP } from 'next/font/google';
|
||||
import localFont from 'next/font/local';
|
||||
import { ReactNode, Suspense } from 'react';
|
||||
|
||||
import { SupportedLocale } from 'components/layout/navbar/language-control';
|
||||
import { NextIntlClientProvider } from 'next-intl';
|
||||
import { notFound } from 'next/navigation';
|
||||
import Analytics from './analytics';
|
||||
import './globals.css';
|
||||
|
||||
const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
|
||||
const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
|
||||
? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
|
||||
: 'http://localhost:3000';
|
||||
|
||||
export const metadata = {
|
||||
metadataBase: new URL(baseUrl),
|
||||
title: {
|
||||
default: SITE_NAME!,
|
||||
template: `%s | ${SITE_NAME}`
|
||||
},
|
||||
robots: {
|
||||
follow: true,
|
||||
index: true
|
||||
},
|
||||
...(TWITTER_CREATOR &&
|
||||
TWITTER_SITE && {
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
creator: TWITTER_CREATOR,
|
||||
site: TWITTER_SITE
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
// Font files can be colocated inside of `app`
|
||||
const cinzel = localFont({
|
||||
src: '../fonts/Cinzel-Regular.ttf',
|
||||
display: 'swap',
|
||||
variable: '--font-cinzel'
|
||||
});
|
||||
|
||||
const alpina = localFont({
|
||||
src: [
|
||||
{
|
||||
path: '../fonts/GT-Alpina-Regular-Trial.woff2',
|
||||
weight: '400',
|
||||
style: 'normal'
|
||||
},
|
||||
{
|
||||
path: '../fonts/GT-Alpina-Bold-Trial.woff2',
|
||||
weight: '700',
|
||||
style: 'normal'
|
||||
}
|
||||
],
|
||||
variable: '--font-alpina'
|
||||
});
|
||||
|
||||
const lato = Lato({
|
||||
subsets: ['latin'],
|
||||
display: 'swap',
|
||||
weight: ['300'],
|
||||
variable: '--font-lato'
|
||||
});
|
||||
|
||||
const noto = Noto_Serif_JP({
|
||||
subsets: ['latin'],
|
||||
display: 'swap',
|
||||
weight: ['200', '400', '600'],
|
||||
variable: '--font-noto'
|
||||
});
|
||||
|
||||
export function generateStaticParams() {
|
||||
return [{ locale: 'ja' }, { locale: 'en' }];
|
||||
}
|
||||
|
||||
export default async function RootLayout({
|
||||
children,
|
||||
params
|
||||
}: {
|
||||
children: ReactNode;
|
||||
params: { locale?: SupportedLocale };
|
||||
}) {
|
||||
let messages;
|
||||
try {
|
||||
messages = (await import(`../../messages/${params?.locale}.json`)).default;
|
||||
} catch (error) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<html
|
||||
lang={params.locale}
|
||||
className={`${cinzel.variable} ${alpina.variable} ${noto.variable} ${lato.variable}`}
|
||||
>
|
||||
<body className="bg-dark text-white selection:bg-green-800 selection:text-green-400">
|
||||
<NextIntlClientProvider locale={params?.locale} messages={messages}>
|
||||
<Suspense>
|
||||
<Analytics />
|
||||
<main>{children}</main>
|
||||
</Suspense>
|
||||
</NextIntlClientProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@ -1,7 +1,6 @@
|
||||
import OpengraphImage from 'components/opengraph-image';
|
||||
|
||||
export const runtime = 'edge';
|
||||
export const revalidate = 300; // 5 minutes in seconds
|
||||
|
||||
export default async function Image() {
|
||||
return await OpengraphImage();
|
||||
|
||||
@ -24,10 +24,6 @@ import { getCart, getProduct } from 'lib/shopify';
|
||||
import { Product } from 'lib/shopify/types';
|
||||
import { cookies } from 'next/headers';
|
||||
import Image from 'next/image';
|
||||
import { Suspense } from 'react';
|
||||
|
||||
export const runtime = 'edge';
|
||||
export const revalidate = 300; // 5 minutes in seconds
|
||||
|
||||
const { SITE_NAME } = process.env;
|
||||
|
||||
@ -152,9 +148,7 @@ export default async function HomePage({
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Suspense>
|
||||
<Footer cart={cart} promotedItem={promotedItem} />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -5,12 +5,8 @@ import Navbar from 'components/layout/navbar';
|
||||
import { getCart, getProduct } from 'lib/shopify';
|
||||
import { Product } from 'lib/shopify/types';
|
||||
import { cookies } from 'next/headers';
|
||||
import { Suspense } from 'react';
|
||||
import PrivacyPolicy from './privacy-policy';
|
||||
|
||||
export const runtime = 'edge';
|
||||
export const revalidate = 43200; // 12 hours in seconds
|
||||
|
||||
const { SITE_NAME } = process.env;
|
||||
|
||||
export const metadata = {
|
||||
@ -45,9 +41,7 @@ export default async function PrivacyPage({
|
||||
<PrivacyPolicy />
|
||||
</div>
|
||||
|
||||
<Suspense>
|
||||
<Footer cart={cart} />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -4,10 +4,7 @@ import { SupportedLocale } from 'components/layout/navbar/language-control';
|
||||
import Navbar from 'components/layout/navbar';
|
||||
import { getCart } from 'lib/shopify';
|
||||
import { cookies } from 'next/headers';
|
||||
import { ReactNode, Suspense } from 'react';
|
||||
|
||||
export const runtime = 'edge';
|
||||
export const revalidate = 300; // 5 minutes in seconds
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
const { SITE_NAME } = process.env;
|
||||
|
||||
@ -37,9 +34,7 @@ export default async function ProductLayout({
|
||||
<div>
|
||||
<Navbar cart={cart} locale={locale} compact />
|
||||
{children}
|
||||
<Suspense>
|
||||
<Footer cart={cart} />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import type { Metadata } from 'next';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { Suspense } from 'react';
|
||||
|
||||
import { ChevronDoubleRightIcon } from '@heroicons/react/24/outline';
|
||||
import clsx from 'clsx';
|
||||
@ -17,9 +16,7 @@ import { getProduct, getProductRecommendations } from 'lib/shopify';
|
||||
import { Image as MediaImage, Product } from 'lib/shopify/types';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
export const runtime = 'edge';
|
||||
export const revalidate = 300; // 5 minutes in seconds
|
||||
import { Suspense } from 'react';
|
||||
|
||||
export async function generateMetadata({
|
||||
params
|
||||
@ -136,13 +133,17 @@ export default async function ProductPage({
|
||||
</div>
|
||||
|
||||
<div className="max-w-sm">
|
||||
<Suspense>
|
||||
<VariantSelector options={product.options} variants={product.variants} />
|
||||
</Suspense>
|
||||
|
||||
<Suspense>
|
||||
<AddManyToCart
|
||||
quantity={1}
|
||||
variants={product.variants}
|
||||
availableForSale={product.availableForSale}
|
||||
/>
|
||||
</Suspense>
|
||||
</div>
|
||||
|
||||
<div className="border-b border-white/20 pb-6"></div>
|
||||
@ -165,6 +166,7 @@ export default async function ProductPage({
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 px-4 md:grid-cols-2 md:px-0">
|
||||
<Suspense fallback={null}>
|
||||
{!!otherImages &&
|
||||
otherImages?.length > 0 &&
|
||||
otherImages.map((image, index) => {
|
||||
@ -189,6 +191,7 @@ export default async function ProductPage({
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</Suspense>
|
||||
</div>
|
||||
|
||||
{!!product?.lower?.value && (
|
||||
@ -197,9 +200,7 @@ export default async function ProductPage({
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Suspense>
|
||||
<RelatedProducts id={product.id} />
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -6,10 +6,6 @@ import Navbar from 'components/layout/navbar';
|
||||
import { getCart, getProduct } from 'lib/shopify';
|
||||
import { Product } from 'lib/shopify/types';
|
||||
import { cookies } from 'next/headers';
|
||||
import { Suspense } from 'react';
|
||||
|
||||
export const runtime = 'edge';
|
||||
export const revalidate = 300; // 5 minutes in seconds
|
||||
|
||||
const { SITE_NAME } = process.env;
|
||||
|
||||
@ -45,9 +41,7 @@ export default async function ProductPage({
|
||||
<ProductGrid lang={locale} />
|
||||
</div>
|
||||
|
||||
<Suspense>
|
||||
<Footer cart={cart} />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
import { Suspense } from 'react';
|
||||
|
||||
export const revalidate = 300; // 5 minutes in seconds
|
||||
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
return <Suspense>{children}</Suspense>;
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
import OpengraphImage from 'components/opengraph-image';
|
||||
import { getPage } from 'lib/shopify';
|
||||
|
||||
export const runtime = 'edge';
|
||||
export const revalidate = 300; // 5 minutes in seconds
|
||||
|
||||
export default async function Image({ params }: { params: { page: string } }) {
|
||||
const page = await getPage({ handle: params.page });
|
||||
const title = page.seo?.title || page.title;
|
||||
|
||||
@ -8,11 +8,8 @@ import { getCart, getPage, getProduct } from 'lib/shopify';
|
||||
import { Product } from 'lib/shopify/types';
|
||||
import { cookies } from 'next/headers';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { Suspense } from 'react';
|
||||
import ShopsNav from './shops-nav';
|
||||
|
||||
export const revalidate = 300; // 5 minutes in seconds
|
||||
|
||||
export async function generateMetadata({
|
||||
params
|
||||
}: {
|
||||
@ -61,9 +58,7 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
|
||||
<Prose html={page.body as string} />
|
||||
</div>
|
||||
|
||||
<Suspense>
|
||||
<Footer cart={cart} />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -5,10 +5,7 @@ import Navbar from 'components/layout/navbar';
|
||||
import { getCart, getProduct } from 'lib/shopify';
|
||||
import { Product } from 'lib/shopify/types';
|
||||
import { cookies } from 'next/headers';
|
||||
import { ReactNode, Suspense } from 'react';
|
||||
|
||||
export const runtime = 'edge';
|
||||
export const revalidate = 300; // 5 minutes in seconds
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
const { SITE_NAME } = process.env;
|
||||
|
||||
@ -43,9 +40,7 @@ export default async function BlogLayout({
|
||||
<div>
|
||||
<Navbar cart={cart} locale={locale} compact promotedItem={promotedItem} />
|
||||
{children}
|
||||
<Suspense>
|
||||
<Footer cart={cart} />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -8,9 +8,6 @@ import { getBlogArticle } from 'lib/shopify';
|
||||
import { BlogArticle } from 'lib/shopify/types';
|
||||
import Image from 'next/image';
|
||||
|
||||
export const runtime = 'edge';
|
||||
export const revalidate = 300; // 5 minutes in seconds
|
||||
|
||||
export async function generateMetadata({
|
||||
params
|
||||
}: {
|
||||
|
||||
@ -7,10 +7,6 @@ import { BLOG_HANDLE } from 'lib/constants';
|
||||
import { getCart, getProduct } from 'lib/shopify';
|
||||
import { Product } from 'lib/shopify/types';
|
||||
import { cookies } from 'next/headers';
|
||||
import { Suspense } from 'react';
|
||||
|
||||
export const runtime = 'edge';
|
||||
export const revalidate = 300; // 5 minutes in seconds
|
||||
|
||||
const { SITE_NAME } = process.env;
|
||||
|
||||
@ -46,9 +42,7 @@ export default async function StoriesPage({
|
||||
<StoriesDetail handle={BLOG_HANDLE} locale={locale} />
|
||||
</div>
|
||||
|
||||
<Suspense>
|
||||
<Footer cart={cart} />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -5,12 +5,8 @@ import Navbar from 'components/layout/navbar';
|
||||
import { getCart, getProduct } from 'lib/shopify';
|
||||
import { Product } from 'lib/shopify/types';
|
||||
import { cookies } from 'next/headers';
|
||||
import { Suspense } from 'react';
|
||||
import TermsOfUse from './terms-of-use';
|
||||
|
||||
export const runtime = 'edge';
|
||||
export const revalidate = 43200; // 12 hours in seconds
|
||||
|
||||
const { SITE_NAME } = process.env;
|
||||
|
||||
export const metadata = {
|
||||
@ -45,9 +41,7 @@ export default async function TermsPage({
|
||||
<TermsOfUse />
|
||||
</div>
|
||||
|
||||
<Suspense>
|
||||
<Footer cart={cart} />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
import Navbar from 'components/layout/navbar';
|
||||
import { GeistSans } from 'geist/font/sans';
|
||||
import { ensureStartsWith } from 'lib/utils';
|
||||
import { Lato, Noto_Serif_JP } from 'next/font/google';
|
||||
import localFont from 'next/font/local';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
import { SupportedLocale } from 'components/layout/navbar/language-control';
|
||||
import { NextIntlClientProvider } from 'next-intl';
|
||||
import { notFound } from 'next/navigation';
|
||||
import Analytics from './[locale]/analytics';
|
||||
import './globals.css';
|
||||
|
||||
const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
|
||||
const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
|
||||
? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
|
||||
: 'http://localhost:3000';
|
||||
const twitterCreator = TWITTER_CREATOR ? ensureStartsWith(TWITTER_CREATOR, '@') : undefined;
|
||||
const twitterSite = TWITTER_SITE ? ensureStartsWith(TWITTER_SITE, 'https://') : undefined;
|
||||
|
||||
export const metadata = {
|
||||
metadataBase: new URL(baseUrl),
|
||||
@ -21,22 +23,81 @@ export const metadata = {
|
||||
follow: true,
|
||||
index: true
|
||||
},
|
||||
...(twitterCreator &&
|
||||
twitterSite && {
|
||||
...(TWITTER_CREATOR &&
|
||||
TWITTER_SITE && {
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
creator: twitterCreator,
|
||||
site: twitterSite
|
||||
creator: TWITTER_CREATOR,
|
||||
site: TWITTER_SITE
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
export default async function RootLayout({ children }: { children: ReactNode }) {
|
||||
// Font files can be colocated inside of `app`
|
||||
const cinzel = localFont({
|
||||
src: '../fonts/Cinzel-Regular.ttf',
|
||||
display: 'swap',
|
||||
variable: '--font-cinzel'
|
||||
});
|
||||
|
||||
const alpina = localFont({
|
||||
src: [
|
||||
{
|
||||
path: '../fonts/GT-Alpina-Regular-Trial.woff2',
|
||||
weight: '400',
|
||||
style: 'normal'
|
||||
},
|
||||
{
|
||||
path: '../fonts/GT-Alpina-Bold-Trial.woff2',
|
||||
weight: '700',
|
||||
style: 'normal'
|
||||
}
|
||||
],
|
||||
variable: '--font-alpina'
|
||||
});
|
||||
|
||||
const lato = Lato({
|
||||
subsets: ['latin'],
|
||||
display: 'swap',
|
||||
weight: ['300'],
|
||||
variable: '--font-lato'
|
||||
});
|
||||
|
||||
const noto = Noto_Serif_JP({
|
||||
subsets: ['latin'],
|
||||
display: 'swap',
|
||||
weight: ['200', '400', '600'],
|
||||
variable: '--font-noto'
|
||||
});
|
||||
|
||||
export function generateStaticParams() {
|
||||
return [{ locale: 'ja' }, { locale: 'en' }];
|
||||
}
|
||||
|
||||
export default async function RootLayout({
|
||||
children,
|
||||
params
|
||||
}: {
|
||||
children: ReactNode;
|
||||
params: { locale?: SupportedLocale };
|
||||
}) {
|
||||
let messages;
|
||||
try {
|
||||
messages = (await import(`../../messages/${params?.locale}.json`)).default;
|
||||
} catch (error) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<html lang="en" className={GeistSans.variable}>
|
||||
<body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
|
||||
<Navbar />
|
||||
<html
|
||||
lang={params.locale}
|
||||
className={`${cinzel.variable} ${alpina.variable} ${noto.variable} ${lato.variable}`}
|
||||
>
|
||||
<body className="bg-dark text-white selection:bg-green-800 selection:text-green-400">
|
||||
<NextIntlClientProvider locale={params?.locale} messages={messages}>
|
||||
<Analytics />
|
||||
<main>{children}</main>
|
||||
</NextIntlClientProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
20
app/page.tsx
20
app/page.tsx
@ -1,20 +0,0 @@
|
||||
import { Carousel } from 'components/carousel';
|
||||
import { ThreeItemGrid } from 'components/grid/three-items';
|
||||
import Footer from 'components/layout/footer';
|
||||
|
||||
export const metadata = {
|
||||
description: 'High-performance ecommerce store built with Next.js, Vercel, and Shopify.',
|
||||
openGraph: {
|
||||
type: 'website'
|
||||
}
|
||||
};
|
||||
|
||||
export default async function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<ThreeItemGrid />
|
||||
<Carousel />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,138 +0,0 @@
|
||||
import type { Metadata } from 'next';
|
||||
import { notFound } from 'next/navigation';
|
||||
|
||||
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';
|
||||
import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
|
||||
import { getProduct, getProductRecommendations } from 'lib/shopify';
|
||||
import { Image } from 'lib/shopify/types';
|
||||
import Link from 'next/link';
|
||||
import { Suspense } from 'react';
|
||||
|
||||
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 indexable = !product.tags.includes(HIDDEN_PRODUCT_TAG);
|
||||
|
||||
return {
|
||||
title: product.seo.title || product.title,
|
||||
description: product.seo.description || product.description,
|
||||
robots: {
|
||||
index: indexable,
|
||||
follow: indexable,
|
||||
googleBot: {
|
||||
index: indexable,
|
||||
follow: indexable
|
||||
}
|
||||
},
|
||||
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="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row lg:gap-8">
|
||||
<div className="h-full w-full basis-full lg:basis-4/6">
|
||||
<Suspense fallback={null}>
|
||||
<Gallery
|
||||
images={product.images.map((image: Image) => ({
|
||||
src: image.url,
|
||||
altText: image.altText
|
||||
}))}
|
||||
/>
|
||||
</Suspense>
|
||||
</div>
|
||||
|
||||
<div className="basis-full lg:basis-2/6">
|
||||
<ProductDescription product={product} />
|
||||
</div>
|
||||
</div>
|
||||
<RelatedProducts id={product.id} />
|
||||
</div>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
<ul className="flex w-full gap-4 overflow-x-auto pt-1">
|
||||
{relatedProducts.map((product) => (
|
||||
<li
|
||||
key={product.handle}
|
||||
className="aspect-square w-full flex-none min-[475px]:w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/5"
|
||||
>
|
||||
<Link className="relative h-full w-full" 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}
|
||||
fill
|
||||
sizes="(min-width: 1024px) 20vw, (min-width: 768px) 25vw, (min-width: 640px) 33vw, (min-width: 475px) 50vw, 100vw"
|
||||
/>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -8,9 +8,6 @@ import Link from 'next/link';
|
||||
import Label from '../label';
|
||||
import { GridTileImage } from './tile';
|
||||
|
||||
export const runtime = 'edge';
|
||||
export const revalidate = 300; // 5 minutes in seconds
|
||||
|
||||
function HomepageProductsItem({ item, priority }: { item: Product; priority?: boolean }) {
|
||||
const size = item?.variants?.[0]?.selectedOptions?.find((option) => option.name === 'Size');
|
||||
const image = item?.variants?.[0]?.image;
|
||||
|
||||
@ -7,7 +7,7 @@ import Logo from 'components/icons/logo';
|
||||
import MenuIcon from 'components/icons/menu';
|
||||
import { useLocale, useTranslations } from 'next-intl';
|
||||
import Link from 'next/link';
|
||||
import { Fragment, useRef, useState } from 'react';
|
||||
import { Fragment, Suspense, useRef, useState } from 'react';
|
||||
import { LanguageControl, SupportedLocale } from '../navbar/language-control';
|
||||
|
||||
export function MenuModal({ scrolled }: { scrolled: boolean }) {
|
||||
@ -72,6 +72,7 @@ export function MenuModal({ scrolled }: { scrolled: boolean }) {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Suspense fallback={null}>
|
||||
<div className="grid h-[calc(100vh-124px)] grid-cols-1 place-content-center">
|
||||
<div className="flex flex-row justify-end">
|
||||
<nav className="flex flex-col space-y-4 px-4 text-right">
|
||||
@ -149,6 +150,7 @@ export function MenuModal({ scrolled }: { scrolled: boolean }) {
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</Suspense>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</div>
|
||||
|
||||
@ -7,6 +7,7 @@ import CartModal from 'components/cart/modal';
|
||||
import LogoNamemark from 'components/icons/namemark';
|
||||
import { Cart, Product } from 'lib/shopify/types';
|
||||
import Link from 'next/link';
|
||||
import { Suspense } from 'react';
|
||||
import { useInView } from 'react-intersection-observer';
|
||||
import { MenuModal } from '../menu/modal';
|
||||
import { LanguageControl, SupportedLocale } from './language-control';
|
||||
@ -84,6 +85,7 @@ export default function Navbar({
|
||||
</Link>
|
||||
</div>
|
||||
<nav className="flex flex-row items-center space-x-4 px-2 md:pt-6">
|
||||
<Suspense fallback={null}>
|
||||
<div className="hidden md:block">
|
||||
<LanguageControl lang={locale} />
|
||||
</div>
|
||||
@ -91,6 +93,7 @@ export default function Navbar({
|
||||
<CartModal cart={cart} promotedItem={promotedItem} />
|
||||
<MenuModal scrolled={!inView} />
|
||||
</div>
|
||||
</Suspense>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,12 +0,0 @@
|
||||
import Footer from 'components/layout/footer';
|
||||
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<>
|
||||
<div className="w-full">
|
||||
<div className="mx-8 max-w-2xl py-20 sm:mx-auto">{children}</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
import OpengraphImage from 'components/opengraph-image';
|
||||
import { getPage } from 'lib/shopify';
|
||||
|
||||
export const runtime = 'edge';
|
||||
export const revalidate = 300; // 5 minutes in seconds
|
||||
|
||||
export default async function Image({ params }: { params: { page: string } }) {
|
||||
const page = await getPage({ handle: params.page });
|
||||
const title = page.seo?.title || page.title;
|
||||
|
||||
return await OpengraphImage({ title });
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
import type { Metadata } from 'next';
|
||||
|
||||
import { SupportedLocale } from 'components/layout/navbar/language-control';
|
||||
import Prose from 'components/prose';
|
||||
import { getPage } from 'lib/shopify';
|
||||
import { notFound } from 'next/navigation';
|
||||
|
||||
export async function generateMetadata({
|
||||
params
|
||||
}: {
|
||||
params: { page: string; locale?: SupportedLocale };
|
||||
}): Promise<Metadata> {
|
||||
const page = await getPage({ handle: params.page, language: params?.locale?.toUpperCase() });
|
||||
|
||||
if (!page) return notFound();
|
||||
|
||||
return {
|
||||
title: page.seo?.title || page.title,
|
||||
description: page.seo?.description || page.bodySummary,
|
||||
openGraph: {
|
||||
publishedTime: page.createdAt,
|
||||
modifiedTime: page.updatedAt,
|
||||
type: 'article'
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default async function Page({
|
||||
params
|
||||
}: {
|
||||
params: { page: string; locale?: SupportedLocale };
|
||||
}) {
|
||||
const page = await getPage({ handle: params.page, language: params?.locale?.toUpperCase() });
|
||||
|
||||
if (!page) return notFound();
|
||||
|
||||
return (
|
||||
<div className="text-white">
|
||||
<h1 className="mb-8 text-5xl font-bold">{page.title}</h1>
|
||||
<Prose className="mb-8" html={page.body as string} />
|
||||
<p className="text-sm italic">
|
||||
{`This document was last updated on ${new Intl.DateTimeFormat(undefined, {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
}).format(new Date(page.updatedAt))}.`}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
import OpengraphImage from 'components/opengraph-image';
|
||||
import { getCollection } from 'lib/shopify';
|
||||
|
||||
export const runtime = 'edge';
|
||||
export const revalidate = 300; // 5 minutes in seconds
|
||||
|
||||
export default async function Image({ params }: { params: { collection: string } }) {
|
||||
const collection = await getCollection({ handle: params.collection });
|
||||
const title = collection?.seo?.title || collection?.title;
|
||||
|
||||
return await OpengraphImage({ title });
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
import { getCollection, getCollectionProducts } from 'lib/shopify';
|
||||
import { Metadata } from 'next';
|
||||
import { notFound } from 'next/navigation';
|
||||
|
||||
import Grid from 'components/grid';
|
||||
import ProductGridItems from 'components/layout/product-grid-items';
|
||||
import { defaultSort, sorting } from 'lib/constants';
|
||||
|
||||
export async function generateMetadata({
|
||||
params
|
||||
}: {
|
||||
params: { collection: string };
|
||||
}): Promise<Metadata> {
|
||||
const collection = await getCollection({ handle: params.collection });
|
||||
|
||||
if (!collection) return notFound();
|
||||
|
||||
return {
|
||||
title: collection.seo?.title || collection.title,
|
||||
description:
|
||||
collection.seo?.description || collection.description || `${collection.title} products`
|
||||
};
|
||||
}
|
||||
|
||||
export default async function CategoryPage({
|
||||
params,
|
||||
searchParams
|
||||
}: {
|
||||
params: { collection: string };
|
||||
searchParams?: { [key: string]: string | string[] | undefined };
|
||||
}) {
|
||||
const { sort } = searchParams as { [key: string]: string };
|
||||
const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
|
||||
const products = await getCollectionProducts({ collection: params.collection, sortKey, reverse });
|
||||
|
||||
return (
|
||||
<section>
|
||||
{products.length === 0 ? (
|
||||
<p className="py-3 text-lg">{`No products found in this collection`}</p>
|
||||
) : (
|
||||
<Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<ProductGridItems products={products} />
|
||||
</Grid>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
import Footer from 'components/layout/footer';
|
||||
import Collections from 'components/layout/search/collections';
|
||||
import FilterList from 'components/layout/search/filter';
|
||||
import { sorting } from 'lib/constants';
|
||||
|
||||
export default function SearchLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<>
|
||||
<div className="mx-auto flex max-w-screen-xl flex-col gap-8 px-4 pb-4 text-black dark:text-white md:flex-row">
|
||||
<div className="order-first w-full flex-none md:max-w-[125px]">
|
||||
<Collections />
|
||||
</div>
|
||||
<div className="order-last min-h-screen w-full md:order-none">{children}</div>
|
||||
<div className="order-none flex-none md:order-last md:w-[125px]">
|
||||
<FilterList list={sorting} title="Sort by" />
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import Grid from 'components/grid';
|
||||
|
||||
export default function Loading() {
|
||||
return (
|
||||
<Grid className="grid-cols-2 lg:grid-cols-3">
|
||||
{Array(12)
|
||||
.fill(0)
|
||||
.map((_, index) => {
|
||||
return (
|
||||
<Grid.Item key={index} className="animate-pulse bg-neutral-100 dark:bg-neutral-900" />
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
@ -1,39 +0,0 @@
|
||||
import Grid from 'components/grid';
|
||||
import ProductGridItems from 'components/layout/product-grid-items';
|
||||
import { defaultSort, sorting } from 'lib/constants';
|
||||
import { getProducts } from 'lib/shopify';
|
||||
|
||||
export const metadata = {
|
||||
title: 'Search',
|
||||
description: 'Search for products in the store.'
|
||||
};
|
||||
|
||||
export default async function SearchPage({
|
||||
searchParams
|
||||
}: {
|
||||
searchParams?: { [key: string]: string | string[] | undefined };
|
||||
}) {
|
||||
const { sort, q: searchValue } = searchParams as { [key: string]: string };
|
||||
const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
|
||||
|
||||
const products = await getProducts({ sortKey, reverse, query: searchValue });
|
||||
const resultsText = products.length > 1 ? 'results' : 'result';
|
||||
|
||||
return (
|
||||
<>
|
||||
{searchValue ? (
|
||||
<p className="mb-4">
|
||||
{products.length === 0
|
||||
? 'There are no products that match '
|
||||
: `Showing ${products.length} ${resultsText} for `}
|
||||
<span className="font-bold">"{searchValue}"</span>
|
||||
</p>
|
||||
) : null}
|
||||
{products.length > 0 ? (
|
||||
<Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<ProductGridItems products={products} />
|
||||
</Grid>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,52 +0,0 @@
|
||||
import { getCollections, getPages, getProducts } from 'lib/shopify';
|
||||
import { validateEnvironmentVariables } from 'lib/utils';
|
||||
import { MetadataRoute } from 'next';
|
||||
|
||||
type Route = {
|
||||
url: string;
|
||||
lastModified: string;
|
||||
};
|
||||
|
||||
const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
|
||||
? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
|
||||
: 'http://localhost:3000';
|
||||
|
||||
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
|
||||
validateEnvironmentVariables();
|
||||
|
||||
const routesMap = [''].map((route) => ({
|
||||
url: `${baseUrl}${route}`,
|
||||
lastModified: new Date().toISOString()
|
||||
}));
|
||||
|
||||
const collectionsPromise = getCollections().then((collections) =>
|
||||
collections.map((collection) => ({
|
||||
url: `${baseUrl}${collection.path}`,
|
||||
lastModified: collection.updatedAt
|
||||
}))
|
||||
);
|
||||
|
||||
const productsPromise = getProducts({}).then((products) =>
|
||||
products.map((product) => ({
|
||||
url: `${baseUrl}/product/${product.handle}`,
|
||||
lastModified: product.updatedAt
|
||||
}))
|
||||
);
|
||||
|
||||
const pagesPromise = getPages({}).then((pages) =>
|
||||
pages.map((page) => ({
|
||||
url: `${baseUrl}/${page.handle}`,
|
||||
lastModified: page.updatedAt
|
||||
}))
|
||||
);
|
||||
|
||||
let fetchedRoutes: Route[] = [];
|
||||
|
||||
try {
|
||||
fetchedRoutes = (await Promise.all([collectionsPromise, productsPromise, pagesPromise])).flat();
|
||||
} catch (error) {
|
||||
throw JSON.stringify(error, null, 2);
|
||||
}
|
||||
|
||||
return [...routesMap, ...fetchedRoutes];
|
||||
}
|
||||
@ -400,6 +400,7 @@ export async function getPage({
|
||||
}): Promise<Page> {
|
||||
const res = await shopifyFetch<ShopifyPageOperation>({
|
||||
query: getPageQuery,
|
||||
cache: 'no-store',
|
||||
variables: { handle, language, country }
|
||||
});
|
||||
|
||||
@ -415,6 +416,7 @@ export async function getPages({
|
||||
}): Promise<Page[]> {
|
||||
const res = await shopifyFetch<ShopifyPagesOperation>({
|
||||
query: getPagesQuery,
|
||||
cache: 'no-store',
|
||||
variables: { language, country }
|
||||
});
|
||||
|
||||
|
||||
10
yarn.lock
10
yarn.lock
@ -183,15 +183,15 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@headlessui/react@npm:^1.7.15":
|
||||
version: 1.7.16
|
||||
resolution: "@headlessui/react@npm:1.7.16"
|
||||
"@headlessui/react@npm:^1.7.17":
|
||||
version: 1.7.17
|
||||
resolution: "@headlessui/react@npm:1.7.17"
|
||||
dependencies:
|
||||
client-only: ^0.0.1
|
||||
peerDependencies:
|
||||
react: ^16 || ^17 || ^18
|
||||
react-dom: ^16 || ^17 || ^18
|
||||
checksum: 85844c96c79796236fa7dec2f1c2f0332d7554d9b785d7b37d9762bb4133088a0cf1334653d6f91c1fe4619960eb569f14ba5f6a962c3305e03f7b362acbabbe
|
||||
checksum: 0cdb67747e7f606f78214dac0b48573247779e70534b4471515c094b74addda173dc6a9847d33aea9c6e6bc151016c034125328953077e32aa7947ebabed91f7
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@ -1352,7 +1352,7 @@ __metadata:
|
||||
version: 0.0.0-use.local
|
||||
resolution: "commerce@workspace:."
|
||||
dependencies:
|
||||
"@headlessui/react": ^1.7.15
|
||||
"@headlessui/react": ^1.7.17
|
||||
"@heroicons/react": ^2.0.18
|
||||
"@tailwindcss/container-queries": ^0.1.1
|
||||
"@tailwindcss/typography": ^0.5.9
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user