Để 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ị sản phẩm trên canvas.

Để thêm phần tử sản phẩm:

1. Trên canvas, nhấn + trên màn hình đích.

2. Chọn Products.

3. 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.

   

4. Chọn từng thẻ sản phẩm và gán sản phẩm cho nó trong dropdown ở bảng Design.

   Phần tử sản phẩm chưa được gán sản phẩm sẽ chặn tính năng xem trước và xuất bản. Hãy gán sản phẩm hoặc xóa phần tử đó đi.

   

Thêm nút mua hàng

Nút mua hàng kích hoạt hành động Purchase khi người dùng nhấn vào.

Để thêm nút mua hàng:

1. Trên canvas, nhấn + trên màn hình.
2. Chọn Button và chọn kiểu nút.
3. Khi nút được chọn, mở tab Interactions ở bảng bên phải.
4. Nhấn Add trigger > On tap, rồi nhấn Add action.
5. Đặt Action thành Purchase, sau đó đặt Product thành một trong các tùy chọn:
   • products.selectedProduct: Mua sản phẩm mà người dùng đang chọn 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ể người dùng chọn gì trên màn hình.

Hiển thị giá trên nút

Để chèn giá của sản phẩm đang được chọn vào nhãn nút, sử dụng biến:

1. Khi nút được chọn, mở tab Design ở bảng bên phải.
2. Trong trường Content, đặt con trỏ vào vị trí muốn hiển thị giá.
3. Nhấn vào biểu tượng biến, chọn products.selectedProduct, rồi chọn thuộc tính prod_price. Biến đầy đủ sẽ là products.selectedProduct.prod_price.
4. Thêm văn bản tĩnh xung quanh biến — ví dụ: Đăng ký với giá {prod_price}.

Nhãn sẽ cập nhật khi người dùng chọn các sản phẩm khác nhau.

Khôi phục giao dịch mua

Để cho phép người dùng 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 phần tử khôi phục giao dịch mua:

1. Trên canvas, nhấn + trên màn hình.
2. Chọn Button, rồi chọn Links cho liên kết văn bản hoặc kiểu nút khác cho nút có kiểu dáng.

3. Khi phần tử được chọn, mở tab Interactions ở bảng bên phải và nhấn Add trigger.
4. Chọn On tap và nhấn Add action.
5. Từ 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ó sản phẩm, bạn có thể hiển thị hoặc ẩn các phần tử khác tùy theo sản phẩm người dùng chọn.

Để thiết lập hiển thị có điều kiện:

1. Trong phần tử Products, chọn một thẻ sản phẩm.
2. Mở tab Interactions ở bảng bên phải và nhấn Add trigger.

3. Chọn On tap và nhấn Add action.
4. Từ dropdown Action, chọn Show hoặc Hide.
5. 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 đó.