addToCartWithName.ts

import { usePlausible } from "next-plausible"
import { commerce } from "libs/commercejs"
import { useCart } from "context/cart"

function AddToCartButton({ product, quantity }) {
  const { setCart } = useCart()        // <-- a custom hook to manage cart state
  const plausible = usePlausible()     // <-- access the plausible API
  
  const handleAddToCart = async () => { 
    const { cart } = await commerce.cart.add(product.id, quantity)
    setCart(cart)

    plausible("addProductToCart", {
      props: {
        productName: product.name,
      }
    })
  }
  
  return (
    <Button onClick={handleAddToCart}>Add to cart</Button>
  )
}