Xây dựng eCommerce shopping cart bằng Svelte JavaScript framework.

Tram Ho

Introduction

Svelte JavaScript framework là miễn phí và là open-source. Đuợc tạo bởi Rich Harris và được duy trì bởi các thành viên cốt lõi của Svelte.
Các ứng dụng Svelte không bao gồm các tham chiếu framework khác. Thay vào đó, việc xây dựng một ứng dụng Svelte sẽ tạo ra mã để thao tác DOM,
điều này có thể làm giảm kích thước của các tệp được chuyển cũng như mang lại hiệu suất khởi động và thời gian chạy của ứng dụng tốt hơn.
Svelte có trình biên dịch riêng để chuyển đổi code ứng dụng thành JavaScript phía máy client tại thời điểm xây dựng.
Nó được viết bằng TypeScript. Mã nguồn Svelte được cấp phép theo Giấy phép MIT và được lưu trữ trên GitHub.

Build Svelte ecommerce cart.

Chúng ta sẽ bắt đầu tạo ứng dụng svelte.
Chúng ta sẽ tạo 1 thư mục sveltecart trong thư mục home sử dụng command sau.

Cấu trúc thư mục

Các file quang trọng nhất trong ứng dụng này là:

  • src/main.js
  • src/App.svelte
  • public/index.html

File public/index.html có nội dung sau:

Lưu ý: Ở đoạn html trên có gọi 2 file css và 1 file js trong cùng một thư mục. File global.css nắm giữ css có thể ảnh hưởng đến bất kỳ component nào.
File build/bundle.css được tạo từ css trong mỗi component. File build/bundle.js được tạo từ JavaScript and HTML trong mỗi component và bất kỳ javascript nào khác trong ứng dụng.

File src/main.js có nội dung như sau:

Điều này tạo ra App component, thuộc tính target có thể chỉ nơi component được tạo ra.
Đối với hầu hết các ứng dụng, đây là phần nội dung của tài liệu. name prop được pass đến App component.

File src/App.svelte chưa nội dung sau:

Các biến được xuất trông thẻ script là giá trị nhận được từ file src/main.js. Dấu ngoặc {} dùng để xuất giá trị của một biểu thức javascript.
Thẻ style để lưu trữ tất cả styles css được áp dụng cho ứng dụng này.

Building the Svelte eCommerce shopping cart

Đầu tiên là sẽ tạo thư mục và file và bắt đầu ứng dụng. Để tạo các thành phần bắt buộc, hãy thực hiện các lện sau trong terminal

Trong src thư mục, chúng ta có thể tạo CartComponents thư mục và bên trong CartComponents thư mục sẽ tạo file:

Giống như, Trong thư mục src chúng ta có thể tạo Stores thư mục và bên trong Stores thư mục, chúng ta có thể tạo stores.js. Tiếp theo trong src thư mục. Chúng ta sẽ tạo 1 file Item.js.

Chúng ta sẽ sử dụng Bootstrap CSS cho ứng dụng, đầu tiên chúng ta sẽ thêm Bootstrap cdn vào file index.html. Đến
file public/index.htmlvà thêm bootstrap cdn.

Cập nhật file stores/stores.js

Ở đoạn code trên, chúng ta import writable() function từ svelte/store và sử dụng nó để tạo
một store gọi cart. Mở file src/items.js và cập nhật như sau:

Building the Cards Components

Mở file srcCartComponentscard.svelte và update nộ dung.

Ở đoạn mã trên chúng ta đã import get() từ svelte/store. Nó sử dụng getset một cách thủ công.
Cập nhật file srcCartComponentsCardWrapper.svelte

Trong đoạn mã trên chúng ta đã import Card.svelte & item.js đã tạo trước đó để sử dụng và hiển thị cho các thẻ sử dụng Bootsrap class.

Working with the Checkout Components

Cập nhật file srcCartComponentsCheckoutItem.svelte

Trong đoạn code trên chúng ta đã viết 1 logic đơn giản trả lại các Items cho cart. Kiểm tra checked-out cho mỗi cart và hiển thị message theo điều kiện thảo mãn.

Tiếp theo chúng ta cập nhật file srcCartComponentsNavbar.svelte

Trong đoạn mã trên chúng ta đã import createEventDispatcher funtion từ svelte package và gọi một event dispatcher.
Cuối cùng update file App.svelte

Ở trên đoạn mã trên chúng ta đã nhập tất cả các thành phần cần thiết để tạo ra App.svelte file.

Conclusion

Svelte là một sự thay thế xứng đáng cho các tùy chọn phổ biến hiện nay của React, Vue và Angular. Nó có nhiều lợi ích, bao gồm kích thước gói nhỏ, định nghĩa thành phần đơn giản, quản lý trạng thái dễ dàng và khả năng phản ứng mà không cần DOM ảo.
Qua bài hướng dẫn này bạn đã học được cách để xây dụng một ứng dụng giỏ hàng đơn giản bằng Svelte.
Bạn có thểm tham khảo source code tại đây: GitHub.

References

https://en.wikipedia.org/wiki/Svelte

https://svelte.dev/docs

https://codesource.io/building-an-ecommerce-shopping-cart-with-svelte/

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo