sync demo

.gitignore

@@ -9,3 +9,6 @@ node_modules
 .vscode
 .shopify
 .turbo
+/test-results/
+/playwright-report/
+/playwright/.cache/

.graphqlrc.yml

@@ -1 +1,12 @@
-schema: node_modules/@shopify/hydrogen-react/storefront.schema.json
+projects:
+  default:
+    schema: 'node_modules/@shopify/hydrogen/storefront.schema.json'
+    documents:
+      - '!*.d.ts'
+      - '*.{ts,tsx,js,jsx}'
+      - 'app/**/*.{ts,tsx,js,jsx}'
+      - '!app/graphql/**/*.{ts,tsx,js,jsx}'
+  customer-account:
+    schema: 'node_modules/@shopify/hydrogen/customer-account.schema.json'
+    documents:
+      - 'app/graphql/customer-account/**/*.{ts,tsx,js,jsx}'

CHANGELOG.md

@@ -1,5 +1,12 @@
 # @weaverse/pilot
 
+## 2.5.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @weaverse/hydrogen@3.0.1
+
 ## 2.4.5
 
 ### Patch Changes

README.md

@@ -2,7 +2,7 @@
 
 <div align="center">
   <p style="text-align: center;">
-    <img alt="Version" src="https://img.shields.io/badge/version-2.4.1-blue.svg?cacheSeconds=2592000" />
+    <img alt="Version" src="https://img.shields.io/badge/version-2.5.1-blue.svg?cacheSeconds=2592000" />
     <a href="#" target="_blank">
       <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg?label=license" />
     </a>
@@ -43,13 +43,15 @@ _Pilot is an innovative Shopify theme, powered by Hydrogen, Remix, and Weaverse,
 
 ## Deployment
 - [Deploy to Shopify Oxygen](https://weaverse.io/docs/deployment/oxygen)
-- Deploy to Vercel:
-  [![Deploy with Vercel](https://vercel.com/button)](https://wvse.cc/deploy-pilot-to-vercel)
-
+- Deploy to Vercel: [![Deploy to Vercel](https://vercel.com/button)](https://wvse.cc/deploy-pilot-to-vercel)
 
 ## Getting started
 
-Follow these steps to get started with Pilot and begin crafting your Hydrogen-driven storefront:
+**Requirements:**
+
+- Node.js version 18.0.0 or higher
+
+**Follow these steps to get started with Pilot and begin crafting your Hydrogen-driven storefront:**
 
 1. Install [Weaverse Hydrogen Customizer](https://apps.shopify.com/weaverse) from Shopify App Store.
 2. Create new Hydrogen storefront inside Weaverse.

app/components/Cart.tsx

@@ -286,7 +286,7 @@ function CartLineItem({line}: {line: CartLine}) {
           </Heading>
 
           <div className="grid pb-2">
-            {(merchandise?.selectedOptions || []).map((option) => (
+            {(merchandise?.selectedOptions || []).filter(option => option.value !== 'Default Title').map((option) => (
               <Text color="subtle" key={option.name}>
                 {option.name}: {option.value}
               </Text>

app/components/GenericError.tsx

@@ -1,5 +1,4 @@
 import {Button} from './Button';
-import {FeaturedSection} from './FeaturedSection';
 import {PageHeader, Text} from './Text';
 
 export function GenericError({
@@ -41,7 +40,6 @@ export function GenericError({
           Take me to the home page
         </Button>
       </PageHeader>
-      <FeaturedSection />
     </>
   );
 }

app/components/Logo.tsx

@@ -4,7 +4,7 @@ import {Link} from './Link';
 
 export function Logo() {
   let settings = useThemeSettings();
-  let {logoData} = settings;
+  let logoData = settings?.logoData;
   if (!logoData) {
     return null;
   }

app/components/ProductCard.tsx

@@ -85,13 +85,14 @@ export function ProductCard({
           </div>
           <div className="grid gap-1">
             <Text
-              className="w-full overflow-hidden whitespace-nowrap text-ellipsis "
-              as="h3"
+              className="w-full overflow-hidden whitespace-nowrap text-ellipsis space-x-1"
+              as="h4"
             >
-              {product.title}
+              <span>{product.title}</span>
+              {firstVariant.sku && <span>({firstVariant.sku})</span>}
             </Text>
-            <div className="flex gap-4">
-              <Text className="flex gap-4">
+            <div className="flex">
+              <Text className="flex gap-2">
                 <Money withoutTrailingZeros data={price!} />
                 {isDiscounted(price as MoneyV2, compareAtPrice as MoneyV2) && (
                   <CompareAtPrice

app/data/fragments.ts

@@ -70,6 +70,7 @@ export const PRODUCT_CARD_FRAGMENT = `#graphql
           handle
           title
         }
+        sku
       }
     }
   }

app/data/queries.ts

@@ -98,7 +98,7 @@ export let PRODUCT_QUERY = `#graphql
         name
         values
       }
-      selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions) {
+      selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions, ignoreUnknownOptions: true, caseInsensitiveMatch: true) {
         ...ProductVariantFragment
       }
       media(first: 7) {

app/lib/session.server.ts

@@ -1,3 +1,4 @@
+import {type HydrogenSession} from '@shopify/hydrogen';
 import {
   createCookieSessionStorage,
   type SessionStorage,

app/root.tsx

@@ -175,33 +175,34 @@ const ErrorBoundaryComponent = ({error}: {error: Error}) => {
         <Links />
       </head>
       <body className="font-sans">
-        <Layout
-          layout={rootData?.layout}
-          key={`${locale.language}-${locale.country}`}
-        >
-          {isRouteError ? (
-            <>
-              {routeError.status === 404 ? (
-                <NotFound type={pageType} />
-              ) : (
-                <GenericError
-                  error={{message: `${routeError.status} ${routeError.data}`}}
-                />
-              )}
-            </>
+      {isRouteError ? (
+        <>
+          {routeError.status === 404 ? (
+            <NotFound type={pageType} />
           ) : (
             <GenericError
-              error={
-                error instanceof Error
-                  ? error
-                  : (routeError as Error) || undefined
-              }
+              error={{message: `${routeError.status} ${routeError.data}`}}
             />
           )}
-        </Layout>
-        <ScrollRestoration nonce={nonce} />
-        <Scripts nonce={nonce} />
-        <LiveReload nonce={nonce} />
+        </>
+      ) : (
+        <GenericError
+          error={
+            error instanceof Error
+              ? error
+              : (routeError as Error) || undefined
+          }
+        />
+      )}
+        {/*<Layout*/}
+        {/*  layout={rootData?.layout}*/}
+        {/*  key={`${locale.language}-${locale.country}`}*/}
+        {/*>*/}
+        {/*  */}
+        {/*</Layout>*/}
+        {/*<ScrollRestoration nonce={nonce} />*/}
+        {/*<Scripts nonce={nonce} />*/}
+        {/*<LiveReload nonce={nonce} />*/}
       </body>
     </html>
   );

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

@@ -1,5 +1,6 @@
 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',

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

@@ -6,35 +6,32 @@ import {
   useMatches,
   useOutlet,
 } from '@remix-run/react';
-import {Suspense} from 'react';
+import { flattenConnection } from '@shopify/hydrogen';
 import {
   defer,
-  redirect,
-  type LoaderFunctionArgs,
-  type AppLoadContext,
+  type LoaderFunctionArgs
 } from '@shopify/remix-oxygen';
-import {flattenConnection} from '@shopify/hydrogen';
+import { Suspense } from 'react';
 
 import type {
   CustomerDetailsFragment,
   OrderCardFragment,
 } from 'customer-accountapi.generated';
 import {
+  AccountAddressBook,
+  AccountDetails,
   Button,
+  Modal,
   OrderCard,
   PageHeader,
-  Text,
-  AccountDetails,
-  AccountAddressBook,
-  Modal,
   ProductSwimlane,
+  Text,
 } from '~/components';
-import {FeaturedCollections} from '~/components/FeaturedCollections';
-import {usePrefixPathWithLocale} from '~/lib/utils';
-import {CACHE_NONE, routeHeaders} from '~/data/cache';
-import {CUSTOMER_DETAILS_QUERY} from '~/graphql/customer-account/CustomerDetailsQuery';
-
-import {doLogout} from './($locale).account_.logout';
+import { FeaturedCollections } from '~/components/FeaturedCollections';
+import { CACHE_NONE, routeHeaders } from '~/data/cache';
+import { CUSTOMER_DETAILS_QUERY } from '~/graphql/customer-account/CustomerDetailsQuery';
+import { usePrefixPathWithLocale } from '~/lib/utils';
+import { doLogout } from './($locale).account_.logout';
 import {
   getFeaturedData,
   type FeaturedData,

app/routes/($locale).cart.add.$variantId.ts

@@ -0,0 +1,22 @@
+import { json, LoaderFunctionArgs, redirect } from '@shopify/remix-oxygen'
+
+export async function loader({params, context}: LoaderFunctionArgs) {
+  const {cart} = context;
+
+  try {
+    let variantId = params.variantId
+
+    let inputLines = [
+      {
+        merchandiseId: `gid://shopify/ProductVariant/${variantId}`,
+        quantity: 1
+      }
+    ]
+    await cart.addLines(inputLines)
+
+    return redirect('/cart')
+  } catch (e) {
+    console.error(e)
+    return json({error: e})
+  }
+}

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

@@ -7,17 +7,16 @@ import type {
   ProductCollectionSortKeys,
   ProductFilter,
 } from '@shopify/hydrogen/storefront-api-types';
-import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-
+import { json, type LoaderFunctionArgs } from '@shopify/remix-oxygen';
 import invariant from 'tiny-invariant';
-import type {SortParam} from '~/components/SortFilter';
-import {FILTER_URL_PREFIX} from '~/components/SortFilter';
-import {routeHeaders} from '~/data/cache';
-import {COLLECTION_QUERY} from '~/data/queries';
-import {seoPayload} from '~/lib/seo.server';
-import {parseAsCurrency} from '~/lib/utils';
-import {WeaverseContent} from '~/weaverse';
-import {getImageLoadingPriority, PAGINATION_SIZE} from '~/lib/const';
+import type { SortParam } from '~/components/SortFilter';
+import { FILTER_URL_PREFIX } from '~/components/SortFilter';
+import { routeHeaders } from '~/data/cache';
+import { COLLECTION_QUERY } from '~/data/queries';
+import { PAGINATION_SIZE } from '~/lib/const';
+import { seoPayload } from '~/lib/seo.server';
+import { parseAsCurrency } from '~/lib/utils';
+import { WeaverseContent } from '~/weaverse';
 
 export const headers = routeHeaders;
 
@@ -137,7 +136,7 @@ export default function Collection() {
   return <WeaverseContent />;
 }
 
-function getSortValuesFromParam(sortParam: SortParam | null): {
+export function getSortValuesFromParam(sortParam: SortParam | null): {
   sortKey: ProductCollectionSortKeys;
   reverse: boolean;
 } {

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

@@ -1,21 +1,20 @@
-import {getPaginationVariables} from '@shopify/hydrogen';
-import {json} from '@shopify/remix-oxygen';
+import { getPaginationVariables } from '@shopify/hydrogen';
+import type { LoaderFunctionArgs } from '@shopify/remix-oxygen';
+import { json } from '@shopify/remix-oxygen';
 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;
+import { routeHeaders } from '~/data/cache';
+import { ALL_PRODUCTS_QUERY } from '~/data/queries';
+import { PAGINATION_SIZE } from '~/lib/const';
+import { seoPayload } from '~/lib/seo.server';
+import { WeaverseContent } from '~/weaverse';
 
 export const headers = routeHeaders;
 
 export async function loader({
   request,
   context: {storefront, weaverse},
 }: LoaderFunctionArgs) {
-  const variables = getPaginationVariables(request, {pageBy: PAGE_BY});
+  const variables = getPaginationVariables(request, {pageBy: PAGINATION_SIZE});
 
   const data = await storefront.query(ALL_PRODUCTS_QUERY, {
     variables: {

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

@@ -1,8 +1,7 @@
-import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {Await, Form, useLoaderData} from '@remix-run/react';
-import {Suspense} from 'react';
-import {Pagination, getPaginationVariables} from '@shopify/hydrogen';
-
+import { Await, Form, useLoaderData } from '@remix-run/react';
+import { getPaginationVariables, Pagination } from '@shopify/hydrogen';
+import { defer, type LoaderFunctionArgs } from '@shopify/remix-oxygen';
+import { Suspense } from 'react';
 import {
   FeaturedCollections,
   Grid,
@@ -14,10 +13,9 @@ import {
   Section,
   Text,
 } from '~/components';
-import {PRODUCT_CARD_FRAGMENT} from '~/data/fragments';
-import {getImageLoadingPriority, PAGINATION_SIZE} from '~/lib/const';
-import {seoPayload} from '~/lib/seo.server';
-
+import { PRODUCT_CARD_FRAGMENT } from '~/data/fragments';
+import { getImageLoadingPriority, PAGINATION_SIZE } from '~/lib/const';
+import { seoPayload } from '~/lib/seo.server';
 import {
   getFeaturedData,
   type FeaturedData,
@@ -29,7 +27,7 @@ export async function loader({
 }: LoaderFunctionArgs) {
   const searchParams = new URL(request.url).searchParams;
   const searchTerm = searchParams.get('q')!;
-  const variables = getPaginationVariables(request, {pageBy: 8});
+  const variables = getPaginationVariables(request, {pageBy: PAGINATION_SIZE});
 
   const {products} = await storefront.query(SEARCH_QUERY, {
     variables: {