5.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 "@localprotojs/admin-sdk"2import { DetailWidgetProps, AdminProduct } from "@localprotojs/framework/types"3import { useEffect, useState } from "react"4import { Container, Heading } from "@localprotojs/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.

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 Local Protocol application and go to a product's details page in the Local Protocol 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.