Skip to content

Commit

Permalink
shopify optimistic cart
Browse files Browse the repository at this point in the history
  • Loading branch information
GFier committed Aug 26, 2024
1 parent 7d365da commit 1f7f8f0
Show file tree
Hide file tree
Showing 17 changed files with 482 additions and 216 deletions.
19 changes: 8 additions & 11 deletions .husky/_/post-merge
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,25 +13,22 @@ call_lefthook()
if test -n "$LEFTHOOK_BIN"
then
"$LEFTHOOK_BIN" "$@"
elif lefthook.exe -h >/dev/null 2>&1
elif lefthook -h >/dev/null 2>&1
then
lefthook.exe "$@"
elif lefthook.bat -h >/dev/null 2>&1
then
lefthook.bat "$@"
lefthook "$@"
else
dir="$(git rev-parse --show-toplevel)"
osArch=$(uname | tr '[:upper:]' '[:lower:]')
cpuArch=$(uname -m | sed 's/aarch64/arm64/;s/x86_64/x64/')
if test -f "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook.exe"
if test -f "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook"
then
"$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook.exe" "$@"
elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook.exe"
"$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook" "$@"
elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook"
then
"$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook.exe" "$@"
elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook.exe"
"$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook" "$@"
elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook"
then
"$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook.exe" "$@"
"$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook" "$@"
elif test -f "$dir/node_modules/lefthook/bin/index.js"
then
"$dir/node_modules/lefthook/bin/index.js" "$@"
Expand Down
19 changes: 8 additions & 11 deletions .husky/_/pre-commit
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,25 +13,22 @@ call_lefthook()
if test -n "$LEFTHOOK_BIN"
then
"$LEFTHOOK_BIN" "$@"
elif lefthook.exe -h >/dev/null 2>&1
elif lefthook -h >/dev/null 2>&1
then
lefthook.exe "$@"
elif lefthook.bat -h >/dev/null 2>&1
then
lefthook.bat "$@"
lefthook "$@"
else
dir="$(git rev-parse --show-toplevel)"
osArch=$(uname | tr '[:upper:]' '[:lower:]')
cpuArch=$(uname -m | sed 's/aarch64/arm64/;s/x86_64/x64/')
if test -f "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook.exe"
if test -f "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook"
then
"$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook.exe" "$@"
elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook.exe"
"$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook" "$@"
elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook"
then
"$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook.exe" "$@"
elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook.exe"
"$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook" "$@"
elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook"
then
"$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook.exe" "$@"
"$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook" "$@"
elif test -f "$dir/node_modules/lefthook/bin/index.js"
then
"$dir/node_modules/lefthook/bin/index.js" "$@"
Expand Down
19 changes: 8 additions & 11 deletions .husky/_/prepare-commit-msg
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,25 +13,22 @@ call_lefthook()
if test -n "$LEFTHOOK_BIN"
then
"$LEFTHOOK_BIN" "$@"
elif lefthook.exe -h >/dev/null 2>&1
elif lefthook -h >/dev/null 2>&1
then
lefthook.exe "$@"
elif lefthook.bat -h >/dev/null 2>&1
then
lefthook.bat "$@"
lefthook "$@"
else
dir="$(git rev-parse --show-toplevel)"
osArch=$(uname | tr '[:upper:]' '[:lower:]')
cpuArch=$(uname -m | sed 's/aarch64/arm64/;s/x86_64/x64/')
if test -f "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook.exe"
if test -f "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook"
then
"$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook.exe" "$@"
elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook.exe"
"$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook" "$@"
elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook"
then
"$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook.exe" "$@"
elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook.exe"
"$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook" "$@"
elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook"
then
"$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook.exe" "$@"
"$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook" "$@"
elif test -f "$dir/node_modules/lefthook/bin/index.js"
then
"$dir/node_modules/lefthook/bin/index.js" "$@"
Expand Down
32 changes: 32 additions & 0 deletions app/(pages)/home/(components)/example-1/example.module.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
.example {
position: fixed;
height: 100vh;
width: 100vw;
padding-bottom: 2vh;

.item {
position: absolute;
inset: 0;
width: fit-content;
height: fit-content;
color: var(--theme-primary);
background-color: var(--theme-secondary);
will-change: transform;
user-select: none;
touch-action: none;

@include desktop {
padding: desktop-vw(12px);
border-radius: desktop-vw(8px);
}

> * {
touch-action: none;
}

&.bounce {
background-color: var(--white);
color: var(--theme-secondary);
}
}
}
31 changes: 31 additions & 0 deletions app/(pages)/home/(components)/example-1/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
'use client'

import Elastica, {
AxisAlignedBoundaryBox,
initalConditionsPresets,
updatePresets,
} from '@darkroom.engineering/elastica/react'
import s from './example.module.scss'

export function Example1() {
return (
<section className={s.example}>
<Elastica
showHashGrid
config={{
gridSize: 3,
collisions: true,
borders: 'rigid',
}}
initialCondition={initalConditionsPresets.random}
update={updatePresets.dvdScreenSaver}
>
{[{ name: 'DVD' }].map(({ name }, index) => (
<AxisAlignedBoundaryBox key={index} className={s.item}>
{name}
</AxisAlignedBoundaryBox>
))}
</Elastica>
</section>
)
}
2 changes: 1 addition & 1 deletion app/(pages)/shopify/(components)/show-cart/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import cn from 'clsx'
import { useCartModal } from 'libs/shopify/cart/modal'

export const ShowCart = ({ className }) => {
const openCart = useCartModal()
const { openCart } = useCartModal()

return (
<button onClick={openCart} className={cn(className, 'link')}>
Expand Down
13 changes: 10 additions & 3 deletions app/(pages)/shopify/(components)/size-and-buy/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,22 @@ export const SizeAndBuy = ({ product }) => {
options={
product.options.find((option) => option.name === 'Size').values
}
onClick={(value) => {
onChange={(value) => {
const selected = product.variants?.[value]?.title
const variant = product?.variants.find((variant) =>
variant.selectedOptions.every((option) => option.value === value),
variant.selectedOptions.every(
(option) => option.value === selected,
),
)

setSelectedVariant(variant)
}}
/>
<AddToCart variant={selectedVariant} className={s.add} />
<AddToCart
product={product}
variant={selectedVariant}
className={s.add}
/>
</>
)
}
14 changes: 11 additions & 3 deletions app/(pages)/shopify/(components)/size-and-buy/size-and-buy.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,16 @@
width: desktop-vw(67px);
}

button {
justify-content: center !important;
flex: 1 0 100%;
> button {
border: 2px solid var(--black) !important;
border-radius: mobile-vw(8px) !important;

@include desktop {
border-radius: desktop-vw(8px) !important;
}
}

> div {
padding: 0 !important;
}
}
48 changes: 37 additions & 11 deletions libs/shopify/cart/actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,36 @@ import { TAGS } from 'libs/shopify/constants'
import { revalidateTag } from 'next/cache'
import { cookies } from 'next/headers'

export async function removeItem(lineId) {
export async function removeItem(prevState, merchandiseId) {
let cartId = cookies().get('cartId')?.value

if (!cartId) {
return 'Missing cart ID'
}

try {
await removeFromCart(cartId, [lineId])
revalidateTag(TAGS.cart)
const cart = await getCart(cartId)

if (!cart) {
return 'Error fetching cart'
}

const lineItem = cart.lines.find(
(line) => line.merchandise.id === merchandiseId,
)

if (lineItem && lineItem.id) {
await removeFromCart(cartId, [lineItem.id])
revalidateTag(TAGS.cart)
} else {
return 'Item not found in cart'
}
} catch (e) {
return 'Error removing item from cart'
}
}

export async function addItem(prevState, selectedVariantId) {
export async function addItem(prevState, { variantId, quantity = 1 }) {
let cartId = cookies().get('cartId')?.value
let cart

Expand All @@ -38,35 +52,47 @@ export async function addItem(prevState, selectedVariantId) {
cookies().set('cartId', cartId)
}

if (!selectedVariantId) {
if (!variantId) {
return 'Missing product variant ID'
}

try {
await addToCart(cartId, [{ merchandiseId: selectedVariantId, quantity: 1 }])
await addToCart(cartId, [{ merchandiseId: variantId, quantity }])
revalidateTag(TAGS.cart)

return 'success'
} catch (e) {
return 'Error adding item to cart'
}
}

export async function updateItemQuantity(
payload = { lineId: '', variantId: '', quantity: '' },
prevState,
payload = { merchandiseId: '', quantity: '' },
) {
let cartId = cookies().get('cartId')?.value

if (!cartId) {
return 'Missing cart ID'
}

const { lineId, variantId, quantity } = payload

try {
const cart = await getCart(cartId)

if (!cart) {
return 'Error fetching cart'
}

const { merchandiseId, quantity } = payload

const lineItem = cart.lines.find(
(line) => line.merchandise.id === merchandiseId,
)

await updateCart(cartId, [
{
id: lineId,
merchandiseId: variantId,
id: lineItem.id,
merchandiseId,
quantity,
},
])
Expand Down
8 changes: 0 additions & 8 deletions libs/shopify/cart/add-to-cart/add-to-cart.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,3 @@
cursor: not-allowed;
transition: 300ms opacity var(--gleasing);
}

.cta {
> span:first-of-type {
> span {
padding-top: desktop-vw(1px);
}
}
}
Loading

1 comment on commit 1f7f8f0

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"⚡️ Lighthouse report for the changes in this commit:

🔴 Performance: 43
🟢 Accessibility: 90
🟠 Best practices: 79
🟠 SEO: 83

Lighthouse ran on https://vercel.com/login?next=%2Fsso-api%3Furl%3Dhttps%253A%252F%252Fsatus-storybook-e4ph3lx8x-darkroom-engineering.vercel.app%252F%26nonce%3D2b76041d98861ba5d6a256856aefd44a6609efe0ffddb2e62d80d64a3bfc5cbe"

Please sign in to comment.