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

Structural changes

Browse Source
This commit is contained in:
Henrik Larsson 2023-08-07 15:06:13 +02:00
parent 1857278dda
commit a75a2e7feb
25 changed files with 359 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
app/[locale]/[[...slug]]/category-page-preview.tsx → ...[[...slug]]/category-page-preview.tsx
View File

0
app/[locale]/[[...slug]]/category-page.tsx → ...[[...slug]]/category-page.tsx
View File

0
app/[locale]/[[...slug]]/home-page-preview.tsx → ...[[...slug]]/home-page-preview.tsx
View File

0
app/[locale]/[[...slug]]/home-page.tsx → ...[[...slug]]/home-page.tsx
View File

4
app/[locale]/[[...slug]]/page.tsx → ...[[...slug]]/page.tsx
View File

@ -41,7 +41,7 @@ export default async function Page({ params }: { params: { slug: string[]; local
return (
<div className="flex flex-col">
<Header localeData={localeData} />
<Header />
<main className="flex-1">
<article>
{isEnabled ? (
@ -65,7 +65,7 @@ export default async function Page({ params }: { params: { slug: string[]; local
)}
</article>
</main>
<Footer />
<Footer localeData={localeData} />
</div>
);
}

0
app/[locale]/[[...slug]]/product-page-preview.tsx → ...[[...slug]]/product-page-preview.tsx
View File

0
app/[locale]/[[...slug]]/product-page.tsx → ...[[...slug]]/product-page.tsx
View File

0
app/[locale]/[[...slug]]/single-page-preview.tsx → ...[[...slug]]/single-page-preview.tsx
View File

0
app/[locale]/[[...slug]]/single-page.tsx → ...[[...slug]]/single-page.tsx
View File

44
app/[locale]/[slug]/page.tsx Normal file
View File

@ -0,0 +1,44 @@
import DynamicContentManager from 'components/layout/dynamic-content-manager';
import { pageQuery } from 'lib/sanity/queries';
import { clientFetch } from 'lib/sanity/sanity.client';
import type { Metadata } from 'next';
import { notFound } from 'next/navigation';
export const runtime = 'edge';
export const revalidate = 43200; // 12 hours in seconds
export async function generateMetadata({
params
}: {
params: { locale: string; slug: string };
}): Promise<Metadata> {
const page = await clientFetch(pageQuery, params);
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'
}
};
}
interface PageParams {
params: {
locale: string;
slug: string;
};
}
export default async function Page({ params }: PageParams) {
const page = await clientFetch(pageQuery, params);
if (!page) return notFound();
return <DynamicContentManager content={page?.content} />;
}

41
app/[locale]/category/[slug]/page.tsx Normal file
View File

@ -0,0 +1,41 @@
import Text from 'components/ui/text/text';
import { categoryQuery } from 'lib/sanity/queries';
import { clientFetch } from 'lib/sanity/sanity.client';
import { Metadata } from 'next';
import { notFound } from 'next/navigation';
export async function generateMetadata({
params
}: {
params: { slug: string; locale: string };
}): Promise<Metadata> {
const category = await clientFetch(categoryQuery, params);
if (!category) return notFound();
return {
title: category.seo.title || category.title,
description: category.seo.description || category.description
};
}
interface CategoryPageParams {
params: {
locale: string;
slug: string;
};
}
export default async function ProductPage({ params }: CategoryPageParams) {
const category = await clientFetch(categoryQuery, params);
if (!category) return notFound();
const { title } = category;
return (
<div className="mb-8 flex w-full flex-col px-4 lg:my-16 lg:px-8 2xl:px-16">
<Text variant={'pageHeading'}>{title}</Text>
</div>
);
}

9
app/[locale]/layout.tsx
View File

@ -1,7 +1,10 @@
import Footer from 'components/layout/footer/footer';
import Header from 'components/layout/header/header';
import { NextIntlClientProvider } from 'next-intl';
import { Inter } from 'next/font/google';
import { notFound } from 'next/navigation';
import { ReactNode } from 'react';
import { supportedLanguages } from '../../i18n-config';
import './globals.css';
const SITE_NAME = 'KM Storefront';
@ -36,7 +39,7 @@ const inter = Inter({
});
export function generateStaticParams() {
return [{ locale: 'sv' }, { locale: 'en' }];
return supportedLanguages.locales.map((locale) => ({ locale: locale.id }));
}
interface LocaleLayoutProps {
@ -59,7 +62,9 @@ export default async function LocaleLayout({ children, params: { locale } }: Loc
<html lang={locale} className={inter.variable}>
<body className="flex min-h-screen flex-col">
<NextIntlClientProvider locale={locale} messages={messages}>
{children}
<Header />
<main className="flex-1">{children}</main>
<Footer />
</NextIntlClientProvider>
</body>
</html>

27
app/[locale]/page.tsx Normal file
View File

@ -0,0 +1,27 @@
import DynamicContentManager from 'components/layout/dynamic-content-manager/dynamic-content-manager';
import { homePageQuery } from 'lib/sanity/queries';
import { clientFetch } from 'lib/sanity/sanity.client';
export const runtime = 'edge';
export const metadata = {
description: 'High-performance ecommerce store built with Next.js, Vercel, Sanity and Storm.',
openGraph: {
type: 'website'
}
};
interface HomePageParams {
params: {
locale: string;
};
}
export default async function HomePage({ params }: HomePageParams) {
const data = await clientFetch(homePageQuery, params);
return (
<>
<DynamicContentManager content={data?.content} />
</>
);
}

89
app/[locale]/product/[slug]/page.tsx Normal file
View File

@ -0,0 +1,89 @@
import ProductView from 'components/product/product-view';
import { productQuery } from 'lib/sanity/queries';
import { clientFetch } from 'lib/sanity/sanity.client';
import type { Metadata } from 'next';
import { notFound } from 'next/navigation';
interface ProductPageParams {
params: {
locale: string;
slug: string;
};
}
export async function generateMetadata({
params
}: {
params: { slug: string; locale: string };
}): Promise<Metadata> {
const product = await clientFetch(productQuery, params);
if (!product) return notFound();
const { alt } = product.images[0] || '';
const { url } = product.images[0].asset || {};
const { width, height } = product.images[0].asset.metadata.dimensions;
// const indexable = !product.tags.includes(HIDDEN_PRODUCT_TAG);
return {
title: product.seo.title || product.title,
description: product.seo.description || product.description,
// @TODO ROBOTS SETTINGS???
// robots: {
// index: indexable,
// follow: indexable,
// googleBot: {
// index: indexable,
// follow: indexable
// }
// },
openGraph: url
? {
images: [
{
url,
width,
height,
alt
}
]
}
: null
};
}
export default async function ProductPage({ params }: ProductPageParams) {
const product = await clientFetch(productQuery, params);
if (!product) return notFound();
const productJsonLd = {
'@context': 'https://schema.org',
'@type': 'Product',
name: product.name,
description: product.description,
// @TODO UPDATE TO STORM URL???
image: product.images[0].asset.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)
}}
/>
<ProductView product={product} relatedProducts={[]} />;
</>
);
}

22
components/layout/footer/footer.tsx
View File

@ -1,28 +1,40 @@
'use client'
'use client';
// import LocaleSwitcher from 'components/ui/locale-switcher/locale-switcher';
import Logo from 'components/ui/logo/logo';
import { useTranslations } from 'next-intl';
import Link from 'next/link';
// interface FooterProps {
// localeData: {
// type: string;
// locale: string;
// translations: [];
// };
// }
const Footer = () => {
// const locale = useLocale();
const currentYear = new Date().getFullYear();
const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : '');
const t = useTranslations('ui');
return (
<footer className="border-t border-ui-border bg-app">
<div className="mx-auto w-full py-4 px-4 lg:py-6 lg:px-8 2xl:px-16 2xl:py-8">
<div className="flex flex-col w-full space-y-2 items-center transition-colors duration-150 md:flex-row md:items-baseline md:justify-between md:space-y-0">
<div className="mx-auto flex w-full flex-col">
<div className="flex w-full flex-col items-center space-y-2 p-4 transition-colors duration-150 md:flex-row md:items-baseline md:justify-between md:space-y-0 lg:px-8 lg:py-6 2xl:px-16 2xl:py-8">
<Link className="flex flex-initial items-center font-bold md:mr-24" href="/">
<Logo />
</Link>
<p className="text-sm text-low-contrast">
{/* <LocaleSwitcher localeData={localeData} currentLocale={locale} /> */}
</div>
<div className="flex items-center justify-center border-t border-ui-border bg-black px-4 py-3 lg:px-8 2xl:px-16">
<p className="text-xs text-white">
&copy; {copyrightDate} Kodamera - {t('copyright')}
</p>
</div>
</div>
</footer>
);
}
};
export default Footer;

21
components/layout/header/header.tsx
View File

@ -1,6 +1,5 @@
'use client';
import LocaleSwitcher from 'components/ui/locale-switcher/locale-switcher';
import Logo from 'components/ui/logo/logo';
import {
NavigationMenu,
@ -14,15 +13,9 @@ import Link from 'next/link';
import { FC } from 'react';
import HeaderRoot from './header-root';
interface HeaderProps {
localeData: {
type: string;
locale: string;
translations: [];
};
}
interface HeaderProps {}
const Header: FC<HeaderProps> = ({ localeData }: HeaderProps) => {
const Header: FC<HeaderProps> = () => {
const locale = useLocale();
return (
@ -43,21 +36,21 @@ const Header: FC<HeaderProps> = ({ localeData }: HeaderProps) => {
<NavigationMenu delayDuration={0} className="hidden lg:block">
<NavigationMenuList>
<NavigationMenuItem>
<Link href={'/kategori/junior'} legacyBehavior passHref>
<Link href={'/category/barn'} legacyBehavior passHref>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
Junior
</NavigationMenuLink>
</Link>
</NavigationMenuItem>
<NavigationMenuItem>
<Link href={'/kategori/trojor'} legacyBehavior passHref>
<Link href={'/category/trojor'} legacyBehavior passHref>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
Tröjor
</NavigationMenuLink>
</Link>
</NavigationMenuItem>
<NavigationMenuItem>
<Link href={'/kategori/byxor'} legacyBehavior passHref>
<Link href={'/category/byxor'} legacyBehavior passHref>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
Byxor
</NavigationMenuLink>
@ -66,9 +59,7 @@ const Header: FC<HeaderProps> = ({ localeData }: HeaderProps) => {
</NavigationMenuList>
</NavigationMenu>
</div>
<div>
<LocaleSwitcher localeData={localeData} currentLocale={locale} />
</div>
<div></div>
</div>
</div>
</HeaderRoot>

53
components/modules/blurb-section/blurb-section.tsx
View File

@ -1,16 +1,16 @@
import dynamic from 'next/dynamic'
import dynamic from 'next/dynamic';
import { Carousel, CarouselItem } from 'components/modules/carousel/carousel'
const Card = dynamic(() => import('components/ui/card'))
import { Carousel, CarouselItem } from 'components/modules/carousel/carousel';
const Card = dynamic(() => import('components/ui/card'));
import Text from 'components/ui/text'
import Text from 'components/ui/text';
interface BlurbSectionProps {
blurbs: any
title: string
mobileLayout: string
desktopLayout: string
imageFormat: 'square' | 'portrait' | 'landscape'
blurbs: any;
title: string;
mobileLayout: string;
desktopLayout: string;
imageFormat: 'square' | 'portrait' | 'landscape';
}
const BlurbSection = ({
@ -18,37 +18,33 @@ const BlurbSection = ({
mobileLayout,
desktopLayout,
blurbs,
imageFormat,
imageFormat
}: BlurbSectionProps) => {
const gridLayout =
desktopLayout === '2-column'
? 'lg:grid-cols-2'
: desktopLayout === '3-column'
? 'lg:grid-cols-3'
: 'lg:grid-cols-4'
: 'lg:grid-cols-4';
const sliderLayout =
desktopLayout === '2-column' ? 2 : desktopLayout === '3-column' ? 3 : 4
const sliderLayout = desktopLayout === '2-column' ? 2 : desktopLayout === '3-column' ? 3 : 4;
return (
<div>
{title ? (
<Text
className="mb-4 px-4 lg:px-8 lg:mb-6 2xl:px-16 2xl:mb-8"
variant="sectionHeading"
>
<Text className="mb-4 px-4 lg:mb-6 lg:px-8 2xl:mb-8 2xl:px-16" variant="sectionHeading">
{title}
</Text>
) : (
<Text
className="italic mb-4 px-4 lg:px-8 lg:mb-6 2xl:px-16 2xl:mb-8"
className="mb-4 px-4 italic lg:mb-6 lg:px-8 2xl:mb-8 2xl:px-16"
variant="sectionHeading"
>
No title provided yet
</Text>
)}
<div
className={`px-4 grid ${gridLayout} gap-x-4 gap-y-8 ${
className={`grid px-4 ${gridLayout} gap-x-4 gap-y-8 ${
mobileLayout === 'stacked' ? 'lg:hidden' : 'hidden'
} lg:px-8 2xl:!px-16`}
>
@ -63,15 +59,11 @@ const BlurbSection = ({
imageFormat={blurb?.imageFormat}
/>
</div>
)
);
})}
</div>
<div
className={`${
mobileLayout === 'stacked' ? 'hidden lg:block' : 'block'
}`}
>
<div className={`${mobileLayout === 'stacked' ? 'hidden lg:block' : 'block'}`}>
{blurbs && (
<Carousel
gliderClasses={'px-4 lg:px-8 2xl:px-16'}
@ -80,9 +72,8 @@ const BlurbSection = ({
responsive={{
breakpoint: 1024,
settings: {
slidesToShow:
sliderLayout <= 4 ? sliderLayout + 0.5 : sliderLayout,
},
slidesToShow: sliderLayout <= 4 ? sliderLayout + 0.5 : sliderLayout
}
}}
>
{blurbs.map((blurb: any, index: number) => (
@ -100,7 +91,7 @@ const BlurbSection = ({
)}
</div>
</div>
)
}
);
};
export default BlurbSection
export default BlurbSection;

57
components/modules/hero/hero.tsx
View File

@ -1,41 +1,40 @@
import dynamic from 'next/dynamic'
import dynamic from 'next/dynamic';
import Link from 'components/ui/link/link'
import Text from 'components/ui/text/text'
const SanityImage = dynamic(() => import('components/ui/sanity-image'))
import Link from 'components/ui/link/link';
import Text from 'components/ui/text/text';
const SanityImage = dynamic(() => import('components/ui/sanity-image'));
interface HeroProps {
variant: string
text?: string
label?: string
title: string
image: object | any
desktopImage: object | any
variant: string;
text?: string;
label?: string;
title: string;
image: object | any;
desktopImage: object | any;
link: {
title: string
title: string;
reference: {
title: string
title: string;
slug: {
current: string
}
}
}
current: string;
};
};
};
}
type HeroSize = keyof typeof heroSize
type HeroSize = keyof typeof heroSize;
const heroSize = {
fullScreen: 'aspect-[3/4] lg:aspect-auto lg:h-[calc(100vh-4rem)]',
halfScreen: 'aspect-square max-h-[60vh] lg:aspect-auto lg:min-h-[60vh]',
}
fullScreen: 'aspect-[3/4] lg:aspect-auto lg:h-[calc(75vh-4rem)]',
halfScreen: 'aspect-square max-h-[60vh] lg:aspect-auto lg:min-h-[60vh]'
};
const Hero = ({ variant, title, text, label, image, link }: HeroProps) => {
const heroClass = heroSize[variant as HeroSize] || heroSize.fullScreen
const heroClass = heroSize[variant as HeroSize] || heroSize.fullScreen;
return (
<div
className={`relative w-screen ${heroClass} flex flex-col justify-end relative text-high-contrast`}
className={`relative w-screen ${heroClass} relative flex flex-col justify-end text-high-contrast`}
>
{image && (
<SanityImage
@ -44,10 +43,10 @@ const Hero = ({ variant, title, text, label, image, link }: HeroProps) => {
priority={true}
width={1200}
height={600}
className="absolute inset-0 h-full w-full object-cover z-10"
className="absolute inset-0 z-10 h-full w-full object-cover"
/>
)}
<div className="flex flex-col items-start text-high-contrast absolute max-w-md z-50 left-4 bottom-5 lg:max-w-2xl lg:bottom-8 lg:left-8 2xl:left-16 2xl:bottom-16">
<div className="absolute bottom-5 left-4 z-50 flex max-w-md flex-col items-start text-high-contrast lg:bottom-8 lg:left-8 lg:max-w-2xl 2xl:bottom-16 2xl:left-16">
{label && (
<Text className="mb-1 lg:mb-2" variant="label">
{label}
@ -67,7 +66,7 @@ const Hero = ({ variant, title, text, label, image, link }: HeroProps) => {
)}
{link?.reference && (
<Link
className="inline-flex transition bg-high-contrast text-white text-base py-4 px-10 mt-6 hover:bg-low-contrast lg:mt-8"
className="mt-6 inline-flex bg-high-contrast px-10 py-4 text-base text-white transition hover:bg-low-contrast lg:mt-8"
href={link.reference.slug.current}
>
{link?.title ? link.title : link.reference.title}
@ -75,7 +74,7 @@ const Hero = ({ variant, title, text, label, image, link }: HeroProps) => {
)}
</div>
</div>
)
}
);
};
export default Hero
export default Hero;

12
components/product/product-view.tsx
View File

@ -1,14 +1,14 @@
'use client';
import { Carousel, CarouselItem } from 'components/modules/carousel/carousel';
import Price from 'components/product/price';
import SanityImage from 'components/ui/sanity-image';
import SanityImage from 'components/ui/sanity-image/sanity-image';
import Text from 'components/ui/text/text';
import { Product } from 'lib/storm/types/product';
import { cn } from 'lib/utils';
import { useTranslations } from 'next-intl';
import dynamic from 'next/dynamic';
import Price from './price';
const ProductCard = dynamic(() => import('components/ui/product-card'));
const Text = dynamic(() => import('components/ui/text'));
interface ProductViewProps {
product: Product;
relatedProducts: Product[];
@ -27,7 +27,7 @@ export default function ProductView({ product, relatedProducts }: ProductViewPro
<div className={`pdp aspect-square lg:hidden`}>
{images && (
<Carousel
hasArrows={true}
hasArrows={images.length > 1 ? true : false}
hasDots={false}
gliderClasses={'lg:px-8 2xl:px-16'}
slidesToScroll={1}
@ -69,11 +69,11 @@ export default function ProductView({ product, relatedProducts }: ProductViewPro
</div>
</div>
<div className="col-span-1 mx-auto flex h-auto w-full flex-col px-4 py-6 lg:sticky lg:top-8 lg:col-span-5 lg:px-8 lg:py-0 lg:pr-0 2xl:top-16 2xl:px-16 2xl:pr-0">
<div className="col-span-1 mx-auto flex h-auto w-full flex-col p-4 lg:sticky lg:top-8 lg:col-span-5 lg:px-8 lg:py-0 lg:pr-0 2xl:top-16 2xl:px-16 2xl:pr-0">
<Text variant={'productHeading'}>{product.name}</Text>
<Price
className="text-sm font-medium leading-tight lg:text-base"
className="mt-2 text-sm font-medium leading-tight lg:text-base"
amount={`${product.price.value}`}
currencyCode={product.price.currencyCode ? product.price.currencyCode : 'SEK'}
/>

93
components/ui/card/card.tsx
View File

@ -1,48 +1,49 @@
'use client'
'use client';
import SanityImage from 'components/ui/sanity-image'
import { cn } from 'lib/utils'
import Link from 'next/link'
import { FC } from 'react'
import SanityImage from 'components/ui/sanity-image';
import { cn } from 'lib/utils';
import Link from 'next/link';
import { FC } from 'react';
interface CardProps {
className?: string
title: string
image: object | any
link: object | any
text?: string
imageFormat?: 'square' | 'portrait' | 'landscape'
className?: string;
title: string;
image: object | any;
link: object | any;
text?: string;
imageFormat?: 'square' | 'portrait' | 'landscape';
}
const placeholderImg = '/product-img-placeholder.svg'
const placeholderImg = '/product-img-placeholder.svg';
const Card: FC<CardProps> = ({
className,
title,
image,
link,
text,
imageFormat = 'square',
}) => {
const rootClassName = cn('relative', className)
const Card: FC<CardProps> = ({ className, title, image, link, text, imageFormat = 'square' }) => {
const rootClassName = cn('relative', className);
const { linkType } = link
const { linkType } = link;
const imageWrapperClasses = cn('w-full h-full overflow-hidden relative', {
['aspect-square']: imageFormat === 'square',
['aspect-[3/4]']: imageFormat === 'portrait',
['aspect-[4/3]']: imageFormat === 'landscape',
})
const imageClasses = cn('object-cover w-full h-full')
['aspect-[4/3]']: imageFormat === 'landscape'
});
const imageClasses = cn('object-cover w-full h-full');
function Card() {
if (linkType === 'internal') {
const type = link.internalLink.reference._type;
let href = '';
if (type === 'product') {
href = `/product/${link.internalLink.reference.slug.current}`;
} else if (type === 'category') {
href = `/category/${link.internalLink.reference.slug.current}`;
} else {
return `${link.internalLink.reference.slug.current}`;
}
return (
<Link
href={link.internalLink.reference.slug.current}
className={rootClassName}
aria-label={title}
>
<Link href={href} className={rootClassName} aria-label={title}>
<div className="flex flex-col">
{image && (
<div className={imageWrapperClasses}>
@ -54,25 +55,17 @@ const Card: FC<CardProps> = ({
/>
</div>
)}
<h3 className="mt-2 text-high-contrast font-medium text-sm underline underline-offset-2 lg:text-lg lg:mt-3 lg:underline-offset-4 2xl:text-xl">
<h3 className="mt-2 text-sm font-medium text-high-contrast underline underline-offset-2 lg:mt-3 lg:text-lg lg:underline-offset-4 2xl:text-xl">
{title}
</h3>
{text && (
<p className="text-sm mt-1 text-low-contrast lg:text-base lg:mt-2">
{text}
</p>
)}
{text && <p className="mt-1 text-sm text-low-contrast lg:mt-2 lg:text-base">{text}</p>}
</div>
</Link>
)
);
}
return (
<a
href={link.externalLink.url}
className={rootClassName}
aria-label={title}
>
<a href={link.externalLink.url} className={rootClassName} aria-label={title}>
<div className="flex flex-col">
{image && (
<div className={imageWrapperClasses}>
@ -84,20 +77,16 @@ const Card: FC<CardProps> = ({
/>
</div>
)}
<h3 className="mt-2 text-high-contrast font-medium text-sm underline underline-offset-2 lg:text-lg lg:mt-3 lg:underline-offset-4 2xl:text-xl">
<h3 className="mt-2 text-sm font-medium text-high-contrast underline underline-offset-2 lg:mt-3 lg:text-lg lg:underline-offset-4 2xl:text-xl">
{title}
</h3>
{text && (
<p className="text-sm mt-1 text-low-contrast lg:text-base lg:mt-2">
{text}
</p>
)}
{text && <p className="mt-1 text-sm text-low-contrast lg:mt-2 lg:text-base">{text}</p>}
</div>
</a>
)
);
}
return <Card />
}
return <Card />;
};
export default Card
export default Card;

4
components/ui/locale-switcher/locale-switcher.tsx
View File

@ -7,7 +7,7 @@ import {
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useState } from 'react';
import { i18n } from '../../../i18n-config';
import { supportedLanguages } from '../../../i18n-config';
interface LocaleSwitcherProps {
currentLocale: string;
@ -58,7 +58,7 @@ export default function LocaleSwitcher({ currentLocale, localeData }: LocaleSwit
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="drop-shadow-xl">
<ul className="">
{i18n.locales.map((locale) => {
{supportedLanguages.locales.map((locale) => {
if (currentLocale === locale.id) {
return;
} else {

2
components/ui/product-card/product-card.tsx
View File

@ -23,7 +23,7 @@ const ProductCard: FC<Props> = ({ product, className, variant = 'default' }) =>
return (
<Link
href={`${product.slug}`}
href={`/product/${product.slug}`}
className={rootClassName}
aria-label={product.name}
locale={product.locale}

4
i18n-config.ts
View File

@ -1,4 +1,4 @@
export const i18n = {
export const supportedLanguages = {
defaultLocale: 'sv',
locales: [
{
@ -12,4 +12,4 @@ export const i18n = {
],
} as const
export type Locale = typeof i18n['locales'][number]
export type Locale = typeof supportedLanguages['locales'][number]

54
lib/sanity/queries.tsx
View File

@ -107,6 +107,7 @@ export const modules = `
desktopLayout,
imageFormat,
blurbs[]->{
_type,
title,
text,
link {
@ -209,29 +210,27 @@ export const productQuery = `*[_type == "product" && slug.current == $slug && la
"slug": slug.current,
"locale": language
},
"product": {
id,
"name": title,
description,
"descriptionHtml": "",
images[] {
${imageFields}
},
price {
value,
currencyCode,
retailPrice
},
options[] {
id,
displayName,
values[] {
label,
"hexColors": hexColors.hex
}
},
"variants": []
id,
"name": title,
description,
"descriptionHtml": "",
images[] {
${imageFields}
},
price {
value,
currencyCode,
retailPrice
},
options[] {
id,
displayName,
values[] {
label,
"hexColors": hexColors.hex
}
},
"variants": [],
seo {
${seoFields}
}
@ -243,15 +242,8 @@ export const categoryQuery = `*[_type == "category" && slug.current == $slug &&
title,
"slug": slug.current,
"locale": language,
showBanner,
banner {
_type,
_key,
title,
text,
image {
${imageFields}
}
image {
${imageFields}
},
"translations": *[_type == "translation.metadata" && references(^._id)].translations[].value->{
title,

1
middleware.ts
View File

@ -6,7 +6,6 @@ export default createMiddleware({
// If this locale is matched, pathnames work without a prefix (e.g. `/about`)
defaultLocale: 'sv',
localeDetection: false
});
export const config = {