sync demo

app/components/SortFilter.tsx

@@ -346,7 +346,7 @@ export default function SortMenu() {
         className="absolute right-0 flex flex-col p-4 text-right rounded-sm bg-contrast"
       >
         {items.map((item) => (
-          <Menu.Item key={item.key}>
+          <Menu.Item key={item.label}>
             {() => (
               <Link
                 className={`block text-sm pb-2 px-3 ${

app/data/queries.ts

@@ -462,7 +462,8 @@ export let VARIANTS_QUERY = `#graphql
   }
   ${PRODUCT_VARIANT_FRAGMENT}
 ` as const;
-export let CUSTOMER_CREATE = `#graphql mutation customerCreate($input: CustomerCreateInput!) {
+export let CUSTOMER_CREATE =
+  `#graphql mutation customerCreate($input: CustomerCreateInput!) {
   customerCreate(input: $input) {
     customer {
       id
@@ -475,3 +476,32 @@ export let CUSTOMER_CREATE = `#graphql mutation customerCreate($input: CustomerC
     }
   }
 }` as const;
+
+export const METAOBJECTS_QUERY = `#graphql
+  query MetaObjects ($type: String!, $first: Int)
+  {
+    metaobjects(type: $type, first: $first) {
+      nodes {
+        fields {
+          key
+          type
+          value
+          reference {
+            ... on MediaImage {
+              alt
+              image {
+                altText
+                url
+                width
+                height
+              }
+            }
+          }
+        }
+        handle
+        id
+        type
+      }
+    }
+  }
+  `;

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

@@ -2,13 +2,10 @@ import {WeaverseContent} from '~/weaverse';
 import type {LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import type {LoadPageParams} from '@weaverse/hydrogen';
 
-export async function loader({params, context, request}: LoaderFunctionArgs) {
-  const {language, country} = context.storefront.i18n;
-  let weaverseQuery: LoadPageParams = {
+export async function loader({context}: LoaderFunctionArgs) {
+  let weaverseData = await context.weaverse.loadPage({
     type: 'CUSTOM',
-    locale: `${language}-${country}`.toLowerCase(),
-  };
-  let weaverseData = await context.weaverse.loadPage(weaverseQuery);
+  });
   if (weaverseData?.page?.id && !weaverseData.page.id.includes('fallback')) {
     return {
       weaverseData,

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

@@ -1,26 +1,21 @@
 import {AnalyticsPageType} from '@shopify/hydrogen';
-import {defer} from '@shopify/remix-oxygen';
+import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 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 {LoadPageParams, PageType} from '@weaverse/hydrogen';
-
+import type {LoadPageParams} from '@weaverse/hydrogen';
 export const headers = routeHeaders;
 
 export async function loader(args: LoaderFunctionArgs) {
   let {params, context} = args;
-  let {language, country} = context.storefront.i18n;
-
-  let locale = `${language}-${country}`.toLowerCase();
+  let {pathPrefix} = context.storefront.i18n;
+  let locale = pathPrefix.slice(1);
   let weaverseQuery: LoadPageParams = {
     type: 'INDEX',
   };
 
   if (params.locale && params.locale.toLowerCase() !== locale) {
-    // If the locale URL param is defined, yet we still are on `EN-US`
-    // the locale param must be invalid
     // Update for Weaverse: if it not locale, it probably is a custom page handle
     weaverseQuery.type = 'CUSTOM';
   }

app/sections/meta-demo.tsx

@@ -6,6 +6,7 @@ import type {
 } from '@weaverse/hydrogen';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
+import {METAOBJECTS_QUERY} from '~/data/queries';
 
 type MetaObjectField = {
   key: string;
@@ -100,35 +101,7 @@ export let loader = async (args: ComponentLoaderArgs<MetaDemoProps>) => {
   if (!data?.metaDemo) {
     return null;
   }
-  let query = `#graphql
-  query MetaObjects ($type: String!, $first: Int)
-  {
-    metaobjects(type: $type, first: $first) {
-      nodes {
-        fields {
-          key
-          type
-          value
-          reference {
-            ... on MediaImage {
-              alt
-              image {
-                altText
-                url
-                width
-                height
-              }
-            }
-          }
-        }
-        handle
-        id
-        type
-      }
-    }
-  }
-  `;
-  let {metaobjects} = await storefront.query(query, {
+  let {metaobjects} = await storefront.query(METAOBJECTS_QUERY, {
     variables: {
       type: data.metaDemo.type,
       first: 10,