> For the complete documentation index, see [llms.txt](https://tailieu.smax.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tailieu.smax.ai/extend-modules/trang-ban-hang.md).
# Trang bán hàng
{% hint style="info" %}
Xem hướng dẫn trang bán hàng [**tại đây**](https://smax-app.sg.larksuite.com/wiki/EsURw8UCqiNSadkQHbHlFnibglc)
{% endhint %}
## Trang bán hàng
Module **Trang bán hàng ( Selling Page )**
## 1\_ Hướng dẫn tạo module Trang bán hàng
Để kích hoạt module Trang bán hàng => bạn cần truy cập Extend Modules, sau đó tìm đến module Trang bán hàng => chọn Active
Sau khi active, module sẽ xuất hiện ở phần danh sách module bên phảiĐể tạo 1 webview trên màn hình chọn thêm mới
#### Cài đặt webview
**Cấu hình**
**Loại trang**
* **List Product + Webview checkout(Khuyên dùng)**
Sử dụng khi bạn muốn hiển thị luôn các sản phẩm ở trang chủ và có trang checkout cho khách hàng
* **Category + List Product + Webview checkout**
Sử dụng khi bạn muốn hiển thị Danh mục sản phẩm ở trang chủ và có trang checkout cho khách hàng
* **Product detail + Webview checkout**
Sử dụng khi bạn chỉ dùng để bán 1 sản phẩm và có trang checkout cho khách hàng
* **Only Webview checkout**
Sử dụng khi bạn muốn hiển thị lại 1 thông tin đơn hàng đã có VD trong luồng Catalogs, hoặc gửi chi tiết 1 đơn hàng đã đặt cho khách hàng
**Cấu hình chung**
Tên shop: có thể tuỳ chỉnh theo tên cửa hàng hoặc tên bất kì
Màu chủ đạo: cho webview tuỳ chỉnh các loại màu phù hợp
Logo: upload trực tiếp logo thương hiệuCấu hình ngôn ngữ Có thể tuỳ chỉnh tên: Sản phẩm, tiền tệ, giỏ hàng, đơn hàng, giá ( hoặc để mặc định có sẵn khi tạo webview)
**Product page**
Tuỳ chỉnh
* Vị trí danh mục
* Kiểu danh mục
* Cách hiển thị sản phẩm
* Tỷ lệ hình ảnh
**Checkout Page**
Cấu hình chung
* Đơn hàng đã có sẵn( xem thử) => không bắt buộc, có thể bỏ qua phần này
* Danh sách sản phẩm: Tùy chọn bật/tắt hiển thị danh sách sản phẩm khách đã chọn
* Thông tin khách hàng: Thêm các tùy chọn để khách hàng nhập thông tin
* Phương thức thanh toán: Thêm các tùy chọn để khách hàng chọn phương thức thanh toán
* Phí Vận chuyển: Thêm phí vận chuyển cho đơn hàng
* Giảm Giá: Thêm giảm giá cho đơn hàng
**Thông tin khách hàng**
Xin họ và tên khách:
Xin số điện thoại :
Xin địa chỉ cụ thể:**Phương thức Thanh Toán:** Thêm mới => có thể là chuyển khoản hoặc thanh toán bằng tiền mặt**Phí Vận Chuyển:** Thêm mới đặt tên => mô tả nếu có => giá phí vận chuyển cần nhập dõ
**Giảm Giá:**Tạo 1 Voucher giảm giá trực tiếp cho tổng đơn hàng mà khách hàng đặt ví dụ: Voucher 20k
**Submit Event**
Lưu lại các thuộc tính giá trị thông tin khách hàng vào thuộc tính
**Dữ liệu**
\
Chọn loại dữ liệu
* Fixed data
* Dynamic data
Danh mục: chọn danh mục hiển thị trên webview
Sản phẩm Chọn dấu + để thêm sản phẩm có sẵn trên module Sản phẩm
Tích chọn các sản phẩm trên List product => lưu để tiếp tục
**URL Address**
Link URL mở xem lại webview mình tạo
## 2\_ Hướng dẫn kết nối trang bán hàng tự động tạo thanh toán tên bot-auto
\
Truy cập Bot - Auto => thư viện block => tạo block mới
### Bước 1: Tạo trang bán hàng
\
Tạo block trang bán hàng => thêm thẻ text nội dung hiển thị khi gửi khách kèm nút button
Tạo nút button => webview
Gửi block khi xác nhận đơn hàng
### Bước 2: Xác nhận thông tin đặt hàng
Dùng thẻ text => gọi các thuộc tính đã lưu ở phần Submit Event đã tạo bên module Trang bán hàng
Sau khi khách click vào nút button Xác nhận => nối tới block tạo QR thanh toán
### Bước 3: Tạo QR thanh toán
Kiểm tra khách hàng thanh toán bằng hình thước Tiền mặt hay chuyển khoảnNếu khách hàng thanh toán tiền mặt => gotoblock kiểm tra **thanhtoan = Tiền mặt =>** dẫn tới block **3.1 Thanh toán bằng tiền mặt**
Nếu khách hàng thanh toán Chuyển khoản sẽ chạy xuống tạo QR thanh toán luôn: Thêm thẻ Payment Hub => hướng dẫn thẻ Payment Hub [xem tại đây](https://tailieu.smax.ai/bot-auto/the-chuc-nang/the-nang-cao/payment-hub) Số tiền sẽ truyền thuộc tính lưu: {{giatridonhang}} trước đó trên module bán hàng
Sau khi cài đặt thẻ Payment Hub => thêm thẻ image => gọi mã QR thanh toán
Sau khi khách hàng chuyển khoản thành công => chạy block **3.2 Thanh toán chuyển khoản thành công**