Techmaster Việt Nam - Học là có việc

Chào tất cả mọi người, mình xin tự giới thiệu mình là Đinh Xuân Hòa quê ở Nam Định, hiện tại đang làm việc trên Hà Nội. Công việc trước của mình là kỹ sư xây dựng, nhưng mình rất đam mê về công nghệ, đặc biệt là về ngành CNTT. Sau nửa năm đi làm cuối cùng mình quyết định theo đuổi đam mê của mình và đăng ký học lập trình web tại Techmaster. Trong quá trình học tập tại trung tâm được sự trợ giúp nhiệt tình của giảng viên và các anh chị trong trung tâm, mình đã hoàn thành được một sản phẩm của cá nhân. Trang web của mình làm về sản phẩm shop giày Sneaker, trong quá trình lằm vẫn con nhiều chỗ chưa được hoàn thiện rất mong nhận được góp ý từ mọi người!

Website Sneaker là trang web bán các sản phẩm về giày, với đa dạng mẫu mã, các loại giày thể thao, phục vụ cho mọi giới tính, mọi lứa tuổi.

Website sử dụng các thư viện: Jquery, Boostrap, Slick slider, Axios

Link website: https://sneaker97.herokuapp.com/

1. Trang chủ

Header của trang chủ và các trang khác gồm 2 phần là sub-header và header, phấn sub header khi lăn chuột xuống thì sẽ ẩn đi nhằm tăng tầm nhìn cho người dùng, ở đây em sử dụng thuộc tính ScrollTop kết hợp style bằng Jquery cho thanh Sub-Header.

Trên header gồm các đường dẫn đến các trang khác nhau và các icon gồm: Giỏ hàng, Tìm kiếm, Sản phẩm yêu thích, Đăng nhập/Đăng ký.

Icon giỏ hàng hiện số sản phẩm mà khách hàng đã chọn vào giỏ hàng, ở đây em gọi đến server-json của gian hàng, sau đó lọc để lấy độ dài của mảng(đồ dài chính là số sản phẩm), khi hover vào sẽ xem được các sản phẩm đã chọn, nếu không có sản phẩm nào thì sẽ thông báo là “Không có sản phẩm nào”

Icon Sản phẩm yêu thích: Sau khi người dùng nhấn vào icon yêu thích ở các sản phẩm, lập tức sản phẩm đó sẽ được đưa vào sản phẩm yêu thích. Ở đây khi Render sản phẩm, em truyền cho mỗi nút icon yêu thích một Id bằng chính id của sản phẩm trong database server. Sau khi bấm nút yêu thích sẽ lấy chính id của sản phẩm đó để truyền vào phương thức gọi lên server lấy được dữ liệu về sản phẩm đã nhấn yêu thích.

Icon Đăng nhập đăng ký khi nhấn vào sẽ hiện ra 1 modal boostrap, ở đây em có kiểm tra Validation ở các trường đăng nhập và đăng ký.

Về banner, em sử dụng thư viện Slick slider để tạo hiệu ứng khi chuyển trang, khi chuyển trang Slick slider sẽ tạo ra các class active ở các thẻ nội dung em kết hợp các class này để làm text-animation ở banner.

Một số hình ảnh về Slick slide trong trang Web:

Về sản phẩm nổi bật và Khám phá em gọi API lên server-json bằng Axios lấy được dữ liệu và đầy lên trên giao diện bằng phương thức của DOM, kết hợp với Companent Boostrap tạp nên các tab từng loại sản phẩm nổi bật.

Responsive Trang chủ:

2. Trang Sneaker

Tương tự như các sản phẩm nổi bật và yêu thích, em sử dụng Axios để gọi API render sản phẩm.

Với tất cả là 30 sản phẩm nên em phân thành 2 trang với mỗi trang 15 sản phẩm. Để có thể phân thành 2 trang em sử dụng phương thức gọi API, xong sử dụng phương thức Slice(start, end) của mảng để cắt 15 sản phẩm đầu và 15 sản phẩm trang 2.

Sau khi nhấn sang trang 2, em truyền vào đường dẫn của thẻ điều hướng 2 giá trị :_page=2&_limit=15, sau đó sử dụng phương thức Search Param URL để lấy được 2 giá trị Page và Limit, tính toán để truyền vào 2 giá trị của phương thức slice.

Responsive trang Sneaker:

3. Trang chi tiết sản phẩm

Sau khi người dùng bấm vào Mua ngay của sản phẩm, trang web sẽ điều hướng sang trang chi tiết sản phẩm, link điều hướng sẽ được truyền ID của sản phẩm, sau khi sang trang em sử dụng phương thức Search Param URL để lấy được id của sản phẩm, sau đo truyền vào phương thức gọi API Axios lấy dữ liệu đưa sản phẩm ra giao diện.

Tại trang, khi hover vào ảnh sản phẩm ảnh sẽ được phóng to để người dùng có thể xem kỹ sản phẩm hơn, và có thể chuyển sàn các màu sắc khác để xem hình ảnh. Tại đây em sử dụng thư viện JqueryZoom để phóng to khi hover và sử dụng Slick slide để chuyển màu sắc của giày.

Về thêm vào giỏ hàng, người dùng cần phải chọn size trước khi thêm, nếu không chọn size sẽ không thể thêm được, trước khi trọn size, em khai báo 1 object gồm các thông tin sản phẩm và size giày bằng giá trị của các SIZE khi bấm vào, khi người dùng nhần các size khác nhau thì giá trị size sẽ thay đổi theo, chọn xong khi bấm Thêm vào giỏ hàng thì object đấy sẽ được truyền vào phương thức POST API Axios để đầy dữ liệu lên server.

Responsiver trang Sản phẩm chi tiết:

4. Trang Giỏ hàng

Trang Giỏ hàng sẽ hiển thị được các sản phẩm khi chọn tại trang Sản phẩm chi tiết. Em gọi lên API của giỏ hàng sau đó lấy được dữ liệu của giỏ hàng đẩy lên dữ liệu lên trên giao diện.

Khi chọn số lượng sản phẩm, thì giá tiền sẽ tăng giảm phụ thuộc vào số lượng, bấm Thanh toán sẽ gọi lên server với phương thức POST truyền vào object tên sản phẩm, số lượng, tổng tiền thanh toán.

Các nút xóa sản phẩm, em sử dụng phương thức DELETE Axios truyền ID và gọi lên server của sản phẩm để xóa sản phẩm khỏi giỏ hàng.

Responsive Trang Giỏ hàng: