Cách tạo ứng dụng web thương mại điện tử React [Demo & hướng dẫn trực tiếp]

Bây giờ chúng ta đã hiểu những lợi ích của việc xây dựng các cửa hàng thương mại điện tử với React, hãy cùng tìm hiểu cách chúng ta có thể tạo ra chúng.

Chúng chúng ta sẽ sử dụng Next.js để nhanh chóng tạo ra một ứng dụng React mới, nơi chúng chúng ta có thể quản lý và hiển thị các sản phẩm của mình.

Điều kiện tiên quyết

Trước khi bắt đầu, chúng chúng ta sẽ giả định rằng bạn đã tạo một tài khoản Snipcart miễn phí. ó vĩnh viễn miễn phí ở chế độ Thử nghiệm.

Bạn cũng sẽ cần hiểu biết cơ bản về JavaScript và React. Mặc dù hầu hết những gì bạn sẽ làm bao gồm HTML thuần túy, nhưng chúng chúng ta sẽ làm việc trong một ứng dụng React bằng Next.js.

Bước 0: Tạo một ứng dụng React mới với Next.js

Chúng chúng ta sẽ sử dụng Next.js để tạo ứng dụng React của chúng chúng ta. Để làm điều đó, chúng ta có thể sử dụng npm để tạo một ứng dụng mới với mẫu Next.js mặc định một cách nhanh chóng.

Trước tiên, điều hướng đến thư mục trong thiết bị đầu cuối của bạn mà bạn muốn tạo và chạy ứng dụng mới của mình:

npx create-next-app next-snipcart-store

Bạn có thể tùy ý thay thế next-snipcart-storebằng tên của thư mục mà bạn muốn tạo dự án này.

Thao tác này sẽ tạo một dự án Next.js mới và cài đặt các phần phụ thuộc. Sau khi hoàn tất, bạn có thể điều hướng đến thư mục đó và chạy lệnh phát triển để khởi động máy chủ.

cd next-snipcart-store
npm run dev

 

Tạo ứng dụng Next.js mới

Và sau khi hoàn tất, bây giờ bạn có thể mở dự án tại http: // localhost: 3000 .

Bước 1: Thêm sản phẩm vào ứng dụng React mới của chúng chúng ta

Để bắt đầu thêm các sản phẩm của chúng chúng ta vào ứng dụng, trước tiên chúng chúng ta cần một danh sách các sản phẩm.

Hãy tạo một tệp mới tại thư mục gốc của dự án của chúng chúng ta để lưu trữ thông tin sản phẩm mà chúng chúng ta có thể sử dụng trong toàn bộ ứng dụng.

Tạo một tệp mới được gọi products.jsonvà bên trong tệp đó, chỉ cần thêm một mảng trống:

[]

Khi thiết lập sản phẩm của mình, chúng chúng ta cần một số thuộc tính cơ bản:

• Tiêu đề: tên thân thiện với con người của sản phẩm

• ID: số nhận dạng duy nhất cho sản phẩm đó

• Mô tả: một ghi chú ngắn gọn về sản phẩm là gì

• Giá: chi phí của mặt hàng

Chúng ta có thể tạo sản phẩm đầu tiên của mình bằng cách thêm một đối tượng mới vào bên trong mảng trống của chúng ta với những thứ sau:

{
  "title": "Snipcart Logo Sticker",
  "id": "sticker_logo",
  "description": "Show off your Snipcart support with a logo sticker!",
  "price": "2.00"
}

Dưới đây là đoạn mã về tệp của chúng chúng ta sẽ trông như thế nào tại thời điểm này:

 

Để sử dụng tệp đó, chúng ta có thể truy cập tệp trang chủ của mình và nhập tệp đó.

Trong trình soạn thảo mã của bạn, hãy mở pages/index.jstệp và thêm câu lệnh nhập sau vào đầu tệp:

import products from '../products.json';

Với các sản phẩm được nhập khẩu của chúng chúng ta, bây giờ chúng chúng ta có thể sử dụng chúng để hiển thị trên trang.

Bên trong <div className={styles.grid}>, Next.js bao gồm một số liên kết mặc định về Next.js. Chúng chúng ta sẽ xóa chúng và thay thế chúng bằng các liên kết của riêng chúng chúng ta.

Thay thế lưới bằng như sau:

<div className={styles.grid}>
  {products.map(product => {
    return (
      <div key={product.id} className={styles.card}>
        <h3>{ product.title }</h3>
        <p>{ product.description }</p>
        <p>${ product.price }</p>
        <p>
          <button>Add to Cart</button>
        </p>
      </div>
    );
  })}
</div>

Ở đây, chúng chúng ta đang lặp lại mảng productsmà chúng chúng ta đã nhập. Chúng chúng ta đang tạo một cái mới <div>cho mỗi sản phẩm bao gồm một classNamecái mượn các kiểu mặc định của Next.js cho một thẻ.

Bên trong của chúng chúng ta <div>, chúng chúng ta bao gồm các chi tiết về sản phẩm của chúng chúng ta như tiêu đề và giá cả, cũng như thêm một nút HTML mà chúng chúng ta có thể sử dụng để thêm mặt hàng vào giỏ hàng của mình.

Nếu chúng chúng ta lưu tệp và mở trình duyệt của mình, bây giờ chúng chúng ta có thể thấy sản phẩm đầu tiên của mình.

 

Hãy thêm một sản phẩm thứ hai.

Chúng chúng ta có thể thêm một đối tượng khác vào mảng dự án cho sản phẩm thứ hai của chúng chúng ta:

{
  "title": "Snipcart Logo Sticker Pack",
  "id": "sticker_logo_pack",
  "description": "Get a pack of 3 Snipcart logo stickers.",
  "price": "4.00"
}

Và nếu chúng ta lưu và tải lại trang của mình, chúng ta sẽ thấy sản phẩm thứ hai của mình.

 

Cuối cùng, thông thường, khi chúng chúng ta muốn bán một sản phẩm, chúng chúng ta muốn hiển thị hình ảnh của những sản phẩm đó để khách hàng của chúng chúng ta có thể thấy sản phẩm đó trông như thế nào.

Hãy thêm hai tệp hình ảnh vào dự án của chúng chúng ta. Trong thư mục chung, hãy tạo một thư mục có tên là “hình ảnh” và thêm các tệp hình ảnh của bạn vào đó, một tệp cho mỗi sản phẩm.