From b3ad53008687500bc5d9f78f2410a8f45ee9462c Mon Sep 17 00:00:00 2001 From: Thomas Cristina de Carvalho Date: Fri, 8 Dec 2023 15:24:38 -0500 Subject: [PATCH] Add related products section --- pnpm-lock.yaml | 198 +----------------- .../blocks/AddToCartButtonBlock.tsx | 2 +- .../app/components/blocks/PriceBlock.tsx | 2 +- .../blocks/ShopifyDescriptionBlock.tsx | 6 +- .../components/blocks/ShopifyTitleBlock.tsx | 6 +- .../app/components/layout/Layout.tsx | 19 +- .../app/components/product/AddToCartForm.tsx | 3 + .../app/components/product/MediaGallery.tsx | 9 +- .../components/{ => product}/ProductCard.tsx | 0 .../{ => product}/ProductCardGrid.tsx | 0 .../app/components/product/ProductForm.tsx | 17 +- .../components/product/RelatedProducts.tsx | 27 +++ .../app/components/product/VariantPrice.tsx | 2 +- .../components/product/VariantSelector.tsx | 2 +- .../sections/FeaturedCollectionSection.tsx | 2 +- .../sections/FeaturedProductSection.tsx | 38 ++-- .../sections/RelatedProductsSection.tsx | 39 ++++ .../hydrogen-theme/app/graphql/queries.ts | 5 +- .../app/lib/resolveShopifyPromises.ts | 47 ++++- .../app/lib/sectionRelsolver.ts | 5 + templates/hydrogen-theme/app/qroq/queries.ts | 5 + templates/hydrogen-theme/app/qroq/sections.ts | 15 ++ ...$locale).collections.$collectionHandle.tsx | 2 +- .../($locale).products.$productHandle.tsx | 73 ++----- .../app/routes/($locale).products._index.tsx | 2 +- templates/hydrogen-theme/package.json | 1 - .../storefrontapi.generated.d.ts | 5 +- .../hydrogen-theme/studio/schemas/index.ts | 2 + .../schemas/objects/global/sectionsList.ts | 3 + .../sections/relatedProductsSection.tsx | 50 +++++ .../static/assets/relatedProductsSection.png | Bin 0 -> 30122 bytes 31 files changed, 259 insertions(+), 328 deletions(-) rename templates/hydrogen-theme/app/components/{ => product}/ProductCard.tsx (100%) rename templates/hydrogen-theme/app/components/{ => product}/ProductCardGrid.tsx (100%) create mode 100644 templates/hydrogen-theme/app/components/product/RelatedProducts.tsx create mode 100644 templates/hydrogen-theme/app/components/sections/RelatedProductsSection.tsx create mode 100644 templates/hydrogen-theme/studio/schemas/objects/sections/relatedProductsSection.tsx create mode 100644 templates/hydrogen-theme/studio/static/assets/relatedProductsSection.png diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a6e290c..02eac61 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -67,7 +67,7 @@ importers: version: 2.2.3 sanity: specifier: ^3.21.1 - version: 3.21.1(react-dom@18.2.0)(react@18.2.0)(styled-components@6.1.1) + version: 3.21.1(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0)(styled-components@5.3.11) tar-fs: specifier: ^3.0.4 version: 3.0.4 @@ -126,9 +126,6 @@ importers: '@shopify/hydrogen': specifier: ^2023.10.3 version: 2023.10.3(@remix-run/react@2.3.1)(@remix-run/server-runtime@2.3.1)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0) - '@shopify/hydrogen-react': - specifier: ^2023.10.1 - version: 2023.10.1(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0) '@shopify/remix-oxygen': specifier: ^2.0.2 version: 2.0.2(@remix-run/server-runtime@2.3.1)(@shopify/oxygen-workers-types@3.17.3) @@ -4293,7 +4290,7 @@ packages: graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 dependencies: graphql: 16.8.1 - tslib: 2.5.3 + tslib: 2.6.2 dev: false /@graphql-tools/prisma-loader@8.0.2(@types/node@20.10.4)(graphql@16.8.1): @@ -4338,7 +4335,7 @@ packages: '@ardatan/relay-compiler': 12.0.0(graphql@16.8.1) '@graphql-tools/utils': 10.0.11(graphql@16.8.1) graphql: 16.8.1 - tslib: 2.5.3 + tslib: 2.6.2 transitivePeerDependencies: - encoding - supports-color @@ -7607,31 +7604,6 @@ packages: - supports-color dev: false - /@sanity/portable-text-editor@3.21.1(react-dom@18.2.0)(react@18.2.0)(rxjs@7.8.1)(styled-components@6.1.1): - resolution: {integrity: sha512-l/8qLsqRL1xfppMHFZ86PYDgeslXY3lZEehr33xD8mdpFg/qjOoIYHiqHG3xoSc1ZgFFuDNsCKF/qXzg47kiVA==} - engines: {node: '>=18'} - peerDependencies: - react: ^16.9 || ^17 || ^18 - rxjs: ^7 - styled-components: ^5.2 || ^6 - dependencies: - '@sanity/block-tools': 3.21.1 - '@sanity/schema': 3.21.1 - '@sanity/types': 3.21.1 - '@sanity/util': 3.21.1 - debug: 3.2.7 - is-hotkey: 0.1.8 - lodash: 4.17.21 - react: 18.2.0 - rxjs: 7.8.1 - slate: 0.100.0 - slate-react: 0.101.0(react-dom@18.2.0)(react@18.2.0)(slate@0.100.0) - styled-components: 6.1.1(react-dom@18.2.0)(react@18.2.0) - transitivePeerDependencies: - - react-dom - - supports-color - dev: false - /@sanity/presentation@1.1.3(@sanity/client@6.9.3)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(sanity@3.21.1)(styled-components@5.3.11): resolution: {integrity: sha512-tJwx8e0WKaRzQEi95JzxSU0LD/0MSR1Jpnn6p7+oqC6JlTLIndp6MN7cYnj53MFrpeXFfqcrn/WqzfxVYZBCxg==} engines: {node: '>=16.14'} @@ -7661,35 +7633,6 @@ packages: - react-is dev: false - /@sanity/presentation@1.1.3(@sanity/client@6.9.3)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(sanity@3.21.1)(styled-components@6.1.1): - resolution: {integrity: sha512-tJwx8e0WKaRzQEi95JzxSU0LD/0MSR1Jpnn6p7+oqC6JlTLIndp6MN7cYnj53MFrpeXFfqcrn/WqzfxVYZBCxg==} - engines: {node: '>=16.14'} - peerDependencies: - '@sanity/client': ^6.9.1 - react: ^18.2.0 - react-dom: ^18.2.0 - sanity: ^3.21.0 - styled-components: ^5.2 || ^6.1.1 - dependencies: - '@sanity/client': 6.9.3 - '@sanity/groq-store': 5.3.2(@sanity/client@6.9.3) - '@sanity/icons': 2.7.0(react@18.2.0) - '@sanity/preview-url-secret': 1.3.2(@sanity/client@6.9.3)(@sanity/icons@2.7.0)(sanity@3.21.1) - '@sanity/ui': 1.9.3(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(styled-components@6.1.1) - '@types/lodash.isequal': 4.5.8 - framer-motion: 10.16.16(react-dom@18.2.0)(react@18.2.0) - lodash.isequal: 4.5.0 - mendoza: 3.0.3 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - rxjs: 7.8.1 - sanity: 3.21.1(react-dom@18.2.0)(react@18.2.0)(styled-components@6.1.1) - styled-components: 6.1.1(react-dom@18.2.0)(react@18.2.0) - suspend-react: 0.1.3(react@18.2.0) - transitivePeerDependencies: - - react-is - dev: false - /@sanity/preview-url-secret@1.3.2(@sanity/client@6.9.3)(@sanity/icons@2.7.0)(sanity@3.21.1): resolution: {integrity: sha512-puQRSSvV0V/u4ZejcWgflsNbyVac4a/v1X3pEu1ra9aGL83uNL5T6DPeNiLgO2nfV9e3LcLek2xFe3BAYcaIrA==} engines: {node: '>=18'} @@ -7706,7 +7649,7 @@ packages: '@sanity/client': 6.9.3 '@sanity/icons': 2.7.0(react@18.2.0) '@sanity/uuid': 3.0.2 - sanity: 3.21.1(react-dom@18.2.0)(react@18.2.0)(styled-components@6.1.1) + sanity: 3.21.1(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0)(styled-components@5.3.11) dev: false /@sanity/react-loader@1.3.1(@sanity/client@6.9.3)(react@18.2.0): @@ -19068,139 +19011,6 @@ packages: - utf-8-validate dev: false - /sanity@3.21.1(react-dom@18.2.0)(react@18.2.0)(styled-components@6.1.1): - resolution: {integrity: sha512-kagAkXjhH07AKgOpB9RAVMB8nEIm9Iv4HTtn4jZJroCwsqiV8grlgcBcdfZ/RUBuFPM7uDCJ3Nund5LIGu9ElA==} - engines: {node: '>=18'} - hasBin: true - peerDependencies: - react: ^18 - react-dom: ^18 - styled-components: ^5.2 || ^6 - dependencies: - '@dnd-kit/core': 6.1.0(react-dom@18.2.0)(react@18.2.0) - '@dnd-kit/modifiers': 6.0.1(@dnd-kit/core@6.1.0)(react@18.2.0) - '@dnd-kit/sortable': 7.0.2(@dnd-kit/core@6.1.0)(react@18.2.0) - '@dnd-kit/utilities': 3.2.2(react@18.2.0) - '@juggle/resize-observer': 3.4.0 - '@portabletext/react': 3.0.11(react@18.2.0) - '@rexxars/react-json-inspector': 8.0.1(react@18.2.0) - '@sanity/asset-utils': 1.3.0 - '@sanity/bifur-client': 0.3.1 - '@sanity/block-tools': 3.21.1 - '@sanity/cli': 3.21.1 - '@sanity/client': 6.9.3 - '@sanity/color': 2.2.5 - '@sanity/diff': 3.21.1 - '@sanity/diff-match-patch': 3.1.1 - '@sanity/eventsource': 5.0.1 - '@sanity/export': 3.21.1 - '@sanity/generate-help-url': 3.0.0 - '@sanity/icons': 2.7.0(react@18.2.0) - '@sanity/image-url': 1.0.2 - '@sanity/import': 3.21.1 - '@sanity/logos': 2.1.2(@sanity/color@2.2.5)(react@18.2.0) - '@sanity/mutator': 3.21.1 - '@sanity/portable-text-editor': 3.21.1(react-dom@18.2.0)(react@18.2.0)(rxjs@7.8.1)(styled-components@6.1.1) - '@sanity/presentation': 1.1.3(@sanity/client@6.9.3)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(sanity@3.21.1)(styled-components@6.1.1) - '@sanity/schema': 3.21.1 - '@sanity/types': 3.21.1 - '@sanity/ui': 1.9.3(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(styled-components@6.1.1) - '@sanity/util': 3.21.1 - '@sanity/uuid': 3.0.2 - '@tanstack/react-virtual': 3.0.0-beta.54(react@18.2.0) - '@types/is-hotkey': 0.1.10 - '@types/react-copy-to-clipboard': 5.0.7 - '@types/react-is': 18.2.4 - '@types/shallow-equals': 1.0.3 - '@types/speakingurl': 13.0.6 - '@types/use-sync-external-store': 0.0.5 - '@vitejs/plugin-react': 4.2.1(vite@4.5.1) - chalk: 4.1.2 - chokidar: 3.5.3 - classnames: 2.3.2 - color2k: 2.0.2 - configstore: 5.0.1 - connect-history-api-fallback: 1.6.0 - console-table-printer: 2.11.2 - dataloader: 2.2.2 - date-fns: 2.30.0 - debug: 3.2.7 - esbuild: 0.19.8 - esbuild-register: 3.5.0(esbuild@0.19.8) - execa: 2.1.0 - exif-component: 1.0.1 - framer-motion: 10.16.16(react-dom@18.2.0)(react@18.2.0) - get-it: 8.4.4 - get-random-values-esm: 1.0.0 - groq-js: 1.3.0 - hashlru: 2.3.0 - history: 5.3.0 - i18next: 23.7.8 - import-fresh: 3.3.0 - is-hotkey: 0.1.8 - jsdom: 20.0.3 - jsdom-global: 3.0.2(jsdom@20.0.3) - json-lexer: 1.2.0 - json-reduce: 3.0.0 - json5: 2.2.3 - lodash: 4.17.21 - log-symbols: 2.2.0 - mendoza: 3.0.3 - module-alias: 2.2.3 - nano-pubsub: 2.0.1 - nanoid: 3.3.7 - observable-callback: 1.0.3(rxjs@7.8.1) - oneline: 1.0.3 - open: 8.4.2 - pirates: 4.0.6 - pluralize-esm: 9.0.5 - polished: 4.2.2 - pretty-ms: 7.0.1 - raf: 3.4.1 - react: 18.2.0 - react-copy-to-clipboard: 5.1.0(react@18.2.0) - react-dom: 18.2.0(react@18.2.0) - react-fast-compare: 3.2.2 - react-focus-lock: 2.9.6(@types/react@18.2.42)(react@18.2.0) - react-i18next: 13.5.0(i18next@23.7.8)(react-dom@18.2.0)(react@18.2.0) - react-is: 18.2.0 - react-refractor: 2.1.7(react@18.2.0) - react-rx: 2.1.3(react@18.2.0)(rxjs@7.8.1) - read-pkg-up: 7.0.1 - refractor: 3.6.0 - resolve-from: 5.0.0 - rimraf: 3.0.2 - rxjs: 7.8.1 - rxjs-etc: 10.6.2(rxjs@7.8.1) - rxjs-exhaustmap-with-trailing: 2.1.1(rxjs@7.8.1) - sanity-diff-patch: 3.0.2 - scroll-into-view-if-needed: 3.1.0 - semver: 7.5.4 - shallow-equals: 1.0.0 - speakingurl: 14.0.1 - styled-components: 6.1.1(react-dom@18.2.0)(react@18.2.0) - tar-fs: 2.1.1 - use-device-pixel-ratio: 1.1.2(react@18.2.0) - use-hot-module-reload: 1.0.3(react@18.2.0) - use-sync-external-store: 1.2.0(react@18.2.0) - vite: 4.5.1(@types/node@20.10.4) - yargs: 17.7.2 - transitivePeerDependencies: - - '@types/node' - - '@types/react' - - bufferutil - - canvas - - less - - lightningcss - - react-native - - sass - - stylus - - sugarss - - supports-color - - terser - - utf-8-validate - dev: false - /sax@1.3.0: resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==} dev: false diff --git a/templates/hydrogen-theme/app/components/blocks/AddToCartButtonBlock.tsx b/templates/hydrogen-theme/app/components/blocks/AddToCartButtonBlock.tsx index cc360f8..d7e7fc8 100644 --- a/templates/hydrogen-theme/app/components/blocks/AddToCartButtonBlock.tsx +++ b/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'; diff --git a/templates/hydrogen-theme/app/components/blocks/PriceBlock.tsx b/templates/hydrogen-theme/app/components/blocks/PriceBlock.tsx index 7d5e9be..dee5637 100644 --- a/templates/hydrogen-theme/app/components/blocks/PriceBlock.tsx +++ b/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'; diff --git a/templates/hydrogen-theme/app/components/blocks/ShopifyDescriptionBlock.tsx b/templates/hydrogen-theme/app/components/blocks/ShopifyDescriptionBlock.tsx index 003f64f..0b240e2 100644 --- a/templates/hydrogen-theme/app/components/blocks/ShopifyDescriptionBlock.tsx +++ b/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(); return product ? (
; export function ShopifyTitleBlock(props: ShopifyTitleBlockProps) { - const {product} = useProduct() as {product: ProductQuery['product']}; + const {product} = useLoaderData(); return

{product?.title}

; } diff --git a/templates/hydrogen-theme/app/components/layout/Layout.tsx b/templates/hydrogen-theme/app/components/layout/Layout.tsx index 727f19b..15f3295 100644 --- a/templates/hydrogen-theme/app/components/layout/Layout.tsx +++ b/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 ( <> - -
-
{children}
-