@shopify/cli-hydrogen 3.26.0 → 4.0.0-alpha.1

package/dist/templates/demo-store/app/routes/collections/$collectionHandle.tsx

@@ -0,0 +1,308 @@
+import {
+  json,
+  type MetaFunction,
+  type SerializeFrom,
+  type LoaderArgs,
+} from '@shopify/remix-oxygen';
+import {RESOURCE_TYPES, notFoundMaybeRedirect} from '@shopify/hydrogen';
+import {useLoaderData} from '@remix-run/react';
+import type {
+  Collection as CollectionType,
+  CollectionConnection,
+  MetafieldReference,
+  Filter,
+} from '@shopify/hydrogen-react/storefront-api-types';
+import {flattenConnection} from '@shopify/hydrogen-react';
+import invariant from 'tiny-invariant';
+import {PageHeader, Section, Text, SortFilter, Breadcrumbs} from '~/components';
+import {ProductGrid} from '~/components/ProductGrid';
+
+import {PRODUCT_CARD_FRAGMENT} from '~/data';
+
+const PAGINATION_SIZE = 48;
+
+type VariantFilterParam = Record<string, string | boolean>;
+type PriceFiltersQueryParam = Record<'price', {max?: number; min?: number}>;
+type VariantOptionFiltersQueryParam = Record<
+  'variantOption',
+  {name: string; value: string}
+>;
+
+export type AppliedFilter = {
+  label: string;
+  urlParam: {
+    key: string;
+    value: string;
+  };
+};
+
+type FiltersQueryParams = Array<
+  VariantFilterParam | PriceFiltersQueryParam | VariantOptionFiltersQueryParam
+>;
+
+export type SortParam =
+  | 'price-low-high'
+  | 'price-high-low'
+  | 'best-selling'
+  | 'newest'
+  | 'featured';
+
+export const handle = {
+  hydrogen: {
+    resourceType: RESOURCE_TYPES.COLLECTION,
+  },
+};
+
+export async function loader({params, request, context}: LoaderArgs) {
+  const {collectionHandle} = params;
+
+  invariant(collectionHandle, 'Missing collectionHandle param');
+
+  const searchParams = new URL(request.url).searchParams;
+  const knownFilters = ['cursor', 'productVendor', 'productType'];
+  const available = 'available';
+  const variantOption = 'variantOption';
+  const {sortKey, reverse} = getSortValuesFromParam(
+    searchParams.get('sort') as SortParam,
+  );
+  const filters: FiltersQueryParams = [];
+  const appliedFilters: AppliedFilter[] = [];
+
+  for (const [key, value] of searchParams.entries()) {
+    if (available === key) {
+      filters.push({available: value === 'true'});
+      appliedFilters.push({
+        label: value === 'true' ? 'In stock' : 'Out of stock',
+        urlParam: {
+          key: available,
+          value,
+        },
+      });
+    } else if (knownFilters.includes(key)) {
+      filters.push({[key]: value});
+      appliedFilters.push({label: value, urlParam: {key, value}});
+    } else if (key.includes(variantOption)) {
+      const [name, val] = value.split(':');
+      filters.push({variantOption: {name, value: val}});
+      appliedFilters.push({label: val, urlParam: {key, value}});
+    }
+  }
+
+  // Builds min and max price filter since we can't stack them separately into
+  // the filters array. See price filters limitations:
+  // https://shopify.dev/custom-storefronts/products-collections/filter-products#limitations
+  if (searchParams.has('minPrice') || searchParams.has('maxPrice')) {
+    const price: {min?: number; max?: number} = {};
+    if (searchParams.has('minPrice')) {
+      price.min = Number(searchParams.get('minPrice')) || 0;
+      appliedFilters.push({
+        label: `Min: $${price.min}`,
+        urlParam: {key: 'minPrice', value: searchParams.get('minPrice')!},
+      });
+    }
+    if (searchParams.has('maxPrice')) {
+      price.max = Number(searchParams.get('maxPrice')) || 0;
+      appliedFilters.push({
+        label: `Max: $${price.max}`,
+        urlParam: {key: 'maxPrice', value: searchParams.get('maxPrice')!},
+      });
+    }
+    filters.push({
+      price,
+    });
+  }
+
+  const {collection, collections} = await context.storefront.query<{
+    collection: CollectionType;
+    collections: CollectionConnection;
+  }>(COLLECTION_QUERY, {
+    variables: {
+      handle: collectionHandle,
+      pageBy: PAGINATION_SIZE,
+      filters,
+      sortKey,
+      reverse,
+      country: context.storefront.i18n?.country,
+      language: context.storefront.i18n?.language,
+    },
+  });
+
+  if (!collection) {
+    throw await notFoundMaybeRedirect(request, context);
+  }
+
+  const collectionNodes = flattenConnection(collections);
+
+  return json({collection, appliedFilters, collections: collectionNodes});
+}
+
+export const meta: MetaFunction = ({
+  data,
+}: {
+  data: SerializeFrom<typeof loader> | undefined;
+}) => {
+  return {
+    title: data?.collection?.seo?.title ?? 'Collection',
+    description: data?.collection?.seo?.description,
+  };
+};
+
+export default function Collection() {
+  const {collection, collections, appliedFilters} =
+    useLoaderData<typeof loader>();
+  const breadcrumbs =
+    collection.metafield?.references &&
+    flattenConnection<MetafieldReference>(collection.metafield.references)
+      .reverse()
+      .reduce<any[]>((acc, collection) => [collection, ...acc], [collection]);
+
+  return (
+    <>
+      <PageHeader heading={collection.title}>
+        {collection?.description && (
+          <div className="flex items-baseline justify-between w-full">
+            <div>
+              <Text format width="narrow" as="p" className="inline-block">
+                {collection.description}
+              </Text>
+            </div>
+          </div>
+        )}
+
+        <Breadcrumbs breadcrumbs={breadcrumbs} />
+      </PageHeader>
+      <Section>
+        <SortFilter
+          filters={collection.products.filters as Filter[]}
+          appliedFilters={appliedFilters}
+          collections={collections as CollectionType[]}
+        >
+          <ProductGrid
+            key={collection.id}
+            collection={collection as CollectionType}
+            url={`/collections/${collection.handle}`}
+            data-test="product-grid"
+          />
+        </SortFilter>
+      </Section>
+    </>
+  );
+}
+
+const COLLECTION_QUERY = `#graphql
+  ${PRODUCT_CARD_FRAGMENT}
+  query CollectionDetails(
+    $handle: String!
+    $country: CountryCode
+    $language: LanguageCode
+    $pageBy: Int!
+    $cursor: String
+    $filters: [ProductFilter!]
+    $sortKey: ProductCollectionSortKeys!
+    $reverse: Boolean
+  ) @inContext(country: $country, language: $language) {
+    collection(handle: $handle) {
+      id
+      handle
+      title
+      description
+      seo {
+        description
+        title
+      }
+      image {
+        id
+        url
+        width
+        height
+        altText
+      }
+      metafield(namespace: "breadcrumbs", key: "parents") {
+        id
+        value
+        references(first: 10) {
+          edges {
+            node {
+              ... on Collection {
+                id
+                handle
+                title
+              }
+            }
+          }
+        }
+        namespace
+        key
+      }
+      products(
+        first: $pageBy,
+        after: $cursor,
+        filters: $filters,
+        sortKey: $sortKey,
+        reverse: $reverse
+      ) {
+        filters {
+          id
+          label
+          type
+          values {
+            id
+            label
+            count
+            input
+          }
+        }
+        nodes {
+          ...ProductCard
+        }
+        pageInfo {
+          hasNextPage
+          endCursor
+        }
+      }
+    }
+    collections(first: 100) {
+      edges {
+        node {
+          title
+          handle
+        }
+      }
+    }
+  }
+`;
+
+function getSortValuesFromParam(sortParam: SortParam | null) {
+  switch (sortParam) {
+    case 'price-high-low':
+      return {
+        sortKey: 'PRICE',
+        reverse: true,
+      };
+    case 'price-low-high':
+      return {
+        sortKey: 'PRICE',
+        reverse: false,
+      };
+    case 'best-selling':
+      return {
+        sortKey: 'BEST_SELLING',
+        reverse: false,
+      };
+    case 'newest':
+      return {
+        sortKey: 'CREATED',
+        reverse: true,
+      };
+    case 'featured':
+      return {
+        sortKey: 'MANUAL',
+        reverse: false,
+      };
+    default:
+      return {
+        sortKey: 'RELEVANCE',
+        reverse: false,
+      };
+  }
+}

package/dist/templates/demo-store/app/routes/collections/all.tsx

@@ -0,0 +1,5 @@
+import {redirect, type LoaderArgs} from '@shopify/remix-oxygen';
+
+export async function loader({params}: LoaderArgs) {
+  return redirect(params?.lang ? `${params.lang}/products` : '/products');
+}

package/dist/templates/demo-store/app/routes/collections/index.tsx

@@ -0,0 +1,195 @@
+import {json, type MetaFunction, type LoaderArgs} from '@shopify/remix-oxygen';
+import {RESOURCE_TYPES} from '@shopify/hydrogen';
+import {useLoaderData} from '@remix-run/react';
+import type {
+  Collection,
+  CollectionConnection,
+} from '@shopify/hydrogen-react/storefront-api-types';
+import {
+  Grid,
+  Heading,
+  PageHeader,
+  Section,
+  Link,
+  Pagination,
+  getPaginationVariables,
+  Button,
+} from '~/components';
+import {getImageLoadingPriority} from '~/lib/const';
+
+const PAGINATION_SIZE = 8;
+
+export const loader = async ({request, context: {storefront}}: LoaderArgs) => {
+  const variables = getPaginationVariables(request, PAGINATION_SIZE);
+  const {collections} = await storefront.query<{
+    collections: CollectionConnection;
+  }>(COLLECTIONS_QUERY, {
+    variables: {
+      ...variables,
+      country: storefront.i18n?.country,
+      language: storefront.i18n?.language,
+    },
+  });
+
+  return json({collections});
+};
+
+export const handle = {
+  hydrogen: {
+    resourceType: RESOURCE_TYPES.COLLECTIONS,
+  },
+};
+
+export const meta: MetaFunction = () => {
+  return {
+    title: 'All Collections',
+  };
+};
+
+export default function Collections() {
+  const {collections} = useLoaderData<typeof loader>();
+
+  return (
+    <>
+      <PageHeader heading="Collections" />
+      <Section>
+        <Pagination connection={collections}>
+          {({
+            endCursor,
+            hasNextPage,
+            hasPreviousPage,
+            nextPageUrl,
+            nodes,
+            prevPageUrl,
+            startCursor,
+            nextLinkRef,
+            isLoading,
+          }) => (
+            <>
+              {hasPreviousPage && (
+                <div className="flex items-center justify-center mt-6">
+                  <Button
+                    to={prevPageUrl}
+                    variant="secondary"
+                    width="full"
+                    prefetch="intent"
+                    disabled={!isLoading}
+                    state={{
+                      pageInfo: {
+                        endCursor,
+                        hasNextPage,
+                        startCursor,
+                      },
+                      nodes,
+                    }}
+                  >
+                    {isLoading ? 'Loading...' : 'Previous products'}
+                  </Button>
+                </div>
+              )}
+              <Grid
+                items={nodes.length === 3 ? 3 : 2}
+                data-test="collection-grid"
+              >
+                {nodes.map((collection, i) => (
+                  <CollectionCard
+                    collection={collection as Collection}
+                    key={collection.id}
+                    loading={getImageLoadingPriority(i, 2)}
+                  />
+                ))}
+              </Grid>
+              {hasNextPage && (
+                <div className="flex items-center justify-center mt-6">
+                  <Button
+                    ref={nextLinkRef}
+                    to={nextPageUrl}
+                    variant="secondary"
+                    width="full"
+                    prefetch="intent"
+                    disabled={!isLoading}
+                    state={{
+                      pageInfo: {
+                        endCursor,
+                        hasPreviousPage,
+                        startCursor,
+                      },
+                      nodes,
+                    }}
+                  >
+                    {isLoading ? 'Loading...' : 'Next products'}
+                  </Button>
+                </div>
+              )}
+            </>
+          )}
+        </Pagination>
+      </Section>
+    </>
+  );
+}
+
+function CollectionCard({
+  collection,
+  loading,
+}: {
+  collection: Collection;
+  loading?: HTMLImageElement['loading'];
+}) {
+  return (
+    <Link to={`/collections/${collection.handle}`} className="grid gap-4">
+      <div className="card-image bg-primary/5 aspect-[3/2]">
+        {collection?.image && (
+          <img
+            alt={collection.title}
+            src={collection.image.url}
+            height={400}
+            sizes="(max-width: 32em) 100vw, 33vw"
+            width={600}
+            loading={loading}
+          />
+        )}
+      </div>
+      <Heading as="h3" size="copy">
+        {collection.title}
+      </Heading>
+    </Link>
+  );
+}
+
+const COLLECTIONS_QUERY = `#graphql
+  query Collections(
+    $country: CountryCode
+    $language: LanguageCode
+    $first: Int
+    $last: Int
+    $startCursor: String
+    $endCursor: String
+  ) @inContext(country: $country, language: $language) {
+    collections(first: $first, last: $last, before: $startCursor, after: $endCursor) {
+      nodes {
+        id
+        title
+        description
+        handle
+        seo {
+          description
+          title
+        }
+        image {
+          id
+          url
+          width
+          height
+          altText
+        }
+      }
+      pageInfo {
+        hasPreviousPage
+        hasNextPage
+        startCursor
+        endCursor
+      }
+    }
+  }
+`;

package/dist/templates/demo-store/app/routes/discounts.$code.tsx

@@ -0,0 +1,60 @@
+import {redirect, type LoaderArgs} from '@shopify/remix-oxygen';
+import {cartCreate, cartDiscountCodesUpdate} from './cart';
+
+/**
+ * Automatically applies a discount found on the url
+ * If a cart exists it's updated with the discount, otherwise a cart is created with the discount already applied
+ * @param ?redirect an optional path to return to otherwise return to the home page
+ * @example
+ * Example path applying a discount and redirecting
+ * ```ts
+ * /discounts/FREESHIPPING?redirect=/products
+ *
+ * ```
+ * @preserve
+ */
+export async function loader({request, context, params}: LoaderArgs) {
+  const {storefront} = context;
+  // N.B. This route will probably be removed in the future.
+  const session = context.session as any;
+  const {code} = params;
+
+  const url = new URL(request.url);
+  const searchParams = new URLSearchParams(url.search);
+  const redirectUrl =
+    searchParams.get('redirect') || searchParams.get('return_to') || '/';
+
+  const headers = new Headers();
+
+  if (!code) {
+    return redirect(redirectUrl);
+  }
+
+  let cartId = await session.get('cartId');
+
+  //! if no existing cart, create one
+  if (!cartId) {
+    const {cart, errors: graphqlCartErrors} = await cartCreate({
+      input: {},
+      storefront,
+    });
+
+    if (graphqlCartErrors?.length) {
+      return redirect(redirectUrl);
+    }
+
+    //! cart created - we only need a Set-Cookie header if we're creating
+    cartId = cart.id;
+    session.set('cartId', cartId);
+    headers.set('Set-Cookie', await session.commit());
+  }
+
+  //! apply discount to the cart
+  await cartDiscountCodesUpdate({
+    cartId,
+    discountCodes: [code],
+    storefront,
+  });
+
+  return redirect(redirectUrl, {headers});
+}

package/dist/templates/demo-store/app/routes/featured-products.tsx

@@ -0,0 +1,58 @@
+import {json, type LoaderArgs} from '@shopify/remix-oxygen';
+import {flattenConnection} from '@shopify/hydrogen-react';
+import type {
+  CollectionConnection,
+  ProductConnection,
+} from '@shopify/hydrogen-react/storefront-api-types';
+import invariant from 'tiny-invariant';
+import {PRODUCT_CARD_FRAGMENT} from '~/data';
+
+export async function loader({context: {storefront}}: LoaderArgs) {
+  return json(await getFeaturedData(storefront));
+}
+
+export async function getFeaturedData(
+  storefront: LoaderArgs['context']['storefront'],
+) {
+  const data = await storefront.query<{
+    featuredCollections: CollectionConnection;
+    featuredProducts: ProductConnection;
+  }>(FEATURED_QUERY, {
+    variables: {
+      country: storefront.i18n?.country,
+      language: storefront.i18n?.language,
+    },
+  });
+
+  invariant(data, 'No data returned from Shopify API');
+
+  return {
+    featuredCollections: flattenConnection(data.featuredCollections),
+    featuredProducts: flattenConnection(data.featuredProducts),
+  };
+}
+
+const FEATURED_QUERY = `#graphql
+  ${PRODUCT_CARD_FRAGMENT}
+  query homepage($country: CountryCode, $language: LanguageCode)
+  @inContext(country: $country, language: $language) {
+    featuredCollections: collections(first: 3, sortKey: UPDATED_AT) {
+      nodes {
+        id
+        title
+        handle
+        image {
+          altText
+          width
+          height
+          url
+        }
+      }
+    }
+    featuredProducts: products(first: 12) {
+      nodes {
+        ...ProductCard
+      }
+    }
+  }
+`;