ÿÿ Hiển thị tất cả gói trong má»™t bottom sheet | Flow Builder | Tài liệu Adapty
English 中文TürkçeРуÑÑкийEspañol日本語Tiếng Việt

Hiển thị tất cả gói trong một bottom sheet

Template này hiển thị một ưu đãi nổi bật duy nhất trước, kèm theo một liên kết nhỠdẫn đến danh sách gói đầy đủ. Nhấn Show all plans sẽ kéo lên một bottom sheet chứa các sản phẩm còn lại, nút mua hàng và các liên kết footer.

Dùng template này khi má»™t gói chuyển đổi tốt hÆ¡n đáng kể — bottom sheet giữ các lá»±a chá»n khác chỉ má»™t lần nhấn mà không làm màn hình chính bị lá»™n xá»™n.

Trước khi bắt đầu

1. Thiết lập bố cục màn hình

Dùng ảnh hero làm ná»n màn hình và nhóm phần còn lại của ná»™i dung ở phía dÆ°á»›i, để ảnh lấp đầy phần trên của màn hình.

Äể xem toàn bá»™ danh sách thuá»™c tính màn hình, xem Screens and layers — Screen settings.

Äể cấu hình màn hình:

  1. Nhấn vào vùng trống trên canvas để chá»n màn hình.
  2. Trong System UI, tắt Safe area để ảnh hero mở rộng đến các cạnh màn hình.
  3. Trong Fill, chá»n Image và tải ảnh hero lên.
  4. Trong Layout, cấu hình hướng, khoảng cách và căn chỉnh để neo nội dung vào vị trí bạn muốn. Với template này, hướng Vertical với khoảng cách nhỠvà căn chỉnh bottom-middle sẽ nhóm tiêu đỠvà các nút ở phần dưới màn hình.
Cài đặt màn hình với Image fill và phân phối Space between

2. Thêm tiêu đỠCTA

Tiêu đỠnằm ở phần dưới màn hình, ngay phía trên nút đăng ký. Ảnh hero lấp đầy khu vực phía trên.

  1. Nhấn + > Text > H1.
  2. Vá»›i H1 được chá»n, mở tab Design và chỉnh sá»­a văn bản trong trÆ°á»ng Content.
Tiêu đỠCTA được thêm vào đầu màn hình

3. Thêm bottom sheet và tiêu đỠcủa nó

Bottom sheet là má»™t container bố cục trượt lên từ phía dÆ°á»›i màn hình. Thêm nó ở trạng thái hiển thị trÆ°á»›c — bạn sẽ Ä‘iá»n ná»™i dung vào các bÆ°á»›c tiếp theo và ẩn nó sau khi đã có ná»™i dung đầy đủ. Các phần tá»­ bị ẩn không thể chỉnh sá»­a, vì vậy sheet phải ở trạng thái hiển thị cho đến khi bạn Ä‘iá»n xong.

Äể biết thêm vá» bottom sheet và các container bố cục khác, xem Elements — Layout.

Äể thêm bottom sheet và tiêu Ä‘á» của nó:

  1. Nhấn + > Layout > Bottom Sheet.
  2. Trong bảng Layers, mở rá»™ng bottom sheet, chá»n layer Title và chỉnh sá»­a trÆ°á»ng Content trong tab Design — ví dụ: Choose your plan.
Bottom sheet với tiêu đỠđược thêm vào bên trong

4. Thêm danh sách sản phẩm vào bottom sheet

Äặt tất cả sản phẩm vào bên trong bottom sheet. Má»™t trong số chúng cÅ©ng sẽ Ä‘iá»u khiển giá hiển thị trên nút CTA chính.

Äể biết thêm vá» quản lý sản phẩm, xem Set up purchases.

Äể thêm và cấu hình sản phẩm:

  1. Nhấn + > Products và chá»n má»™t preset bố cục. Vertical List phù hợp vá»›i hầu hết các trÆ°á»ng hợp. Phần tá»­ xuất hiện trên màn hình, bên ngoài bottom sheet.
  2. Trong bảng Layers, kéo layer Products vào container Content bên trong bottom sheet.
Kéo phần tử Products vào container Content của bottom sheet và gán sản phẩm
  1. Chá»n từng thẻ sản phẩm trên canvas và chá»n sản phẩm từ dropdown trong tab Design.
Kéo phần tử Products vào container Content của bottom sheet và gán sản phẩm

5. Thêm nút mua hàng vào bottom sheet

Bottom sheet cần nút mua hàng riêng để mua bất kỳ gói nào ngÆ°á»i dùng chá»n từ danh sách.

  1. Nhấn + > Buttons và chá»n má»™t preset nút.
  2. Trong bảng Layers, kéo nút mới vào container Content bên trong bottom sheet.
Hành động Purchase được cấu hình trên nút mua hàng của bottom sheet
  1. Vá»›i nút được chá»n, mở tab Interactions ở bảng bên phải.
  2. Nhấn Add trigger > On tap, rồi nhấn Add action.
  3. Äặt Action thành Purchase và Product thành products.selectedProduct.
Hành động Purchase được cấu hình trên nút mua hàng của bottom sheet

Äừng dùng inline links cho văn bản lồng trong nút. Thay vào đó, hãy thiết lập hành Ä‘á»™ng Open URL trá»±c tiếp trên nút.

Äiá»u khoản sá»­ dụng, chính sách bảo mật và khôi phục mua hàng nằm ở cuối sheet — màn hình chính vẫn gá»n gàng.

  1. Nhấn + > Buttons > Links. Thao tác này thêm một hàng với Restore Purchases, Terms of Use và Privacy Policy.
  2. Trong bảng Layers, kéo hàng Links vào container Content bên trong bottom sheet.
  3. Trong bảng Layers, chá»n nút Terms of Use. Mở tab Interactions và dán URL Ä‘iá»u khoản của bạn vào trÆ°á»ng Open URL.
  4. Lặp lại cho nút Privacy Policy với URL chính sách bảo mật của bạn.
  5. Giữ nguyên liên kết Restore Purchases. Hành động của nó đã được cấu hình sẵn.
Các liên kết footer bên trong bottom sheet

7. Ẩn bottom sheet

Sau khi ná»™i dung của sheet đã đầy đủ, hãy ẩn nó để nó không xuất hiện trên màn hình theo mặc định. NgÆ°á»i dùng sẽ hiển thị nó bằng cách nhấn Show all plans ở bÆ°á»›c cuối.

Trong bảng Layers, chá»n bottom sheet và đặt trạng thái của nó thành Hide . Sheet vẫn còn trong cây layer nhÆ°ng không còn hiển thị trên canvas.

Bottom sheet với Visibility được đặt thành Hide

8. Thêm nút đăng ký chính

Nút chính trên màn hình đăng ký ngÆ°á»i dùng vào gói hàng tháng chỉ vá»›i má»™t lần nhấn. Nhãn của nó sá»­ dụng biến giá của sản phẩm hàng tháng để nút luôn đồng bá»™ vá»›i sản phẩm.

  1. Trong bảng Layers, nhấn vào màn hình để các phần tử mới được thêm vào root, không phải bên trong bottom sheet.
  2. Nhấn + > Buttons và chá»n má»™t preset nút.
  3. Vá»›i nút được chá»n, mở tab Design và đặt con trá» vào trÆ°á»ng Content. Nhấn Variable icon và chá»n biến giá cho sản phẩm chính. Bao quanh nó bằng phần còn lại của nhãn — ví dụ: Subscribe for {price}/month.
Nút đăng ký chính với biến giá được liên kết với sản phẩm hàng tháng
  1. Chuyển sang tab Interactions và nhấn Add trigger > On tap > Add action.
  2. Äặt Action thành Purchase và Product thành sản phẩmÿÿ bạn cần. Không giống nút trong bottom sheet, nút này nhắm đến má»™t sản phẩm cụ thể thay vì products.selectedProduct.
Nút đăng ký chính với biến giá được liên kết với sản phẩm hàng tháng

Một liên kết văn bản bên dưới nút đăng ký hiển thị bottom sheet khi nhấn. Thêm nó dưới dạng phần tử văn bản với style Button Label giữ giao diện tối giản trong khi vẫn cho phép bạn gắn hành động.

Äể biết thêm vá» hành Ä‘á»™ng Show/Hide, xem Actions — Show/hide elements.

Äể thêm liên kết:

  1. Vá»›i màn hình được chá»n trong bảng Layers, nhấn + > Text > Button Label.
  2. Vá»›i phần tá»­ văn bản được chá»n, chỉnh sá»­a trÆ°á»ng Content thành Show all plans.
  3. Mở tab Interactions và nhấn Add trigger > On tap > Add action.
  4. Äặt Action thành Show và chá»n phần tá»­ bottom sheet từ dropdown.
Văn bản Show all plans với hành động On tap Show nhắm đến bottom sheet

Các bước tiếp theo

ÿÿÿÿ