- Get Started
- Product
- Resources
- Tools & SDKs
- Framework
- Reference
Menu
- Get Started
- Product
- Resources
- Tools & SDKs
- Framework
- Reference
4.3.1. Show Brand of Product in Admin
Example Chapter: This chapter covers how to show the brand of a product in the Medusa Admin using a widget as a step of the "Customize Admin" chapter .
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:
1import { defineWidgetConfig } from "@medusajs/admin-sdk"2import { DetailWidgetProps, AdminProduct } from "@medusajs/framework/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 className="divide-y p-0">31 <div className="flex items-center justify-between px-6 py-4">32 <Heading level="h2">Brand</Heading>33 </div>34 {loading && <span>Loading...</span>}35 {brand && <span>Name: {brand.name}</span>}36 </Container>37 )38}39 40export const config = defineWidgetConfig({41 zone: "product.details.before",42})43 44export default ProductBrandWidget
This adds a widget at the top of the product's details page.
Note: Learn more about widgets in this guide .
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.
Note: Admin customizations can use the Medusa UI package to align your customizations with the admin's design. Also, this guide includes examples of common components in the Medusa Admin.
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.
Was this chapter helpful?