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

feat: Basic internationalization

Browse Source
This commit is contained in:
Sol Irvine 2023-08-14 02:27:52 +09:00
parent 7a4a7cf4ed
commit 4c8abdfe6f
24 changed files with 202 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/[lang]/[page]/opengraph-image.tsx
View File

@ -4,7 +4,7 @@ import { getPage } from 'lib/shopify';
export const runtime = 'edge'; export const runtime = 'edge';
export default async function Image({ params }: { params: { page: string } }) { export default async function Image({ params }: { params: { page: string } }) {
const page = await getPage(params.page); const page = await getPage({ handle: params.page });
const title = page.seo?.title || page.title; const title = page.seo?.title || page.title;
return await OpengraphImage({ title }); return await OpengraphImage({ title });

4
app/[lang]/[page]/page.tsx
View File

@ -13,7 +13,7 @@ export async function generateMetadata({
}: { }: {
params: { page: string }; params: { page: string };
}): Promise<Metadata> { }): Promise<Metadata> {
const page = await getPage(params.page); const page = await getPage({ handle: params.page });
if (!page) return notFound(); if (!page) return notFound();
@ -29,7 +29,7 @@ export async function generateMetadata({
} }
export default async function Page({ params }: { params: { page: string } }) { export default async function Page({ params }: { params: { page: string } }) {
const page = await getPage(params.page); const page = await getPage({ handle: params.page });
if (!page) return notFound(); if (!page) return notFound();

8
app/[lang]/globals.css
View File

@ -19,3 +19,11 @@ input,
button { button {
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-50 dark:focus-visible:ring-neutral-600 dark:focus-visible:ring-offset-neutral-900; @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-50 dark:focus-visible:ring-neutral-600 dark:focus-visible:ring-offset-neutral-900;
} }
.font-multilingual {
@apply font-serif;
}
[lang='ja'] .font-multilingual {
@apply font-japan;
}

13
app/[lang]/layout.tsx
View File

@ -3,6 +3,7 @@ import { Locale, i18n } from 'i18n-config';
import localFont from 'next/font/local'; import localFont from 'next/font/local';
import { ReactNode, Suspense } from 'react'; import { ReactNode, Suspense } from 'react';
import { LanguageProvider } from 'app/context/language-context';
import './globals.css'; import './globals.css';
const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env; const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
@ -37,6 +38,12 @@ const cinzel = localFont({
variable: '--font-cinzel' variable: '--font-cinzel'
}); });
const mincho = localFont({
src: '../fonts/A-OTF-A1MinchoStd-Bold.otf',
display: 'swap',
variable: '--font-cinzel'
});
const alpina = localFont({ const alpina = localFont({
src: [ src: [
{ {
@ -65,13 +72,15 @@ export default async function RootLayout({
params: { lang: string }; params: { lang: string };
}) { }) {
return ( return (
<html lang={params.lang} className={`${cinzel.variable} ${alpina.variable}`}> <html lang={params.lang} className={`${cinzel.variable} ${alpina.variable} ${mincho.variable}`}>
<body className="bg-dark text-white selection:bg-green-800 selection:text-green-400"> <body className="bg-dark text-white selection:bg-green-800 selection:text-green-400">
<div className="mx-auto max-w-screen-2xl"> <div className="mx-auto max-w-screen-2xl">
<Navbar lang={params.lang as Locale} /> <LanguageProvider language={params.lang as Locale}>
<Navbar />
<Suspense> <Suspense>
<main>{children}</main> <main>{children}</main>
</Suspense> </Suspense>
</LanguageProvider>
</div> </div>
</body> </body>
</html> </html>

2
app/[lang]/page.tsx
View File

@ -32,7 +32,7 @@ export default async function HomePage({ params: { lang } }: { params: { lang: L
className="max-w-[260px] md:max-w-[600px]" className="max-w-[260px] md:max-w-[600px]"
/> />
</div> </div>
<ThreeItemGrid /> <ThreeItemGrid lang={lang} />
<Suspense> <Suspense>
<Carousel /> <Carousel />
<Suspense> <Suspense>

6
app/[lang]/product/[handle]/page.tsx
View File

@ -18,7 +18,7 @@ export async function generateMetadata({
}: { }: {
params: { handle: string }; params: { handle: string };
}): Promise<Metadata> { }): Promise<Metadata> {
const product = await getProduct(params.handle); const product = await getProduct({ handle: params.handle });
if (!product) return notFound(); if (!product) return notFound();
@ -52,7 +52,7 @@ export async function generateMetadata({
} }
export default async function ProductPage({ params }: { params: { handle: string } }) { export default async function ProductPage({ params }: { params: { handle: string } }) {
const product = await getProduct(params.handle); const product = await getProduct({ handle: params.handle });
if (!product) return notFound(); if (!product) return notFound();
@ -108,7 +108,7 @@ export default async function ProductPage({ params }: { params: { handle: string
} }
async function RelatedProducts({ id }: { id: string }) { async function RelatedProducts({ id }: { id: string }) {
const relatedProducts = await getProductRecommendations(id); const relatedProducts = await getProductRecommendations({ productId: id });
if (!relatedProducts.length) return null; if (!relatedProducts.length) return null;

2
app/[lang]/search/[collection]/opengraph-image.tsx
View File

@ -4,7 +4,7 @@ import { getCollection } from 'lib/shopify';
export const runtime = 'edge'; export const runtime = 'edge';
export default async function Image({ params }: { params: { collection: string } }) { export default async function Image({ params }: { params: { collection: string } }) {
const collection = await getCollection(params.collection); const collection = await getCollection({ handle: params.collection });
const title = collection?.seo?.title || collection?.title; const title = collection?.seo?.title || collection?.title;
return await OpengraphImage({ title }); return await OpengraphImage({ title });

2
app/[lang]/search/[collection]/page.tsx
View File

@ -13,7 +13,7 @@ export async function generateMetadata({
}: { }: {
params: { collection: string }; params: { collection: string };
}): Promise<Metadata> { }): Promise<Metadata> {
const collection = await getCollection(params.collection); const collection = await getCollection({ handle: params.collection });
if (!collection) return notFound(); if (!collection) return notFound();

2
app/[lang]/sitemap.ts
View File

@ -30,7 +30,7 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
})) }))
); );
const pagesPromise = getPages().then((pages) => const pagesPromise = getPages({}).then((pages) =>
pages.map((page) => ({ pages.map((page) => ({
url: `${baseUrl}/${page.handle}`, url: `${baseUrl}/${page.handle}`,
lastModified: page.updatedAt lastModified: page.updatedAt

36
app/context/language-context.tsx Normal file
View File

@ -0,0 +1,36 @@
'use client';
import { Locale } from 'i18n-config';
import { ReactNode, createContext, useContext, useState } from 'react';
interface IContextProps {
currentLanguage?: Locale;
setCurrentLanguage: (language: Locale) => void;
}
export const LanguageContext = createContext<IContextProps>({} as IContextProps);
export function LanguageProvider({
language,
children
}: {
language: Locale;
children: ReactNode | ReactNode[] | string;
}) {
const [currentLanguage, setCurrentLanguage] = useState<Locale>(language || 'en');
return (
<LanguageContext.Provider
value={{
currentLanguage,
setCurrentLanguage
}}
>
{children}
</LanguageContext.Provider>
);
}
export const useLanguage = () => {
return useContext(LanguageContext);
};

BIN
app/fonts/A-OTF-A1MinchoStd-Bold.otf Normal file
View File

Binary file not shown.

14
components/grid/three-items.tsx
View File

@ -1,5 +1,6 @@
import clsx from 'clsx'; import clsx from 'clsx';
import { GridTileImage } from 'components/grid/tile'; import { GridTileImage } from 'components/grid/tile';
import { Locale } from 'i18n-config';
import { getCollectionProducts } from 'lib/shopify'; import { getCollectionProducts } from 'lib/shopify';
import type { Product } from 'lib/shopify/types'; import type { Product } from 'lib/shopify/types';
import Link from 'next/link'; import Link from 'next/link';
@ -14,7 +15,10 @@ function ThreeItemGridItem({ item, priority }: { item: Product; priority?: boole
> >
<GridTileImage <GridTileImage
src={item.featuredImage.url} src={item.featuredImage.url}
fill height={1690}
width={1192}
layout="responsive"
// fill
sizes={'(min-width: 768px) 33vw, 100vw'} sizes={'(min-width: 768px) 33vw, 100vw'}
priority={priority} priority={priority}
alt={item.title} alt={item.title}
@ -26,17 +30,21 @@ function ThreeItemGridItem({ item, priority }: { item: Product; priority?: boole
amount={item.priceRange.maxVariantPrice.amount} amount={item.priceRange.maxVariantPrice.amount}
currencyCode={item.priceRange.maxVariantPrice.currencyCode} currencyCode={item.priceRange.maxVariantPrice.currencyCode}
/> />
<div className="line-clamp-4">{item?.description}</div>
</div> </div>
</div> </div>
); );
} }
export async function ThreeItemGrid() { export async function ThreeItemGrid({ lang }: { lang: Locale }) {
// Collections that start with `hidden-*` are hidden from the search page. // Collections that start with `hidden-*` are hidden from the search page.
const homepageItems = await getCollectionProducts({ const homepageItems = await getCollectionProducts({
collection: 'hidden-homepage-featured-items' collection: 'hidden-homepage-featured-items',
language: lang.toUpperCase()
}); });
console.debug({ homepageItems });
if (!homepageItems[0] || !homepageItems[1] || !homepageItems[2]) return null; if (!homepageItems[0] || !homepageItems[1] || !homepageItems[2]) return null;
const [firstProduct, secondProduct, thirdProduct] = homepageItems; const [firstProduct, secondProduct, thirdProduct] = homepageItems;

4
components/grid/tile.tsx
View File

@ -16,7 +16,7 @@ export function GridTileImage({
}; };
} & React.ComponentProps<typeof Image>) { } & React.ComponentProps<typeof Image>) {
return ( return (
<div className="flex flex-col space-y-2"> <>
{props.src ? ( {props.src ? (
// eslint-disable-next-line jsx-a11y/alt-text -- `alt` is inherited from `props`, which is being enforced with TypeScript // eslint-disable-next-line jsx-a11y/alt-text -- `alt` is inherited from `props`, which is being enforced with TypeScript
<Image <Image
@ -26,6 +26,6 @@ export function GridTileImage({
{...props} {...props}
/> />
) : null} ) : null}
</div> </>
); );
} }

2
components/label.tsx
View File

@ -12,7 +12,7 @@ const Label = ({
}) => { }) => {
return ( return (
<div className={clsx('@container/label')}> <div className={clsx('@container/label')}>
<div className="flex flex-col space-y-2"> <div className="font-multilingual flex flex-col space-y-2">
<h3 className="mr-4 line-clamp-2 flex-grow text-3xl">{title}</h3> <h3 className="mr-4 line-clamp-2 flex-grow text-3xl">{title}</h3>
<Price <Price
className="flex-none" className="flex-none"

7
components/layout/menu/modal.tsx
View File

@ -1,14 +1,15 @@
'use client'; 'use client';
import { Dialog, Transition } from '@headlessui/react'; import { Dialog, Transition } from '@headlessui/react';
import { useLanguage } from 'app/context/language-context';
import CloseIcon from 'components/icons/close'; import CloseIcon from 'components/icons/close';
import MenuIcon from 'components/icons/menu'; import MenuIcon from 'components/icons/menu';
import type { Locale } from 'i18n-config';
import Link from 'next/link'; import Link from 'next/link';
import { Fragment, useRef, useState } from 'react'; import { Fragment, useRef, useState } from 'react';
import { LanguageControl } from '../navbar/language-control'; import { LanguageControl } from '../navbar/language-control';
export function MenuModal({ lang }: { lang: Locale }) { export function MenuModal() {
const { currentLanguage } = useLanguage();
let [isOpen, setIsOpen] = useState(false); let [isOpen, setIsOpen] = useState(false);
let closeButtonRef = useRef(null); let closeButtonRef = useRef(null);
@ -45,7 +46,7 @@ export function MenuModal({ lang }: { lang: Locale }) {
<Transition.Child as={Fragment}> <Transition.Child as={Fragment}>
<div className="fixed right-5 top-6 z-40 px-2 py-1 md:top-11"> <div className="fixed right-5 top-6 z-40 px-2 py-1 md:top-11">
<div className="flex flex-row space-x-4"> <div className="flex flex-row space-x-4">
<LanguageControl lang={lang} /> <LanguageControl lang={currentLanguage} />
<button ref={closeButtonRef} onClick={close} className=""> <button ref={closeButtonRef} onClick={close} className="">
<CloseIcon className="h-10 w-10 stroke-current transition-opacity duration-150 hover:opacity-50" /> <CloseIcon className="h-10 w-10 stroke-current transition-opacity duration-150 hover:opacity-50" />

5
components/layout/navbar/index.tsx
View File

@ -1,17 +1,16 @@
import Cart from 'components/cart'; import Cart from 'components/cart';
import OpenCart from 'components/cart/open-cart'; import OpenCart from 'components/cart/open-cart';
import type { Locale } from 'i18n-config';
import { Suspense } from 'react'; import { Suspense } from 'react';
import { MenuModal } from '../menu/modal'; import { MenuModal } from '../menu/modal';
export default async function Navbar({ lang }: { lang: Locale }) { export default async function Navbar() {
return ( return (
<nav className="fixed right-0 top-6 z-10 md:top-12"> <nav className="fixed right-0 top-6 z-10 md:top-12">
<div className="flex justify-end pr-5"> <div className="flex justify-end pr-5">
<Suspense fallback={<OpenCart />}> <Suspense fallback={<OpenCart />}>
<div className="flex flex-col-reverse items-center justify-center space-y-2 rounded bg-dark/40 px-2 backdrop-blur-sm md:flex-row md:space-x-6"> <div className="flex flex-col-reverse items-center justify-center space-y-2 rounded bg-dark/40 px-2 backdrop-blur-sm md:flex-row md:space-x-6">
<Cart /> <Cart />
<MenuModal lang={lang} /> <MenuModal />
</div> </div>
</Suspense> </Suspense>
</div> </div>

5
components/layout/navbar/language-control.tsx
View File

@ -7,7 +7,6 @@ import { usePathname } from 'next/navigation';
export const LanguageControl = ({ lang }: { lang?: Locale }) => { export const LanguageControl = ({ lang }: { lang?: Locale }) => {
const pathName = usePathname(); const pathName = usePathname();
console.debug({ lang });
const redirectedPathName = (locale: string) => { const redirectedPathName = (locale: string) => {
if (!pathName) return '/'; if (!pathName) return '/';
const segments = pathName.split('/'); const segments = pathName.split('/');
@ -21,7 +20,7 @@ export const LanguageControl = ({ lang }: { lang?: Locale }) => {
<Link <Link
href={redirectedPathName('ja')} href={redirectedPathName('ja')}
className={clsx( className={clsx(
lang === 'ja' && 'opacity-70', lang === 'ja' ? 'opacity-100' : 'opacity-70',
'transition-opacity duration-150 hover:opacity-50' 'transition-opacity duration-150 hover:opacity-50'
)} )}
> >
@ -33,7 +32,7 @@ export const LanguageControl = ({ lang }: { lang?: Locale }) => {
<Link <Link
href={redirectedPathName('en')} href={redirectedPathName('en')}
className={clsx( className={clsx(
lang === 'en' && 'opacity-70', lang === 'en' ? 'opacity-100' : 'opacity-70',
'transition-opacity duration-150 hover:opacity-50' 'transition-opacity duration-150 hover:opacity-50'
)} )}
> >

4
components/price.tsx
View File

@ -17,7 +17,9 @@ const Price = ({
currency: currencyCode, currency: currencyCode,
currencyDisplay: 'narrowSymbol' currencyDisplay: 'narrowSymbol'
}).format(parseFloat(amount))}`} }).format(parseFloat(amount))}`}
<span className={clsx('ml-1 inline', currencyCodeClassName)}>{`${currencyCode}`}</span> <span
className={clsx('font-multilingual ml-1 inline', currencyCodeClassName)}
>{`${currencyCode}`}</span>
</p> </p>
); );

85
lib/shopify/index.ts
View File

@ -265,12 +265,22 @@ export async function getCart(cartId: string): Promise<Cart | undefined> {
return reshapeCart(res.body.data.cart); return reshapeCart(res.body.data.cart);
} }
export async function getCollection(handle: string): Promise<Collection | undefined> { export async function getCollection({
handle,
language,
country
}: {
handle: string;
language?: string;
country?: string;
}): Promise<Collection | undefined> {
const res = await shopifyFetch<ShopifyCollectionOperation>({ const res = await shopifyFetch<ShopifyCollectionOperation>({
query: getCollectionQuery, query: getCollectionQuery,
tags: [TAGS.collections], tags: [TAGS.collections],
variables: { variables: {
handle handle,
language,
country
} }
}); });
@ -280,11 +290,15 @@ export async function getCollection(handle: string): Promise<Collection | undefi
export async function getCollectionProducts({ export async function getCollectionProducts({
collection, collection,
reverse, reverse,
sortKey sortKey,
language,
country
}: { }: {
collection: string; collection: string;
reverse?: boolean; reverse?: boolean;
sortKey?: string; sortKey?: string;
language?: string;
country?: string;
}): Promise<Product[]> { }): Promise<Product[]> {
const res = await shopifyFetch<ShopifyCollectionProductsOperation>({ const res = await shopifyFetch<ShopifyCollectionProductsOperation>({
query: getCollectionProductsQuery, query: getCollectionProductsQuery,
@ -292,7 +306,9 @@ export async function getCollectionProducts({
variables: { variables: {
handle: collection, handle: collection,
reverse, reverse,
sortKey: sortKey === 'CREATED_AT' ? 'CREATED' : sortKey sortKey: sortKey === 'CREATED_AT' ? 'CREATED' : sortKey,
language: language,
country: country
} }
}); });
@ -349,41 +365,76 @@ export async function getMenu(handle: string): Promise<Menu[]> {
); );
} }
export async function getPage(handle: string): Promise<Page> { export async function getPage({
handle,
language,
country
}: {
handle: string;
language?: string;
country?: string;
}): Promise<Page> {
const res = await shopifyFetch<ShopifyPageOperation>({ const res = await shopifyFetch<ShopifyPageOperation>({
query: getPageQuery, query: getPageQuery,
variables: { handle } variables: { handle, language, country }
}); });
return res.body.data.pageByHandle; return res.body.data.pageByHandle;
} }
export async function getPages(): Promise<Page[]> { export async function getPages({
language,
country
}: {
language?: string;
country?: string;
}): Promise<Page[]> {
const res = await shopifyFetch<ShopifyPagesOperation>({ const res = await shopifyFetch<ShopifyPagesOperation>({
query: getPagesQuery query: getPagesQuery,
variables: { language, country }
}); });
return removeEdgesAndNodes(res.body.data.pages); return removeEdgesAndNodes(res.body.data.pages);
} }
export async function getProduct(handle: string): Promise<Product | undefined> { export async function getProduct({
handle,
language,
country
}: {
handle: string;
language?: string;
country?: string;
}): Promise<Product | undefined> {
const res = await shopifyFetch<ShopifyProductOperation>({ const res = await shopifyFetch<ShopifyProductOperation>({
query: getProductQuery, query: getProductQuery,
tags: [TAGS.products], tags: [TAGS.products],
variables: { variables: {
handle handle,
language,
country
} }
}); });
return reshapeProduct(res.body.data.product, false); return reshapeProduct(res.body.data.product, false);
} }
export async function getProductRecommendations(productId: string): Promise<Product[]> { export async function getProductRecommendations({
productId,
language,
country
}: {
productId: string;
language?: string;
country?: string;
}): Promise<Product[]> {
const res = await shopifyFetch<ShopifyProductRecommendationsOperation>({ const res = await shopifyFetch<ShopifyProductRecommendationsOperation>({
query: getProductRecommendationsQuery, query: getProductRecommendationsQuery,
tags: [TAGS.products], tags: [TAGS.products],
variables: { variables: {
productId productId,
language,
country
} }
}); });
@ -393,11 +444,15 @@ export async function getProductRecommendations(productId: string): Promise<Prod
export async function getProducts({ export async function getProducts({
query, query,
reverse, reverse,
sortKey sortKey,
language,
country
}: { }: {
query?: string; query?: string;
reverse?: boolean; reverse?: boolean;
sortKey?: string; sortKey?: string;
language?: string;
country?: string;
}): Promise<Product[]> { }): Promise<Product[]> {
const res = await shopifyFetch<ShopifyProductsOperation>({ const res = await shopifyFetch<ShopifyProductsOperation>({
query: getProductsQuery, query: getProductsQuery,
@ -405,7 +460,9 @@ export async function getProducts({
variables: { variables: {
query, query,
reverse, reverse,
sortKey sortKey,
language,
country
} }
}); });

7
lib/shopify/queries/collection.ts
View File

@ -15,7 +15,8 @@ const collectionFragment = /* GraphQL */ `
`; `;
export const getCollectionQuery = /* GraphQL */ ` export const getCollectionQuery = /* GraphQL */ `
query getCollection($handle: String!) { query getCollection($handle: String!, $country: CountryCode, $language: LanguageCode)
@inContext(country: $country, language: $language) {
collection(handle: $handle) { collection(handle: $handle) {
...collection ...collection
} }
@ -41,7 +42,9 @@ export const getCollectionProductsQuery = /* GraphQL */ `
$handle: String! $handle: String!
$sortKey: ProductCollectionSortKeys $sortKey: ProductCollectionSortKeys
$reverse: Boolean $reverse: Boolean
) { $country: CountryCode
$language: LanguageCode
) @inContext(country: $country, language: $language) {
collection(handle: $handle) { collection(handle: $handle) {
products(sortKey: $sortKey, reverse: $reverse, first: 100) { products(sortKey: $sortKey, reverse: $reverse, first: 100) {
edges { edges {

6
lib/shopify/queries/page.ts
View File

@ -19,7 +19,8 @@ const pageFragment = /* GraphQL */ `
`; `;
export const getPageQuery = /* GraphQL */ ` export const getPageQuery = /* GraphQL */ `
query getPage($handle: String!) { query getPage($handle: String!, $country: CountryCode, $language: LanguageCode)
@inContext(country: $country, language: $language) {
pageByHandle(handle: $handle) { pageByHandle(handle: $handle) {
...page ...page
} }
@ -28,7 +29,8 @@ export const getPageQuery = /* GraphQL */ `
`; `;
export const getPagesQuery = /* GraphQL */ ` export const getPagesQuery = /* GraphQL */ `
query getPages { query getPages($country: CountryCode, $language: LanguageCode)
@inContext(country: $country, language: $language) {
pages(first: 100) { pages(first: 100) {
edges { edges {
node { node {

14
lib/shopify/queries/product.ts
View File

@ -1,7 +1,8 @@
import productFragment from '../fragments/product'; import productFragment from '../fragments/product';
export const getProductQuery = /* GraphQL */ ` export const getProductQuery = /* GraphQL */ `
query getProduct($handle: String!) { query getProduct($handle: String!, $country: CountryCode, $language: LanguageCode)
@inContext(country: $country, language: $language) {
product(handle: $handle) { product(handle: $handle) {
...product ...product
} }
@ -10,7 +11,13 @@ export const getProductQuery = /* GraphQL */ `
`; `;
export const getProductsQuery = /* GraphQL */ ` export const getProductsQuery = /* GraphQL */ `
query getProducts($sortKey: ProductSortKeys, $reverse: Boolean, $query: String) { query getProducts(
$sortKey: ProductSortKeys
$reverse: Boolean
$query: String
$country: CountryCode
$language: LanguageCode
) @inContext(country: $country, language: $language) {
products(sortKey: $sortKey, reverse: $reverse, query: $query, first: 100) { products(sortKey: $sortKey, reverse: $reverse, query: $query, first: 100) {
edges { edges {
node { node {
@ -23,7 +30,8 @@ export const getProductsQuery = /* GraphQL */ `
`; `;
export const getProductRecommendationsQuery = /* GraphQL */ ` export const getProductRecommendationsQuery = /* GraphQL */ `
query getProductRecommendations($productId: ID!) { query getProductRecommendations($productId: ID!, $country: CountryCode, $language: LanguageCode)
@inContext(country: $country, language: $language) {
productRecommendations(productId: $productId) { productRecommendations(productId: $productId) {
...product ...product
} }

16
lib/shopify/types.ts
View File

@ -190,6 +190,8 @@ export type ShopifyCollectionOperation = {
}; };
variables: { variables: {
handle: string; handle: string;
language?: string;
country?: string;
}; };
}; };
@ -203,6 +205,8 @@ export type ShopifyCollectionProductsOperation = {
handle: string; handle: string;
reverse?: boolean; reverse?: boolean;
sortKey?: string; sortKey?: string;
language?: string;
country?: string;
}; };
}; };
@ -228,19 +232,25 @@ export type ShopifyMenuOperation = {
export type ShopifyPageOperation = { export type ShopifyPageOperation = {
data: { pageByHandle: Page }; data: { pageByHandle: Page };
variables: { handle: string }; variables: { handle: string; language?: string; country?: string };
}; };
export type ShopifyPagesOperation = { export type ShopifyPagesOperation = {
data: { data: {
pages: Connection<Page>; pages: Connection<Page>;
}; };
variables: {
language?: string;
country?: string;
};
}; };
export type ShopifyProductOperation = { export type ShopifyProductOperation = {
data: { product: ShopifyProduct }; data: { product: ShopifyProduct };
variables: { variables: {
handle: string; handle: string;
language?: string;
country?: string;
}; };
}; };
@ -250,6 +260,8 @@ export type ShopifyProductRecommendationsOperation = {
}; };
variables: { variables: {
productId: string; productId: string;
language?: string;
country?: string;
}; };
}; };
@ -261,5 +273,7 @@ export type ShopifyProductsOperation = {
query?: string; query?: string;
reverse?: boolean; reverse?: boolean;
sortKey?: string; sortKey?: string;
language?: string;
country?: string;
}; };
}; };

5
tailwind.config.js
View File

@ -11,10 +11,11 @@ module.exports = {
}, },
fontFamily: { fontFamily: {
sans: ['var(--font-alpina)', 'sans-serif'], sans: ['var(--font-alpina)', 'sans-serif'],
title: ['var(--font-cinzel)', 'sans-serif'] title: ['var(--font-cinzel)', 'sans-serif'],
japan: ['var(--font-mincho)', 'sans-serif']
}, },
aspectRatio: { aspectRatio: {
bottle: '0.7065217391' bottle: '0.91'
}, },
keyframes: { keyframes: {
fadeIn: { fadeIn: {