fix: og:image

Author: mkucmus

app/(cms)/opengraph-image.tsx

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

app/search/(collection)/[...collection]/page.tsx

@@ -31,7 +31,16 @@ export async function generateMetadata({
   return {
     title: collection.seo?.title || collection.title,
     description:
-      collection.seo?.description || collection.description || `${collection.title} products`
+      collection.seo?.description || collection.description || `${collection.title} products`,
+    openGraph: collection.featuredImage
+      ? {
+          images: [
+            {
+              url: collection.featuredImage
+            }
+          ]
+        }
+      : null
   };
 }
 

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

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

lib/shopware/criteria.ts

@@ -86,6 +86,7 @@ export function getDefaultCategoryCriteria(
     page: page,
     limit: limit,
     associations: {
+      media: {},
       cmsPage: {}
     }
   };
@@ -96,6 +97,7 @@ export function getDefaultCategoryWithCmsCriteria(page: number = 1, limit: numbe
     page: page,
     limit: limit,
     associations: {
+      media: {},
       cmsPage: {
         associations: {
           sections: {

lib/shopware/transform.ts

@@ -98,6 +98,7 @@ export function transformCollection(
     handle: seoUrlElement?.seoPathInfo ?? resCategory.id ?? '',
     title: resCategory.translated?.metaTitle ?? resCategory.name ?? '',
     description: resCategory.description ?? '',
+    featuredImage: resCategory?.media?.url ?? '',
     seo: {
       title: resCategory.translated?.metaTitle ?? resCategory.name ?? '',
       description: resCategory.translated?.metaDescription ?? resCategory.description ?? ''