Thiết lập mua hàng

Flow của bạn có thể hiển thị các sản phẩm hiện có và kích hoạt in-app purchase:

  1. Thêm sản phẩm từ cửa hàng vào Adapty Dashboard. Kết nối sản phẩm có sẵn, hoặc tạo sản phẩm mới trong Adapty và đẩy lên cửa hàng.
  2. Chọn sản phẩm từ Dashboard và thêm vào màn hình flow. Các thẻ, biến và hành động trên màn hình đó có thể sử dụng chúng.
  3. (Tùy chọn) Thiết lập nhóm thẻ sản phẩm để hiển thị nhiều lựa chọn mua hàng.
  4. Thêm hành động Purchase vào một nút và cấu hình nó. Mục tiêu của hành động có thể là một sản phẩm cụ thể hoặc sản phẩm do người dùng chọn.
  5. Sau đó, dùng bảng Products để thêm, thay thế hoặc xóa sản phẩm trong flow. Người dùng sẽ thấy thay đổi khi bạn xuất bản flow, mà không cần cập nhật ứng dụng.
Định giá lại chỉ trong một câu.

Hãy yêu cầu AI Editor chia nhỏ gói hàng năm thành chi phí mỗi ngày, gạch bỏ giá cũ, hoặc đánh dấu sản phẩm có giá trị tốt nhất. Công cụ này chỉ thay đổi giao diện các thẻ sản phẩm trên màn hình — không ảnh hưởng đến danh mục hay giá của bạn.

Explore the AI Editor

Thêm sản phẩm vào màn hình

Mỗi màn hình có danh sách sản phẩm riêng. Một card, biến, hoặc hành động chỉ có thể sử dụng sản phẩm từ danh sách đó. Bảng Products hiển thị danh sách cho mỗi màn hình trong flow.

Bạn có thể thêm sản phẩm trong bảng Products, hoặc chọn chúng khi cấu hình một phần tử. Cả hai cách đều thêm sản phẩm vào danh sách của màn hình.

Thêm sản phẩm trong bảng Products

Bảng này dùng để thêm sản phẩm vào danh sách của màn hình. Bất kỳ phần tử nào trên màn hình đều có thể sử dụng sản phẩm đó: thẻ sản phẩm, biến văn bản, hoặc một hành động. Ví dụ, biến văn bản có thể hiển thị giá của một sản phẩm không có thẻ riêng.

Để thêm sản phẩm vào màn hình:

  1. Trong thanh sidebar bên trái, mở bảng Products và nhấp +.
  2. Screen hiển thị màn hình hiện tại. Để thêm sản phẩm vào một màn hình khác, hãy chọn màn hình đích tại đây.
  3. Trong mục Product, chọn một sản phẩm từ Dashboard của bạn.
  4. (Tùy chọn) Trong mục Offer, chọn ưu đãi để bán sản phẩm kèm theo. Xem Thêm ưu đãi vào flow.
  5. Nhấp Add product.
Hộp thoại thêm sản phẩm vào màn hình với dropdown Product đang mở, liệt kê Monthly và Yearly cùng mức độ truy cập và giá của chúng

Bảng Products liệt kê các sản phẩm bạn đã thêm, được nhóm theo màn hình. Ưu đãi bạn chọn ở đây sẽ được chọn sẵn trên mọi thẻ sử dụng sản phẩm đó sau này. Không có gì trong flow thay đổi cho đến khi bạn gán sản phẩm vào một phần tử hoặc sử dụng nó trong một hành động.

Thêm sản phẩm khi cấu hình một phần tử

Khi bạn chọn một sản phẩm trong một phần tử, builder sẽ thêm sản phẩm đó vào danh sách của màn hình. Điều này xảy ra khi bạn:

  • Gán một sản phẩm vào một thẻ sản phẩm.
  • Chèn một biến sản phẩm vào một phần tử văn bản.
  • Đặt Product của một hành động Purchase.

Mỗi dropdown liệt kê các sản phẩm đã được thêm vào màn hình này, theo sau là phần còn lại của danh mục. Một sản phẩm được chọn với một ưu đãi khác sẽ có một mục riêng: panel và các dropdown hiển thị một mục cho mỗi cặp sản phẩm/ưu đãi.

Để thiết lập các phần tử, hãy tiếp tục với Thêm thẻ sản phẩm và Kích hoạt giao dịch mua.

Thêm thẻ sản phẩm

Để cung cấp cho người dùng lựa chọn sản phẩm, hãy thêm phần tử Products. Phần tử này gồm một bộ ba thẻ sản phẩm với bố cục định sẵn. Các thẻ tạo thành một nhóm sản phẩm: người dùng chọn một thẻ, sau đó hành động Purchase sẽ mua sản phẩm đã chọn.

Đây là cách duy nhất để có được thẻ sản phẩm hoặc nhóm sản phẩm. Nếu muốn có nhiều hoặc ít thẻ hơn, hãy nhân bản hoặc xóa bớt sau khi thêm bộ.

Thêm nhóm sản phẩm

  1. Mở bảng Add element.

  2. Chọn danh mục Products.

  3. Chọn kiểu bố cục: Vertical List, Horizontal List, Feature Carousel, Feature Cards, hoặc Banner List.

    Thêm phần tử Products vào canvas

Cấu hình thẻ sản phẩm

Với mỗi thẻ trong nhóm:

  1. Chọn thẻ đó. Trong tab Design, ở mục Product, gán sản phẩm cho thẻ. Các sản phẩm đã được thêm vào màn hình này sẽ hiển thị trong mục Added, tiếp theo là phần còn lại trong catalog của bạn.
  2. Xác nhận ưu đãi đang hoạt động. Nếu bạn đã ghép sản phẩm với một ưu đãi trước đó, ưu đãi đó sẽ xuất hiện tự động. Bạn có thể chọn một ưu đãi khác theo cách thủ công, nhưng kết quả là một bản sao sản phẩm sẽ xuất hiện trong bảng Products.
  3. Để tự động chọn thẻ này khi màn hình mở, hãy chọn Set as default.
Product dropdown của product card đang mở, với các sản phẩm của màn hình nằm dưới mục Added và phần còn lại của danh mục nằm dưới Other products
  1. (Tùy chọn) Để hiển thị cho người dùng biết gói nào đang được chọn, hãy tùy chỉnh style cho trạng thái Selected states của các card.
Important

Một thẻ không có sản phẩm sẽ chặn việc xuất bản. Tương tự với action hoặc biến vẫn trỏ đến nhóm sản phẩm mà bạn đã xóa: sau khi thay thế một nhóm, hãy trỏ mọi action và biến sang nhóm mới.

Hoàn tất thiết lập thẻ với bốn tính năng tùy chọn:

  • Giá động: Thay thế giá placeholder bằng biến giá của sản phẩm. Thẻ sẽ hiển thị giá trên cửa hàng theo tiền tệ của người dùng.
  • Điều khoản ưu đãi: Để mô tả chi tiết ưu đãi, dùng các biến ưu đãi trong văn bản của thẻ: offer_price, offer_billing_period và offer_full_duration.
  • Badge: Đặt một badge để làm nổi bật một gói cụ thể.
  • Giá neo: Phần tử Old Price bên trong thẻ hiển thị giá thực nhân với hệ số bạn đặt và gạch ngang, khiến giá thực trông như đang được giảm giá. Đơn vị tiền tệ và định dạng luôn khớp với giá thực, và con số sẽ tự cập nhật khi giá thay đổi.

Kích hoạt mua hàng

Hành động Purchase bắt đầu quá trình mua sản phẩm trên cửa hàng. Bạn có thể gắn nó vào bất kỳ phần tử nào trong flow, nhưng các nút và thẻ sản phẩm là những lựa chọn phổ biến nhất.

Thêm nút mua hàng

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

  1. Mở panel Add element.
  2. Chọn một preset từ danh mục Button.
  3. Khi nút được chọn, mở tab Interactions ở panel bên phải.
  4. Nhấn Add trigger > On tap, sau đó nhấn Add action.
  5. Đặt Action thành Purchase, sau đó đặ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.
Hành động mua hàng trong tab Interactions với dropdown Product đang mở, hiển thị biến selected-product, các sản phẩm của màn hình trong mục Added, và các sản phẩm còn lại trong mục Other products

Kích hoạt mua hàng từ thẻ sản phẩm

Thẻ sản phẩm có thể tự khởi động quá trình mua hàng mà không cần nút riêng biệt. Thay vào đó, hãy thêm hành động Purchase vào từng thẻ riêng lẻ.

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:

  1. Chọn nút, sau đó 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ấp 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ụ: 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.

Nút mua hàng với biến giá của sản phẩm được chọn trong nhãn

Khôi phục giao dịch mua

Những người dùng đã đăng ký trước đây cần có cách để khôi phục các giao dịch mua của họ. Hãy thêm một nút với hành động Restore purchases:

  • Sử dụng preset Links trong danh mục Button. Preset này bao gồm một hàng ba nút văn bản — Restore (đã được cấu hình sẵn), Terms of use, và Privacy policy.
    Adding a restore button to the canvas
  • Thêm hành động Restore purchases vào một nút khác.
    1. Chọn nút và mở tab Interactions.
    2. Nhấp vào Add trigger > On tap, sau đó nhấp vào Add action.
    3. Từ dropdown Action, chọn Restore purchases.
Restore purchases action in the Interactions tab

Việc không có nút khôi phục không ngăn việc xuất bản, nhưng có thể dẫn đến bị từ chối trên cửa hàng. Sử dụng skill flow-audit để xác định các paywall không có chức năng khôi phục.

Thay đổi nội dung màn hình dựa trên sản phẩm được chọn

Nếu một màn hình có các thẻ sản phẩm, bạn có thể hiển thị hoặc ẩn các phần tử khác tùy theo thẻ 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.

    Thêm trigger vào thẻ sản phẩm
  3. Chọn On tap và nhấp vào Add action.

  4. Từ danh sách 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.

    Show/Hide action in the Interactions tab

Thay đổi sản phẩm đã chọn từ các phần tử khác

Thông thường, người dùng thay đổi sản phẩm đã chọn bằng cách nhấn vào một thẻ. Nhưng các phần tử khác, chẳng hạn như trial toggle, cũng có thể sử dụng hành động Select product để thay đổi lựa chọn đó.

Để thiết lập hành động:

  1. Chọn phần tử sẽ thay đổi lựa chọn — một nút, một toggle, hoặc bất kỳ phần tử nào khác. Card bạn chọn phải nằm trên cùng một màn hình.
  2. Mở tab Interactions ở bảng bên phải và nhấn Add trigger.
  3. Chọn trigger và nhấn Add action.
  4. Từ dropdown Action, chọn Select product.
  5. Đặt Product thành product card mà hành động sẽ chọn.
Select product action in the Edit action window with the Product picker listing product cards

Quản lý sản phẩm trong flow

Bảng Products hiển thị tất cả sản phẩm trong flow, được nhóm theo màn hình.

  • Con số bên cạnh tên sản phẩm cho biết số lần sản phẩm đó được tham chiếu trên màn hình: mỗi card, mỗi biến sản phẩm trong phần tử văn bản, và mỗi action.
  • Giá ở bên phải là giá gốc của sản phẩm. Nếu có ưu đãi đính kèm, giá sẽ hiển thị cả giá khi có và không có giảm giá.
  • (Các) sản phẩm mặc định được liệt kê trong một mục riêng biệt.
Bảng sản phẩm liệt kê các sản phẩm của hai màn hình với số lần sử dụng, giá, ưu đãi, và các mục Default và Other

Để thêm một mục, nhấn + và làm theo hướng dẫn trong Thêm sản phẩm trong bảng Products.

Hành động với sản phẩm

Mở menu ngữ cảnh của mục sản phẩm để quản lý nó:

Menu ngữ cảnh của một mục sản phẩm trong bảng Products với submenu Replace in 2 places đang mở, liệt kê các sản phẩm trong danh mục cùng mức độ truy cập và giá
  • Set as default: Đặt trước card sản phẩm này được chọn khi màn hình mở ra, tương tự checkbox Set as default trên card. Chỉ áp dụng cho các sản phẩm có đúng một card sản phẩm trên màn hình.
  • Replace in N places: Thay thế sản phẩm trong mọi card, phần tử văn bản và hành động đang sử dụng nó trên màn hình này. Trường Offer sẽ được đặt lại. Nếu các màn hình khác cũng dùng cùng sản phẩm và offer, toast xác nhận sẽ hỏi bạn có muốn áp dụng thay đổi ở đó không.
  • Offer: Thay đổi offer cho mọi nơi sử dụng sản phẩm trên màn hình này. Nếu sản phẩm xuất hiện trên các màn hình khác, bạn cũng có thể áp dụng thay đổi ở đó. Để xem trước màn hình trông như thế nào với người dùng có các loại offer khác nhau, chọn Preview as trong cùng submenu.
  • Remove: Xóa sản phẩm khỏi danh sách của màn hình. Các card và hành động Purchase đang dùng nó sẽ ngay lập tức mất cài đặt sản phẩm — hãy thay thế sản phẩm trước khi xuất bản. Các biến văn bản và điều kiện vẫn giữ tham chiếu và hiển thị biểu tượng cảnh báo. Tooltip của biểu tượng đó hiển thị This product is off this screen cho đến khi bạn thêm lại sản phẩm, thay thế tham chiếu, hoặc xóa văn bản đó.
  • Missing: Sản phẩm hoặc offer đã bị xóa trong Dashboard của bạn vẫn giữ mục nhập, được đánh dấu Missing, kèm số lần sử dụng. Chỉ còn Replace in N places và Remove khả dụng, và mọi nơi còn sử dụng nó sẽ chặn việc xuất bản.

Khắc phục sự cố sản phẩm

Các vấn đề sau đây liên quan đến sản phẩm và ưu đãi sẽ chặn việc xuất bản:

  • Thẻ sản phẩm hoặc hành động Purchase chưa được liên kết với sản phẩm nào. Hãy liên kết một sản phẩm, hoặc xóa thẻ/hành động đó.
  • Một sản phẩm hoặc ưu đãi không có trong Dashboard của bạn. Xảy ra khi bạn thêm sản phẩm vào flow nhưng sau đó xóa nó khỏi tài khoản Adapty. Tìm mục sản phẩm Missing trong panel Products, rồi thay thế tất cả các lần xuất hiện bằng một sản phẩm hiện có.
  • Một biến ưu đãi được dùng với sản phẩm không có ưu đãi. Thiết lập ưu đãi cho sản phẩm trong panel Products, hoặc xóa biến đó.
  • Một biến văn bản hoặc điều kiện vẫn đang tham chiếu đến sản phẩm bạn đã xóa trong panel Products. Thêm lại sản phẩm bằng +, hoặc thay đổi tham chiếu.

Bạn vẫn có thể lưu flow khi có sự cố: hãy lặp lại cho đến khi xuất bản thành công.