Trong bài viết này, chúng tôi sẽ tạo khách hàng thương mại điện tử của bảng quản trị Strapi-Multitenancy mà chúng tôi đã thực hiện trước đây.
Nó bây giờ được sử dụng không đầu với phiên bản 3 tinh chỉnh . Bạn có thể sử dụng bất kỳ thư viện giao diện người dùng nào bạn muốn với tính năng không đầu .
Chúng tôi sẽ sử dụng Strapi và Chakra-UI cùng với Next.js trong ứng dụng ví dụ về khách hàng Thương mại điện tử của chúng tôi.
Tinh chỉnh thiết lập
Hãy bắt đầu bằng cách tạo dự án tinh chỉnh của chúng tôi . Bạn có thể sử dụng superplate để tạo một dự án tinh chỉnh.
npx superplate-cli -p refine-nextjs refine-ecommerce-example
✔ What will be the name of your app · refine-ecommerce-example
✔ Package manager: · npm
✔ Do you want to using UI Framework? > No(headless)
✔ Data Provider: Strapi
✔ i18n - Internationalization: · no
superplate sẽ nhanh chóng tạo dự án tinh chỉnh của chúng tôi theo các tính năng chúng tôi chọn. Hãy tiếp tục bằng cách cài đặt các gói Strapi -v4 Data Provider và Chakra-UI tinh chỉnh mà chúng ta sẽ sử dụng sau này.
Cài đặt
cd refine-ecommerce-example
npm i @pankod/refine-strapi-v4 @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
Dự án tinh chỉnh và cài đặt của chúng tôi hiện đã sẵn sàng! Hãy bắt đầu sử dụng nó.
Cách sử dụng
Định cấu hình Refine cho Strapi- v4
import React from "react";
import { AppProps } from "next/app";
import Head from "next/head";
import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-nextjs-router";
import { DataProvider } from "@pankod/refine-strapi-v4";
const API_URL = "https://api.strapi-multi-tenant.refine.dev/api";
function MyApp({ Component, pageProps }: AppProps): JSX.Element {
const dataProvider = DataProvider(API_URL);
return (
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider}
>
<Component {...pageProps} />
</Refine>
);
}
Thiết lập nhà cung cấp Chakra-UI
import React from "react";
import { AppProps } from "next/app";
import Head from "next/head";
import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-nextjs-router";
import { DataProvider } from "@pankod/refine-strapi-v4";
import { ChakraProvider } from "@chakra-ui/react";
const API_URL = "https://api.strapi-multi-tenant.refine.dev/api";
function MyApp({ Component, pageProps }: AppProps): JSX.Element {
const dataProvider = DataProvider(API_URL);
return (
<Refine routerProvider={routerProvider} dataProvider={dataProvider}>
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
</Refine>
);
}
Tạo Bộ sưu tập
Chúng tôi đã tạo ba bộ sưu tập trên Strapi với tư cách là store, productvà orderthêm mối quan hệ giữa chúng. Để biết thông tin chi tiết về cách tạo bộ sưu tập, bạn có thể xem tại đây .
Chúng tôi đã tạo bộ sưu tập của mình trong hướng dẫn Đa thai Strapi trước đây. Bây giờ chúng ta sẽ sử dụng các bộ sưu tập giống nhau.
Tham khảo Bộ sưu tập dự án để biết thông tin chi tiết. →
Tạo bố cục
tinh chỉnh không đầu không liên kết với bất kỳ giao diện người dùng nào. Việc tùy chỉnh giao diện người dùng của bạn là hoàn toàn tùy thuộc vào bạn. Hãy tạo một bố cục đơn giản cho ví dụ này.
Bố cục mà chúng tôi đã tạo bây giờ sẽ chỉ hiển thị biểu trưng tinh chỉnh . Trong các bước sau, chúng tôi sẽ chỉnh sửa Bố cục của mình.
import { LayoutProps } from "@pankod/refine-core";
import { Box, Container, Flex, Image } from "@chakra-ui/react";
export const Layout: React.FC<LayoutProps> = ({ children }) => {
return (
<Box
display={"flex"}
flexDirection={"column"}
backgroundColor={"#eeeeee"}
minH={"100vh"}
>
<Container maxW={"container.lg"}>
<Flex justify={"space-between"} mt={4} alignSelf={"center"}>
<a href="https://refine.dev">
<Image alt="Refine Logo" src={"./refine_logo.png"} />
</a>
</Flex>
{children}
</Container>
</Box>
);
};
import React from "react";
import { AppProps } from "next/app";
import Head from "next/head";
import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-nextjs-router";
import { DataProvider } from "@pankod/refine-strapi-v4";
import { ChakraProvider } from "@chakra-ui/react";
import { Layout } from "src/components";
const API_URL = "https://api.strapi-multi-tenant.refine.dev/api";
function MyApp({ Component, pageProps }: AppProps): JSX.Element {
const dataProvider = DataProvider(API_URL);
return (
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider}
Layout={Layout}
>
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
</Refine>
);
}
