Xây dựng trang web thương mại điện tử như amazon (react & node & mongodb)

Component Slots là một tính năng mới của Amplify Studio cho phép bạn truyền nội dung dưới dạng phần tử con của các thành phần của mình. Lần trước, chúng ta đã phác thảo cách chuyển nội dung tĩnh vào một thành phần do AWS Amplify Studio tạo ra. Bây giờ, chúng ta sẽ áp dụng các công cụ tương tự cho Bộ sưu tập

Bằng cách thêm các vị trí vào Bộ sưu tập, bạn có thể tùy chỉnh bộ sưu tập với nội dung tĩnh xuất hiện giống nhau trên từng thành phần trong bộ sưu tập hoặc với nội dung động duy nhất cho từng thành phần

Bộ sưu tập là gì?

Bộ sưu tập là một tập hợp lặp lại các thành phần được tạo bởi Amplify Studio – ví dụ: bạn có thể muốn có thành phần “Bài đăng” cho mỗi bài đăng trong ứng dụng truyền thông xã hội của mình. Nói chung, các bộ sưu tập của bạn sẽ được liên kết với dữ liệu của bạn để Amplify có thể tạo thành phần cho mỗi mục nhập trong mô hình dữ liệu

Ví dụ này sẽ sử dụng tập hợp các thành phần được liên kết với mô hình dữ liệu "Sản phẩm" để tạo tên sản phẩm, mô tả và URL hình ảnh. Để biết thêm thông tin về cách tạo bộ sưu tập, hãy truy cập tài liệu Bộ sưu tập

Cách sử dụng Khe cắm Thành phần trong Bộ sưu tập

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

• Một ứng dụng Amplify Studio
• Ít nhất 1 thành phần trong Thư viện giao diện người dùng của bạn. Nếu bạn không có bất kỳ thành phần nào trong Thư viện giao diện người dùng của mình, bạn có thể sử dụng tệp Figma của chúng tôi để tạo một số
• Ít nhất 1 mô hình dữ liệu có 2 bản ghi trở lên. Đối với ví dụ này, chúng tôi sẽ sử dụng một mô hình có tên là “Sản phẩm” với các trường “tên”, “mô tả” và “hình ảnh”

Tạo Bộ sưu tập với các vị trí

Trước tiên, bạn sẽ cần tạo Bộ sưu tập gồm các thành phần có ít nhất một vị trí

• Sử dụng các hướng dẫn trong bài đăng trên blog trước đây của chúng tôi để tùy chỉnh một thành phần và thêm một vị trí. Vị trí trong ví dụ này được đặt tên là “brandArea”
• Liên kết thành phần của bạn với mô hình dữ liệu của bạn. Bạn có thể thực hiện việc này bằng cách chọn một phần tử trong Cây phần tử và sử dụng thanh tác vụ bên phải để liên kết phần tử với dữ liệu

Tại đây, phần tử “Tiêu đề thẻ” của thành phần được liên kết với trường “tên” trong mô hình dữ liệu “Sản phẩm”. Các phần tử “Mô tả thẻ” và “Hình ảnh” được liên kết với các trường “mô tả” và “hình ảnh” tương ứng

• Nhấp vào nút “Tạo bộ sưu tập” ở góc trên bên phải để tạo và đặt tên cho bộ sưu tập của bạn
• Chạy amplify pull để nhập Bộ sưu tập mới

Truyền nội dung tĩnh vào Bộ sưu tập của bạn

Bạn có thể chuyển nội dung tĩnh vào vị trí thành phần của mình nếu có nội dung bạn muốn giống nhau cho từng thành phần trong bộ sưu tập của mình. Trong ví dụ này, một tên thương hiệu chung được chuyển để mọi thành phần có cùng một thương hiệu

1. Nhập và thêm Bộ sưu tập mới của bạn vào trang ứng dụng chính của bạn. Trong ví dụ này, tên của bộ sưu tập là “ActionCardWithBrandCollection”
2. Sử dụng overrideItems prop, thêm nội dung tĩnh của bạn vào từng mục trong bộ sưu tập. Tại đây, thương hiệu của từng mục được đặt thành “Thương hiệu AWS Amplify”

import { 
  ActionCardWithBrandCollection,
} from './ui-components';

function App() {
  return (
    

       ({
        {/*brandArea overridden with static content*/}
          brandArea: 
          

            AWS Amplify Brand
          
,
      })} />
    
  );
}
export default App;

Truyền nội dung động cho Bộ sưu tập của bạn

Với Component Slots, bạn có thể chuyển nội dung động cũng như nội dung tĩnh. Ví dụ này sẽ sử dụng cùng một mô hình dữ liệu "Sản phẩm" và sẽ thêm mô hình "Nhận xét", mô hình này có mối quan hệ một-nhiều với "Sản phẩm". Để biết thêm thông tin về mối quan hệ nhiều-nhiều, hãy truy cập tài liệu Mô hình hóa dữ liệu

Đối với ví dụ này, một Thành phần mới đã được tạo có tên là “ActionCardWithComments”. Thành phần này có 2 vị trí – “brandArea” và “comments” – và được liên kết với các trường dữ liệu giống như ví dụ trước

Bạn có thể tạo một thành phần tương tự bằng cách sao chép và sửa đổi thành phần “ActionCard” trong Figma và nhập nó vào Amplify Studio

1. Nhập Bộ sưu tập của bạn và thêm nó vào trang ứng dụng chính của bạn
2. Sử dụng chỗ dựa overrideItems để nhắm mục tiêu vị trí nhận xét
3. Truy cập Nhận xét của từng Sản phẩm bằng cách sử dụng mục. Bình luận
4. Sử dụng. map() để tạo JSX cho mỗi Comment

import { 
  ActionCardWithCommentsCollection,
} from './ui-components';

function App() {
  return (
    

       ({
        {/*Here's your comments slot*/}
          comments: 
          

          {/*Map each comment to some JSX for dynamic content*/}
            {item.Comments.map(comment => 
              

                
{comment.author}
                
{comment.content}
                

              
            )}
          
,
          {/*Here's your brandArea slot with static content*/}
          brandArea: 
            

                AWS Amplify Brand
            
,
         />
    
  );
}
export default App;

🥳 Thành công

Bạn đã làm được. Bạn đã thêm thành công một Khe cắm Thành phần vào Bộ sưu tập

Bạn có thể thấy mức độ mạnh mẽ của các vị trí khi được kết hợp với các bộ sưu tập và nguồn dữ liệu. Một vài dòng mã có thể điền vào một phần động của ứng dụng web của bạn và giúp bạn tiết kiệm hàng giờ tùy chỉnh. Nhưng chờ đã – thậm chí còn nhiều hơn thế. Theo dõi bài đăng tiếp theo của chúng tôi để tìm hiểu cách tận dụng tối đa các vị trí thành phần bằng cách lồng các bộ sưu tập vào nhau

Bạn có trường hợp sử dụng thông minh cho Bộ sưu tập và Vị trí thành phần không? . Bạn cũng có thể xem lại tài liệu về Vị trí thành phần tại đây và chia sẻ phản hồi của bạn với chúng tôi trên Github