PhiaUi.Components.ProductCard (phia_ui v0.1.17)

Copy Markdown View Source

E-commerce product card with image, rating, pricing, and add-to-cart action.

Renders a Card with an optional product image (square aspect ratio), an optional badge overlay (top-left), product title, price row, star rating, and action buttons.

Image handling

  • When src is provided, renders an <img> with aspect-square object-cover.
  • When src is nil, renders a muted placeholder box.
  • Both the image and title are wrapped in an <a> link when href is provided.

Badge overlay

Set badge to show a label over the top-left corner of the image (e.g. "Sale", "New"). The badge is hidden when sold_out={true}; instead a "Sold Out" secondary badge is shown automatically.

Star rating

Pass a rating float between 0.0 and 5.0 to render a star row style. Provide review_count to append the count in parentheses.

Sold-out state

When sold_out={true}, a "Sold Out" badge overlay is shown and the add-to-cart button is disabled.

Custom actions slot

Override the default add-to-cart button via the :actions slot when you need a different CTA (e.g. "View details" or "Add to wishlist"):

<.product_card title="Widget" price="$9" src="/img/widget.jpg">
  <:actions>
    <.button variant={:outline} class="w-full">View details</.button>
  </:actions>
</.product_card>

Summary

Functions

product_card(assigns)

Renders a product card.

Functions

product_card(assigns)

Renders a product card.

Attributes

  • title (:string) (required) - Product title.
  • price (:string) (required) - Current price string.
  • original_price (:string) - Original/strikethrough price. Defaults to nil.
  • src (:string) - Product image URL. Defaults to nil.
  • alt (:string) - Image alt text. Defaults to "".
  • rating (:float) - Star rating 0.0–5.0. Defaults to nil.
  • review_count (:integer) - Number of reviews. Defaults to nil.
  • badge (:string) - Optional badge label on image. Defaults to nil.
  • badge_variant (:atom) - Badge color variant. Defaults to :default. Must be one of :default, :destructive, :secondary, or :outline.
  • sold_out (:boolean) - Show sold-out overlay and disable button. Defaults to false.
  • href (:string) - Optional link for image and title. Defaults to nil.
  • on_add_to_cart (:string) - phx-click event for add-to-cart button. Defaults to nil.
  • class (:string) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the card element.

Slots

  • actions - Override the default add-to-cart button.