Skip to content

Commit 6a25aa3

Browse files
BrocksiNetBrocksiNet
committed
Merge branch 'original-main' into feat/update-main-to-latest-changes
2 parents 92f3568 + 6946bf7 commit 6a25aa3

40 files changed

+2820
-2500
lines changed

‎.env.example

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
COMPANY_NAME="shopware AG"
2-
TWITTER_CREATOR="@shopware"
3-
TWITTER_SITE="https://www.shopware.com/en/solutions/shopware-composable-frontends/"
42
SITE_NAME="Next.js Commerce with Shopware Composable Frontends"
53
SHOPWARE_STORE_DOMAIN="https://demo-frontends.shopware.store"
64
SHOPWARE_API_TYPE="store-api"
75
SHOPWARE_ACCESS_TOKEN="SWSCBHFSNTVMAWNZDNFKSHLAYW"
86
SHOPWARE_USE_SEO_URLS="true"
97
SHOPWARE_REVALIDATION_SECRET=""
10-
BASE_E2E_URL=""
8+
BASE_E2E_URL=""

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,4 @@ yarn-error.log*
3838
# typescript
3939
*.tsbuildinfo
4040
next-env.d.ts
41+
.env*.local

‎app/(cms)/opengraph-image.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
import OpengraphImage from 'components/opengraph-image';
2-
import { getPage } from 'lib/shopware';
3-
4-
export const runtime = 'edge';
1+
import OpengraphImage from "components/opengraph-image";
2+
import { getPage } from "lib/shopware";
53

64
export default async function Image({ params }: { params: { page: string } }) {
75
const { page: pageParamName } = await params;
86
const page = await getPage(pageParamName);
9-
const title = page ? page.seo?.title || page.title : '';
7+
const title = page ? page.seo?.title || page.title : "";
108

119
return await OpengraphImage({ title });
1210
}

‎app/globals.css

+16-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@import "tailwindcss";
2+
3+
@plugin "@tailwindcss/container-queries";
4+
@plugin "@tailwindcss/typography";
5+
6+
@layer base {
7+
*,
8+
::after,
9+
::before,
10+
::backdrop,
11+
::file-selector-button {
12+
border-color: var(--color-gray-200, currentColor);
13+
}
14+
}
415

516
@media (prefers-color-scheme: dark) {
617
html {
@@ -9,13 +20,13 @@
920
}
1021

1122
@supports (font: -apple-system-body) and (-webkit-appearance: none) {
12-
img[loading='lazy'] {
23+
img[loading="lazy"] {
1324
clip-path: inset(0.6px);
1425
}
1526
}
1627

1728
a,
1829
input,
1930
button {
20-
@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;
31+
@apply focus-visible:outline-hidden 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;
2132
}

‎app/layout.tsx

+17-28
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,32 @@
1-
import { getCart } from 'components/cart/actions';
2-
import { CartProvider } from 'components/cart/cart-context';
3-
import Navbar from 'components/layout/navbar';
4-
import { GeistSans } from 'geist/font/sans';
5-
import { ensureStartsWith } from 'lib/utils';
6-
import { cookies } from 'next/headers';
7-
import { ReactNode } from 'react';
8-
import './globals.css';
1+
import { getCart } from "components/cart/actions";
2+
import { CartProvider } from "components/cart/cart-context";
3+
import Navbar from "components/layout/navbar";
4+
import { GeistSans } from "geist/font/sans";
5+
import type { ReactNode } from "react";
6+
import "./globals.css";
7+
import { baseUrl } from "lib/utils";
98

10-
const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
11-
const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
12-
? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
13-
: 'http://localhost:3000';
14-
const twitterCreator = TWITTER_CREATOR ? ensureStartsWith(TWITTER_CREATOR, '@') : undefined;
15-
const twitterSite = TWITTER_SITE ? ensureStartsWith(TWITTER_SITE, 'https://') : undefined;
9+
const { SITE_NAME } = process.env;
1610

1711
export const metadata = {
1812
metadataBase: new URL(baseUrl),
1913
title: {
20-
default: SITE_NAME!,
21-
template: `%s | ${SITE_NAME}`
14+
default: SITE_NAME || "Next.js Shopware Starter",
15+
template: `%s | ${SITE_NAME}`,
2216
},
2317
robots: {
2418
follow: true,
25-
index: true
19+
index: true,
2620
},
27-
...(twitterCreator &&
28-
twitterSite && {
29-
twitter: {
30-
card: 'summary_large_image',
31-
creator: twitterCreator,
32-
site: twitterSite
33-
}
34-
})
3521
};
3622

37-
export default async function RootLayout({ children }: { children: ReactNode }) {
38-
const cartId = (await cookies()).get('cartId')?.value;
23+
export default async function RootLayout({
24+
children,
25+
}: {
26+
children: ReactNode;
27+
}) {
3928
// Don't await the fetch, pass the Promise to the context provider
40-
const cart = getCart(cartId);
29+
const cart = getCart();
4130

4231
return (
4332
<html lang="en" className={GeistSans.variable}>

‎app/opengraph-image.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import OpengraphImage from 'components/opengraph-image';
2-
3-
export const runtime = 'edge';
1+
import OpengraphImage from "components/opengraph-image";
42

53
export default async function Image() {
64
return await OpengraphImage();

‎app/page.tsx

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import { Carousel } from 'components/carousel';
2-
import { ThreeItemGrid } from 'components/grid/three-items';
3-
import Footer from 'components/layout/footer';
1+
import { Carousel } from "components/carousel";
2+
import { ThreeItemGrid } from "components/grid/three-items";
3+
import Footer from "components/layout/footer";
44

55
export const metadata = {
6-
description: 'High-performance ecommerce store built with Next.js, Vercel, and Shopware.',
6+
description:
7+
"High-performance ecommerce store built with Next.js, Vercel, and Shopware.",
78
openGraph: {
8-
type: 'website'
9-
}
9+
type: "website",
10+
},
1011
};
1112

1213
export default function HomePage() {

‎app/product/[...handle]/page.tsx

+32-30
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import type { Metadata } from 'next';
2-
import { notFound } from 'next/navigation';
1+
import type { Metadata } from "next";
2+
import { notFound } from "next/navigation";
33

4-
import { GridTileImage } from 'components/grid/tile';
5-
import Footer from 'components/layout/footer';
6-
import { Gallery } from 'components/product/gallery';
7-
import { ProductProvider } from 'components/product/product-context';
8-
import { ProductDescription } from 'components/product/product-description';
9-
import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
10-
import { getProduct, getProductRecommendations } from 'lib/shopware';
11-
import { Image } from 'lib/shopware/types';
12-
import Link from 'next/link';
13-
import { Suspense } from 'react';
4+
import { GridTileImage } from "components/grid/tile";
5+
import Footer from "components/layout/footer";
6+
import { Gallery } from "components/product/gallery";
7+
import { ProductProvider } from "components/product/product-context";
8+
import { ProductDescription } from "components/product/product-description";
9+
import { HIDDEN_PRODUCT_TAG } from "lib/constants";
10+
import { getProduct, getProductRecommendations } from "lib/shopware";
11+
import { Image } from "lib/shopware/types";
12+
import Link from "next/link";
13+
import { Suspense } from "react";
1414

1515
export async function generateMetadata(props: {
1616
params: Promise<{ handle: string }>;
@@ -32,8 +32,8 @@ export async function generateMetadata(props: {
3232
follow: indexable,
3333
googleBot: {
3434
index: indexable,
35-
follow: indexable
36-
}
35+
follow: indexable,
36+
},
3737
},
3838
openGraph: url
3939
? {
@@ -42,46 +42,48 @@ export async function generateMetadata(props: {
4242
url,
4343
width,
4444
height,
45-
alt
46-
}
47-
]
45+
alt,
46+
},
47+
],
4848
}
49-
: null
49+
: null,
5050
};
5151
}
5252

53-
export default async function ProductPage(props: { params: Promise<{ handle: string }> }) {
53+
export default async function ProductPage(props: {
54+
params: Promise<{ handle: string }>;
55+
}) {
5456
const params = await props.params;
5557
const product = await getProduct(params.handle);
5658

5759
if (!product) return notFound();
5860

5961
const productJsonLd = {
60-
'@context': 'https://schema.org',
61-
'@type': 'Product',
62+
"@context": "https://schema.org",
63+
"@type": "Product",
6264
name: product.title,
6365
description: product.description,
6466
image: product.featuredImage.url,
6567
offers: {
66-
'@type': 'AggregateOffer',
68+
"@type": "AggregateOffer",
6769
availability: product.availableForSale
68-
? 'https://schema.org/InStock'
69-
: 'https://schema.org/OutOfStock',
70+
? "https://schema.org/InStock"
71+
: "https://schema.org/OutOfStock",
7072
priceCurrency: product.priceRange.minVariantPrice.currencyCode,
7173
highPrice: product.priceRange.maxVariantPrice.amount,
72-
lowPrice: product.priceRange.minVariantPrice.amount
73-
}
74+
lowPrice: product.priceRange.minVariantPrice.amount,
75+
},
7476
};
7577

7678
return (
7779
<ProductProvider>
7880
<script
7981
type="application/ld+json"
8082
dangerouslySetInnerHTML={{
81-
__html: JSON.stringify(productJsonLd)
83+
__html: JSON.stringify(productJsonLd),
8284
}}
8385
/>
84-
<div className="mx-auto max-w-screen-2xl px-4">
86+
<div className="mx-auto max-w-(--breakpoint-2xl) px-4">
8587
<div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 md:p-12 lg:flex-row lg:gap-8 dark:border-neutral-800 dark:bg-black">
8688
<div className="h-full w-full basis-full lg:basis-4/6">
8789
<Suspense
@@ -92,7 +94,7 @@ export default async function ProductPage(props: { params: Promise<{ handle: str
9294
<Gallery
9395
images={product.images.slice(0, 5).map((image: Image) => ({
9496
src: image.url,
95-
altText: image.altText
97+
altText: image.altText,
9698
}))}
9799
/>
98100
</Suspense>
@@ -136,7 +138,7 @@ async function RelatedProducts({ id }: { id: string }) {
136138
label={{
137139
title: product.title,
138140
amount: product.priceRange.maxVariantPrice.amount,
139-
currencyCode: product.priceRange.maxVariantPrice.currencyCode
141+
currencyCode: product.priceRange.maxVariantPrice.currencyCode,
140142
}}
141143
src={product.featuredImage?.url}
142144
fill

‎app/robots.ts

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
1-
const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
2-
? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
3-
: 'http://localhost:3000';
1+
import { baseUrl } from "lib/utils";
42

53
export default function robots() {
64
return {
75
rules: [
86
{
9-
userAgent: '*'
10-
}
7+
userAgent: "*",
8+
},
119
],
1210
sitemap: `${baseUrl}/sitemap.xml`,
13-
host: baseUrl
11+
host: baseUrl,
1412
};
1513
}

‎app/search/(collection)/opengraph-image.tsx

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import OpengraphImage from 'components/opengraph-image';
2-
import { getCollection } from 'lib/shopware';
1+
import OpengraphImage from "components/opengraph-image";
2+
import { getCollection } from "lib/shopware";
33

4-
export const runtime = 'edge';
5-
6-
export default async function Image({ params }: { params: { collection: string } }) {
7-
const { collection: collectionParamName } = await params;
8-
const collection = await getCollection(collectionParamName);
4+
export default async function Image({
5+
params,
6+
}: {
7+
params: { collection: string };
8+
}) {
9+
const collection = await getCollection(params.collection);
910
const title = collection?.seo?.title || collection?.title;
1011

1112
return await OpengraphImage({ title });

‎app/search/layout.tsx

+12-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
1-
import Footer from 'components/layout/footer';
2-
import ChildrenWrapper from './children-wrapper';
1+
import Footer from "components/layout/footer";
2+
import ChildrenWrapper from "./children-wrapper";
3+
import { Suspense } from "react";
34

4-
// @ToDo: We could use dynamic Layout per page, see https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts#with-typescript
5-
export default function SearchLayout({ children }: { children: React.ReactNode }) {
5+
export default function SearchLayout({
6+
children,
7+
}: {
8+
children: React.ReactNode;
9+
}) {
610
return (
711
<>
8-
<div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black md:flex-row dark:text-white">
12+
<div className="mx-auto flex max-w-(--breakpoint-2xl) flex-col gap-8 px-4 pb-4 text-black md:flex-row dark:text-white">
913
<div className="order-last min-h-screen w-full md:order-none">
10-
<ChildrenWrapper>{children}</ChildrenWrapper>
14+
<Suspense fallback={null}>
15+
<ChildrenWrapper>{children}</ChildrenWrapper>
16+
</Suspense>
1117
</div>
1218
</div>
1319
<Footer />

0 commit comments

Comments
 (0)