Thiết lập mua hàng
Để thiết lập mua hàng trên một màn hình, hãy thêm nút mua hàng và cấu hình hành động Purchase cho nút đó. Hành động này có thể nhắm đến một sản phẩm cụ thể hoặc sản phẩm mà người dùng chọn từ phần tử Products trên màn hình.
Thêm sản phẩm
Phần tử sản phẩm là một thẻ hiển thị trực quan trên canvas.
Để thêm phần tử sản phẩm:
-
Trên canvas, nhấn + ở màn hình mong muốn.
-
Chọn Products.
-
Chọn kiểu bố cục: danh sách dọc, danh sách ngang, băng chuyền tính năng, thẻ tính năng, danh sách banner hoặc bottom sheet.
-
Chọn từng thẻ sản phẩm và gán sản phẩm tương ứng qua dropdown trong bảng Design.
Một phần tử sản phẩm chưa được gắn sản phẩm sẽ chặn việc xem trước và xuất bản. Hãy gán sản phẩm hoặc xóa phần tử đó đi.
Để hiển thị giá neo bị gạch ngang trên card, hãy thêm phần tử Old Price vào bên trong card đó.
Bạn cũng có thể gắn trực tiếp hành động Purchase vào tương tác On tap của thẻ sản phẩm. Khi nhấn vào thẻ, hành động mua sẽ được kích hoạt ngay mà không cần nút mua riêng.
Nếu bạn xóa một nhóm sản phẩm và thay thế bằng nhóm mới, hãy kiểm tra lại tất cả các action và biến để đảm bảo chúng trỏ đúng vào nhóm mới. Các tham chiếu vẫn còn trỏ vào nhóm đã xóa sẽ chặn việc xem trước và xuất bản.
Thêm nút mua hàng
Nút mua hàng sẽ kích hoạt hành động Purchase khi người dùng nhấn vào.
Để thêm nút mua hàng:
- Trên canvas, nhấn + vào màn hình.
- Chọn Button và chọn một preset button.
- Với button đã được chọn, mở tab Interactions ở bảng bên phải.
- Nhấn Add trigger > On tap, sau đó nhấn Add action.
- Đặt Action thành Purchase, rồi đặt Product thành một trong các tùy chọn sau:
products.selectedProduct: Mua sản phẩm mà người dùng đã chọn từ một phần tử Products trên màn hình.- Một sản phẩm cụ thể: Luôn mua sản phẩm đó, bất kể lựa chọn nào trên màn hình.
Hiển thị giá trên nút
Để chèn giá của sản phẩm đã chọn vào nhãn nút, hãy dùng biến:
- Chọn nút, sau đó mở tab Design ở bảng bên phải.
- Trong trường Content, đặt con trỏ vào vị trí muốn hiển thị giá.
- Nhấp vào biểu tượng biến, chọn
products.selectedProduct, rồi chọn thuộc tínhprod_price. Biến đầy đủ sẽ làproducts.selectedProduct.prod_price. - Thêm văn bản tĩnh xung quanh biến — ví dụ:
Subscribe for {prod_price}.
Nhãn sẽ cập nhật theo khi người dùng chọn các sản phẩm khác nhau.
Khôi phục giao dịch mua
Để người dùng có thể khôi phục các giao dịch mua trước đó, hãy thêm nút hoặc liên kết khôi phục vào màn hình.
Để thêm thành phần khôi phục giao dịch mua:
- Trên canvas, nhấp vào + trên màn hình.
- Chọn Button, sau đó chọn Links cho liên kết văn bản hoặc bất kỳ loại nút nào khác cho nút có kiểu dáng.
- Với phần tử đã chọn, mở tab Interactions ở bảng bên phải và nhấn Add trigger.
- Chọn On tap và nhấn Add action.
- Trong dropdown Action, chọn Restore purchases.
Hiển thị các phần tử bổ sung dựa trên sản phẩm được chọn
Nếu một màn hình có các sản phẩm, bạn có thể hiển thị hoặc ẩn các phần tử khác tùy thuộc vào sản phẩm mà người dùng chọn.
Để thiết lập hiển thị có điều kiện:
- Trong phần tử Products, chọn một thẻ sản phẩm.
- Mở tab Interactions ở bảng bên phải và nhấp vào Add trigger.
- Chọn On tap và nhấp Add action.
- Từ menu thả xuống Action, chọn Show hoặc Hide.
- Chọn phần tử cần hiển thị hoặc ẩn khi sản phẩm đó được chọn.
Xem sản phẩm trong flow
Bảng Products ở thanh bên trái hiển thị các sản phẩm hiện có được ánh xạ đến từng màn hình trong flow.
Mỗi màn hình có hai phần:
- Default — một sản phẩm, được chọn sẵn khi màn hình tải.
- Other — các sản phẩm bổ sung có sẵn trên cùng màn hình đó.