mirror of
https://github.com/vercel/commerce.git
synced 2025-05-13 05:07:51 +00:00
removing unecessary oaesg
This commit is contained in:
Samantha Kellow
parent
b70557397b
commit
8126a1fd21
@ -1,145 +0,0 @@
|
|||||||
import type { Metadata } from 'next';
|
|
||||||
import { notFound } from 'next/navigation';
|
|
||||||
import { Suspense } from 'react';
|
|
||||||
|
|
||||||
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';
|
|
||||||
|
|
||||||
export const runtime = 'edge';
|
|
||||||
|
|
||||||
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 hide = !product.tags.includes(HIDDEN_PRODUCT_TAG);
|
|
||||||
|
|
||||||
return {
|
|
||||||
title: product.seo.title || product.title,
|
|
||||||
description: product.seo.description || product.description,
|
|
||||||
robots: {
|
|
||||||
index: hide,
|
|
||||||
follow: hide,
|
|
||||||
googleBot: {
|
|
||||||
index: hide,
|
|
||||||
follow: hide
|
|
||||||
}
|
|
||||||
},
|
|
||||||
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="rounded-lg border border-neutral-200 bg-white p-8 px-4 dark:border-neutral-800 dark:bg-black md:p-12 lg:grid lg:grid-cols-6">
|
|
||||||
<div className="lg:col-span-3">
|
|
||||||
<Gallery
|
|
||||||
images={product.images.map((image: Image) => ({
|
|
||||||
src: image.url,
|
|
||||||
altText: image.altText
|
|
||||||
}))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="lg:col-span-3 lg:grid lg:grid-cols-6">
|
|
||||||
<div className="py-10 lg:py-6 lg:col-span-4 lg:col-start-2">
|
|
||||||
<ProductDescription product={product} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Suspense>
|
|
||||||
<RelatedProducts id={product.id} />
|
|
||||||
</Suspense>
|
|
||||||
</div>
|
|
||||||
<Suspense>
|
|
||||||
<Footer />
|
|
||||||
</Suspense>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
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>
|
|
||||||
<div className="flex w-full gap-4 overflow-x-auto pt-1">
|
|
||||||
{relatedProducts.map((product, i) => {
|
|
||||||
return (
|
|
||||||
<Link
|
|
||||||
key={i}
|
|
||||||
className="w-full flex-none min-[475px]:w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/5"
|
|
||||||
href={`/products/${product.handle}`}
|
|
||||||
>
|
|
||||||
<GridTileImage
|
|
||||||
alt={product.title}
|
|
||||||
label={{
|
|
||||||
title: product.title,
|
|
||||||
amount: product.priceRange.maxVariantPrice.amount,
|
|
||||||
currencyCode: product.priceRange.maxVariantPrice.currencyCode
|
|
||||||
}}
|
|
||||||
src={product.featuredImage?.url}
|
|
||||||
width={600}
|
|
||||||
height={600}
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,55 +0,0 @@
|
|||||||
import { ProductSKUs } from "components/product/sku-generator";
|
|
||||||
import { HIDDEN_PRODUCT_TAG } from "lib/constants";
|
|
||||||
import { getProduct } from "lib/shopify";
|
|
||||||
import { Metadata } from "next";
|
|
||||||
import { notFound } from "next/navigation";
|
|
||||||
|
|
||||||
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 hide = !product.tags.includes(HIDDEN_PRODUCT_TAG);
|
|
||||||
|
|
||||||
return {
|
|
||||||
title: product.seo.title || product.title,
|
|
||||||
description: product.seo.description || product.description,
|
|
||||||
robots: {
|
|
||||||
index: hide,
|
|
||||||
follow: hide,
|
|
||||||
googleBot: {
|
|
||||||
index: hide,
|
|
||||||
follow: hide
|
|
||||||
}
|
|
||||||
},
|
|
||||||
openGraph: url
|
|
||||||
? {
|
|
||||||
images: [
|
|
||||||
{
|
|
||||||
url,
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
alt
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
: null
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export default async function ViewSKUs({ params }: { params: { handle: string } }) {
|
|
||||||
const product = await getProduct(params.handle);
|
|
||||||
|
|
||||||
if (!product) return
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<ProductSKUs productTitle={product.title} noTitle={true} />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
@ -1,145 +0,0 @@
|
|||||||
import type { Metadata } from 'next';
|
|
||||||
import { notFound } from 'next/navigation';
|
|
||||||
import { Suspense } from 'react';
|
|
||||||
|
|
||||||
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';
|
|
||||||
|
|
||||||
export const runtime = 'edge';
|
|
||||||
|
|
||||||
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 hide = !product.tags.includes(HIDDEN_PRODUCT_TAG);
|
|
||||||
|
|
||||||
return {
|
|
||||||
title: product.seo.title || product.title,
|
|
||||||
description: product.seo.description || product.description,
|
|
||||||
robots: {
|
|
||||||
index: hide,
|
|
||||||
follow: hide,
|
|
||||||
googleBot: {
|
|
||||||
index: hide,
|
|
||||||
follow: hide
|
|
||||||
}
|
|
||||||
},
|
|
||||||
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="rounded-lg border border-neutral-200 bg-white p-8 px-4 dark:border-neutral-800 dark:bg-black md:p-12 lg:grid lg:grid-cols-6">
|
|
||||||
<div className="lg:col-span-3">
|
|
||||||
<Gallery
|
|
||||||
images={product.images.map((image: Image) => ({
|
|
||||||
src: image.url,
|
|
||||||
altText: image.altText
|
|
||||||
}))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="lg:col-span-3 lg:grid lg:grid-cols-6">
|
|
||||||
<div className="py-6 lg:col-span-4 lg:col-start-2">
|
|
||||||
<ProductDescription product={product} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Suspense>
|
|
||||||
<RelatedProducts id={product.id} />
|
|
||||||
</Suspense>
|
|
||||||
</div>
|
|
||||||
<Suspense>
|
|
||||||
<Footer />
|
|
||||||
</Suspense>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
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>
|
|
||||||
<div className="flex w-full gap-4 overflow-x-auto pt-1">
|
|
||||||
{relatedProducts.map((product, i) => {
|
|
||||||
return (
|
|
||||||
<Link
|
|
||||||
key={i}
|
|
||||||
className="w-full flex-none min-[475px]:w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/5"
|
|
||||||
href={`/products/${product.handle}`}
|
|
||||||
>
|
|
||||||
<GridTileImage
|
|
||||||
alt={product.title}
|
|
||||||
label={{
|
|
||||||
title: product.title,
|
|
||||||
amount: product.priceRange.maxVariantPrice.amount,
|
|
||||||
currencyCode: product.priceRange.maxVariantPrice.currencyCode
|
|
||||||
}}
|
|
||||||
src={product.featuredImage?.url}
|
|
||||||
width={600}
|
|
||||||
height={600}
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,55 +0,0 @@
|
|||||||
import { ProductSKUs } from "components/product/sku-generator";
|
|
||||||
import { HIDDEN_PRODUCT_TAG } from "lib/constants";
|
|
||||||
import { getProduct } from "lib/shopify";
|
|
||||||
import { Metadata } from "next";
|
|
||||||
import { notFound } from "next/navigation";
|
|
||||||
|
|
||||||
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 hide = !product.tags.includes(HIDDEN_PRODUCT_TAG);
|
|
||||||
|
|
||||||
return {
|
|
||||||
title: product.seo.title || product.title,
|
|
||||||
description: product.seo.description || product.description,
|
|
||||||
robots: {
|
|
||||||
index: hide,
|
|
||||||
follow: hide,
|
|
||||||
googleBot: {
|
|
||||||
index: hide,
|
|
||||||
follow: hide
|
|
||||||
}
|
|
||||||
},
|
|
||||||
openGraph: url
|
|
||||||
? {
|
|
||||||
images: [
|
|
||||||
{
|
|
||||||
url,
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
alt
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
: null
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export default async function ViewSKUs({ params }: { params: { handle: string } }) {
|
|
||||||
const product = await getProduct(params.handle);
|
|
||||||
|
|
||||||
if (!product) return
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<ProductSKUs productTitle={product.title} noTitle={true} />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
Loading…
x
Reference in New Issue
Block a user