Javascript trang chi tiết sản phẩm

Tái bút. Cấu trúc PDP được đề cập có vẻ phức tạp, nhưng khung chỉ có 5 dòng mã bằng Bootstrap

Sử dụng tham số biến URL Flask để tạo PDP hàng loạt

Trong Flask route, chúng ta có thể sử dụng < > để tạo một biến trong URL. Biến này kết nối với def trong route và cơ sở dữ liệu. Đây là mẫu

@app.route["/", methods=['GET', 'POST']]

def abc[variableURL]:

   product = mongoDB.abc.find_one[

________số 8_______

   return render_template['/abc.html', product=product, user=current_user]

Từ mã này, chúng ta có thể thấy, miễn là biến ABC đã được tạo trong cơ sở dữ liệu, tập lệnh có thể kết nối với tập dữ liệu sản phẩm đó và cung cấp dữ liệu cần thiết lên trang đầu

Kết nối với MongoDB bằng Jinja2 để hiển thị nội dung chi tiết sản phẩm trong PDP

Tập lệnh định tuyến ứng dụng minh họa rằng có một tập dữ liệu có tên trong sản phẩm quay lại giao diện người dùng. Vì chúng tôi đang sử dụng MongoDB, bộ dữ liệu ở định dạng JSON. Vì vậy, tôi lấy ảnh của PDP làm ví dụ bằng cách sử dụng Jinja2 để hiển thị nội dung động {{ }}

   0

   1

   2

   3

   4

   5

   6

   7

   8

   3

       0

Kết quả mã này hiển thị mẫu Shopify mà chúng tôi đã sử dụng ở trên. Một ảnh lớn và một số ảnh nhỏ được đính kèm bên dưới ảnh lớn

Để biết thêm chi tiết về cách sử dụng MongoDB trong Flask, vui lòng tham khảo các bài viết này

Hướng dẫn Python 69 – Xây dựng hệ thống đăng nhập người dùng Flask bằng PyMongo

Hướng dẫn Python 66 – Cơ sở dữ liệu ứng dụng Flask Sử dụng MongoDB Atlas và Python để quản lý dữ liệu lớn tốt hơn

Thêm Javascript để tương tác với ảnh sản phẩm trong PDP

Bây giờ các bức ảnh vẫn không thể tương tác, đó không phải là kết quả cuối cùng mà chúng tôi mong đợi. Chức năng cơ bản mà chúng tôi mong đợi là ảnh lớn có thể được thay đổi khi khách hàng nhấp vào ảnh nhỏ. Ở đây chúng ta cần một chức năng ở giao diện người dùng bằng Javascript. Đây là mẫu mã

       1

       2

       3

       4

       5

       6

       7

       8

       9

       6

       1

Tích hợp với Cổng thanh toán

Cuối cùng nhưng không kém phần quan trọng, hãy đảm bảo kết nối với trang thanh toán vì đây là mục đích ban đầu bạn xây dựng cửa hàng trực tuyến. Ở đây có hai tập lệnh cần thiết

Điều đầu tiên, đó là đường dẫn thanh toán. Chúng tôi có thể sử dụng lại tham số biến trong lộ trình ứng dụng vì mỗi sản phẩm phải có một ID duy nhất kết nối với cổng thanh toán. Vì vậy, cổng thanh toán có thể xác định thông tin sản phẩm bao gồm giá cả, khuyến mãi, quốc gia, đơn vị tiền tệ, v.v.

Đây là mẫu mã. Nhân tiện, tôi khuyên bạn nên thêm yêu cầu đăng nhập cho bất kỳ khách hàng nào sẵn sàng thanh toán

       2

       3

       4

Sau đó, trong phần giao diện người dùng, chúng ta có thể sử dụng lại Jinga2 để kết nối với cơ sở dữ liệu và báo cho hệ thống biết chúng ta nên hướng đến sản phẩm nào

       5

       6

Để biết thêm chi tiết về thanh toán Stripe, vui lòng tham khảo bài viết này

Hướng dẫn Python 53 – Tích hợp Stripe API và Flask để nhận thanh toán trực tuyến

Python đầy đủ về phát triển trang chi tiết sản phẩm bằng Flask, Javascript và Bootstrap

Có nhiều phần chức năng bạn có thể thêm vào như đánh giá của khách hàng, số lượng, thanh trượt đề xuất sản phẩm có liên quan, v.v. Không khó vì bạn có thể thêm tiện ích mở rộng dựa trên khung này. Hãy thử và khám phá

Nếu bạn quan tâm đến Hướng dẫn Python 71 – Xây dựng Trang chi tiết sản phẩm hoặc PDP của cửa hàng trực tuyến bằng cách sử dụng Flask, Javascript và Bootstrap, vui lòng đăng ký nhận bản tin của chúng tôi bằng cách thêm thông báo “Hướng dẫn Python 71”. Chúng tôi sẽ gửi cho bạn kịch bản ngay lập tức vào hộp thư của bạn

Tôi hy vọng bạn thích đọc Hướng dẫn Python 70 – Hướng dẫn Python 71 – Xây dựng Trang chi tiết sản phẩm hoặc PDP của cửa hàng trực tuyến bằng cách sử dụng Flask, Javascript và Bootstrap. Nếu bạn đã làm như vậy, vui lòng hỗ trợ chúng tôi bằng cách thực hiện một trong những điều được liệt kê bên dưới, vì điều đó luôn giúp ích cho kênh của chúng tôi