Merge pull request #57 from buildheadless/related-products

Add related products section

templates/hydrogen-theme/app/components/blocks/AddToCartButtonBlock.tsx

@@ -1,7 +1,7 @@
 import type {InferType} from 'groqd';
 
 import {Await, useLoaderData} from '@remix-run/react';
-import {flattenConnection} from '@shopify/hydrogen-react';
+import {flattenConnection} from '@shopify/hydrogen';
 import {Suspense} from 'react';
 
 import type {ADD_TO_CART_BUTTON_BLOCK} from '~/qroq/blocks';

templates/hydrogen-theme/app/components/blocks/PriceBlock.tsx

@@ -1,7 +1,7 @@
 import type {InferType} from 'groqd';
 
 import {Await, useLoaderData} from '@remix-run/react';
-import {flattenConnection} from '@shopify/hydrogen-react';
+import {flattenConnection} from '@shopify/hydrogen';
 import {Suspense} from 'react';
 
 import type {PRICE_BLOCK} from '~/qroq/blocks';

templates/hydrogen-theme/app/components/blocks/ShopifyDescriptionBlock.tsx

@@ -1,16 +1,16 @@
 import type {InferType} from 'groqd';
-import type {ProductQuery} from 'storefrontapi.generated';
 
-import {useProduct} from '@shopify/hydrogen-react';
+import {useLoaderData} from '@remix-run/react';
 
 import type {SHOPIFY_DESCRIPTION_BLOCK} from '~/qroq/blocks';
+import type {loader} from '~/routes/($locale).products.$productHandle';
 
 export type ShopifyDescriptionBlockProps = InferType<
   typeof SHOPIFY_DESCRIPTION_BLOCK
 >;
 
 export function ShopifyDescriptionBlock(props: ShopifyDescriptionBlockProps) {
-  const {product} = useProduct() as {product: ProductQuery['product']};
+  const {product} = useLoaderData<typeof loader>();
 
   return product ? (
     <div

templates/hydrogen-theme/app/components/blocks/ShopifyTitleBlock.tsx

@@ -1,14 +1,14 @@
 import type {InferType} from 'groqd';
-import type {ProductQuery} from 'storefrontapi.generated';
 
-import {useProduct} from '@shopify/hydrogen-react';
+import {useLoaderData} from '@remix-run/react';
 
 import type {SHOPIFY_TITLE_BLOCK} from '~/qroq/blocks';
+import type {loader} from '~/routes/($locale).products.$productHandle';
 
 export type ShopifyTitleBlockProps = InferType<typeof SHOPIFY_TITLE_BLOCK>;
 
 export function ShopifyTitleBlock(props: ShopifyTitleBlockProps) {
-  const {product} = useProduct() as {product: ProductQuery['product']};
+  const {product} = useLoaderData<typeof loader>();
 
   return <h1>{product?.title}</h1>;
 }

templates/hydrogen-theme/app/components/layout/Layout.tsx

@@ -1,8 +1,5 @@
-import {ShopifyProvider} from '@shopify/hydrogen-react';
 import {Suspense, lazy} from 'react';
 
-import {useEnvironmentVariables} from '~/hooks/useEnvironmentVariables';
-import {useLocale} from '~/hooks/useLocale';
 import {useSanityPreviewMode} from '~/hooks/useSanityPreviewMode';
 
 import {TailwindIndicator} from '../TailwindIndicator';
@@ -22,22 +19,12 @@ export type LayoutProps = {
 
 export function Layout({children = null}: LayoutProps) {
   const previewMode = useSanityPreviewMode();
-  const env = useEnvironmentVariables();
-  const locale = useLocale();
 
   return (
     <>
-      <ShopifyProvider
-        countryIsoCode={locale?.country!}
-        languageIsoCode={locale?.language!}
-        storeDomain={`https://${env?.PUBLIC_STORE_DOMAIN!}`}
-        storefrontApiVersion={env?.PUBLIC_STOREFRONT_API_VERSION!}
-        storefrontToken={env?.PUBLIC_STOREFRONT_API_TOKEN!}
-      >
-        <Header />
-        <main>{children}</main>
-        <Footer />
-      </ShopifyProvider>
+      <Header />
+      <main>{children}</main>
+      <Footer />
       <TailwindIndicator />
       {previewMode ? (
         <Suspense>

templates/hydrogen-theme/app/components/product/AddToCartForm.tsx

@@ -5,6 +5,7 @@ import {cx} from 'class-variance-authority';
 import {useState} from 'react';
 import {Button} from 'react-aria-components';
 
+import {useEnvironmentVariables} from '~/hooks/useEnvironmentVariables';
 import {useSanityThemeContent} from '~/hooks/useSanityThemeContent';
 import {useSelectedVariant} from '~/hooks/useSelectedVariant';
 
@@ -20,6 +21,7 @@ export function AddToCartForm(props: {
   variants: ProductVariantFragmentFragment[];
 }) {
   const {showQuantitySelector, showShopPay, variants} = props;
+  const env = useEnvironmentVariables();
   const {themeContent} = useSanityThemeContent();
   const selectedVariant = useSelectedVariant({variants});
   const isOutOfStock = !selectedVariant?.availableForSale;
@@ -82,6 +84,7 @@ export function AddToCartForm(props: {
                         'pointer-events-none cursor-default',
                       isOutOfStock && 'opacity-50',
                     ])}
+                    storeDomain={`https://${env?.PUBLIC_STORE_DOMAIN!}`}
                     variantIdsAndQuantities={[
                       {
                         id: selectedVariant?.id!,

templates/hydrogen-theme/app/components/product/MediaGallery.tsx

@@ -1,11 +1,10 @@
-import type {ProductQuery} from 'storefrontapi.generated';
-
+import {useLoaderData} from '@remix-run/react';
 import {MediaFile, flattenConnection} from '@shopify/hydrogen';
-import {useProduct} from '@shopify/hydrogen-react';
 
-export function MediaGallery() {
-  const {product} = useProduct() as {product: ProductQuery['product']};
+import type {loader} from '~/routes/($locale).products.$productHandle';
 
+export function MediaGallery() {
+  const {product} = useLoaderData<typeof loader>();
   const medias = product?.media?.nodes.length
     ? flattenConnection(product.media)
     : [];