Product quickviews

Modal-style condensed product preview, shown without leaving the category page.

Preview

React preview

LiveView (HEEx)

alias DesignSystem.UI.ProductQuickviews

<Buttons.button phx-click={ProductQuickviews.show_quickview("qv-#{@product.id}")}>
  Quick view
</Buttons.button>
<ProductQuickviews.product_quickview id={"qv-#{@product.id}"} {@product} />

React (JSX)

import { useState } from "react"
import { ProductQuickview } from "../ui/index.mjs"

const [open, setOpen] = useState(false)

<button onClick={() => setOpen(true)}>Quick view</button>
<ProductQuickview open={open} onClose={setOpen} {...product} />