Sticky AddToCart Component on Product Page (GCOM-1194)

.changeset/famous-queens-give.md

@@ -0,0 +1,9 @@
+---
+'@graphcommerce/magento-product': minor
+'@graphcommerce/magento-product-configurable': patch
+'@graphcommerce/next-config': patch
+'@graphcommerce/next-ui': patch
+'@graphcommerce/docs': patch
+---
+
+When the 'enableStickyAddToCart' option is enabled, a sticky bar will appear if the default add-to-cart button goes out of the visible viewport.

docs/framework/config.md

@@ -171,6 +171,12 @@ Enables some demo specific code that is probably not useful for a project:
 - Adds "dominant_color" attribute swatches to the product list items.
 - Creates a big list items in the product list.
 
+#### `enableStickyAddToCart: Boolean`
+
+Enable this option to activate the sticky add-to-cart bar on the product page.
+When enabled, a sticky bar will appear if the default add-to-cart button goes out of the visible viewport.
+This allows users to easily access the add-to-cart functionality even as they scroll through the page.
+
 #### `googleAnalyticsId: String`
 
 See https://support.google.com/analytics/answer/9539598?hl=en

packages/magento-product-configurable/plugins/ConfigurableProductPage/ConfigurableStickyAddToCart.tsx

@@ -0,0 +1,18 @@
+import type { AddToCartItemSelector, StickyAddToCart } from '@graphcommerce/magento-product'
+import type { IfConfig, ReactPlugin } from '@graphcommerce/next-config'
+import { useConfigurableSelectedVariant } from '../../hooks'
+
+export const component = 'StickyAddToCart'
+export const exported = '@graphcommerce/magento-product/components/StickyAddToCart/StickyAddToCart'
+export const ifConfig: IfConfig = 'enableStickyAddToCart'
+
+type PluginType = ReactPlugin<typeof StickyAddToCart, AddToCartItemSelector>
+
+const ConfigurableStickyAddToCart: PluginType = (props) => {
+  const { Prev, product, ...rest } = props
+  const variant = useConfigurableSelectedVariant({ url_key: product.url_key, index: 0 })
+
+  return <Prev product={variant ?? product} {...rest} />
+}
+
+export const Plugin = ConfigurableStickyAddToCart

packages/magento-product/Config.graphqls

@@ -45,4 +45,11 @@ extend input GraphCommerceConfig {
   Default: 'false'
   """
   crossSellsHideCartItems: Boolean = false
+
+  """
+  Enable this option to activate the sticky add-to-cart bar on the product page.
+  When enabled, a sticky bar will appear if the default add-to-cart button goes out of the visible viewport.
+  This allows users to easily access the add-to-cart functionality even as they scroll through the page.
+  """
+  enableStickyAddToCart: Boolean
 }

packages/magento-product/components/AddProductsToCart/AddProductsToCartForm.tsx

@@ -143,6 +143,22 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
       value={useMemo(() => ({ ...form, redirect }), [form, redirect])}
     >
       <Box component='form' onSubmit={submit} noValidate sx={sx} className={name}>
+        {import.meta.graphCommerce.enableStickyAddToCart && (
+          <Box
+            sx={(theme) => ({
+              position: { xs: 'sticky', md: 'absolute' },
+              height: '100%',
+              width: '100%',
+              margin: 'auto',
+              inset: 0,
+              top: { xs: theme.appShell.headerHeightSm, md: 0 },
+              zIndex: '1',
+              pointerEvents: 'none',
+              '& > *': { pointerEvents: 'all' },
+            })}
+            id='StickyAddToCartDestination'
+          />
+        )}
         {children}
       </Box>
       {disableSuccessSnackbar ? null : (

packages/magento-product/components/ProductPageGallery/ProductPageGallery.graphql

@@ -4,6 +4,7 @@ fragment ProductPageGallery on ProductInterface {
     label
     position
     disabled
+    url
     ...ProductImage
     ...ProductVideo
   }

packages/magento-product/components/StickyAddToCart/StickyAddToCart.tsx

@@ -0,0 +1,173 @@
+import { Image } from '@graphcommerce/image'
+import { LayoutHeader, responsiveVal } from '@graphcommerce/next-ui'
+import { Box, Typography } from '@mui/material'
+import { useEffect, useState } from 'react'
+import { AddProductsToCartButton, AddProductsToCartError } from '../AddProductsToCart'
+import {
+  ProductPageAddToCartQuantityRow,
+  ProductPageAddToCartRowProps,
+} from '../ProductPage/ProductPageAddToCartRow'
+import { ProductPageName } from '../ProductPageName'
+import { ProductPagePrice } from '../ProductPagePrice'
+
+export type StickyAddToCartProps = Partial<ProductPageAddToCartRowProps> & {
+  cartButtonRef?: React.RefObject<HTMLElement>
+}
+
+export function StickyAddToCart(props: StickyAddToCartProps) {
+  const { product, cartButtonRef } = props
+
+  const mainImage = product?.media_gallery?.[0]
+  const [switchPointPosition, setSwitchPointPosition] = useState<number>()
+
+  useEffect(() => {
+    if (!cartButtonRef?.current) return () => {}
+
+    const handleResize = () => {
+      const cartButtonBottomRelativeToViewport =
+        cartButtonRef?.current?.getBoundingClientRect().bottom
+
+      if (cartButtonBottomRelativeToViewport) {
+        // Calculate the distance from the top of the page to the bottom position of cartButtonRef
+        // We add the current scroll position to get an absolute distance
+        const cartButtonAbsolutePosition = cartButtonBottomRelativeToViewport + window.scrollY
+
+        // Set the switchPoint value to the calculated absolute position
+        setSwitchPointPosition(cartButtonAbsolutePosition)
+      }
+    }
+
+    window.addEventListener('resize', handleResize)
+    handleResize()
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [cartButtonRef])
+
+  return (
+    product &&
+    switchPointPosition && (
+      <LayoutHeader
+        hideBackButton
+        switchPoint={switchPointPosition}
+        size='responsive'
+        sx={(theme) => ({
+          width: { md: '60vw', lg: '65vw' },
+          inset: 0,
+          margin: 'auto',
+          transform: {
+            xs: 'none',
+            md: `translateY(calc(${theme.appShell.appBarHeightMd} - ${theme.appShell.headerHeightSm} - 10px))`,
+          },
+
+          [theme.breakpoints.down('md')]: {
+            height: `calc(${theme.appShell.headerHeightSm} + 15px)`,
+            mt: 0,
+          },
+
+          '& .LayoutHeaderContent-content': {
+            display: 'flex',
+            inset: 0,
+            margin: 'auto',
+            px: '12px',
+          },
+
+          '& .LayoutHeaderContent-center > div': {
+            width: '100%',
+          },
+
+          '& .LayoutHeaderContent-bg': {
+            borderRadius: { xs: 0, md: theme.shape.borderRadius },
+            boxShadow: theme.shadows[6],
+            transform: 'translateY(-50px)',
+            transition: '0.3s ease-in-out',
+
+            '&.scrolled': {
+              opacity: 1,
+              transform: 'none',
+            },
+
+            [theme.breakpoints.down('md')]: {
+              height: `calc(${theme.appShell.headerHeightSm} + 15px)`,
+            },
+          },
+
+          '& .LayoutHeaderContent-center': {
+            display: 'flex',
+            width: '100%',
+            transform: 'translateY(-50px)',
+            transition: '0.3s ease-in-out',
+
+            '&.scrolled': {
+              opacity: 1,
+              transform: 'none',
+            },
+          },
+
+          '& .LayoutHeaderContent-right': {
+            display: 'none',
+          },
+        })}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            gap: (theme) => theme.spacings.sm,
+          }}
+        >
+          {mainImage?.url && (
+            <Image
+              alt={mainImage.label ?? ''}
+              layout='fixed'
+              width={60}
+              height={60}
+              src={mainImage.url}
+              sx={{
+                verticalAlign: 'middle',
+                width: responsiveVal(46, 60),
+                height: responsiveVal(46, 60),
+              }}
+            />
+          )}
+          <Typography
+            variant='h4'
+            sx={(theme) => ({
+              display: { xs: 'none', md: 'block' },
+              fontSize: { xs: theme.typography.h5.fontSize, md: theme.typography.h4.fontSize },
+              fontWeight: 'bold',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            })}
+          >
+            <ProductPageName product={{ name: product?.name }} />
+          </Typography>
+          <ProductPageAddToCartQuantityRow product={product} sx={{ ml: 'auto' }}>
+            <AddProductsToCartError>
+              <Typography
+                component='div'
+                variant='h3'
+                lineHeight='1'
+                sx={{
+                  display: { lg: 'flex' },
+                  gap: { xs: 1, lg: 2 },
+                  typography: { xs: 'body1', md: 'h6', lg: 'h5' },
+                  lineHeight: { xs: '1.2em', md: '1.7em' },
+                  '& .incl-vat': {
+                    opacity: 0.4,
+                  },
+                }}
+              >
+                <ProductPagePrice product={product} />
+              </Typography>
+            </AddProductsToCartError>
+          </ProductPageAddToCartQuantityRow>
+          <AddProductsToCartButton color='primary' size='medium' product={product} sx={{}} />
+        </Box>
+      </LayoutHeader>
+    )
+  )
+}

packages/magento-product/components/index.ts

@@ -38,3 +38,4 @@ export * from './ProductStaticPaths/getSitemapPaths'
 export * from './ProductUpsells/UpsellProducts.gql'
 export * from './ProductWeight/ProductWeight'
 export * from './ProductListPrice'
+export * from './StickyAddToCart/StickyAddToCart'

packages/magento-product/graphql/StickyAddToCart.graphql

@@ -0,0 +1,4 @@
+fragment StickyAddToCart on ProductInterface @inject(into: ["UseAddProductsToCartAction"]) {
+  ...ProductPageGallery
+  ...ProductPagePrice
+}

packages/magento-product/plugins/StickyAddToCart/StickyProductPageAddToCartRow.tsx

@@ -0,0 +1,41 @@
+import type { IfConfig, ReactPlugin } from '@graphcommerce/next-config'
+import { Box } from '@mui/material'
+import { useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { ProductPageAddToCartRow, StickyAddToCart } from '../../components'
+
+export const component = 'ProductPageAddToCartActionsRow'
+export const exported =
+  '@graphcommerce/magento-product/components/ProductPage/ProductPageAddToCartRow'
+export const ifConfig: IfConfig = 'enableStickyAddToCart'
+
+type PluginType = ReactPlugin<typeof ProductPageAddToCartRow>
+
+const StickyProductPageAddToCartRow: PluginType = (props) => {
+  const { Prev, children, product, ...rest } = props
+
+  const cartButtonRef = useRef<HTMLElement | null>(null)
+  const [target, setTarget] = useState<HTMLElement | null>(null)
+
+  const stickyAddToCart = <StickyAddToCart product={product} cartButtonRef={cartButtonRef} />
+
+  useEffect(() => {
+    const stickyTarget = globalThis?.document?.getElementById('StickyAddToCartDestination')
+    if (stickyTarget) {
+      setTarget(stickyTarget)
+    }
+  }, [])
+
+  return (
+    <>
+      {target && createPortal(stickyAddToCart, target)}
+      <Box ref={cartButtonRef}>
+        <Prev product={product} {...rest}>
+          {children}
+        </Prev>
+      </Box>
+    </>
+  )
+}
+
+export const Plugin = StickyProductPageAddToCartRow

packages/next-ui/Layout/components/LayoutHeaderContent.tsx

@@ -56,7 +56,14 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
   const scroll = useScrollY()
   const scrolled = useMotionValueValue(scroll, (y) => y >= switchPoint)
 
-  const classes = withState({ floatingSm, floatingMd, scrolled, divider: !!divider, size, bgColor })
+  const classes = withState({
+    floatingSm,
+    floatingMd,
+    scrolled,
+    divider: !!divider,
+    size,
+    bgColor,
+  })
 
   return (
     <>

packagesDev/next-config/dist/generated/config.js

@@ -68,6 +68,7 @@ function GraphCommerceConfigSchema() {
         customerRequireEmailConfirmation: _zod.z.boolean().nullish(),
         debug: GraphCommerceDebugConfigSchema().nullish(),
         demoMode: _zod.z.boolean().nullish(),
+        enableStickyAddToCart: _zod.z.boolean().nullish(),
         googleAnalyticsId: _zod.z.string().nullish(),
         googleRecaptchaKey: _zod.z.string().nullish(),
         googleTagmanagerId: _zod.z.string().nullish(),

packagesDev/next-config/src/generated/config.ts

@@ -169,6 +169,12 @@ export type GraphCommerceConfig = {
    * - Creates a big list items in the product list.
    */
   demoMode?: InputMaybe<Scalars['Boolean']['input']>;
+  /**
+   * Enable this option to activate the sticky add-to-cart bar on the product page.
+   * When enabled, a sticky bar will appear if the default add-to-cart button goes out of the visible viewport.
+   * This allows users to easily access the add-to-cart functionality even as they scroll through the page.
+   */
+  enableStickyAddToCart?: InputMaybe<Scalars['Boolean']['input']>;
   /**
    * See https://support.google.com/analytics/answer/9539598?hl=en
    *
@@ -427,6 +433,7 @@ export function GraphCommerceConfigSchema(): z.ZodObject<Properties<GraphCommerc
     customerRequireEmailConfirmation: z.boolean().nullish(),
     debug: GraphCommerceDebugConfigSchema().nullish(),
     demoMode: z.boolean().nullish(),
+    enableStickyAddToCart: z.boolean().nullish(),
     googleAnalyticsId: z.string().nullish(),
     googleRecaptchaKey: z.string().nullish(),
     googleTagmanagerId: z.string().nullish(),