mirror of
https://github.com/vercel/commerce.git
synced 2025-06-04 23:36:58 +00:00
feat: Shop list working
This commit is contained in:
parent
c1d06e90bb
commit
31ee315cfc
@ -1,5 +1,6 @@
|
||||
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';
|
||||
@ -11,9 +12,9 @@ export const revalidate = 43200; // 12 hours in seconds
|
||||
export async function generateMetadata({
|
||||
params
|
||||
}: {
|
||||
params: { page: string };
|
||||
params: { page: string; locale: SupportedLocale };
|
||||
}): Promise<Metadata> {
|
||||
const page = await getPage({ handle: params.page });
|
||||
const page = await getPage({ handle: params.page, language: params?.locale?.toUpperCase() });
|
||||
|
||||
if (!page) return notFound();
|
||||
|
||||
@ -28,13 +29,17 @@ export async function generateMetadata({
|
||||
};
|
||||
}
|
||||
|
||||
export default async function Page({ params }: { params: { page: string } }) {
|
||||
const page = await getPage({ handle: params.page });
|
||||
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">
|
||||
@ -44,6 +49,6 @@ export default async function Page({ params }: { params: { page: string } }) {
|
||||
day: 'numeric'
|
||||
}).format(new Date(page.updatedAt))}.`}
|
||||
</p>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { Carousel } from 'components/carousel';
|
||||
import { ThreeItemGrid } from 'components/grid/three-items';
|
||||
import Footer from 'components/layout/footer';
|
||||
import { LanguageControl, SupportedLocales } from 'components/layout/navbar/language-control';
|
||||
import { LanguageControl, SupportedLocale } from 'components/layout/navbar/language-control';
|
||||
|
||||
import clsx from 'clsx';
|
||||
import LogoNamemark from 'components/icons/namemark';
|
||||
@ -25,7 +25,7 @@ export const metadata = {
|
||||
export default async function HomePage({
|
||||
params: { locale }
|
||||
}: {
|
||||
params: { locale: SupportedLocales };
|
||||
params: { locale: SupportedLocale };
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
|
22
app/[locale]/shops/[page]/ShopsTitle.tsx
Normal file
22
app/[locale]/shops/[page]/ShopsTitle.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
'use client';
|
||||
|
||||
import { useTranslations } from 'next-intl';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function ShopsTitle() {
|
||||
const t = useTranslations('Index');
|
||||
return (
|
||||
<div>
|
||||
<div className="flex flex-row items-baseline space-x-6 pb-12">
|
||||
<Link href="/#shops">
|
||||
<span className="flex flex-row items-center space-x-1.5">
|
||||
<span>←</span>
|
||||
<span>{t('shops.all')}</span>
|
||||
</span>
|
||||
</Link>
|
||||
<div>|</div>
|
||||
<div className="font-medium">{t('shops.title')}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
15
app/[locale]/shops/[page]/layout.tsx
Normal file
15
app/[locale]/shops/[page]/layout.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import Footer from 'components/layout/footer';
|
||||
import { Suspense } from 'react';
|
||||
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<Suspense>
|
||||
<div className="w-full">
|
||||
<div className="mx-8 max-w-screen-2xl py-20 sm:mx-auto">
|
||||
<Suspense>{children}</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
11
app/[locale]/shops/[page]/opengraph-image.tsx
Normal file
11
app/[locale]/shops/[page]/opengraph-image.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import OpengraphImage from 'components/opengraph-image';
|
||||
import { getPage } from 'lib/shopify';
|
||||
|
||||
export const runtime = 'edge';
|
||||
|
||||
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 });
|
||||
}
|
49
app/[locale]/shops/[page]/page.tsx
Normal file
49
app/[locale]/shops/[page]/page.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
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';
|
||||
import ShopsTitle from './ShopsTitle';
|
||||
|
||||
export const runtime = 'edge';
|
||||
|
||||
export const revalidate = 43200; // 12 hours in seconds
|
||||
|
||||
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="font-multilingual min-h-screen px-4 text-white">
|
||||
<ShopsTitle />
|
||||
<h2 className="mb-8 text-3xl font-medium">{page.title}</h2>
|
||||
<Prose className="mb-8" html={page.body as string} />
|
||||
</div>
|
||||
);
|
||||
}
|
@ -1,5 +1,5 @@
|
||||
import clsx from 'clsx';
|
||||
import { SupportedLocales } from 'components/layout/navbar/language-control';
|
||||
import { SupportedLocale } from 'components/layout/navbar/language-control';
|
||||
import { getCollectionProducts } from 'lib/shopify';
|
||||
import type { Product } from 'lib/shopify/types';
|
||||
import Link from 'next/link';
|
||||
@ -35,15 +35,13 @@ function ThreeItemGridItem({ item, priority }: { item: Product; priority?: boole
|
||||
);
|
||||
}
|
||||
|
||||
export async function ThreeItemGrid({ lang }: { lang: SupportedLocales }) {
|
||||
export async function ThreeItemGrid({ lang }: { lang: SupportedLocale }) {
|
||||
// Collections that start with `hidden-*` are hidden from the search page.
|
||||
const homepageItems = await getCollectionProducts({
|
||||
collection: 'hidden-homepage-featured-items',
|
||||
language: lang?.toUpperCase()
|
||||
});
|
||||
|
||||
console.debug({ lang });
|
||||
|
||||
if (!homepageItems[0] || !homepageItems[1] || !homepageItems[2]) return null;
|
||||
|
||||
const [firstProduct, secondProduct, thirdProduct] = homepageItems;
|
||||
|
@ -6,7 +6,7 @@ import MenuIcon from 'components/icons/menu';
|
||||
import { useLocale, useTranslations } from 'next-intl';
|
||||
import Link from 'next/link';
|
||||
import { Fragment, useRef, useState } from 'react';
|
||||
import { LanguageControl, SupportedLocales } from '../navbar/language-control';
|
||||
import { LanguageControl, SupportedLocale } from '../navbar/language-control';
|
||||
|
||||
export function MenuModal() {
|
||||
const t = useTranslations('Index');
|
||||
@ -58,7 +58,7 @@ export function MenuModal() {
|
||||
<Dialog.Panel>
|
||||
<div className="fixed right-5 top-6 z-40 px-2 py-1 md:top-11">
|
||||
<div className="flex flex-row space-x-6">
|
||||
<LanguageControl lang={locale as SupportedLocales} />
|
||||
<LanguageControl lang={locale as SupportedLocale} />
|
||||
|
||||
<button ref={closeButtonRef} onClick={close} className="">
|
||||
<CloseIcon className="h-10 w-10 stroke-current transition-opacity duration-150 hover:opacity-50" />
|
||||
|
@ -1,30 +1,39 @@
|
||||
'use client';
|
||||
|
||||
import clsx from 'clsx';
|
||||
import Link from 'next/link';
|
||||
import Link from 'next-intl/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
|
||||
export type SupportedLocales = 'en' | 'ja' | undefined;
|
||||
export type SupportedLocale = 'en' | 'ja' | undefined;
|
||||
|
||||
export const LanguageControl = ({ lang }: { lang?: SupportedLocales }) => {
|
||||
function removeItem<T>(arr: Array<T>, value: T): Array<T> {
|
||||
const index = arr.indexOf(value);
|
||||
if (index > -1) {
|
||||
arr.splice(index, 1);
|
||||
}
|
||||
return arr;
|
||||
}
|
||||
|
||||
export const LanguageControl = ({ lang }: { lang?: SupportedLocale }) => {
|
||||
const pathName = usePathname();
|
||||
const redirectedPathName = (locale: string) => {
|
||||
if (!pathName) return '/';
|
||||
const segments = pathName.split('/');
|
||||
segments[1] = locale;
|
||||
return segments.join('/');
|
||||
|
||||
const basePathName = () => {
|
||||
const unjoined = pathName.split('/');
|
||||
const unjoinedWithoutLocale = removeItem(unjoined, 'ja');
|
||||
return unjoinedWithoutLocale.join('/') || '/';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-row space-x-0">
|
||||
<span className="px-2 py-4">
|
||||
<Link
|
||||
href={redirectedPathName('ja')}
|
||||
href={basePathName()}
|
||||
className={clsx(
|
||||
lang === 'ja' ? 'opacity-100' : 'opacity-50 hover:opacity-70',
|
||||
'transition-opacity duration-150'
|
||||
)}
|
||||
scroll={false}
|
||||
locale="ja"
|
||||
>
|
||||
JP
|
||||
</Link>
|
||||
@ -32,12 +41,13 @@ export const LanguageControl = ({ lang }: { lang?: SupportedLocales }) => {
|
||||
<span className="py-4">/</span>
|
||||
<span className="px-2 py-4">
|
||||
<Link
|
||||
href={redirectedPathName('en')}
|
||||
href={basePathName()}
|
||||
className={clsx(
|
||||
lang === 'en' ? 'opacity-100' : 'opacity-50 hover:opacity-70',
|
||||
'transition-opacity duration-150'
|
||||
)}
|
||||
scroll={false}
|
||||
locale="en"
|
||||
>
|
||||
EN
|
||||
</Link>
|
||||
|
@ -6,10 +6,12 @@ import Link from 'next/link';
|
||||
export default function Shoplist() {
|
||||
const t = useTranslations('Index');
|
||||
return (
|
||||
<div className="mx-auto max-w-screen-2xl space-y-4 px-2">
|
||||
<div className="mx-auto max-w-screen-2xl space-y-4 px-2" id="shops">
|
||||
<div className="flex w-full flex-row items-baseline space-x-12 pb-6">
|
||||
<h2 className="font-serif text-6xl tracking-wider">shop list</h2>
|
||||
<h3 className="font-multilingual font-serif text-2xl tracking-wider">{t('shops.title')}</h3>
|
||||
<h3 className="font-multilingual font-serif text-2xl tracking-wider">
|
||||
{t('shops.subtitle')}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="grid w-full grid-cols-2 gap-px">
|
||||
<Link
|
||||
|
@ -10,7 +10,16 @@ const Prose: FunctionComponent<TextProps> = ({ html, className }) => {
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
'prose mx-auto max-w-6xl text-base leading-7 text-black prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-a:text-black prose-a:underline hover:prose-a:text-neutral-300 prose-strong:text-black prose-ol:mt-8 prose-ol:list-decimal prose-ol:pl-6 prose-ul:mt-8 prose-ul:list-disc prose-ul:pl-6 dark:text-white dark:prose-headings:text-white dark:prose-a:text-white dark:prose-strong:text-white',
|
||||
'prose mx-auto max-w-screen-2xl text-lg leading-7',
|
||||
'font-multilingual font-normal text-white',
|
||||
'prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-white',
|
||||
'prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg',
|
||||
'prose-a:text-white/50 prose-a:underline hover:prose-a:text-white',
|
||||
'prose-strong:text-white',
|
||||
'prose-td:border-opacity-20 prose-td:py-4 prose-td:font-normal',
|
||||
'prose-tr:border-subtle',
|
||||
'prose-ol:mt-8 prose-ol:list-decimal prose-ol:pl-6 prose-ul:mt-8 prose-ul:list-disc prose-ul:pl-6',
|
||||
'dark:text-white dark:prose-headings:text-white dark:prose-a:text-white dark:prose-strong:text-white',
|
||||
className
|
||||
)}
|
||||
dangerouslySetInnerHTML={{ __html: html as string }}
|
||||
|
@ -17,7 +17,9 @@
|
||||
"button": "Notify me"
|
||||
},
|
||||
"shops": {
|
||||
"title": "",
|
||||
"title": "Shop list",
|
||||
"subtitle": "",
|
||||
"all": "All shops",
|
||||
"hokkaido": "Hokkaido / North",
|
||||
"kanto": "Kanto",
|
||||
"chubu": "Chubu",
|
||||
|
@ -18,6 +18,8 @@
|
||||
},
|
||||
"shops": {
|
||||
"title": "取り扱い店",
|
||||
"subtitle": "取り扱い店",
|
||||
"all": "全店",
|
||||
"hokkaido": "北海道・東北",
|
||||
"kanto": "関東",
|
||||
"chubu": "中部",
|
||||
|
Loading…
x
Reference in New Issue
Block a user