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

2022.11.25
BEIT ký hợp đồng triển khai hệ thống quản lý với MyGym

Ngày 25/11/2022 ra lễ ký kết hợp đồng giữa công ty trách nhiệm hữu hạn Công nghệ BEIT và công […]

2022.11.09
BEIT tập trung xây dựng kho mẫu website chất lượng cao

Vì nhu cầu của khách hàng rất lớn về website chuẩn SEO và chất lượng, vì thế BEIT đã và […]

2022.11.01
Công ty BEIT phát triển website trên nền tảng Shopify

Công ty phát triển website dựa vào nền tảng  Shopify (Shopify Development Agency) Khởi chạy cửa hàng trực tuyến và […]

2022.10.28
Công ty BEIT phát triển mảng Game Online CHPlay, IOS

DỊCH VỤ PHÁT TRIỂN TRÒ CHƠI (Game) Công ty phát triển trò chơi điện tử của chúng tôi điều hành […]

2022.10.26
BEIT xây dựng website cho công ty UPTEMPO Hàn Quốc

Website của công ty UPTEMPO được xây dựng bởi BEIT. Chúng tôi luôn mong muốn tạo niểm tin cho khách […]

2022.10.07
XÂY DỰNG MỘT API ĐẦY ĐỦ với NodeJS + Strapi trong 5 phút hoặc ít hơn (tuyệt vời!)

Một thời gian trước, tôi đã quyết định sử dụng công cụ #strapi tuyệt vời này. Kết quả kiểm tra […]

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