BEIT phát triển Next.js E-commerce App với Strapi và Chakra UI

BEIT phát triển Next.js E-commerce App với Strapi và Chakra UI

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.

Strapi, Next js BEIT

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

trang / _app.tsx
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

trang / _app.tsx
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à storeproductvà 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.

thành phần / Layout.tsx
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>
    );
};
 
trang / _app.tsx
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>
    );
}

Bài viết liên quan

2023.12.10
Website của bạn có thể đứng ở vị số 1 mãi mãi ở Google không?

Khi bạn đang xây dựng doanh nghiệp của mình và xây dựng sự hiện diện trực tuyến, bạn có một […]

2023.12.09
5 Lý do tại sao doanh nghiệp cần Local SEO?

Nếu ai đó tìm kiếm sản phẩm hoặc dịch vụ của bạn trực tuyến và không biết công ty của […]

2023.12.08
Tại sao Flutter là tương lai của phát triển ứng dụng?

Trong phần này, chúng ta khám phá lý do tại sao Flutter nhanh chóng trở thành lựa chọn phổ biến […]

2023.12.07
Tại sao bạn nên tận dụng API cho phần mềm của mình

API không chỉ là một xu hướng công nghệ hấp dẫn. Chúng là những thành phần có giá trị của […]

2023.12.06
Node JS vs PHP: Ngôn ngữ phụ trợ tốt nhất cho dự án của bạn (Phần 2)

Trong phần 1 của bài viết, các bạn đã biết được những lợi ích và hạn chế của cả 2 […]

2023.12.04
BEIT ứng dụng công nghệ hiện đại vào thiết kế website đồ đồng Thiên Quang Bảo!

Thiên Quang Bảo là một trong những cơ sở sản xuất đồ đồng uy tín và lâu đời tại Nam […]

Giới thiệu

Chúng tôi có kinh nghiệm trong phát triển các dự án E-commerce, phần mềm quản lý, Mobi app, các dự án outsource. Với những công nghệ mới nhất hiện nay.

Tìm kiếm