hydrogen-forge 0.1.0

package/templates/starter/app/routes/policies._index.tsx

@@ -0,0 +1,69 @@
+import {useLoaderData, Link} from 'react-router';
+import type {Route} from './+types/policies._index';
+import type {PoliciesQuery, PolicyItemFragment} from 'storefrontapi.generated';
+
+export async function loader({context}: Route.LoaderArgs) {
+  const data: PoliciesQuery = await context.storefront.query(POLICIES_QUERY);
+
+  const shopPolicies = data.shop;
+  const policies: PolicyItemFragment[] = [
+    shopPolicies?.privacyPolicy,
+    shopPolicies?.shippingPolicy,
+    shopPolicies?.termsOfService,
+    shopPolicies?.refundPolicy,
+    shopPolicies?.subscriptionPolicy,
+  ].filter((policy): policy is PolicyItemFragment => policy != null);
+
+  if (!policies.length) {
+    throw new Response('No policies found', {status: 404});
+  }
+
+  return {policies};
+}
+
+export default function Policies() {
+  const {policies} = useLoaderData<typeof loader>();
+
+  return (
+    <div className="policies">
+      <h1>Policies</h1>
+      <div>
+        {policies.map((policy) => (
+          <fieldset key={policy.id}>
+            <Link to={`/policies/${policy.handle}`}>{policy.title}</Link>
+          </fieldset>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const POLICIES_QUERY = `#graphql
+  fragment PolicyItem on ShopPolicy {
+    id
+    title
+    handle
+  }
+  query Policies ($country: CountryCode, $language: LanguageCode)
+    @inContext(country: $country, language: $language) {
+    shop {
+      privacyPolicy {
+        ...PolicyItem
+      }
+      shippingPolicy {
+        ...PolicyItem
+      }
+      termsOfService {
+        ...PolicyItem
+      }
+      refundPolicy {
+        ...PolicyItem
+      }
+      subscriptionPolicy {
+        id
+        title
+        handle
+      }
+    }
+  }
+` as const;

package/templates/starter/app/routes/products.$handle.tsx

@@ -0,0 +1,232 @@
+import {redirect, useLoaderData} from 'react-router';
+import type {Route} from './+types/products.$handle';
+import {
+  getSelectedProductOptions,
+  Analytics,
+  useOptimisticVariant,
+  getProductOptions,
+  getAdjacentAndFirstAvailableVariants,
+  useSelectedOptionInUrlParam,
+} from '@shopify/hydrogen';
+import {ProductPrice} from '~/components/ProductPrice';
+import {ProductImage} from '~/components/ProductImage';
+import {ProductForm} from '~/components/ProductForm';
+import {redirectIfHandleIsLocalized} from '~/lib/redirect';
+
+export const meta: Route.MetaFunction = ({data}) => {
+  return [
+    {title: `Hydrogen | ${data?.product.title ?? ''}`},
+    {
+      rel: 'canonical',
+      href: `/products/${data?.product.handle}`,
+    },
+  ];
+};
+
+export async function loader(args: Route.LoaderArgs) {
+  // Start fetching non-critical data without blocking time to first byte
+  const deferredData = loadDeferredData(args);
+
+  // Await the critical data required to render initial state of the page
+  const criticalData = await loadCriticalData(args);
+
+  return {...deferredData, ...criticalData};
+}
+
+/**
+ * Load data necessary for rendering content above the fold. This is the critical data
+ * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
+ */
+async function loadCriticalData({context, params, request}: Route.LoaderArgs) {
+  const {handle} = params;
+  const {storefront} = context;
+
+  if (!handle) {
+    throw new Error('Expected product handle to be defined');
+  }
+
+  const [{product}] = await Promise.all([
+    storefront.query(PRODUCT_QUERY, {
+      variables: {handle, selectedOptions: getSelectedProductOptions(request)},
+    }),
+    // Add other queries here, so that they are loaded in parallel
+  ]);
+
+  if (!product?.id) {
+    throw new Response(null, {status: 404});
+  }
+
+  // The API handle might be localized, so redirect to the localized handle
+  redirectIfHandleIsLocalized(request, {handle, data: product});
+
+  return {
+    product,
+  };
+}
+
+/**
+ * Load data for rendering content below the fold. This data is deferred and will be
+ * fetched after the initial page load. If it's unavailable, the page should still 200.
+ * Make sure to not throw any errors here, as it will cause the page to 500.
+ */
+function loadDeferredData({context, params}: Route.LoaderArgs) {
+  // Put any API calls that is not critical to be available on first page render
+  // For example: product reviews, product recommendations, social feeds.
+
+  return {};
+}
+
+export default function Product() {
+  const {product} = useLoaderData<typeof loader>();
+
+  // Optimistically selects a variant with given available variant information
+  const selectedVariant = useOptimisticVariant(
+    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 (
+    <div className="product">
+      <ProductImage image={selectedVariant?.image} />
+      <div className="product-main">
+        <h1>{title}</h1>
+        <ProductPrice
+          price={selectedVariant?.price}
+          compareAtPrice={selectedVariant?.compareAtPrice}
+        />
+        <br />
+        <ProductForm
+          productOptions={productOptions}
+          selectedVariant={selectedVariant}
+        />
+        <br />
+        <br />
+        <p>
+          <strong>Description</strong>
+        </p>
+        <br />
+        <div dangerouslySetInnerHTML={{__html: descriptionHtml}} />
+        <br />
+      </div>
+      <Analytics.ProductView
+        data={{
+          products: [
+            {
+              id: product.id,
+              title: product.title,
+              price: selectedVariant?.price.amount || '0',
+              vendor: product.vendor,
+              variantId: selectedVariant?.id || '',
+              variantTitle: selectedVariant?.title || '',
+              quantity: 1,
+            },
+          ],
+        }}
+      />
+    </div>
+  );
+}
+
+const PRODUCT_VARIANT_FRAGMENT = `#graphql
+  fragment ProductVariant on ProductVariant {
+    availableForSale
+    compareAtPrice {
+      amount
+      currencyCode
+    }
+    id
+    image {
+      __typename
+      id
+      url
+      altText
+      width
+      height
+    }
+    price {
+      amount
+      currencyCode
+    }
+    product {
+      title
+      handle
+    }
+    selectedOptions {
+      name
+      value
+    }
+    sku
+    title
+    unitPrice {
+      amount
+      currencyCode
+    }
+  }
+` as const;
+
+const PRODUCT_FRAGMENT = `#graphql
+  fragment Product on Product {
+    id
+    title
+    vendor
+    handle
+    descriptionHtml
+    description
+    encodedVariantExistence
+    encodedVariantAvailability
+    options {
+      name
+      optionValues {
+        name
+        firstSelectableVariant {
+          ...ProductVariant
+        }
+        swatch {
+          color
+          image {
+            previewImage {
+              url
+            }
+          }
+        }
+      }
+    }
+    selectedOrFirstAvailableVariant(selectedOptions: $selectedOptions, ignoreUnknownOptions: true, caseInsensitiveMatch: true) {
+      ...ProductVariant
+    }
+    adjacentVariants (selectedOptions: $selectedOptions) {
+      ...ProductVariant
+    }
+    seo {
+      description
+      title
+    }
+  }
+  ${PRODUCT_VARIANT_FRAGMENT}
+` as const;
+
+const PRODUCT_QUERY = `#graphql
+  query Product(
+    $country: CountryCode
+    $handle: String!
+    $language: LanguageCode
+    $selectedOptions: [SelectedOptionInput!]!
+  ) @inContext(country: $country, language: $language) {
+    product(handle: $handle) {
+      ...Product
+    }
+  }
+  ${PRODUCT_FRAGMENT}
+` as const;

package/templates/starter/app/routes/search.tsx

@@ -0,0 +1,426 @@
+import {useLoaderData} from 'react-router';
+import type {Route} from './+types/search';
+import {getPaginationVariables, Analytics} from '@shopify/hydrogen';
+import {SearchForm} from '~/components/SearchForm';
+import {SearchResults} from '~/components/SearchResults';
+import {
+  type RegularSearchReturn,
+  type PredictiveSearchReturn,
+  getEmptyPredictiveSearchResult,
+} from '~/lib/search';
+import type {
+  RegularSearchQuery,
+  PredictiveSearchQuery,
+} from 'storefrontapi.generated';
+
+export const meta: Route.MetaFunction = () => {
+  return [{title: `Hydrogen | Search`}];
+};
+
+export async function loader({request, context}: Route.LoaderArgs) {
+  const url = new URL(request.url);
+  const isPredictive = url.searchParams.has('predictive');
+  const searchPromise: Promise<PredictiveSearchReturn | RegularSearchReturn> =
+    isPredictive
+      ? predictiveSearch({request, context})
+      : regularSearch({request, context});
+
+  searchPromise.catch((error: Error) => {
+    console.error(error);
+    return {term: '', result: null, error: error.message};
+  });
+
+  return await searchPromise;
+}
+
+/**
+ * Renders the /search route
+ */
+export default function SearchPage() {
+  const {type, term, result, error} = useLoaderData<typeof loader>();
+  if (type === 'predictive') return null;
+
+  return (
+    <div className="search">
+      <h1>Search</h1>
+      <SearchForm>
+        {({inputRef}) => (
+          <>
+            <input
+              defaultValue={term}
+              name="q"
+              placeholder="Search…"
+              ref={inputRef}
+              type="search"
+            />
+            &nbsp;
+            <button type="submit">Search</button>
+          </>
+        )}
+      </SearchForm>
+      {error && <p style={{color: 'red'}}>{error}</p>}
+      {!term || !result?.total ? (
+        <SearchResults.Empty />
+      ) : (
+        <SearchResults result={result} term={term}>
+          {({articles, pages, products, term}) => (
+            <div>
+              <SearchResults.Products products={products} term={term} />
+              <SearchResults.Pages pages={pages} term={term} />
+              <SearchResults.Articles articles={articles} term={term} />
+            </div>
+          )}
+        </SearchResults>
+      )}
+      <Analytics.SearchView data={{searchTerm: term, searchResults: result}} />
+    </div>
+  );
+}
+
+/**
+ * Regular search query and fragments
+ * (adjust as needed)
+ */
+const SEARCH_PRODUCT_FRAGMENT = `#graphql
+  fragment SearchProduct on Product {
+    __typename
+    handle
+    id
+    publishedAt
+    title
+    trackingParameters
+    vendor
+    selectedOrFirstAvailableVariant(
+      selectedOptions: []
+      ignoreUnknownOptions: true
+      caseInsensitiveMatch: true
+    ) {
+      id
+      image {
+        url
+        altText
+        width
+        height
+      }
+      price {
+        amount
+        currencyCode
+      }
+      compareAtPrice {
+        amount
+        currencyCode
+      }
+      selectedOptions {
+        name
+        value
+      }
+      product {
+        handle
+        title
+      }
+    }
+  }
+` as const;
+
+const SEARCH_PAGE_FRAGMENT = `#graphql
+  fragment SearchPage on Page {
+     __typename
+     handle
+    id
+    title
+    trackingParameters
+  }
+` as const;
+
+const SEARCH_ARTICLE_FRAGMENT = `#graphql
+  fragment SearchArticle on Article {
+    __typename
+    handle
+    id
+    title
+    trackingParameters
+  }
+` as const;
+
+const PAGE_INFO_FRAGMENT = `#graphql
+  fragment PageInfoFragment on PageInfo {
+    hasNextPage
+    hasPreviousPage
+    startCursor
+    endCursor
+  }
+` as const;
+
+// NOTE: https://shopify.dev/docs/api/storefront/latest/queries/search
+export const SEARCH_QUERY = `#graphql
+  query RegularSearch(
+    $country: CountryCode
+    $endCursor: String
+    $first: Int
+    $language: LanguageCode
+    $last: Int
+    $term: String!
+    $startCursor: String
+  ) @inContext(country: $country, language: $language) {
+    articles: search(
+      query: $term,
+      types: [ARTICLE],
+      first: $first,
+    ) {
+      nodes {
+        ...on Article {
+          ...SearchArticle
+        }
+      }
+    }
+    pages: search(
+      query: $term,
+      types: [PAGE],
+      first: $first,
+    ) {
+      nodes {
+        ...on Page {
+          ...SearchPage
+        }
+      }
+    }
+    products: search(
+      after: $endCursor,
+      before: $startCursor,
+      first: $first,
+      last: $last,
+      query: $term,
+      sortKey: RELEVANCE,
+      types: [PRODUCT],
+      unavailableProducts: HIDE,
+    ) {
+      nodes {
+        ...on Product {
+          ...SearchProduct
+        }
+      }
+      pageInfo {
+        ...PageInfoFragment
+      }
+    }
+  }
+  ${SEARCH_PRODUCT_FRAGMENT}
+  ${SEARCH_PAGE_FRAGMENT}
+  ${SEARCH_ARTICLE_FRAGMENT}
+  ${PAGE_INFO_FRAGMENT}
+` as const;
+
+/**
+ * Regular search fetcher
+ */
+async function regularSearch({
+  request,
+  context,
+}: Pick<
+  Route.LoaderArgs,
+  'request' | 'context'
+>): Promise<RegularSearchReturn> {
+  const {storefront} = context;
+  const url = new URL(request.url);
+  const variables = getPaginationVariables(request, {pageBy: 8});
+  const term = String(url.searchParams.get('q') || '');
+
+  // Search articles, pages, and products for the `q` term
+  const {
+    errors,
+    ...items
+  }: {errors?: Array<{message: string}>} & RegularSearchQuery =
+    await storefront.query(SEARCH_QUERY, {
+      variables: {...variables, term},
+    });
+
+  if (!items) {
+    throw new Error('No search data returned from Shopify API');
+  }
+
+  const total = Object.values(items).reduce(
+    (acc: number, {nodes}: {nodes: Array<unknown>}) => acc + nodes.length,
+    0,
+  );
+
+  const error = errors
+    ? errors.map(({message}: {message: string}) => message).join(', ')
+    : undefined;
+
+  return {type: 'regular', term, error, result: {total, items}};
+}
+
+/**
+ * Predictive search query and fragments
+ * (adjust as needed)
+ */
+const PREDICTIVE_SEARCH_ARTICLE_FRAGMENT = `#graphql
+  fragment PredictiveArticle on Article {
+    __typename
+    id
+    title
+    handle
+    blog {
+      handle
+    }
+    image {
+      url
+      altText
+      width
+      height
+    }
+    trackingParameters
+  }
+` as const;
+
+const PREDICTIVE_SEARCH_COLLECTION_FRAGMENT = `#graphql
+  fragment PredictiveCollection on Collection {
+    __typename
+    id
+    title
+    handle
+    image {
+      url
+      altText
+      width
+      height
+    }
+    trackingParameters
+  }
+` as const;
+
+const PREDICTIVE_SEARCH_PAGE_FRAGMENT = `#graphql
+  fragment PredictivePage on Page {
+    __typename
+    id
+    title
+    handle
+    trackingParameters
+  }
+` as const;
+
+const PREDICTIVE_SEARCH_PRODUCT_FRAGMENT = `#graphql
+  fragment PredictiveProduct on Product {
+    __typename
+    id
+    title
+    handle
+    trackingParameters
+    selectedOrFirstAvailableVariant(
+      selectedOptions: []
+      ignoreUnknownOptions: true
+      caseInsensitiveMatch: true
+    ) {
+      id
+      image {
+        url
+        altText
+        width
+        height
+      }
+      price {
+        amount
+        currencyCode
+      }
+    }
+  }
+` as const;
+
+const PREDICTIVE_SEARCH_QUERY_FRAGMENT = `#graphql
+  fragment PredictiveQuery on SearchQuerySuggestion {
+    __typename
+    text
+    styledText
+    trackingParameters
+  }
+` as const;
+
+// NOTE: https://shopify.dev/docs/api/storefront/latest/queries/predictiveSearch
+const PREDICTIVE_SEARCH_QUERY = `#graphql
+  query PredictiveSearch(
+    $country: CountryCode
+    $language: LanguageCode
+    $limit: Int!
+    $limitScope: PredictiveSearchLimitScope!
+    $term: String!
+    $types: [PredictiveSearchType!]
+  ) @inContext(country: $country, language: $language) {
+    predictiveSearch(
+      limit: $limit,
+      limitScope: $limitScope,
+      query: $term,
+      types: $types,
+    ) {
+      articles {
+        ...PredictiveArticle
+      }
+      collections {
+        ...PredictiveCollection
+      }
+      pages {
+        ...PredictivePage
+      }
+      products {
+        ...PredictiveProduct
+      }
+      queries {
+        ...PredictiveQuery
+      }
+    }
+  }
+  ${PREDICTIVE_SEARCH_ARTICLE_FRAGMENT}
+  ${PREDICTIVE_SEARCH_COLLECTION_FRAGMENT}
+  ${PREDICTIVE_SEARCH_PAGE_FRAGMENT}
+  ${PREDICTIVE_SEARCH_PRODUCT_FRAGMENT}
+  ${PREDICTIVE_SEARCH_QUERY_FRAGMENT}
+` as const;
+
+/**
+ * Predictive search fetcher
+ */
+async function predictiveSearch({
+  request,
+  context,
+}: Pick<
+  Route.ActionArgs,
+  'request' | 'context'
+>): Promise<PredictiveSearchReturn> {
+  const {storefront} = context;
+  const url = new URL(request.url);
+  const term = String(url.searchParams.get('q') || '').trim();
+  const limit = Number(url.searchParams.get('limit') || 10);
+  const type = 'predictive';
+
+  if (!term) return {type, term, result: getEmptyPredictiveSearchResult()};
+
+  // Predictively search articles, collections, pages, products, and queries (suggestions)
+  const {
+    predictiveSearch: items,
+    errors,
+  }: PredictiveSearchQuery & {errors?: Array<{message: string}>} =
+    await storefront.query(PREDICTIVE_SEARCH_QUERY, {
+      variables: {
+        // customize search options as needed
+        limit,
+        limitScope: 'EACH',
+        term,
+      },
+    });
+
+  if (errors) {
+    throw new Error(
+      `Shopify API errors: ${errors.map(({message}: {message: string}) => message).join(', ')}`,
+    );
+  }
+
+  if (!items) {
+    throw new Error('No predictive search data returned from Shopify API');
+  }
+
+  const total = Object.values(items).reduce(
+    (acc: number, item: Array<unknown>) => acc + item.length,
+    0,
+  );
+
+  return {type, term, result: {items, total}};
+}