setting up shopify

README.md

@@ -17,7 +17,7 @@ This starter kit is composed of:
 - [GSAP](https://greensock.com/gsap/)
 - [Hamo](https://github.com/darkroomengineering/hamo)
 - [Storyblok](https://www.storyblok.com/)
-- Shopify
+- [Shopify] (https://www.shopify.com/)
 - SVG import through [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack)
 - Sass architecture and tooling:
   - Config file

app/(pages)/(components)/navigation/index.js

@@ -9,6 +9,7 @@ const LINKS = [
   { href: '/', label: 'home' },
   { href: '/r3f', label: 'r3f' },
   { href: '/storyblok', label: 'storyblok' },
+  { href: '/shopify', label: 'shopify' },
 ]
 
 export function Navigation() {

app/(pages)/shopify/(components)/product/index.js

@@ -0,0 +1,24 @@
+import cn from 'clsx'
+import { Image } from 'components/image'
+import { getCollectionProducts } from 'libs/shopify'
+import { AddToCart } from 'libs/shopify/cart/add-to-cart'
+import s from './product.module.scss'
+
+export async function Product() {
+  const data = await getCollectionProducts({ collection: 'frontpage' })
+
+  const product = data?.find((product) => product.handle === 'darkroom-board')
+
+  return (
+    <div className={cn('layout-grid-inner', s.product)}>
+      <div className={s.media}>
+        <Image src={product?.images[0].url} alt={product?.altText} />
+      </div>
+      <aside className={s.details}>
+        <h1>{product?.title}</h1>
+        <p>{product?.description}</p>
+      </aside>
+      <AddToCart variants={product?.variants} className={s.add} />
+    </div>
+  )
+}

app/(pages)/shopify/(components)/product/product.module.scss

@@ -0,0 +1,60 @@
+.product {
+  margin: auto;
+  height: 50vh;
+  align-items: center;
+  justify-items: center;
+
+  .details {
+    grid-column: 4/-4;
+    display: flex;
+    flex-direction: column;
+    gap: desktop-vw(16px);
+    text-align: center;
+    margin-bottom: desktop-vw(16px);
+  }
+
+  .media {
+    position: relative;
+    grid-column: 3/-3;
+    aspect-ratio: 341/1404;
+    height: 50vh;
+  }
+
+  .add {
+    position: relative;
+    grid-column: 4/-4;
+    display: flex;
+    border: 2px solid var(--black);
+    padding: desktop-vw(16px);
+    border-radius: desktop-vw(8px);
+    overflow: hidden;
+    cursor: pointer;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+      height: 100%;
+      background-color: var(--black);
+      clip-path: circle(0%);
+    }
+
+    button {
+      position: relative;
+    }
+
+    @include hover {
+      &:hover {
+        color: var(--white);
+
+        &::before {
+          transition: 1000ms clip-path var(--gleasing);
+          clip-path: circle(100%);
+        }
+      }
+    }
+  }
+}

app/(pages)/shopify/(components)/show-cart/index.js

@@ -0,0 +1,14 @@
+'use client'
+
+import cn from 'clsx'
+import { useCartModal } from 'libs/shopify/cart/modal'
+
+export const ShowCart = ({ className }) => {
+  const openCart = useCartModal()
+
+  return (
+    <button onClick={openCart} className={cn(className, 'link')}>
+      Cart
+    </button>
+  )
+}

app/(pages)/shopify/page.js

@@ -0,0 +1,16 @@
+import { Cart } from 'libs/shopify/cart'
+import { Wrapper } from '../(components)/wrapper'
+import { Product } from './(components)/product'
+import { ShowCart } from './(components)/show-cart'
+import s from './shopify.module.scss'
+
+export default async function Storyblok() {
+  return (
+    <Wrapper theme="red" className={s.page}>
+      <Cart>
+        <ShowCart className={s.cart} />
+        <Product />
+      </Cart>
+    </Wrapper>
+  )
+}

app/(pages)/shopify/shopify.module.scss

@@ -0,0 +1,10 @@
+.page {
+  text-transform: uppercase;
+  font-family: var(--font-ibm-plex-mono);
+}
+
+.cart {
+  position: fixed;
+  top: var(--layout-margin);
+  right: var(--layout-margin);
+}

libs/shopify/cart/add-to-cart/index.js

@@ -1,15 +1,14 @@
 'use client'
 
 import cn from 'clsx'
-import { Button } from 'components/button'
 import { addItem } from 'libs/shopify/cart/actions'
 import { useSearchParams } from 'next/navigation'
 import { useEffect, useRef } from 'react'
 import { useFormState, useFormStatus } from 'react-dom'
 import { useCartModal } from '../modal'
 import s from './add-to-cart.module.scss'
 
-export function AddToCart({ variants }) {
+export function AddToCart({ variants, className }) {
   // eslint-disable-next-line no-unused-vars
   const [_, formAction] = useFormState(addItem, null)
   const searchParams = useSearchParams()
@@ -24,7 +23,7 @@ export function AddToCart({ variants }) {
   const actionWithVariant = formAction.bind(null, selectedVariantId)
 
   return (
-    <form action={actionWithVariant}>
+    <form action={actionWithVariant} className={className}>
       <ActionButton
         aria-label="Add to cart"
         defaultState=" 1440.00$ — ADD TO CART"
@@ -51,7 +50,7 @@ function ActionButton({ defaultState, pendingState, ...props }) {
   }, [pending, openCart])
 
   return (
-    <Button
+    <button
       type="submit"
       onClick={(e) => {
         if (pending) {
@@ -64,6 +63,6 @@ function ActionButton({ defaultState, pendingState, ...props }) {
       icon
     >
       {pending ? pendingState : defaultState}
-    </Button>
+    </button>
   )
 }

libs/shopify/cart/modal/index.js

@@ -1,9 +1,8 @@
 'use client'
 
 import cn from 'clsx'
-import { Button } from 'components/button'
 import { Image } from 'components/image'
-import { useBeforeUnload } from 'hooks/use-before-unload'
+import { useBeforeUnload } from 'libs/shopify/hooks'
 import { createContext, useContext, useOptimistic, useState } from 'react'
 import { useFormStatus } from 'react-dom'
 import { removeItem, updateItemQuantity } from '../actions'
@@ -22,7 +21,7 @@ export function CartModal({ children, cart }) {
       <div className={cn(s.modal, isOpen && s.open)}>
         <div className={s['catch-click']} onClick={closeCart} />
         <div className={s.inner}>
-          <button className={cn('p-xs', s.close)} onClick={closeCart}>
+          <button className={cn('link', s.close)} onClick={closeCart}>
             close
           </button>
           {!cart || cart.lines.length === 0 ? (
@@ -41,6 +40,8 @@ function EmptyCart() {
 }
 
 function InnerCart({ cart }) {
+  console.log(cart)
+
   return (
     <>
       <p className={cn('p-l', s.heading)}>your cart</p>
@@ -83,9 +84,9 @@ function InnerCart({ cart }) {
           <p>sub total</p>
           <p>$ {cart?.cost?.subtotalAmount?.amount}</p>
         </div>
-        <Button className={s.action} href={cart?.checkoutUrl}>
-          checkout
-        </Button>
+        <a className={s.action} href={cart?.checkoutUrl}>
+          <span> checkout</span>
+        </a>
       </div>
     </>
   )
@@ -131,12 +132,12 @@ function RemoveButton({ id, className }) {
 
   return (
     <form action={formAction} className={className}>
-      <ActionButton>remove</ActionButton>
+      <ActionButton className="link">remove</ActionButton>
     </form>
   )
 }
 
-function ActionButton({ children }) {
+function ActionButton({ children, className }) {
   const { pending } = useFormStatus()
   useBeforeUnload(pending)
 
@@ -148,7 +149,7 @@ function ActionButton({ children }) {
           e.preventDefault()
         }
       }}
-      className={cn('p-s', pending && s.disable)}
+      className={cn('p-s', pending && s.disable, className)}
     >
       {children}
     </button>

libs/shopify/cart/modal/modal.module.scss

@@ -33,15 +33,16 @@
   left: 50%;
   width: 50%;
   height: 100%;
-  background-color: var(--light-gray);
+  background-color: var(--black);
+  color: var(--red);
   display: flex;
   flex-direction: column;
   text-transform: uppercase;
   transition: 800ms transform var(--gleasing);
 
   .heading {
     padding-bottom: desktop-vw(16px);
-    border-bottom: 1px solid var(--dark-gray);
+    border-bottom: 1px solid var(--red);
   }
 
   @include desktop {
@@ -54,8 +55,6 @@
   position: absolute;
   right: desktop-vw(8px);
   top: desktop-vw(8px);
-  background: rgba(0, 0, 0, 0.52);
-  color: var(--white);
   padding: mobile-vw(7px) mobile-vw(8px);
   border-radius: mobile-vw(2px);
 
@@ -65,7 +64,7 @@
   }
 
   &.active {
-    background: var(--black);
+    background: var(--white);
   }
 }
 
@@ -83,13 +82,14 @@
     grid-template-columns: repeat(6, minmax(0, 1fr));
     grid-gap: var(--layout-columns-gap);
     padding: desktop-vw(16px) 0;
-    border-bottom: 1px solid var(--dark-gray);
+    border-bottom: 1px solid var(--red);
 
     .media {
       position: relative;
       grid-column: 1/2;
       width: 100%;
-      height: desktop-vw(133px);
+      height: desktop-vw(250px);
+      aspect-ratio: 341/1404;
     }
 
     .info {
@@ -108,7 +108,6 @@
 
         .description {
           width: desktop-vw(308px);
-          color: rgba(0, 0, 0, 0.52);
           @extend .ellipsis;
         }
       }
@@ -121,7 +120,8 @@
       width: fit-content;
       height: fit-content;
       border-radius: desktop-vw(100px);
-      background-color: var(--white);
+      background-color: var(--red);
+      color: var(--black);
       padding: desktop-vw(7px) desktop-vw(16px);
 
       button {
@@ -162,8 +162,40 @@
   }
 
   .action {
+    position: relative;
+    display: block;
     width: 100%;
     padding: desktop-vw(25px) 0;
+    text-align: center;
+    border: 2px solid red;
+    border-radius: desktop-vw(8px);
+
+    span {
+      position: relative;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+      height: 100%;
+      background-color: var(--red);
+      clip-path: circle(0%);
+    }
+
+    @include hover {
+      &:hover {
+        color: var(--black);
+
+        &::before {
+          transition: 1000ms clip-path var(--gleasing);
+          clip-path: circle(100%);
+        }
+      }
+    }
   }
 }
 

libs/shopify/constants.js

@@ -40,5 +40,4 @@ export const TAGS = {
 }
 
 export const HIDDEN_PRODUCT_TAG = 'nextjs-frontend-hidden'
-export const DEFAULT_OPTION = 'Default Title'
 export const SHOPIFY_GRAPHQL_API_ENDPOINT = '/api/2023-01/graphql.json'

libs/shopify/hooks.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react'
+
+export const useBeforeUnload = (stop) => {
+  useEffect(() => {
+    const handleBeforeUnload = (e) => {
+      if (!stop) return
+      e.preventDefault()
+    }
+    window.addEventListener('beforeunload', handleBeforeUnload)
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload)
+    }
+  }, [stop])
+}