@shopify/cli 3.72.2 → 3.73.0

package/dist/assets/hydrogen/starter/app/components/Aside.tsx

@@ -62,7 +62,7 @@ export function Aside({
       <aside>
         <header>
           <h3>{heading}</h3>
-          <button className="close reset" onClick={close}>
+          <button className="close reset" onClick={close} aria-label="Close">
             &times;
           </button>
         </header>

package/dist/assets/hydrogen/starter/app/components/PaginatedResourceSection.tsx

@@ -4,7 +4,6 @@ import {Pagination} from '@shopify/hydrogen';
 /**
  * <PaginatedResourceSection > is a component that encapsulate how the previous and next behaviors throughout your application.
  */
-
 export function PaginatedResourceSection<NodesType>({
   connection,
   children,
@@ -17,7 +16,7 @@ export function PaginatedResourceSection<NodesType>({
   return (
     <Pagination connection={connection}>
       {({nodes, isLoading, PreviousLink, NextLink}) => {
-        const resoucesMarkup = nodes.map((node, index) =>
+        const resourcesMarkup = nodes.map((node, index) =>
           children({node, index}),
         );
 
@@ -27,9 +26,9 @@ export function PaginatedResourceSection<NodesType>({
               {isLoading ? 'Loading...' : <span>↑ Load previous</span>}
             </PreviousLink>
             {resourcesClassName ? (
-              <div className={resourcesClassName}>{resoucesMarkup}</div>
+              <div className={resourcesClassName}>{resourcesMarkup}</div>
             ) : (
-              resoucesMarkup
+              resourcesMarkup
             )}
             <NextLink>
               {isLoading ? 'Loading...' : <span>Load more ↓</span>}

package/dist/assets/hydrogen/starter/app/components/ProductForm.tsx

@@ -1,32 +1,105 @@
-import {Link} from '@remix-run/react';
-import {type VariantOption, VariantSelector} from '@shopify/hydrogen';
+import {Link, useNavigate} from '@remix-run/react';
+import {type MappedProductOptions} from '@shopify/hydrogen';
 import type {
-  ProductFragment,
-  ProductVariantFragment,
-} from 'storefrontapi.generated';
-import {AddToCartButton} from '~/components/AddToCartButton';
-import {useAside} from '~/components/Aside';
+  Maybe,
+  ProductOptionValueSwatch,
+} from '@shopify/hydrogen/storefront-api-types';
+import {AddToCartButton} from './AddToCartButton';
+import {useAside} from './Aside';
+import type {ProductFragment} from 'storefrontapi.generated';
 
 export function ProductForm({
-  product,
+  productOptions,
   selectedVariant,
-  variants,
 }: {
-  product: ProductFragment;
-  selectedVariant: ProductFragment['selectedVariant'];
-  variants: Array<ProductVariantFragment>;
+  productOptions: MappedProductOptions[];
+  selectedVariant: ProductFragment['selectedOrFirstAvailableVariant'];
 }) {
+  const navigate = useNavigate();
   const {open} = useAside();
   return (
     <div className="product-form">
-      <VariantSelector
-        handle={product.handle}
-        options={product.options.filter((option) => option.optionValues.length > 1)}
-        variants={variants}
-      >
-        {({option}) => <ProductOptions key={option.name} option={option} />}
-      </VariantSelector>
-      <br />
+      {productOptions.map((option) => {
+        // If there is only a single value in the option values, don't display the option
+        if (option.optionValues.length === 1) return null;
+
+        return (
+          <div className="product-options" key={option.name}>
+            <h5>{option.name}</h5>
+            <div className="product-options-grid">
+              {option.optionValues.map((value) => {
+                const {
+                  name,
+                  handle,
+                  variantUriQuery,
+                  selected,
+                  available,
+                  exists,
+                  isDifferentProduct,
+                  swatch,
+                } = value;
+
+                if (isDifferentProduct) {
+                  // SEO
+                  // When the variant is a combined listing child product
+                  // that leads to a different url, we need to render it
+                  // as an anchor tag
+                  return (
+                    <Link
+                      className="product-options-item"
+                      key={option.name + name}
+                      prefetch="intent"
+                      preventScrollReset
+                      replace
+                      to={`/products/${handle}?${variantUriQuery}`}
+                      style={{
+                        border: selected
+                          ? '1px solid black'
+                          : '1px solid transparent',
+                        opacity: available ? 1 : 0.3,
+                      }}
+                    >
+                      <ProductOptionSwatch swatch={swatch} name={name} />
+                    </Link>
+                  );
+                } else {
+                  // SEO
+                  // When the variant is an update to the search param,
+                  // render it as a button with javascript navigating to
+                  // the variant so that SEO bots do not index these as
+                  // duplicated links
+                  return (
+                    <button
+                      type="button"
+                      className={`product-options-item${
+                        exists && !selected ? ' link' : ''
+                      }`}
+                      key={option.name + name}
+                      style={{
+                        border: selected
+                          ? '1px solid black'
+                          : '1px solid transparent',
+                        opacity: available ? 1 : 0.3,
+                      }}
+                      disabled={!exists}
+                      onClick={() => {
+                        if (!selected) {
+                          navigate(`?${variantUriQuery}`, {
+                            replace: true,
+                          });
+                        }
+                      }}
+                    >
+                      <ProductOptionSwatch swatch={swatch} name={name} />
+                    </button>
+                  );
+                }
+              })}
+            </div>
+            <br />
+          </div>
+        )
+      })}
       <AddToCartButton
         disabled={!selectedVariant || !selectedVariant.availableForSale}
         onClick={() => {
@@ -50,31 +123,27 @@ export function ProductForm({
   );
 }
 
-function ProductOptions({option}: {option: VariantOption}) {
+function ProductOptionSwatch({
+  swatch,
+  name,
+}: {
+  swatch?: Maybe<ProductOptionValueSwatch> | undefined;
+  name: string;
+}) {
+  const image = swatch?.image?.previewImage?.url;
+  const color = swatch?.color;
+
+  if (!image && !color) return name;
+
   return (
-    <div className="product-options" key={option.name}>
-      <h5>{option.name}</h5>
-      <div className="product-options-grid">
-        {option.values.map(({value, isAvailable, isActive, to}) => {
-          return (
-            <Link
-              className="product-options-item"
-              key={option.name + value}
-              prefetch="intent"
-              preventScrollReset
-              replace
-              to={to}
-              style={{
-                border: isActive ? '1px solid black' : '1px solid transparent',
-                opacity: isAvailable ? 1 : 0.3,
-              }}
-            >
-              {value}
-            </Link>
-          );
-        })}
-      </div>
-      <br />
+    <div
+      aria-label={name}
+      className="product-option-label-swatch"
+      style={{
+        backgroundColor: color || 'transparent',
+      }}
+    >
+      {!!image && <img src={image} alt={name} />}
     </div>
   );
 }

package/dist/assets/hydrogen/starter/app/components/SearchResults.tsx

@@ -113,12 +113,15 @@ function SearchResultsProducts({
               term,
             });
 
+            const price = product?.selectedOrFirstAvailableVariant?.price;
+            const image = product?.selectedOrFirstAvailableVariant?.image;
+
             return (
               <div className="search-results-item" key={product.id}>
                 <Link prefetch="intent" to={productUrl}>
-                  {product.variants.nodes[0].image && (
+                  {image && (
                     <Image
-                      data={product.variants.nodes[0].image}
+                      data={image}
                       alt={product.title}
                       width={50}
                     />
@@ -126,7 +129,9 @@ function SearchResultsProducts({
                   <div>
                     <p>{product.title}</p>
                     <small>
-                      <Money data={product.variants.nodes[0].price} />
+                      {price &&
+                        <Money data={price} />
+                      }
                     </small>
                   </div>
                 </Link>

package/dist/assets/hydrogen/starter/app/components/SearchResultsPredictive.tsx

@@ -133,7 +133,7 @@ function SearchResultsPredictiveCollections({
       <h5>Collections</h5>
       <ul>
         {collections.map((collection) => {
-          const colllectionUrl = urlWithTrackingParams({
+          const collectionUrl = urlWithTrackingParams({
             baseUrl: `/collections/${collection.handle}`,
             trackingParams: collection.trackingParameters,
             term: term.current,
@@ -141,7 +141,7 @@ function SearchResultsPredictiveCollections({
 
           return (
             <li className="predictive-search-result-item" key={collection.id}>
-              <Link onClick={closeSearch} to={colllectionUrl}>
+              <Link onClick={closeSearch} to={collectionUrl}>
                 {collection.image?.url && (
                   <Image
                     alt={collection.image.altText ?? ''}
@@ -213,7 +213,8 @@ function SearchResultsPredictiveProducts({
             term: term.current,
           });
 
-          const image = product?.variants?.nodes?.[0].image;
+          const price = product?.selectedOrFirstAvailableVariant?.price;
+          const image = product?.selectedOrFirstAvailableVariant?.image;
           return (
             <li className="predictive-search-result-item" key={product.id}>
               <Link to={productUrl} onClick={closeSearch}>
@@ -228,8 +229,8 @@ function SearchResultsPredictiveProducts({
                 <div>
                   <p>{product.title}</p>
                   <small>
-                    {product?.variants?.nodes?.[0].price && (
-                      <Money data={product.variants.nodes[0].price} />
+                    {price && (
+                      <Money data={price} />
                     )}
                   </small>
                 </div>

package/dist/assets/hydrogen/starter/app/lib/variants.ts

@@ -4,7 +4,7 @@ import {useMemo} from 'react';
 
 export function useVariantUrl(
   handle: string,
-  selectedOptions: SelectedOption[],
+  selectedOptions?: SelectedOption[],
 ) {
   const {pathname} = useLocation();
 
@@ -27,7 +27,7 @@ export function getVariantUrl({
   handle: string;
   pathname: string;
   searchParams: URLSearchParams;
-  selectedOptions: SelectedOption[];
+  selectedOptions?: SelectedOption[];
 }) {
   const match = /(\/[a-zA-Z]{2}-[a-zA-Z]{2}\/)/g.exec(pathname);
   const isLocalePathname = match && match.length > 0;
@@ -36,7 +36,7 @@ export function getVariantUrl({
     ? `${match![0]}products/${handle}`
     : `/products/${handle}`;
 
-  selectedOptions.forEach((option) => {
+  selectedOptions?.forEach((option) => {
     searchParams.set(option.name, option.value);
   });
 

package/dist/assets/hydrogen/starter/app/routes/account_.logout.tsx

@@ -1,6 +1,6 @@
 import {redirect, type ActionFunctionArgs} from '@shopify/remix-oxygen';
 
-// if we dont implement this, /account/logout will get caught by account.$.tsx to do login
+// if we don't implement this, /account/logout will get caught by account.$.tsx to do login
 export async function loader() {
   return redirect('/');
 }

package/dist/assets/hydrogen/starter/app/routes/cart.tsx

@@ -1,10 +1,8 @@
-import {Await, type MetaFunction, useRouteLoaderData} from '@remix-run/react';
-import {Suspense} from 'react';
+import {type MetaFunction, useLoaderData} from '@remix-run/react';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
-import {json, type ActionFunctionArgs} from '@shopify/remix-oxygen';
+import {json, type LoaderFunctionArgs, type ActionFunctionArgs} from '@shopify/remix-oxygen';
 import {CartMain} from '~/components/CartMain';
-import type {RootLoader} from '~/root';
 
 export const meta: MetaFunction = () => {
   return [{title: `Hydrogen | Cart`}];
@@ -95,23 +93,18 @@ export async function action({request, context}: ActionFunctionArgs) {
   );
 }
 
+export async function loader({context}: LoaderFunctionArgs) {
+  const {cart} = context;
+  return json(await cart.get());
+}
+
 export default function Cart() {
-  const rootData = useRouteLoaderData<RootLoader>('root');
-  if (!rootData) return null;
+  const cart = useLoaderData<typeof loader>();
 
   return (
     <div className="cart">
       <h1>Cart</h1>
-      <Suspense fallback={<p>Loading cart ...</p>}>
-        <Await
-          resolve={rootData.cart}
-          errorElement={<div>An error occurred</div>}
-        >
-          {(cart) => {
-            return <CartMain layout="page" cart={cart} />;
-          }}
-        </Await>
-      </Suspense>
+      <CartMain layout="page" cart={cart} />
     </div>
   );
 }

package/dist/assets/hydrogen/starter/app/routes/collections.$handle.tsx

@@ -108,8 +108,7 @@ function ProductItem({
   product: ProductItemFragment;
   loading?: 'eager' | 'lazy';
 }) {
-  const variant = product.variants.nodes[0];
-  const variantUrl = useVariantUrl(product.handle, variant.selectedOptions);
+  const variantUrl = useVariantUrl(product.handle);
   return (
     <Link
       className="product-item"
@@ -158,14 +157,6 @@ const PRODUCT_ITEM_FRAGMENT = `#graphql
         ...MoneyProductItem
       }
     }
-    variants(first: 1) {
-      nodes {
-        selectedOptions {
-          name
-          value
-        }
-      }
-    }
   }
 ` as const;
 

package/dist/assets/hydrogen/starter/app/routes/collections.all.tsx

@@ -76,8 +76,7 @@ function ProductItem({
   product: ProductItemFragment;
   loading?: 'eager' | 'lazy';
 }) {
-  const variant = product.variants.nodes[0];
-  const variantUrl = useVariantUrl(product.handle, variant.selectedOptions);
+  const variantUrl = useVariantUrl(product.handle);
   return (
     <Link
       className="product-item"
@@ -126,14 +125,6 @@ const PRODUCT_ITEM_FRAGMENT = `#graphql
         ...MoneyProductItem
       }
     }
-    variants(first: 1) {
-      nodes {
-        selectedOptions {
-          name
-          value
-        }
-      }
-    }
   }
 ` as const;
 

package/dist/assets/hydrogen/starter/app/routes/products.$handle.tsx

@@ -1,20 +1,25 @@
-import {Suspense} from 'react';
-import {defer, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {Await, useLoaderData, type MetaFunction} from '@remix-run/react';
-import type {ProductFragment} from 'storefrontapi.generated';
+import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {useLoaderData, type MetaFunction} from '@remix-run/react';
 import {
   getSelectedProductOptions,
   Analytics,
   useOptimisticVariant,
+  getProductOptions,
+  getAdjacentAndFirstAvailableVariants,
+  useSelectedOptionInUrlParam,
 } from '@shopify/hydrogen';
-import type {SelectedOption} from '@shopify/hydrogen/storefront-api-types';
-import {getVariantUrl} from '~/lib/variants';
 import {ProductPrice} from '~/components/ProductPrice';
 import {ProductImage} from '~/components/ProductImage';
 import {ProductForm} from '~/components/ProductForm';
 
 export const meta: MetaFunction<typeof loader> = ({data}) => {
-  return [{title: `Hydrogen | ${data?.product.title ?? ''}`}];
+  return [
+    {title: `Hydrogen | ${data?.product.title ?? ''}`},
+    {
+      rel: 'canonical',
+      href: `/products/${data?.product.handle}`,
+    },
+  ];
 };
 
 export async function loader(args: LoaderFunctionArgs) {
@@ -54,24 +59,6 @@ async function loadCriticalData({
     throw new Response(null, {status: 404});
   }
 
-  const firstVariant = product.variants.nodes[0];
-  const firstVariantIsDefault = Boolean(
-    firstVariant.selectedOptions.find(
-      (option: SelectedOption) =>
-        option.name === 'Title' && option.value === 'Default Title',
-    ),
-  );
-
-  if (firstVariantIsDefault) {
-    product.selectedVariant = firstVariant;
-  } else {
-    // if no selected variant was returned from the selected options,
-    // we redirect to the first variant's url with it's selected options applied
-    if (!product.selectedVariant) {
-      throw redirectToFirstVariant({product, request});
-    }
-  }
-
   return {
     product,
   };
@@ -83,56 +70,31 @@ async function loadCriticalData({
  * Make sure to not throw any errors here, as it will cause the page to 500.
  */
 function loadDeferredData({context, params}: 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
-  // where variant options might show as available when they're not, but after
-  // this deffered query resolves, the UI will update.
-  const variants = context.storefront
-    .query(VARIANTS_QUERY, {
-      variables: {handle: params.handle!},
-    })
-    .catch((error) => {
-      // Log query errors, but don't throw them so the page can still render
-      console.error(error);
-      return null;
-    });
-
-  return {
-    variants,
-  };
-}
-
-function redirectToFirstVariant({
-  product,
-  request,
-}: {
-  product: ProductFragment;
-  request: Request;
-}) {
-  const url = new URL(request.url);
-  const firstVariant = product.variants.nodes[0];
+  // Put any API calls that is not critical to be available on first page render
+  // For example: product reviews, product recommendations, social feeds.
 
-  return redirect(
-    getVariantUrl({
-      pathname: url.pathname,
-      handle: product.handle,
-      selectedOptions: firstVariant.selectedOptions,
-      searchParams: new URLSearchParams(url.search),
-    }),
-    {
-      status: 302,
-    },
-  );
+  return {};
 }
 
 export default function Product() {
-  const {product, variants} = useLoaderData<typeof loader>();
+  const {product} = useLoaderData<typeof loader>();
+
+  // Optimistically selects a variant with given available variant information
   const selectedVariant = useOptimisticVariant(
-    product.selectedVariant,
-    variants,
+    product.selectedOrFirstAvailableVariant,
+    getAdjacentAndFirstAvailableVariants(product),
   );
 
+  // Sets the search param to the selected variant without navigation
+  // only when no search params are set in the url
+  useSelectedOptionInUrlParam(selectedVariant.selectedOptions);
+
+  // Get the product options array
+  const productOptions = getProductOptions({
+    ...product,
+    selectedOrFirstAvailableVariant: selectedVariant,
+  });
+
   const {title, descriptionHtml} = product;
 
   return (
@@ -145,28 +107,10 @@ export default function Product() {
           compareAtPrice={selectedVariant?.compareAtPrice}
         />
         <br />
-        <Suspense
-          fallback={
-            <ProductForm
-              product={product}
-              selectedVariant={selectedVariant}
-              variants={[]}
-            />
-          }
-        >
-          <Await
-            errorElement="There was a problem loading product variants"
-            resolve={variants}
-          >
-            {(data) => (
-              <ProductForm
-                product={product}
-                selectedVariant={selectedVariant}
-                variants={data?.product?.variants.nodes || []}
-              />
-            )}
-          </Await>
-        </Suspense>
+        <ProductForm
+          productOptions={productOptions}
+          selectedVariant={selectedVariant}
+        />
         <br />
         <br />
         <p>
@@ -240,19 +184,30 @@ const PRODUCT_FRAGMENT = `#graphql
     handle
     descriptionHtml
     description
+    encodedVariantExistence
+    encodedVariantAvailability
     options {
       name
       optionValues {
         name
+        firstSelectableVariant {
+          ...ProductVariant
+        }
+        swatch {
+          color
+          image {
+            previewImage {
+              url
+            }
+          }
+        }
       }
     }
-    selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions, ignoreUnknownOptions: true, caseInsensitiveMatch: true) {
+    selectedOrFirstAvailableVariant(selectedOptions: $selectedOptions, ignoreUnknownOptions: true, caseInsensitiveMatch: true) {
       ...ProductVariant
     }
-    variants(first: 1) {
-      nodes {
-        ...ProductVariant
-      }
+    adjacentVariants (selectedOptions: $selectedOptions) {
+      ...ProductVariant
     }
     seo {
       description
@@ -275,27 +230,3 @@ const PRODUCT_QUERY = `#graphql
   }
   ${PRODUCT_FRAGMENT}
 ` as const;
-
-const PRODUCT_VARIANTS_FRAGMENT = `#graphql
-  fragment ProductVariants on Product {
-    variants(first: 250) {
-      nodes {
-        ...ProductVariant
-      }
-    }
-  }
-  ${PRODUCT_VARIANT_FRAGMENT}
-` as const;
-
-const VARIANTS_QUERY = `#graphql
-  ${PRODUCT_VARIANTS_FRAGMENT}
-  query ProductVariants(
-    $country: CountryCode
-    $language: LanguageCode
-    $handle: String!
-  ) @inContext(country: $country, language: $language) {
-    product(handle: $handle) {
-      ...ProductVariants
-    }
-  }
-` as const;