Shopping carts

Full-page cart layouts plus a right-edge slide-over drawer.

Preview

Shopping Cart

Items in your shopping cart

  • Front of men's Basic Tee in sienna.

    Basic Tee

    Sienna

    Large

    $32.00

    In stock

  • Front of men's Basic Tee in black.

    Basic Tee

    Black

    Large

    $32.00

    Ships in 3–4 weeks

Order summary

Subtotal
$64.00
Shipping estimate
$5.00
Tax estimate
$5.52
Order total
$74.52
Checkout

React preview

LiveView (HEEx) 

alias DesignSystem.UI.{Buttons, ShoppingCarts}

<ShoppingCarts.cart_page
  products={@cart_items}
  subtotal="$64.00"
  shipping="$5.00"
  tax="$5.52"
  total="$74.52"
/>

<Buttons.button phx-click={ShoppingCarts.show_cart("#mini-cart")}>
  Open cart
</Buttons.button>

<ShoppingCarts.cart_drawer id="mini-cart" products={@cart_items} subtotal="$64.00" />

React (JSX) 

import { useState } from "react"
import { Button, CartDrawer, ShoppingCart } from "../ui/index.mjs"

function Cart({ products }) {
  const [open, setOpen] = useState(false)
  return (
    <>
      <ShoppingCart
        products={products}
        subtotal="$64.00"
        shipping="$5.00"
        tax="$5.52"
        total="$74.52"
      />
      <Button onClick={() => setOpen(true)}>Open cart</Button>
      <CartDrawer
        open={open}
        onClose={setOpen}
        products={products}
        subtotal="$64.00"
      />
    </>
  )
}