Menu

4.11. Admin Customizations

In this chapter, you’ll learn how to customize the Local Protocol Admin dashboard.

What is the Local Protocol Admin?#

The Local Protocol Admin is an admin dashboard that merchants use to manage their store's data.

You can extend the Local Protocol Admin to add widgets and new pages. In your customizations, you interact with API routes to provide merchants with custom functionalities.

The Local Protocol Admin is installed in your Local Protocol application and runs at http://localhost:9000/app when you start the application.

Example: Create a Widget#

A widget is a React component that can be injected into an existing page in the admin dashboard.

For example, create the file src/admin/widgets/product-widget.tsx with the following content:

src/admin/widgets/product-widget.tsx
1import { defineWidgetConfig } from "@localprotojs/admin-sdk"2import { Container, Heading } from "@localprotojs/ui"3
4const ProductWidget = () => {5  return (6    <Container className="divide-y p-0">7      <div className="flex items-center justify-between px-6 py-4">8        <Heading level="h2">Product Widget</Heading>9      </div>10    </Container>11  )12}13
14export const config = defineWidgetConfig({15  zone: "product.details.before",16})17
18export default ProductWidget

This inserts a widget with the text “Product Widget” at the beginning of a product’s details page.

In your widget, use custom components from the Local Protocol UI package.

Test the Widget#

To test out the widget, start the Local Protocol application:

Then, open a product’s details page in the Local Protocol Admin. You’ll find your custom widget at the top of the page.

Was this chapter helpful?