sync demo

app/components/FeaturedSection.tsx

@@ -13,7 +13,7 @@ export function FeaturedSection() {
 
   useEffect(() => {
     load(path);
-  }, [load, path]);
+  }, [path]);
 
   if (!data) return null;
 

app/routes/($locale).$.tsx

@@ -0,0 +1,17 @@
+import {WeaverseContent} from '~/weaverse';
+import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+export async function loader({context}: LoaderFunctionArgs) {
+  let weaverseData = await context.weaverse.loadPage({
+    type: 'CUSTOM',
+  });
+  if (!weaverseData) {
+    return new Response(null, {status: 404});
+  }
+  return {
+    weaverseData,
+  };
+}
+
+export default function Component() {
+  return <WeaverseContent />;
+}

app/routes/($locale)._index.tsx

@@ -1,32 +1,37 @@
 import {AnalyticsPageType} from '@shopify/hydrogen';
 import {defer} from '@shopify/remix-oxygen';
-import {type RouteLoaderArgs} from '@weaverse/hydrogen';
 import {routeHeaders} from '~/data/cache';
 import {SHOP_QUERY} from '~/data/queries';
 import {seoPayload} from '~/lib/seo.server';
 import {WeaverseContent} from '~/weaverse';
+import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import type {PageType} from '@weaverse/hydrogen';
 
 export const headers = routeHeaders;
 
-export async function loader(args: RouteLoaderArgs) {
+export async function loader(args: LoaderFunctionArgs) {
   let {params, context} = args;
   let {language, country} = context.storefront.i18n;
 
+  let pageType: PageType = 'INDEX';
   if (
     params.locale &&
     params.locale.toLowerCase() !== `${language}-${country}`.toLowerCase()
   ) {
     // If the locale URL param is defined, yet we still are on `EN-US`
-    // the the locale param must be invalid, send to the 404 page
-    throw new Response(null, {status: 404});
+    // the locale param must be invalid
+    // Update for Weaverse: if it not locale, it probably is a custom page handle
+    pageType = 'CUSTOM';
   }
 
   let {shop} = await context.storefront.query(SHOP_QUERY);
   let seo = seoPayload.home();
 
   return defer({
     shop,
-    weaverseData: await context.weaverse.loadPage(),
+    weaverseData: await context.weaverse.loadPage({
+      type: pageType,
+    }),
     analytics: {
       pageType: AnalyticsPageType.home,
     },

app/routes/($locale).blogs.$blogHandle.$articleHandle.tsx

@@ -58,7 +58,10 @@ export async function loader(args: RouteLoaderArgs) {
     relatedArticles,
     formattedDate,
     seo,
-    weaverseData: await context.weaverse.loadPage(),
+    weaverseData: await context.weaverse.loadPage({
+      type: 'ARTICLE',
+      handle: params.articleHandle,
+    }),
   });
 }
 

app/routes/($locale).blogs.$blogHandle._index.tsx

@@ -47,7 +47,10 @@ export const loader = async (args: RouteLoaderArgs) => {
     blog,
     articles,
     seo,
-    weaverseData: await context.weaverse.loadPage(),
+    weaverseData: await context.weaverse.loadPage({
+      type: 'BLOG',
+      handle: params.blogHandle,
+    }),
   });
 };
 

app/routes/($locale).collections.$collectionHandle.tsx

@@ -125,7 +125,10 @@ export async function loader(args: RouteLoaderArgs) {
       resourceId: collection.id,
     },
     seo,
-    weaverseData: await context.weaverse.loadPage(),
+    weaverseData: await context.weaverse.loadPage({
+      type: 'COLLECTION',
+      handle: collectionHandle,
+    }),
   });
 }
 

app/routes/($locale).collections._index.tsx

@@ -32,7 +32,9 @@ export const loader = async (args: RouteLoaderArgs) => {
   return json({
     collections,
     seo,
-    weaverseData: await weaverse.loadPage(),
+    weaverseData: await weaverse.loadPage({
+      type: 'COLLECTION_LIST'
+    }),
   });
 };
 

app/routes/($locale).pages.$pageHandle.tsx

@@ -27,7 +27,10 @@ export async function loader({request, params, context}: RouteLoaderArgs) {
   return json({
     page,
     seo,
-    weaverseData: await context.weaverse.loadPage(),
+    weaverseData: await context.weaverse.loadPage({
+      type: 'PAGE',
+      handle: params.pageHandle,
+    }),
   });
 }
 

app/routes/($locale).products.$productHandle.tsx

@@ -48,7 +48,7 @@ export async function loader({params, request, context}: LoaderFunctionArgs) {
 
   // In order to show which variants are available in the UI, we need to query
   // all of them. But there might be a *lot*, so instead separate the variants
-  // into it's own separate query that is deferred. So there's a brief moment
+  // into its own separate query that is deferred. So there's a brief moment
   // where variant options might show as available when they're not, but after
   // this deferred query resolves, the UI will update.
   const variants = await context.storefront.query(VARIANTS_QUERY, {
@@ -105,7 +105,10 @@ export async function loader({params, request, context}: LoaderFunctionArgs) {
       totalValue: parseFloat(selectedVariant.price.amount),
     },
     seo,
-    weaverseData: await context.weaverse.loadPage(),
+    weaverseData: await context.weaverse.loadPage({
+      type: 'PRODUCT',
+      handle: productHandle
+    }),
     judgemeReviews,
   });
 }

app/routes/($locale).products._index.tsx

@@ -1,11 +1,11 @@
 import {getPaginationVariables} from '@shopify/hydrogen';
 import {json} from '@shopify/remix-oxygen';
-import {type RouteLoaderArgs} from '@weaverse/hydrogen';
 import invariant from 'tiny-invariant';
 import {routeHeaders} from '~/data/cache';
 import {ALL_PRODUCTS_QUERY} from '~/data/queries';
 import {seoPayload} from '~/lib/seo.server';
 import {WeaverseContent} from '~/weaverse';
+import type {LoaderFunctionArgs} from '@shopify/remix-oxygen';
 
 const PAGE_BY = 8;
 
@@ -14,7 +14,7 @@ export const headers = routeHeaders;
 export async function loader({
   request,
   context: {storefront, weaverse},
-}: RouteLoaderArgs) {
+}: LoaderFunctionArgs) {
   const variables = getPaginationVariables(request, {pageBy: PAGE_BY});
 
   const data = await storefront.query(ALL_PRODUCTS_QUERY, {
@@ -48,7 +48,9 @@ export async function loader({
   return json({
     products: data.products,
     seo,
-    weaverseData: await weaverse.loadPage(),
+    weaverseData: await weaverse.loadPage({
+      type: 'ALL_PRODUCTS'
+    }),
   });
 }