4.3.1. Show Brand of Product in Admin

Widget to Show Brand in Product Details#

To create a widget that shows a product's brand in its details page, create the file src/admin/widgets/product-brand.tsx with the following content:

src/admin/widgets/product-brand.tsx
1import { defineWidgetConfig } from "@medusajs/admin-sdk"2import { DetailWidgetProps, AdminProduct } from "@medusajs/types"3import { useEffect, useState } from "react"4import { Container, Heading } from "@medusajs/ui"5
6const ProductBrandWidget = ({ 7  data,8}: DetailWidgetProps<AdminProduct>) => {9  const [brand, setBrand] = useState<10    Record<string, string> | undefined11  >()12  const [loading, setLoading] = useState(true)13
14  useEffect(() => {15    if (!loading) {16      return17    }18
19    fetch(`/admin/products/${data.id}/brand`, {20      credentials: "include",21    })22    .then((res) => res.json())23    .then(({ brand }) => {24      setBrand(brand)25      setLoading(false)26    })27  }, [loading])28  29  return (30    <Container>31      <Heading level="h2">Brand</Heading>32      {loading && <span>Loading...</span>}33      {brand && <span>Name: {brand.name}</span>}34    </Container>35  )36}37
38export const config = defineWidgetConfig({39  zone: "product.details.before",40})41
42export default ProductBrandWidget

This adds a widget at the top of the product's details page.

Widgets created in a details page receive the targetted item in a data prop. So, the ProductBrandWidget receives the product's details in the data prop.

In the widget, you fetch the product's brand from the /admin/products/:id/brand API route and display it.

Test it Out#

Start your Medusa application and go to a product's details page in the Medusa Admin, you'll find a new block at the top of the page showing the product's brand.

Next Chapter: Add List of Brands Page#

In the next chapter, you'll add a new page or UI route that displays the list of brands in your application.